Search completed in 1.40 seconds.
<address>: The Contact Address element - HTML: Hypertext Markup Language
the html <
address> element indicates that the enclosed html provides contact information for a person or people, or for an organization.
... the contact information provided by an <
address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical
address, url, email
address, phone number, social media handle, geographic coordinates, and so forth.
... the <
address> element should include the name of the person, people, or organization to which the contact information refers.
...And 11 more matches
AddressErrors.addressLine - Web APIs
an object based on
addresserrors includes an
addressline property when validation of the
address finds one or more errors in the array of strings in the
address's
addressline.
... syntax var
addresslineerror =
addresserrors.
addressline; value if an error occurred during validation of the
address due to one of the strings in the
addressline array having an invalid value, this property is set to a domstring providing a human-readable error message explaining the validation error.
... if the payment
address object's
addressline property was determined to be valid, this property is not included in the
addresserrors dictionary.
... specifications specification status comment payment request apithe definition of '
addresserrors.
addressline' in that specification.
PaymentAddress.addressLine - Web APIs
the
addressline read-only property of the payment
address interface is an array of domstring objects, each specifying a line of the
address that is not covered by one of the other properties of payment
address.
... syntax var payment
addresslines = payment
address.
addressline; value an array of domstring objects, each containing one line of the
address.
... for example, the
addressline array for the mozilla space in london would have the following entries: example showing
addressline entries for an
address in london index
addressline[] value 0 metal box factory 1 suite 441, 4th floor 2 30 great guildford street these, combined with
additional values for other properties of the payment
address, would represent the full
address, which is: mozilla metal box factory suite 441, 4th floor 30 great guildford street london se1 0hs united kingdom specifications specification status comment payment request apithe definition of 'payment
address.
addressline' in that specification.
AddonManager
the
addonmanager object is the global api used to access information about
add-ons installed in the application and to manipulate them.
... one of the forces of the
addonmanager is that it deals with any kind (type) of
add-on in a generic manner.
... to do so many methods of the
addonmanager take the
add-on types as parameters.
...And 89 more matches
Addon
an
addon represents an
add-on that is either installed or can be installed.
... instances can be created using the many get
addon methods on the
addonmanager object.
... the interface can represent many different kinds of
add-ons and as such, some of the methods and properties are considered "required" and others "optional," which means that the optional methods or property may not exist on
addon instances for some types of
add-ons.
...And 52 more matches
Address Book examples
note: thunderbird and seamonkey user interfaces now reference 'contacts' not 'cards' however, as the backend still uses the 'cards' terminology, that is what is used here this article provides examples on accessing and manipulating thunderbird
address books.
...
address book interfaces provides an overview of the related interfaces.
... how do i get all
address books?
...And 49 more matches
EventTarget.addEventListener() - Web APIs
the eventtarget method
addeventlistener() sets up a function that will be called whenever the specified event is delivered to the target.
...
addeventlistener() works by
adding a function or an object that implements eventlistener to the list of event listeners for the specified event type on the eventtarget on which it's called.
... syntax target.
addeventlistener(type, listener [, options]); target.
addeventlistener(type, listener [, usecapture]); target.
addeventlistener(type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters type a case-sensitive string representing the event type to listen for.
...And 48 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to
add the data and rerender the list, and a model to control the data.
...let's create a new component that will allow us to
add a new to-do item.
...
add a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's
add in an html form that lets you enter a new todo item and submit it into the app.
...And 39 more matches
AddressErrors - Web APIs
the
addresserrors dictionary is used by the payment request api to to report validation errors in a physical
address (typically a billing
address or a shipping
address).
... any members which is present indicates that a validation error occurred for the member of the same name in an
address described using payment
address.
...
addresserrors is the type of the object returned by shipping
addresserrors in the paymentdetailsupdate passed into paymentrequestupdateevent.updatewith() by the shipping
addresschange event handler if a change to the
address resulted in a validation error occurring.
...And 30 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
using eval in
add-ons is almost always unnecessary, and many times even a security vulnerability.
... this article is aimed at presenting alternatives to common eval uses in
add-ons and other javascript code.
...
add-on authors are strongly encouraged to update their code to eliminate all instances of eval, no matter if the
add-on is to be hosted in the mozilla
add-ons gallery or not.
...And 23 more matches
Player paddle and controls - Game development
we need a way to introduce gameplay, so in this article we'll create a p
addle to move around and hit the ball with.
... rendering the p
addle from the framework point of view the p
addle is very similar to the ball — we need to
add a variable to represent it, load the relevant image asset, and then do the magic.
... loading the p
addle first,
add the p
addle variable we will be using in our game, right after the ball variable: var p
addle; then, in the preload function, load the p
addle image by
adding the following new load.image() call: function preload() { // ...
...And 22 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
« previousnext »
adding a new toolbar
adding new toolbars to firefox is easy, but
adding them the wrong way is very easy as well.
... the first thing you need to do is
add your buttons to the toolbar palette.
... the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those
added by extensions.
...And 21 more matches
RTCPeerConnection.addTrack() - Web APIs
the rtcpeerconnection method
addtrack()
adds a new media track to the set of tracks which will be transmitted to the other peer.
... note:
adding a track to a connection triggers renegotiation by firing a negotiationneeded event.
... syntax rtpsender = rtcpeerconnection.
addtrack(track, stream...); parameters track a mediastreamtrack object representing the media track to
add to the peer connection.
...And 18 more matches
Paddle and keyboard controls - Game development
so let's
add some user interaction: a controllable p
addle.
... defining a p
addle to hit the ball so, we need a p
addle to hit the ball.
...
add the following variables near the top of your code, beside your other variables: var p
addleheight = 10; var p
addlewidth = 75; var p
addlex = (canvas.width-p
addlewidth) / 2; here we're defining the height and width of the p
addle and its starting point on the x axis for use in calculations further on down the code.
...And 17 more matches
Add-on Manager
the
add-on manager is responsible for managing all of the
add-ons installed in the application.
... through its apis information about all installed
add-ons can be retrieved and new
add-ons can be installed.
... the apis are designed to be generic and support many different types of
add-ons.
...And 16 more matches
PaymentAddress - Web APIs
the payment
address interface of the payment request api is used to store shipping or payment
address information.
... it may be useful to refer to the universal postal union web site's
addressing s42 standard materials, which provide information about international standards for postal
addresses.
... properties payment
address.
addressline read only an array of domstring objects providing each line of the
address not included among the other properties.
...And 16 more matches
Add to Home screen - Progressive web apps (PWAs)
add to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie.
...
add a shortcut to their home screen representing their favorite web app (or site) so they can subsequently access it with a single tap.
... 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.
...And 16 more matches
Appendix A: Add-on Performance - Archive of obsolete content
note: see the newer article performance best practices in extensions for more up-to-date information about how to optimize the performance of your
add-on.
...
add-ons can have a noticeable performance impact on firefox.
... this is evident when opening a firefox profile that has many
add-ons installed; some profiles can take minutes to load, which is a serious inconvenience for users that gives them a negative view of firefox.
...And 15 more matches
Creating a spell check dictionary add-on
this page describes how to package a hunspell spell check dictionary as a firefox
add-on, or how to update your existing
add-on, so that it can be installed, uninstalled and updated without a restart.
... parts needed to create a dictionary
add-on, you first need two things: a spell check dictionary in hunspell or myspell format, with a license which allows you to use it.
... packaging a firefox
add-on is a zip file renamed to use an .xpi file extension instead of the normal .zip file extension.
...And 14 more matches
Interfacing with the Add-on Repository
the
add-on repository javascript code module makes it easy for your extension to interface with the amo repository.
... you an use the code module to get lists of
add-ons and even install new
add-ons.
... this article provides some sample code that queries the recommended
add-ons list on amo and lets the user click a button to install an
add-on from the list.
...And 14 more matches
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
the logical properties and values specification defines flow-relative mappings for the various margin, border, and p
adding properties and their shorthands.
...this is mostly due to the fact that there are four longhand values each for margin, border, and p
adding side, plus all the shorthand values.
... mappings for margins, borders, and p
adding the specification details mappings for each logical value to a physical counterpart.
...And 14 more matches
Adding captions and subtitles to HTML5 video - Developer guides
this article will take the same player and show how to
add captions and subtitles to it, using the webvtt format and the <track> element.
... html5 and video captions before diving into how to
add captions to the video player, there are a number of things that we will first mention, which you should be aware of before we start.
...the various attributes of this element allow us to specify such things as the type of content that we're
adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information.
...And 14 more matches
AddonInstall
an
addoninstall instance tracks download and installation process of an
add-on.
... instances can be created using the getinstallforfile() or getinstallforurl() methods on the
addonmanager.
... method overview void install() void cancel() void
addlistener(in installlistener listener) void removelistener(in installlistener listener) properties attribute type description name string the name of the
add-on being installed.
...And 13 more matches
Add to iPhoto
note: this extension uses carbon routines, which can no longer be used in firefox
add-ons now that firefox is a 64-bit application.
... once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "
add image to iphoto".
... however, obviously there are cases in which you'll want to be able to manipulate the contents of an array by
adding and removing items, sorting them, and so forth.
...And 13 more matches
Adding preferences to an extension - Archive of obsolete content
« previousnext » this article takes the creating a dynamic status bar extension sample to the next level,
adding a popup menu that lets you quickly switch between multiple stocks to watch.
... it also
adds a preference dialog that lets you switch to a stock other than one of the ones included in the popup menu.
...however, we do need to
add one new line to the install.rdf file: <em:optionsurl>chrome://stockwatcher2/content/options.xul</em:optionsurl> this line establishes the url of the xul file that describes the options dialog.
...And 12 more matches
Adding a new CSS property
this page describes how to
add a new css property to the style system.
... getting started first, you'll want to
add an appropriate test entry to property_database.js.
... this will cause tests of your new property to be
added to many of the mochitests in layout/style/test, which can be run with the command "./mach mochitest -f plain layout/style/".
...And 12 more matches
JS::Add*Root
syntax bool js::
addvalueroot(jscontext *cx, js::heap<js::value> *vp); bool js::
addstringroot(jscontext *cx, js::heap<jsstring *> *rp); bool js::
addobjectroot(jscontext *cx, js::heap<jsobject *> *rp); bool js::
addnamedvalueroot(jscontext *cx, js::heap<js::value> *vp, const char *name); bool js::
addnamedvaluerootrt(jsruntime *rt, js::heap<js::value> *vp, const char *na...
...me); bool js::
addnamedstringroot(jscontext *cx, js::heap<jsstring *> *rp, const char *name); bool js::
addnamedobjectroot(jscontext *cx, js::heap<jsobject *> *rp, const char *name); bool js::
addnamedscriptroot(jscontext *cx, js::heap<jsscript *> *rp, const char *name); name type description cx jscontext * the context in which to
add the new root.
... rt jsruntime * the runtime in which to
add the new root.
...And 12 more matches
RTCIceCandidate.relatedAddress - Web APIs
the rtcicecandidate interface's read-only related
address property is a string indicating the related
address of a relay or reflexive candidate.
... if the candidate is a host candidate (that is, its ip is in fact the real ip
address of the remote peer), related
address is null.
... the related
address field's value is set when the rtcicecandidate() constructor is used.
...And 12 more matches
padding - CSS: Cascading Style Sheets
the p
adding css shorthand property sets the p
adding area on all four sides of an element at once.
... an element's p
adding area is the space between its content and its border.
... note: p
adding creates extra space within an element.
...And 12 more matches
Add-ons - Archive of obsolete content
archived
add-ons documentation.
...
add-on sdk using the
add-on sdk, you can create firefox
add-ons.
... you can use various standard web technologies: javascript, html, and css, to create the
add-ons.
...And 11 more matches
Adding Event Handlers - Archive of obsolete content
next, we will show how to
add scripts to it.
... using scripts to make the find files dialog functional, we need to
add some scripts which will execute when the user interacts with the dialog.
... we would want to
add a script to handle the find button, the cancel button and to handle each menu command.
...And 11 more matches
Add-on Repository
the
add-on repository is responsible for finding available
add-ons; it provides an interface for interacting with the
addons.mozilla.org (amo) site.
... its api provides urls that can be visited to browse the repository's
add-ons.
... the api also offers two ways to search for and retrieve an array of
addon instances: retrieverecommended
addons(), which returns a list of recommended
add-ons, and search
addons(), which performs a search of the repository.
...And 11 more matches
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.
...
address is null by default if not otherwise specified.
... the
address field's value is set when the rtcicecandidate() constructor is used.
...And 11 more matches
RTCPeerConnection.addIceCandidate() - Web APIs
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().
... this
adds this new remote candidate to the rtcpeerconnection's remote description, which describes the state of the remote end of the connection.
... if the candidate parameter is missing or a value of null is given when calling
addicecandidate(), the
added ice candidate is an "end-of-candidates" indicator.
...And 11 more matches
Adding Events and Commands - Archive of obsolete content
window.
addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
... please read appendix a for recommendations on how to use the load event to initialize your
add-on without having a negative performance impact on firefox.
...also, note that the
addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix.
...And 10 more matches
Adding features to our bouncing balls demo - Learn web development
previous overview: objects in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and
add some new and interesting features to it.
... project brief our bouncy ball demo is fun, but now we want to make it a little bit more interactive by
adding a user-controlled evil circle, which will eat the balls if it catches them.
...finally, we want to
add a score counter to track the number of balls left to capture.
...And 10 more matches
AddonListener
addonlisteners can be registered with
addaddonlistener() and will then receive notification of changes to the
add-ons currently installed.
... method overview void onenabling(in
addon
addon, in boolean needsrestart) void onenabled(in
addon
addon) void ondisabling(in
addon
addon, in boolean needsrestart) void ondisabled(in
addon
addon) void oninstalling(in
addon
addon, in boolean needsrestart) void oninstalled(in
addon
addon) void onuninstalling(in
addon
addon, in boolean needsrestart) void onuninstalled(in
addon
addon) void onoperationcancelled(in
addon
addon) void onpropertychanged(in
addon
addon, in string properties[]) ...
... methods onenabling() called when an
add-on is about to be enabled.
...And 10 more matches
PR_InitializeNetAddr
initializes or reinitializes a network
address.
... the storage for the network
address structure is allocated by, and remains the responsibility of, the calling client.
... syntax #include <prnetdb.h> prstatus pr_initializenet
addr( prnet
addrvalue val, pruint16 port, prnet
addr *
addr); parameters the function has the following parameters: val the value to be assigned to the ip
address portion of the network
address.
...And 10 more matches
JS_Add*Root
syntax jsbool js_
addvalueroot(jscontext *cx, jsval *vp); jsbool js_
addstringroot(jscontext *cx, jsstring **spp); jsbool js_
addobjectroot(jscontext *cx, jsobject **opp); jsbool js_
addgcthingroot(jscontext *cx, void **rp); jsbool js_
addnamedvalueroot(jscontext *cx, jsval *vp, const char *name); jsbool js_
addnamedstringroot(jscontext *cx, jsstring **spp, const char *name); jsbool js_
addnamedobjectroot(jscontext *cx, js...
...object **opp, const char *name); jsbool js_
addnamedgcthingroot(jscontext *cx, void **rp, const char *name); name type description cx jscontext * the context in which to
add the new root.
... vp jsval * (in js_
addvalueroot and js_
addnamedvalueroot) the
address of the jsval variable to root spp jsstring ** (in js_
addstringroot and js_
addnamedstringroot) the
address of the jsstring* variable to root opp jsobject ** (in js_
addobjectroot and js_
addnamedobjectroot) the
address of the jsobject* variable to root rp void ** (in js_
addgcthingroot and js_
addnamedgcthingroot) the
address of the jsstring* or jsobject* (not jsval) variable to root name const char * (in js_
addnamedroot and js_
addnamedrootrt) the name of the new root, or null.
...And 10 more matches
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.
... with cfx (which is part of the
addon-sdk repo), we can run the first test suite which was produced for the
add-on sdk.
... cfx testex --filter <
addon_example_folder_name>: a suite of tests which run test code for some example
add-ons.
...And 9 more matches
Firefox addons developer guide - Archive of obsolete content
rules: file and directory names: italic method and variable names: class name if you want to
add a fixme,
add: fixme: a message notes: the original document is in japanese and distributed via the xuldev.org website.
... there should be some introductory text on the table of contents page at https://developer.mozilla.org/en/firefox_
addons_developer_guide obviously there are a number of fixme items in the content that need dealing with, but those are already known.
... these should use the previous, next, and prevnext templates to
add quick routes to get from chapter to chapter.
...And 9 more matches
Migrating raw components to add-ons - Archive of obsolete content
historically, firefox has allowed third party contributions to be
added to the application's components/ directory, but beginning with firefox 3.6, this is no longer permitted.
... components
added in this way are invisible to users and cannot be managed through the firefox
add-ons manager.
...as we roll this new behavior out, this document will be updated with
additional information
addressing scenarios we see developers encountering.
...And 8 more matches
Add-ons
add-ons allow developers to extend and modify the functionality of firefox.
... among other things, an
add-on could: change the appearance or content of particular websites modify the firefox user interface
add new features to firefox there are several types of
add-ons, but the most common type are extensions.
...other toolsets, such as overlay
add-ons, bootstrapped
add-ons, and the
add-on sdk, are no longer supported.
...And 8 more matches
RTCIceCandidateStats.address - Web APIs
the
address property of the rtcicecandidatestats dictionary indicates the
address of the ice candidate.
... while it's preferred that the
address be specified as an ipv4 or ipv6 numeric
address, a fully-qualified domain name can be used as well.
... when a domain name is specified, the first ip
address selected for that
address is used, even if the domain name maps to multiple ip
addresses.
...And 8 more matches
Adding HTML Elements - Archive of obsolete content
« previousnext » now that we've
added some buttons, let's
add some other elements.
...
adding html elements to a window in
addition to all of the xul elements that are available, you can also
add html elements directly within a xul file.
...the attribute below should be
added to the window tag of the xul file, or to the outermost html element.
...And 7 more matches
Adding a new event
this draft document covers how to
add a new event to the mozilla (firefox) source code.
...
add event messages you need to
add event messages which are stored by widgetevent::message.
... define event class name you need to
add an event class name in eventclasslist.h.
...And 7 more matches
PRNetAddr
type used with socket manipulation functions to specify a network
address.
... syntax #include <prio.h> union prnet
addr { struct { pruint16 family; char data[14]; } raw; struct { pruint16 family; pruint16 port; pruint32 ip; char pad[8]; } inet; #if defined(_pr_inet6) struct { pruint16 family; pruint16 port; pruint32 flowinfo; pripv6
addr ip; } ipv6; #endif /* defined(_pr_inet6) */ }; typedef union prnet
addr prnet
addr; fields the structure has the following fields: family
address family: pr_af_inet|pr_af_inet6 for raw.family, pr_af_inet for inet.family, pr_af_inet6 for ipv6.family.
... data raw
address data.
...And 7 more matches
AudioTrackList.onaddtrack - Web APIs
the audiotracklist property on
addtrack is an event handler which is called when the
addtrack event occurs, indicating that a new audio track has been
added to the media element whose audio tracks the audiotracklist represents.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the newly-
added track.
... note: you can also
add a handler for the
addtrack event using
addeventlistener().
...And 7 more matches
HTMLSelectElement.add() - Web APIs
the htmlselectelement.
add() method
adds an element to the collection of option elements for this select element.
... syntax collection.
add(item[, before]); parameters item is an htmloptionelement or htmloptgroupelement before is optional and an element of the collection, or an index of type long, representing the item item should be inserted before.
... examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.
add(opt1, null); sel.
add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> */ the before parameter is optional.
...And 7 more matches
IDBObjectStore.add() - Web APIs
the
add() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store.
... this is for
adding new records to an object store.
... to determine if the
add operation has completed successfully, listen for the transaction’s complete event in
addition to the idbobjectstore.
add request’s success event, because the transaction may still fail after the success event fires.
...And 7 more matches
padding-bottom - CSS: Cascading Style Sheets
the p
adding-bottom css property sets the height of the p
adding area on the bottom of an element.
... an element's p
adding area is the space between its content and its border.
... note: the p
adding property can be used to set p
addings on all four sides of an element with a single declaration.
...And 7 more matches
padding-left - CSS: Cascading Style Sheets
the p
adding-left css property sets the width of the p
adding area to the left of an element.
... an element's p
adding area is the space between its content and its border.
... note: the p
adding property can be used to set p
addings on all four sides of an element with a single declaration.
...And 7 more matches
padding-right - CSS: Cascading Style Sheets
the p
adding-right css property sets the width of the p
adding area on the right of an element.
... an element's p
adding area is the space between its content and its border.
... note: the p
adding property can be used to set p
addings on all four sides of an element with a single declaration.
...And 7 more matches
padding-top - CSS: Cascading Style Sheets
the p
adding-top css property sets the height of the p
adding area on the top of an element.
... an element's p
adding area is the space between its content and its border.
... note: the p
adding property can be used to set p
addings on all four sides of an element with a single declaration.
...And 7 more matches
Add a Context Menu Item - Archive of obsolete content
to
add items and submenus to the firefox context menu, use the context-menu module.
... here's an
add-on that
adds a new context menu item.
...when it's clicked, the selection is sent to the main
add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the
add-on, load a web page, select some text and right-click.
...And 6 more matches
Add-on SDK - Archive of obsolete content
using the
add-on sdk, you can create firefox
add-ons.
... you can use various standard web technologies: javascript, html, and css, to create the
add-ons.
... the sdk includes javascript apis, which you can use to create
add-ons and tools for creating, running, testing, and packaging
add-ons.
...And 6 more matches
Developing add-ons - Archive of obsolete content
mozilla based software is typically extensible through
add-ons.
... there are three primary types of
add-on: extensions, plugins, and themes.
... this page will help guide you to the information you need in order to create
add-ons for firefox, thunderbird, or other software based on the mozilla platform, as well as how to distribute your
add-ons.
...And 6 more matches
Adding Properties to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to
add custom properties to xbl-defined elements.
...you can also
add methods that can be called.
... that way, all you need is to get a reference to the element (using document.getelementbyid or a similar function) and then get or set the
additional properties and call the methods on it.
...And 6 more matches
Network Addresses
this chapter describes the nspr types and functions used to manipulate network
addresses.
... network
address types and constants network
address functions the api described in this chapter recognizes the emergence of internet protocol version 6 (ipv6).
... to facilitate the transition to ipv6, it is recommended that clients treat all structures containing network
addresses as transparent objects and use the functions documented here to manipulate the information.
...And 6 more matches
JS_AddFinalizeCallback
this article covers features introduced in spidermonkey 17
add/remove callback function for finalization.
... syntax bool js_
addfinalizecallback(jsruntime *rt, jsfinalizecallback cb, void *data); //
added in spidermonkey 38 (jsapi 32) void js_removefinalizecallback(jsruntime *rt, jsfinalizecallback cb); //
added in spidermonkey 38 (jsapi 32) void js_setfinalizecallback(jsruntime *rt, jsfinalizecallback cb); // obsolete since jsapi 32 name type description rt jsruntime * the jsruntime for which to set the finalization callback.
... data void * data parameter specified in js_
addfinalizecallback.
...And 6 more matches
Address book sync client design
pizzarro <rhp@netscape.com> contents overview client side sync logic public interfaces overview there is an component available in the mozilla tree for performing synchronization operations against a server based
address book.
...the static information that is held on the client for
address book sync operations is stored in a file called absync.dat which is located in the root directory of the users profile information.
...
add // if it's new, mod if it's been modified, // ret if it was already sent to the server // but an error occured, etc.
...And 4 more matches
Adding items to the Folder Pane
this tutorial examines how to
add items to an existing folder pane view.
... the result is a javascript file that will
add a "numbers" container to the end of thunderbird's "all folders" mode.
...the following code snippet listens for that event: let gnumbersext = { load: function gne_load() { window.removeeventlistener("load", gnumbersext.load, false); let tree = document.getelementbyid("foldertree"); tree.
addeventlistener("maprebuild", gnumbersext._insert, false); }, _insert: function gne__insert() { // this function is called when a rebuild occurs } }; window.
addeventlistener("load", gnumbersext.load, true); the structure of folder-tree-items the folder pane stores its current display data in a property called _rowmap.
...And 4 more matches
Demo Addon
overview this demo
add-on has been created by jonathan protzenko for his presentation at mozcamp 2011.
... how to use after installing the demo
add-on in thunderbird, right click on the toolbar and choose "customize".
...only the interesting parts are shown, it's recommended that you download the
add-on and have a look at its files.
...And 4 more matches
PaymentRequest.shippingAddress - Web APIs
the shipping
address read-only property of the paymentrequest interface returns the shipping
address provided by the user.
... syntax var payment
address = paymentrequest.shipping
address; example generally, the user agent will fill the shipping
address property value.
...when the paymentrequest.onshipping
addresschange is called, updatedetails() is called to update the details of the paymentrequest, using shipping
address to set the correct shipping cost.
...And 4 more matches
PaymentResponse.shippingAddress - Web APIs
the shipping
address read-only property of the paymentrequest interface returns a payment
address object containing the shipping
address provided by the user.
... syntax var shipping
address = paymentrequest.shipping
address; value a payment
address object providing details comprising the shipping
address provided by the user.
... example generally, the user agent will fill the shipping
address property for you.
...And 4 more matches
Measuring add-on startup performance - Archive of obsolete content
this article describes an
add-on that is no longer supported.
... using about:startup the about startup
add-on provides a much simpler way to measure startup performance.
...the
add-on is very lightweight, so it shouldn't have a noticeable negative effect on your baseline and
add-on tests.
...And 3 more matches
addDirectory - Archive of obsolete content
adddirectory unpacks an entire directory into a temporary location.
... 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 the
adddirectory method has the following parameters: registrynam...
...in some situations,
adddirectory may return other errors.
...And 3 more matches
addFile - Archive of obsolete content
addfile unpacks a single subcomponent into a temporary location.
... queues the subcomponent for
addition to the client version registry and installation to its final destination.
... 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 c...
...And 3 more matches
Adding Methods to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to
add custom methods to xbl-defined elements.
... methods in
addition to
adding script properties to the xbl-defined element, you can also
add methods.
... <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("style", "visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("style", "visibility: collapse"); } </body> </method> </implementation> </binding> two buttons
added to the xul have oncommand handlers which are used to change the visibility of the label.
...And 3 more matches
How to add a build-time test
if a test is
added, that test or its directory needs to be mentioned in a makefile.in file somewhere so that the build system knows about it.
... standalone executables to
add a test that is written in c or c++ and which is called as a standalone executable, a few things must be done.
...a simple example of
adding a test is in .
...And 3 more matches
PL_HashTableAdd
add a new entry with the specified key and value to the hash table.
... syntax #include <plhash.h> plhashentry *pl_hashtable
add( plhashtable *ht, const void *key, void *value); parameters the function has the following parameters: ht a pointer to the the hash table to which to
add the entry.
... key a pointer to the key for the entry to be
added.
...And 3 more matches
Cache.add() - Web APIs
the
add() method of the cache interface takes a url, retrieves it, and
adds the resulting response object to the given cache.
... the
add() method is functionally equivalent to the following: fetch(url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.put(url, response); }) for more complex operations, you'll need to use cache.put() directly.
... note:
add() will overwrite any key/value pair previously stored in the cache that matches the request.
...And 3 more matches
CanvasRenderingContext2D.addHitRegion() - Web APIs
the canvasrenderingcontext2d method
addhitregion()
adds a hit region to the bitmap.
... syntax void ctx.
addhitregion(options); options the options argument is optional.
... examples using the
addhitregion method this example demonstrates the
addhitregion() method.
...And 3 more matches
Path2D.addPath() - Web APIs
the path2d.
addpath() method of the canvas 2d api
adds one path2d object to another path2d object.
... syntax void path.
addpath(path [, transform]); parameters path a path2d path to
add.
... transform optional a dommatrix to be used as the transformation matrix for the path that is
added.
...And 3 more matches
PaymentAddress.region - Web APIs
the read-only region property of the payment
address interface returns a string containing the top-level administrative subdivision of the country in which the
address is located.
... syntax var paymentregion = payment
address.region; value a domstring specifying the top-level administrative subdivision within the country in which the
address is located.
... usage notes in some countries, like belgium, it's uncommon for people to provide a region as part of their postal
address.
...And 3 more matches
PaymentRequest: shippingaddresschange event - Web APIs
the shipping
addresschange event is sent to the paymentrequest object when the user selects a shipping
address or changes details of their shipping
address.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onshipping
addresschange usage notes depending on the browser, the shipping
address information may be redacted for privacy reasons.
... that is, the payment
address which contains the shipping
address may have some portions of its content altered, obscured, or left out entirely in order to prevent identifying the user without their consent (since if they choose to have you ship products to them, you'll need their
address).
...And 3 more matches
RTCPeerConnection: addstream event - Web APIs
the obsolete
addstream event is sent to an rtcpeerconnection when new media, in the form of a mediastream object, has been
added to it.
...you should instead watch for the track event, which is sent for each media track
added to the rtcpeerconnection.
... bubbles no cancelable no interface mediastreamevent event handler property rtcpeerconnection.on
addstream you can, similarly, watch for streams to be removed from the connection by monitoring the removestream event.
...And 3 more matches
RTCPeerConnection.onaddstream - Web APIs
the rtcpeerconnection.on
addstream event handler is a property containing the code to execute when the
addstream event, of type mediastreamevent, is received by this rtcpeerconnection.
... such an event is sent when a mediastream is
added to this connection by the remote peer.
... syntax rtcpeerconnection.on
addstream = eventhandler; value a function which handles
addstream events.
...And 3 more matches
RTCPeerConnectionIceErrorEvent.address - Web APIs
the rtcpeerconnectioniceerrorevent property
address is a string which indicates the local ip
address being used to communicate with the stun or turn server during negotiations.
... the error which occurred involved this
address.
... syntax let
address = rtcpeerconnectioniceerrorevent.
address; value a domstring which specifies the local ip
address of the network connection to the ice server with which negotiations were occurring when the error occurred.
...And 3 more matches
additive-symbols - CSS: Cascading Style Sheets
the
additive-symbols descriptor lets you specify symbols when the value of a counter system descriptor is
additive.
... the
additive-symbols descriptor defines
additive tuples, each of which is a pair containing a symbol and a non-negative integer weight.
... the
additive system is used to construct sign-value numbering systems such as roman numerals.
...And 3 more matches
Adding menus and submenus - Archive of obsolete content
« previousnext » the hello world example in the previous sections shows the two most common ways to
add menus.
...
adding a new menu we already saw how to
add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want.
...
adding elements to existing menus just as explained in the previous sections, the best place to overlay your extension menu is inside the tools menu.
...And 2 more matches
Adding sidebars - Archive of obsolete content
« previousnext » the sidebar in firefox is a relatively large and flexible space to
add rich interfaces without requiring new windows or complicated overlays.
... sidebars take as much space as the user wants them to, and provide a frame where you can
add elaborate data and controls.
... the code required to
add a sidebar is very simple, as explained in creating a firefox sidebar.
...And 2 more matches
Adding windows and dialogs - Archive of obsolete content
if this value is null or empty, the default toolbars of the main window will be
added to the new one, which is rarely what you want.
...there are also subtle aspects about window size, margins and p
addings that are not the same for all systems, so you should avoid making dialogs from scratch or overriding the default dialog css styles.
...you'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even
add completely customized extra buttons.
...And 2 more matches
Adding Style Sheets - Archive of obsolete content
for this, we will need to
add a style sheet of our own.
...a class was
added to the spacers so that they can be referred to.
...in this file, we'll
add the style declarations, as shown below: #find-text { min-width: 15em; } #progmeter { margin: 4px; } .springspace { width: 10px; } .titlespace { height: 10px; } notice how these styles are equivalent to the styles we had before.
...And 2 more matches
Adding vector graphics to the Web - Learn web development
note: this article doesn't intend to teach you svg; just what it is, and how to
add it to web pages.
...these packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example inkscape's trace bitmap feature.) svg has some
additional advantages besides those described so far: text in vector images remains accessible (which also benefits your seo).
...
adding svg to your pages in this section we'll go through the different ways in which you can
add svg vector graphics to your web pages.
...And 2 more matches
AddonUpdateChecker
the
addonupdatechecker is used to download and parse update information for an
add-on's update manifest.
... if all you care about is finding the newest version for an
addon then you probably want to use findupdates() instead.
... 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 constant description error_timeout the update check timed out.
...And 2 more matches
PRIPv6Addr
type used in the ipv6.ip field of the prnet
addr structure.
... syntax #include <prio.h> #if defined(_pr_inet6) typedef struct in6_
addr pripv6
addr; #endif /* defined(_pr_inet6) */ description pripv6
addr represents a 128-bit ipv6
address.
... it is equivalent to struct in6_
addr in the berkeley socket interface.
...And 2 more matches
PR_NetAddrToString
converts a character string to a network
address.
... syntax #include <prnetdb.h> prstatus pr_net
addrtostring( const prnet
addr *
addr, char *string, pruint32 size); parameters the function has the following parameters:
addr a pointer to the network
address to be converted.
... description the network
address to be converted (
addr) may be either an ipv4 or ipv6
address structure, assuming that the nspr library and the host system are both configured to utilize ipv6
addressing.
...And 2 more matches
PR_StringToNetAddr
converts a character string to a network
address.
... syntax #include <prnetdb.h> prstatus pr_stringtonet
addr( const char *string, prnet
addr *
addr); parameters the function has the following parameters: string the string to be converted.
...
addr on output, the equivalent network
address.
...And 2 more matches
BasicCardResponse.billingAddress - Web APIs
the billing
address property of the basiccardresponse dictionary contains the billing
address of the card used to make the payment.
... syntax "billing
address" : payment
address value a payment
address object representing the billing
address of the card.
...dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
...And 2 more matches
Cache.addAll() - Web APIs
the
addall() method of the cache interface takes an array of urls, retrieves them, and
adds the resulting response objects to the given cache.
... note:
addall() will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting put() operation would overwrite a previous cache entry stored by the same
addall() method.
... syntax cache.
addall(requests[]).then(function() { // requests have been
added to the cache }); parameters requests an array of string urls that you want to be fetched and
added to the cache.
...And 2 more matches
ContentIndex.add() - Web APIs
the
add() method of the contentindex interface registers an item with the content index.
... syntax contentindex.
add(contentdescription).then(...); parameters contentdescription the item registered is an object containing the following data: id: a unique string identifier.
... examples here we're declaring an item in the correct format and creating an asynchronous function which uses the
add method to register it with the content index.
...And 2 more matches
MediaQueryList.addListener() - Web APIs
the
addlistener() method of the mediaquerylist interface
adds a listener to the mediaquerylistener that will run a custom callback function in response to the media query status changing.
... this is basically an alias for eventtarget.
addeventlistener(), for backwards compatibility purposes.
... older browsers should use
addlistener instead of
addeventlistener since mediaquerylist only inherits from eventtarget in newer browsers.
...And 2 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.
... syntax var sourcebuffer = mediasource.
addsourcebuffer(mimetype); parameters mimetype a domstring specifying the mime type of the sourcebuffer to create and
add to the mediasource.
... return value a sourcebuffer object representing the new source buffer that has been created and
added to the media source.
...And 2 more matches
PasswordCredential.additionalData - Web APIs
the
additionaldata property of the passwordcredential interface takes one of a formdata instance, a urlsearchparams instance, or null.
... the data in the objects will be
added to the request body and sent to the remote endpoint with the credentials.
... syntax passwordcredential.
additionaldata = formdata formdata = passwordcredential.
additionaldata passwordcredential.
additionaldata = urlsearchparams ulrsearchparams = passwordcredential.
additionaldata value one of a formdata instance, a urlsearchparams instance, or null.
...And 2 more matches
PaymentDetailsUpdate.shippingAddressErrors - Web APIs
the paymentdetailsupdate dictionary's shipping
addresserrors property, if present, contains an
addresserrors object whose contents provide error messages for one or more of the values in the payment
address specified as paymentrequest.shipping
address.
... syntax var
addresserrors = paymentdetailsupdate.shipping
addresserrors; value an
addresserrors object, which contains domstrings describing errors in the properties of a payment
address.
... for each property in payment
address, a property by the same name is found in shipping
addresserrors if and only if a validation error occurred for that property.
...And 2 more matches
SpeechGrammarList.addFromString() - Web APIs
the
addfromstring() method of the speechgrammarlist interface takes a grammar present in a specific domstring within the code base (e.g.
... stored in a variable) and
adds it to the speechgrammarlist as a new speechgrammar object.
... syntax speechgrammarlistinstance.
addfromstring(string,weight); returns void.
...And 2 more matches
SpeechGrammarList.addFromURI() - Web APIs
the
addfromuri() method of the speechgrammarlist interface takes a grammar present at a specific uri and
adds it to the speechgrammarlist as a new speechgrammar object.
... syntax speechgrammarlistinstance.
addfromuri(src,weight); returns void.
... parameters src a domstring representing the uri of the grammar to be
added.
...And 2 more matches
Worklet.addModule() - Web APIs
the
addmodule() method of the worklet interface loads the module in the given javascript file and
adds it to the current worklet.
... syntax
addpromise = worklet.
addmodule(moduleurl);
addpromise = worklet.
addmodule(moduleurl, options); parameters moduleurl a string containing the url of a javascript file with the module to
add.
... return value a promise that resolves once the module from the given url has been
added.
...And 2 more matches
padding-block-end - CSS: Cascading Style Sheets
the p
adding-block-end css property defines the logical block end p
adding of an element, which maps to a physical p
adding depending on the element's writing mode, directionality, and text orientation.
... syntax /* <length> values */ p
adding-block-end: 10px; /* an absolute length */ p
adding-block-end: 1em; /* a length relative to the text size */ /* <percentage> value */ p
adding-block-end: 5%; /* a p
adding relative to the block container's width */ /* global values */ p
adding-block-end: inherit; p
adding-block-end: initial; p
adding-block-end: unset; values the p
adding-block-end property takes the same values as the p
adding-left property.
... description this property corresponds to the p
adding-top, p
adding-right, p
adding-bottom, or p
adding-left property depending on the values defined for writing-mode, direction, and text-orientation.
...And 2 more matches
padding-block-start - CSS: Cascading Style Sheets
the p
adding-block-start css property defines the logical block start p
adding of an element, which maps to a physical p
adding depending on the element's writing mode, directionality, and text orientation.
... syntax /* <length> values */ p
adding-block-start: 10px; /* an absolute length */ p
adding-block-start: 1em; /* a length relative to the text size */ /* <percentage> value */ p
adding-block-start: 5%; /* a p
adding relative to the block container's width */ /* global values */ p
adding-block-start: inherit; p
adding-block-start: initial; p
adding-block-start: unset; values the p
adding-block-start property takes the same values as the p
adding-left property.
... description this property corresponds to the p
adding-top, p
adding-right, p
adding-bottom, or p
adding-left property depending on the values defined for writing-mode, direction, and text-orientation.
...And 2 more matches
padding-inline-end - CSS: Cascading Style Sheets
the p
adding-inline-end css property defines the logical inline end p
adding of an element, which maps to a physical p
adding depending on the element's writing mode, directionality, and text orientation.
... syntax /* <length> values */ p
adding-inline-end: 10px; /* an absolute length */ p
adding-inline-end: 1em; /* a length relative to the text size */ /* <percentage> value */ p
adding-inline-end: 5%; /* a p
adding relative to the block container's width */ /* global values */ p
adding-inline-end: inherit; p
adding-inline-end: initial; p
adding-inline-end: unset; values the p
adding-inline-end property takes the same values as the p
adding-left property.
... description this property corresponds to the p
adding-top, p
adding-right, p
adding-bottom, or p
adding-left property depending on the values defined for writing-mode, direction, and text-orientation.
...And 2 more matches
padding-inline-start - CSS: Cascading Style Sheets
the p
adding-inline-start css property defines the logical inline start p
adding of an element, which maps to a physical p
adding depending on the element's writing mode, directionality, and text orientation.
... syntax /* <length> values */ p
adding-inline-start: 10px; /* an absolute length */ p
adding-inline-start: 1em; /* a length relative to the text size */ /* <percentage> value */ p
adding-inline-start: 5%; /* a p
adding relative to the block container's width */ /* global values */ p
adding-inline-start: inherit; p
adding-inline-start: initial; p
adding-inline-start: unset; values the p
adding-inline-start property takes the same values as the p
adding-left property.
... description this property corresponds to the p
adding-top, p
adding-right, p
adding-bottom, or p
adding-left property depending on the values defined for writing-mode, direction, and text-orientation.
...And 2 more matches
Atomics.add() - JavaScript
the static atomics.
add() method
adds a given value at a given position in the array and returns the old value at that position.
... syntax atomics.
add(typedarray, index, value) parameters typedarray an integer typed array.
... index the position in the typedarray to
add a value to.
...And 2 more matches
additive - SVG: Scalable Vector Graphics
the
additive attribute controls whether or not an animation is
additive.
... four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value replace | sum default value replace animatable no sum specifies that the animation will
add to the underlying value of the attribute and other lower priority animations.
...this is the default, however the behavior is also affected by the animation value attributes by and to, as described in smil animation: how from, to and by attributes affect
additive behavior.
...And 2 more matches
addon-page - Archive of obsolete content
usage with the
add-on sdk you can present information to the user, such as a guide to using your
add-on, in a browser tab.
... you can supply the content in an html file in your
add-on's "data" directory.
...the
addon-page module provides a simple way to have a page which excludes these elements.
...after this, the page loaded from "data/index.html" will not contain navigational elements: var
addontab = require("sdk/
addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
Updating addons broken by private browsing changes - Archive of obsolete content
how do i know if my
addon is affected by these changes?
...vatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: saveurl saveinternal openlinkin ff 20: openbrowserwindow gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your
addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require updating to work correctly in releases of firefox since the ones listed).
... nsidownloadmanager's
addlistener method is deprecated.
...
addprivacyawarelistener should be used instead, or no notifications will be received for private downloads.
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
problem statement win-16 (aka, windows 3.1, et al), is unique in that the architecture depends on the operating environment (i.e., windows) knows the
address of the stack, and that there is only one such
address.
...what is a hardship is that
addresses of dynamic variables, those allocated on the call stack, in a function's local frame, are not valid across thread boundaries.
...on win-16, the thread's attempt to
address the <tt>shareddata</tt> through the pointer shared will provide interesting (though always incorrect) results.
...what is probably more likely to cause problems is passing
addresses of automatically allocated variables to a function that wends its way though arbitrary amounts of convoluted logic, and finds its way into an object that is shared.
AddonType
add-on types hold useful information about each type of
add-on that may be installed.
... they are mostly used to help the ui know how to display the different types of
add-on.
... built-in values: value category 2000 locale 4000 extension 5000 theme 6000 plugin viewtype integer the type of ui to use to display this type of
add-on in the ui.
... flags integer
additional behavior flags for the type.
PR_AtomicAdd
syntax #include <pratom.h> print32 pr_atomic
add( print32 *ptr, print32 val); parameter the function has the following parameters: ptr a pointer to the value to increment.
... val a value to be
added.
... returns the returned value is the result of the
addition.
... description atomically
add a 32 bit value.
PR GetCanonNameFromAddrInfo
extracts the canonical name of the hostname passed to pr_get
addrinfobyname.
... syntax #include <prnetdb.h> const char *pr_getcanonnamefrom
addrinfo(const pr
addrinfo *
addrinfo); parameters the function has the following parameters:
addrinfo a pointer to a pr
addrinfo structure returned by a successful call to pr_get
addrinfobyname.
... returns the function returns a const pointer to the canonical hostname stored in the given pr
addrinfo structure.
... this pointer is invalidated once the pr
addrinfo structure is destroyed by a call to pr_free
addrinfo.
PR_GetHostByAddr
looks up a host entry by its network
address.
... syntax #include <prnetdb.h> prstatus pr_gethostby
addr( const prnet
addr *host
addr, char *buf, printn bufsize, prhostent *hostentry); parameters the function has the following parameters: host
addr a pointer to the ip
address of host in question.
... description pr_gethostby
addr is used to perform reverse lookups of network
addresses.
... that is, given a valid network
address (of type prnet
addr), pr_gethostby
addr discovers the
address' primary name, any aliases, and any other network
addresses for the same host.
PR_ReadDir
syntax #include <prio.h> prdirentry* pr_re
addir( prdir *dir, prdirflags flags); parameters the function has the following parameters: dir a pointer to a prdir object that designates an open directory.
... description pr_re
addir returns a pointer to a directory entry structure: struct prdirentry { const char *name; }; typedef struct prdirentry prdirentry; the structure has the following field: name name of entry, relative to directory name.
...moreover, the prdirentry structure returned by each pr_re
addir call is valid only until the next pr_re
addir or pr_closedir call on the same prdir object.
... if the end of the directory is reached, pr_re
addir returns null, and pr_geterror returns pr_no_more_files_error.
JS_AddArgumentFormatter
add or remove a format string handler for js_convertarguments, js_pusharguments, js_convertargumentsva, and js_pushargumentsva.
... syntax jsbool js_
addargumentformatter(jscontext *cx, const char *format, jsargumentformatter formatter); void js_removeargumentformatter(jscontext *cx, const char *format); name type description cx jscontext * the context in which to install the formatter.
... description js_
addargumentformatter establishes formatter as the conversion function for format strings beginning with format in the context cx.
...(at the moment, js_
addargumentformatter fails only if there is no memory available to record the registration.) js_
addargumentformatter does not copy format, it points at the string storage allocated by the caller, which is typically a string constant.
nsIDOMGeoPositionAddress
dom/interfaces/geolocation/nsidomgeoposition
address.idlscriptable this interface describes the geographical
address of a location, including street, city, and country information, for example.
... 1.0 66 introduced gecko 1.9.2 obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 11 (firefox 11 / thunderbird 11 / seamonkey 2.8) this object is obtained from an nsidomgeoposition
address object via its
address attribute.
... street domstring the street of the
address.
... streetnumber domstring the street number of the
address.
NS_ADDREF
summary macro
addrefs the argument.
... do not use when the pointer might be null; use ns_if_
addref in those cases.
... ns_
addref(foo) is equivalent to foo->
addref(); this macro exists mainly for historical reasons, but for consistency and for symmetry with ns_release it should still be used.
... syntax ns_
addref(foo); see also ns_if_
addref ns_release ...
Access debugging in add-ons - Firefox Developer Tools
we are planning to deprecate the use by firefox
add-ons of the techniques described in this document.
... don't write new
add-ons that use these techniques.
... the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.
addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.
addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
AddressErrors.city - Web APIs
an object based on
addresserrors includes a city property when validation of the
address fails for the value given for the
address's city property.
... syntax var cityerror =
addresserrors.city; value if the value specified in the payment
address object's city property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the city value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.city' in that specification.
AddressErrors.country - Web APIs
an object based on
addresserrors includes a country property if during validation of the
address the specified value of country was determined to be invalid.
... syntax var countryerror =
addresserrors.country; value if an error occurred during validation of the
address due to the country property having an invalid value, this property is set to a domstring providing a human-readable error message explaining the validation error.
... if the payment
address object's country property was determined to be valid, this property is not included in the dictionary.
... specifications specification status comment payment request apithe definition of '
addresserrors.country' in that specification.
AddressErrors.dependentLocality - Web APIs
an object based on
addresserrors includes a dependentlocality property when the
address's dependentlocality property couldn't be validated.
... syntax var localityerror =
addresserrors.dependentlocality; value if the value specified in the payment
address object's dependentlocality property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the dependentlocality value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.dependentlocality' in that specification.
AddressErrors.languageCode - Web APIs
an object based on
addresserrors includes a languagecode property when the
address's languagecode property couldn't be validated.
... syntax var languageerror =
addresserrors.languagecode; value if the value specified in the payment
address object's languagecode property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the languagecode value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.languagecode' in that specification.
AddressErrors.organization - Web APIs
an object based on
addresserrors includes an organization property when the
address's organization property couldn't be validated.
... syntax var organizationerror =
addresserrors.organization; value if the value specified in the payment
address object's organization property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... for example, if validation simply ensures that only permitted characters are included in the organization's name, this might return a string such as "the organization name may only contain the letters a-z, digits, spaces, and commas." if the organization value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.organization' in that specification.
AddressErrors.phone - Web APIs
an object based on
addresserrors includes a phone property when the
address's phone property couldn't be validated.
... syntax var phoneerror =
addresserrors.phone; value if the value specified in the payment
address object's phone property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the phone value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.phone' in that specification.
AddressErrors.postalCode - Web APIs
an object based on
addresserrors includes a postalcode property when the
address's postalcode property couldn't be validated.
... syntax var postcodeerror =
addresserrors.postcode; value if the value specified in the payment
address object's postalcode property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the postalcode value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.postalcode' in that specification.
AddressErrors.recipient - Web APIs
an object based on
addresserrors includes a recipient property when the
address's recipient property couldn't be validated.
... syntax var recipienterror =
addresserrors.recipient; value if the value specified in the payment
address object's recipient property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the recipient value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.recipient' in that specification.
AddressErrors.region - Web APIs
an object based on
addresserrors includes a region property when the
address's region property couldn't be validated.
... syntax var regionerror =
addresserrors.region; value if the value specified in the payment
address object's region property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the region value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.region' in that specification.
AddressErrors.regionCode - Web APIs
an object based on
addresserrors includes a regioncode property when the
address's regioncode property couldn't be validated.
... syntax var regioncodeerror =
addresserrors.regioncode; value if the value specified in the payment
address object's regioncode property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the regioncode value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.regioncode' in that specification.
AddressErrors.sortingCode - Web APIs
an object based on
addresserrors includes a sortingcode property when the
address's sortingcode property couldn't be validated.
... syntax var sortingcodeerror =
addresserrors.sortingcode; value if the value specified in the payment
address object's sortingcode property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it.
... if the sortingcode value was validated successfully, this property is not included in the
addresserrors object.
... specifications specification status comment payment request apithe definition of '
addresserrors.sortingcode' in that specification.
CanvasGradient.addColorStop() - Web APIs
the canvasgradient.
addcolorstop() method
adds a new color stop, defined by an offset and a color, to a given canvas gradient.
... syntax void gradient.
addcolorstop(offset, color); parameters offset a number between 0 and 1, inclusive, representing the position of the color stop.
... examples
adding stops to a gradient this example uses the
addcolorstop method to
add stops to a linear canvasgradient object.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.
addcolorstop(0, 'green'); gradient.
addcolorstop(.7, 'white'); gradient.
addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasgradient.
addcolorstop' in that specification.
DOMTokenList.add() - Web APIs
the
add() method of the domtokenlist interface
adds the given token to the list.
... syntax tokenlist.
add(token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token (or tokens) to
add to the tokenlist.
...we then
add a new token to the list, and write the list into the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.
add("d"); span.textcontent = classes; the output looks like this: you can
add multiple tokens as well: span.classlist.
add("d", "e", "f"); specifications specification status comment domthe definition of '
add()' in that specification.
PaymentAddress.country - Web APIs
the country read-only property of the payment
address interface is a string identifying the
address's country using the iso 3166-1 alpha-2 standard.
... syntax var paymentcountry = payment
address.country; value a domstring which contains the iso3166-1 alpha-2 code identifying the country in which the
address is located, or an empty string if no country is available, which frequently can be assumed to mean "same country as the site owner." usage notes if the payment handler validates the
address and determines that the value of country is invalid, a call to paymentrequestupdateevent.updatewith() will be made with a details object containing a shipping
addresserrors field.
... that field contains an
addresserrors-compliant object whose country property is a string indicating the validation error that occurred and, if possible, suggests how to fix it.
... specifications specification status comment payment request apithe definition of 'payment
address.country' in that specification.
PaymentAddress.dependentLocality - Web APIs
the read-only dependentlocality property of the payment
address interface is a string containing a sublocality designation within a city, such as a neighborhood, borough, district, or, in the united kingdom, a dependent locality.
... syntax var paymentdependentlocality = payment
address.dependentlocality; value a domstring indicating the sublocality portion of the
address.
...this is a disambiguating feature of
addresses in places where a city may have areas that duplicate street names.
... specifications specification status comment payment request apithe definition of 'payment
address.dependentlocality' in that specification.
PaymentAddress.organization - Web APIs
the organization read-only property of the payment
address interface returns a string containing the name of the organization, firm, company, or institution at the
address.
... syntax var paymentorganization = payment
address.organization; value a domstring whose value is the name of the organization or company located at the
address described by the payment
address object.
... this should be the name of the organization that is to receive the shipment for shipping
addresses, or which is repsonsible for payment for payment
addresses.
... specifications specification status comment payment request apithe definition of 'payment
address.organization' in that specification.
PaymentAddress.regionCode - Web APIs
the regioncode read-only attribute of the payment
address interface returns a one-, two-, or three-alphanumeric code (domstring) representing the region of the
address (e.g., "ca" for california, or "11" for lisbon, portugal).
... if the browser can't determine the region code, or the country doesn't use regions for postal
addresses, it returns an empty string.
... syntax var regioncode = payment
address.regioncode; value a domstring indicating the one to three character alphanumeric code representing the region portion of the
address.
...the string is empty if the region code couldn't be determined, isn't needed for the
address's country, or was not provided.
RTCPeerConnection.addTransceiver() - Web APIs
the rtcpeerconnection method
addtransceiver() creates a new rtcrtptransceiver and
adds it to the set of transceivers associated with the rtcpeerconnection.
... syntax rtptransceiver = rtcpeerconnection.
addtransceiver(trackorkind, init); parameters trackorkind a mediastreamtrack to associate with the transceiver, or a domstring which is used as the kind of the receiver's track, and by extension of the rtcrtpreceiver itself.
... streams optional a list of mediastream objects to
add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.
addtransceiver()' in that specification.
Selection.addRange() - Web APIs
the selection.
addrange() method
adds a range to a selection.
... syntax selection.
addrange(range); parameters range a range object that will be
added to the selection.
... example currently only firefox supports multiple selection ranges, other browsers will not
add new ranges to the selection if it already contains one.
... html <p>i <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.
addeventlistener('click', function () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.
addrange(range); } }); result specifications specification status comment selection apithe definition of 'selection.
addrange()' 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.
padding-block - CSS: Cascading Style Sheets
the p
adding-block css shorthand property defines the logical block start and end p
adding of an element, which maps to physical p
adding properties depending on the element's writing mode, directionality, and text orientation.
... /* <length> values */ p
adding-block: 10px 20px; /* an absolute length */ p
adding-block: 1em 2em; /* relative to the text size */ p
adding-block: 10px; /* sets both start and end values */ /* <percentage> values */ p
adding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ p
adding-block: inherit; p
adding-block: initial; p
adding-block: unset; these values corresponds to the p
adding-top and p
adding-bottom, or p
adding-right, and p
adding-left property depending on the values defined for writing-mode, direction, and text-orientation.
... constituent properties this property is a shorthand for the following css properties: p
adding-block-end p
adding-block-start syntax values the p
adding-block property takes the same values as the p
adding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'p
adding-left'>{1,2} examples setting block p
adding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; p
adding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'p
adding-block' in that specification.
padding-inline - CSS: Cascading Style Sheets
the p
adding-inline css shorthand property defines the logical inline start and end p
adding of an element, which maps to physical p
adding properties depending on the element's writing mode, directionality, and text orientation.
... /* <length> values */ p
adding-inline: 10px 20px; /* an absolute length */ p
adding-inline: 1em 2em; /* relative to the text size */ p
adding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ p
adding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ p
adding-inline: inherit; p
adding-inline: initial; p
adding-inline: unset; constituent properties this property is a shorthand for the following css properties: p
adding-inline-end p
adding-inline-start syntax values the p
adding-inline property takes the same values as the p
adding-left property.
... description values for this property correspond to the p
adding-top and p
adding-bottom, or p
adding-right, and p
adding-left property depending on the values defined for writing-mode, direction, and text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'p
adding-left'>{1,2} examples setting inline p
adding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; p
adding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'p
adding-inline' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
the scroll-p
adding-block shorthand property sets the scroll p
adding of an element in the block dimension.
... the scroll-p
adding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... constituent properties this property is a shorthand for the following css properties: scroll-p
adding-block-end scroll-p
adding-block-start syntax /* keyword values */ scroll-p
adding-block: auto; /* <length> values */ scroll-p
adding-block: 10px; scroll-p
adding-block: 1em .5em; scroll-p
adding-block: 10%; /* global values */ scroll-p
adding-block: inherit; scroll-p
adding-block: initial; scroll-p
adding-block: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.
...valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-block' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
the scroll-p
adding-inline shorthand property sets the scroll p
adding of an element in the inline dimension.
... the scroll-p
adding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... constituent properties this property is a shorthand for the following css properties: scroll-p
adding-inline-end scroll-p
adding-inline-start syntax /* keyword values */ scroll-p
adding-inline: auto; /* <length> values */ scroll-p
adding-inline: 10px; scroll-p
adding-inline: 1em .5em; scroll-p
adding-inline: 10%; /* global values */ scroll-p
adding-inline: inherit; scroll-p
adding-inline: initial; scroll-p
adding-inline: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percen...
...valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-inline' in that specification.
scroll-padding - CSS: Cascading Style Sheets
the scroll-p
adding shorthand property sets scroll p
adding on all sides of an element at once, much like the p
adding property does for p
adding on an element.
... the scroll-p
adding-* properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... constituent properties this property is a shorthand for the following css properties: scroll-p
adding-bottom scroll-p
adding-left scroll-p
adding-right scroll-p
adding-top syntax /* keyword values */ scroll-p
adding: auto; /* <length> values */ scroll-p
adding: 10px; scroll-p
adding: 1em .5em 1em 1em; scroll-p
adding: 10%; /* global values */ scroll-p
adding: inherit; scroll-p
adding: initial; scroll-p
adding: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>.
...valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding' in that specification.
WeakSet.prototype.add() - JavaScript
the
add() method appends a new object to the end of a weakset object.
... syntax ws.
add(value); parameters value required.
... the object to
add to the weakset collection.
... examples using
add var ws = new weakset(); ws.
add(window); //
add the window object to the weakset ws.has(window); // true // weakset only takes objects as arguments ws.
add(1); // results in "typeerror: invalid value used in weak set" in chrome // and "typeerror: 1 is not a non-null object" in firefox specifications specification ecmascript (ecma-262)the definition of 'weakset.prototype.
add' in that specification.
Addition assignment (+=) - JavaScript
the
addition assignment operator (+=)
adds the value of the right operand to a variable and assigns the result to the variable.
... the types of the two operands determine the behavior of the
addition assignment operator.
...
addition or concatenation is possible.
... syntax operator: x += y meaning: x = x + y examples using
addition assignment // assuming the following variables // foo = 'foo' // bar = 5 // baz = true // number + number ->
addition bar += 2 // 7 // boolean + number ->
addition baz += 1 // 2 // boolean + boolean ->
addition baz += false // 1 // number + string -> concatenation bar += 'foo' // "5foo" // string + boolean -> concatenation foo += false // "foofalse" // string + string -> concatenation foo += 'bar' // "foobar" specifications specification ecmascript (ecma-262)the def...
Add a Menu Item to Firefox - Archive of obsolete content
the sdk doesn't provide a built-in api to
add new menu items to firefox.
... but it's extensible by design, so anyone can build and publish modules for
add-on developers to use.
... to see how to use third-party modules to
add a new menu item, see the tutorial on using third-party modules with jpm.
addTab - Archive of obsolete content
« xul reference home
addtab( url, referreruri, charset, postdata, owner, allowthirdpartyfixup )
addtab( url, {referreruri: ..., charset: ..., postdata: ..., owner: ..., allowthirdpartyfixup: ..., relatedtocurrent: ...
... firefox 3.6 note the second form of this method was
added in firefox 3.6; it allows you to specify the parameters by name, in any order.
... it also
adds the relatedtocurrent parameter; firefox uses this to decide whether the new tab should be inserted next to the current tab.
Adding Labels and Images - Archive of obsolete content
« previousnext » this section describes a way to
add labels and images to a window.
... in
addition, we look at how to include elements into groups.
...in the next section, we will learn how to
add some input controls to a window.
HTMLIFrameElement.addNextPaintListener()
the
addnextpaintlistener() method of the htmliframeelement is used to define a handler to listen for the next mozafterpaint event coming from the browser <iframe>.
... syntax instanceofhtmliframeelement.
addnextpaintlistener(listener); returns void.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.
addnextpaintlistener(onnextpaint); specification not part of any specification.
Localizing extension metadata on addons.mozilla.org
in step 2, you'll be asked to provide the attributes listed above in the
add-on's default locale (selected in step 1).
...they also provide help for
adding a localization support to your extension if there is no localization structure yet.
... you can already request for amo fields localization on the forums, and these fields will be
added soon to the web translation system.
PRAddrInfo
a structure containing an array of prnet
addr structures.
... typically, a pr
addrinfo object will be found via pr_get
addrinfobyname, iterated through using pr_enumerate
addrinfo, and finally freed with pr_free
addrinfo.
... to get the canonical hostname of a pr
addrinfo object, use pr_getcanonnamefrom
addrinfo.
PR ConvertIPv4AddrToIPv6
converts an ipv4
address into an (ipv4-mapped) ipv6
address.
... syntax #include <prnetdb.h> void pr_convertipv4
addrtoipv6( pruint32 v4
addr, pripv6
addr *v6
addr ); parameters the function has the following parameters: v4
addr the ipv4
address to convert into an ipv4-mapped ipv6
address.
...v6
addr a pointer to a buffer, allocated by the caller, that is filled in with the ipv6
address on return.
NS_IF_ADDREF
summary macro
addrefs the argument, if it is non-null.
...only use this macro if the pointer might be null; use ns_
addref otherwise.
... ns_if_
addref(foo) is equal to if (foo) foo->
addref(); syntax ns_if_
addref(foo); see also ns_
addref ...
CSSNumericValue.add() - Web APIs
the
add() method of the cssnumericvalue interface
adds a supplied number to the cssnumericvalue.
... syntax var cssmathsum = cssnumericvalue.
add(double | cssnumericvalue); parameters number either a number or a cssnumericvalue.
... examples let mathsum = css.px("23").
add(css.percent("4")).
add(css.cm("3")).
add(css.in("9")); // prints "calc(23px + 4% + 3cm + 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of '
add' in that specification.
CSSStyleSheet.addRule() - Web APIs
the obsolete cssstylesheet interface's
addrule() legacy method
adds a new rule to the stylesheet.
... syntax var result = cssstylesheet.
addrule(selector, styleblock, index); parameters selector a domstring specifying the selector portion of the css rule.
... therefore, given existing code such as the following: cssstylesheet.
addrule(selector, styles, 0); you can rewrite this to use the more standard insertrule() like this: cssstylesheet.insertrule(`${selector} {${styles}}`, 0); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.
addrule()' in that specification.
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.
... return value void example this example shows the use of the
addelement() method function change_drag_node(event, node) { var dt = event.datatransfer; dt.
addelement(node); } specifications this method is not defined in any web standard.
HTMLTableElement.cellPadding - Web APIs
the htmltableelement.cellp
adding property represents the p
adding around the individual cells of the table.
... syntax htmltableelement.cellp
adding = p
adding; var p
adding = htmltableelement.cellp
adding; p
adding is either a number of pixels (e.g.
... example // set cell p
adding to 10 pixels let t = document.getelementbyid('tablea'); t.cellp
adding = '10'; specification w3c dom 2 html specification htmltableelement .cellp
adding.
MediaStream.addTrack() - Web APIs
the mediastream.
addtrack() method
adds a new track to the stream.
... syntax stream.
addtrack(track); parameters track a mediastreamtrack to
add to the stream.
... return value undefined example specifications specification status comment media capture and streamsthe definition of '
addtrack()' in that specification.
PaymentAddress.city - Web APIs
the city read-only property of the payment
address interface returns a string containing the city or town portion of the
address.
... syntax var paymentcity = payment
address.city; value a domstring indicating the city or town portion of the
address described by the payment
address object.
... specifications specification status comment payment request apithe definition of 'payment
address.city' in that specification.
PaymentAddress.languageCode - Web APIs
the languagecode read-only property of the payment
address interface returns a string containing the bcp-47 language code for the
address.
... this is used while localizing the displayy of the
address, allowing the determination of the field separators and the order of fields when formatting the
address.
... syntax var paymentlanguagecode = payment
address.languagecode; value a domstring providing the bcp-47 format language code indicating the language the
address was written in, such as "en-us", "pt-br", or "ja-jp".
PaymentAddress.phone - Web APIs
the read-only phone property of the payment
address interface returns a string containing the telephone number of the recipient or contact person.
... syntax var paymentphone = payment
address.phone; value a domstring containing the telephone number for the recipient of the shipment or of the responsible party for payment.
... specifications specification status comment payment request apithe definition of 'payment
address.phone' in that specification.
PaymentAddress.postalCode - Web APIs
the postalcode read-only property of the payment
address interface returns a string containing a code used by a jurisdiction for mail routing, for example, the zip code in the united states or the postal index number (pin code) in india.
... syntax var paymentpostalcode = payment
address.postalcode; value a domstring which contains the postal code portion of the
address.
... specifications specification status comment payment request apithe definition of 'payment
address.postalcode' in that specification.
PaymentAddress.recipient - Web APIs
the read-only recipient property of the payment
address interface returns a string containing the name of the recipient, purchaser, or contact person at the payment
address.
... syntax var paymentrecipient = payment
address.recipient; value a domstring giving the name of the person receiving or paying for the purchase, or the name of a contact person in other contexts.
... specifications specification status comment payment request apithe definition of 'payment
address.recipient' in that specification.
PaymentAddress.sortingCode - Web APIs
the sortingcode read-only property of the payment
address interface returns a string containing a postal sorting code such as is used in france.
... syntax var sortingcode = payment
address.sortingcode; value a domstring containing the sorting code portion of the
address.
... specifications specification status comment payment request apithe definition of 'payment
address.sortingcode' in that specification.
Window.ongamepaddisconnected - Web APIs
the ongamep
addisconnected property of the window interface represents an event handler that will run when a gamepad is disconnected (when the gamep
addisconnected event fires).
... syntax window.ongamep
addisconnected = function() { ...
... }; examples window.ongamep
addisconnected = function() { // a gamepad has been disconnected }; specifications specification status comment gamepadthe definition of 'gamep
addisconnected event' 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.
scroll-padding-block-end - CSS: Cascading Style Sheets
the scroll-p
adding-block-end property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-block-end: auto; /* <length> values */ scroll-p
adding-block-end: 10px; scroll-p
adding-block-end: 1em; scroll-p
adding-block-end: 10%; /* global values */ scroll-p
adding-block-end: inherit; scroll-p
adding-block-end: initial; scroll-p
adding-block-end: unset; values <length-percentage> an inwards offset from the block end edge of the scrollport, as a valid length or a percentage.
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
the scroll-p
adding-block-start property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-block-start: auto; /* <length> values */ scroll-p
adding-block-start: 10px; scroll-p
adding-block-start: 1em; scroll-p
adding-block-start: 10%; /* global values */ scroll-p
adding-block-start: inherit; scroll-p
adding-block-start: initial; scroll-p
adding-block-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a perce...
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-block-start' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
the scroll-p
adding-bottom property defines offsets for the bottom of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-bottom: auto; /* <length> values */ scroll-p
adding-bottom: 10px; scroll-p
adding-bottom: 1em; scroll-p
adding-bottom: 10%; /* global values */ scroll-p
adding-bottom: inherit; scroll-p
adding-bottom: initial; scroll-p
adding-bottom: unset; values <length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid length or a percentage.
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
the scroll-p
adding-inline-end property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-inline-end: auto; /* <length> values */ scroll-p
adding-inline-end: 10px; scroll-p
adding-inline-end: 1em; scroll-p
adding-inline-end: 10%; /* global values */ scroll-p
adding-inline-end: inherit; scroll-p
adding-inline-end: initial; scroll-p
adding-inline-end: unset; values <length-percentage> an inwards offset from the inline end edge of the scrollport, as a valid length or a percentage.
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
the scroll-p
adding-inline-start property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-inline-start: auto; /* <length> values */ scroll-p
adding-inline-start: 10px; scroll-p
adding-inline-start: 1em; scroll-p
adding-inline-start: 10%; /* global values */ scroll-p
adding-inline-start: inherit; scroll-p
adding-inline-start: initial; scroll-p
adding-inline-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or...
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-inline-start' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
the scroll-p
adding-left property defines offsets for the left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-left: auto; /* <length> values */ scroll-p
adding-left: 10px; scroll-p
adding-left: 1em; scroll-p
adding-left: 10%; /* global values */ scroll-p
adding-left: inherit; scroll-p
adding-left: initial; scroll-p
adding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage.
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-left' in that specification.
scroll-padding-right - CSS: Cascading Style Sheets
the scroll-p
adding-right property defines offsets for the right of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-right: auto; /* <length> values */ scroll-p
adding-right: 10px; scroll-p
adding-right: 1em; scroll-p
adding-right: 10%; /* global values */ scroll-p
adding-right: inherit; scroll-p
adding-right: initial; scroll-p
adding-right: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage.
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
the scroll-p
adding-top property defines offsets for the top of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
... syntax /* keyword values */ scroll-p
adding-top: auto; /* <length> values */ scroll-p
adding-top: 10px; scroll-p
adding-top: 1em; scroll-p
adding-top: 10%; /* global values */ scroll-p
adding-top: inherit; scroll-p
adding-top: initial; scroll-p
adding-top: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage.
... initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-p
adding-top' in that specification.
Set.prototype.add() - JavaScript
the
add() method appends a new element with a specified value to the end of a set object.
... syntax myset.
add(value); parameters value the value of the element to
add to the set object.
... examples using the
add method var myset = new set(); myset.
add(1); myset.
add(5).
add('some text'); // chainable console.log(myset); // set [1, 5, "some text"] specifications specification ecmascript (ecma-262)the definition of 'set.prototype.
add' in that specification.
<mpadded> - MathML
the mathml <mp
added> element is used to
add extra p
adding and to set the general adjustment of position and size of enclosed contents.
... examples <math> <mp
added height="+150px" width="100px" lspace="2height"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </mp
added> </math> specifications specification status comment mathml 3.0the definition of 'mp
added' in that specification.
... recommendation current specification mathml 2.0the definition of 'mp
added' in that specification.
Firefox addons developer guide - Archive of obsolete content
the firefox
add-ons developer guide was contributed by the mozilla japan community; it covers how to go about building firefox extensions using xpcom and xul.
... these days, we recommend using the
add-on sdk instead, but there are times when you need the
additional control offered by a more direct approach.
Adding the structure - Archive of obsolete content
to implement this ui, we'll
add a statusbarpanel element to the statusbar element in the navigator.xul file.
...all xul elements can be given custom attributes in
addition to the ones the xul rendering engine recognizes which get ignored by the engine, so
adding this custom attribute does not create any problems or modify the way the widget is displayed (except for the ways we explicitly specify with css).
Install.addDirectory - Archive of obsolete content
install.
adddirectory the install object's
adddirectory method queues an entire directory for installation once performinstall is called.
... var vi = "10.10.10.10"; var xpisrc = "
adddir1"; initinstall("
addfilenovers1", "
adddir_1", vi, 1); f = getfolder("program"); setpackagefolder(f); err =
adddirectory(xpisrc); logcomment("the error = " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
Install.addFile - Archive of obsolete content
install.
addfile the install object's
addfile method is the standard way to queue files for installation.
... var xpisrc = "file.txt"; initinstall( "
adding a file", "testfile", "1.0.1.7", 1); f = getfolder("program"); setpackagefolder(f);
addfile(xpisrc); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
<input type="email"> - HTML: Hypertext Markup Language
<input> elements of type email are used to let the user enter and edit an e-mail
address, or, if the multiple attribute is specified, a list of e-mail
addresses.
... the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail
address (or list of
addresses) before the form can be submitted.
... the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail
address or not.
...And 59 more matches
JSAPI reference
runtimes and contexts js_init
added in spidermonkey 31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi 52 js_destroyruntime js_getruntimeprivate js_setruntimeprivate js_setnativestackquota
added in spidermonkey 17 js_contextiteratorobsolete since jsapi 52 js_finish obsolete since jsapi 19 struct jscontext js_newcontext js_destroycontext js_destroycontextnogc js_setcontextcallback enum j...
...scontextop js_getruntime js_getparentruntime
added in spidermonkey 31 js_getobjectruntime
added in spidermonkey 17 js_getcontextprivate js_setcontextprivate js_getsecondcontextprivate
added in spidermonkey 17 js_setsecondcontextprivate
added in spidermonkey 17 js_setinterruptcallback
added in spidermonkey 31 js_getinterruptcallback
added in spidermonkey 31 js_requestinterruptcallback
added in spidermonkey 31 js_checkforinterrupt
added in jsapi 45 js_destroycontextmaybegc obsolete since jsapi 14 js_setbranchcallback obsolete since javascript 1.9.1 js_setoperationcallback obsolete since jsapi 30 js_getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since javascript 1.9.1 js_getope...
...since javascript 1.8.6 js_setoptions obsolete since jsapi 27 js_getoptions obsolete since jsapi 27 js_toggleoptions obsolete since jsapi 27 enum jsversion jsversion_ecma_3 jsversion_1_6 jsversion_1_7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversion_latest js_getimplementationversion js_getversion js_setversionforcompartment
added in spidermonkey 31 js_stringtoversion js_versiontostring js_setversion obsolete since jsapi 25 js::currentglobalornull
added in spidermonkey 31 js_getglobalforscopechain obsolete since jsapi 25 js_getglobalobject obsolete since jsapi 24 js_setglobalobject obsolete since jsapi 25 js_initclass js_initstandardclasses js_resolvestandardclass js_enumeratestandardclasses js...
...And 50 more matches
cfx - Archive of obsolete content
cfx is no longer supported as of firefox 44 and no longer accepted for
add-on submission.
... enables you to test, run, and package
add-ons.
... cfx is is no longer supported as of firefox 44 and no longer accepted for
add-on submission, jpm should now be used instead.
...And 48 more matches
package.json - Archive of obsolete content
the package.json file contains manifest data for your
add-on, providing not only descriptive information about the
add-on for presentation in the
add-ons manager, but other metadata required of
add-ons.
... some of its entries, such as icon, name, and description, have direct analogues in the install manifest format, and entries from package.json are written into the install manifest when the
add-on is built using jpm xpi.
... others, such as lib, permissions, and preferences, represent instructions to the jpm tool itself to generate and include particular code and data structures in your
add-on.
...And 48 more matches
Reference Manual
whenever you `point' the nscomptr at a different xpcom object (by assignment or initialization), it must release its old value, if any, and
addref the new.
...the pointer returned cannot be
addrefed, released, or deleted.
... nscomptr<nsifoo> foo = ...; foo->
addref(); // error: |
addref| is private delete foo.get(); // error: |operator delete| is private ns_release(foo); // error: |release| is private of course, the most important safety feature provided by nscomptr is that it
addrefs and releases automatically at the appropriate times.
...And 48 more matches
WebIDL bindings
all webidl files should be placed in dom/webidl and
added to the list in the moz.build file in that directory.
... note that if you're
adding new interfaces, then the test at dom/tests/mochitest/general/test_interfaces.html will most likely fail.
...resist the urge to just
add your interfaces to the moz.build list without the review; it will just annoy the dom peers and they'll make you get the review anyway.
...And 48 more matches
Event reference
each event is represented by an object which is based on the event interface, and may have
additional custom fields and/or functions used to get
additional information about what happened.
... this article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, mozilla-specific events are listed so that
add-ons can use them to interact with the browser.
... compositionupdate a character is
added to a passage of text being composed.
...And 48 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
previous overview: client-side javascript frameworks next in the last article we
added more features to our to-do list and started to organize our app into components.
... in this article we will
add the app's final features and further componentize our app.
... newtodo: displays the <input> field and
add button for
adding a new todo.
...And 47 more matches
Experimental features in Firefox
editor's note: when
adding features to these tables, please try to include a link to the relevant bug or bugs using the bug macro: {{bug(bug-number)}}.
... release channel version
added enabled by default?
... release channel version
added enabled by default?
...And 46 more matches
nsIMsgHeaderParser
add brief description of interface ???
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheader
addressmailboxes(in string line); void extractheader
addressname(in string line, out string name); void extractheader
addressnames(in string line, out string usernames); astring makefull
address(in astring aname, in astring a
address); string makefull
addressstring(in string aname, in string a
address); wstring makefull
addresswstring(in wstring name, in wstring
addr); obsolete since gecko 1.9 void parseheader
addresses(in string line, out s...
...tring names, out string
addresses, out pruint32 num
addresses); void parseheaderswitharray(in wstring aline, [array, size_is(count)] out wstring aemail
addresses, [array, size_is(count)] out wstring anames, [array, size_is(count)] out wstring afullnames, [retval] out unsigned long count); void reformatheader
addresses(in string line, out string reformatted
address); wstring reformatunquoted
addresses(in wstring line); void removeduplicate
addresses(in string
addrs, in string other_
addrs, in prbool removealiasestome, out string new
address); string unquotephraseor
addr(in string line, in boolean preserveintegrity); wstring unquotephraseor
addrwstring(in wstring line, in boolean preserveintegrity); methods extractheader
addressmailboxes() giv...
...And 45 more matches
Bootstrapped extensions - Archive of obsolete content
while this makes creating extensions that
add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart.
... all the application does is call into this script file; the extension is responsible for
adding and removing its user interface and handling any other setup and shutdown tasks it requires.
...similarly, when its shutdown() function is called, it must remove anything that it has
added to the application, as well as all references to any of its objects.
...And 43 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
requirements first off, what kind of
add-on are we talking about here?
... there will be no usage of the
add-on sdk or any other external libraries here.
...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 43 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
4 alpn alpn, draft, glossary, needscontent, tls application-layer protocol negotiation (alpn) is a tls extension which indicates what application layer protocol is negotiating the encryped connection without requiring
additional round trips.
... 6 aria accessibility, glossary aria (accessible rich internet applications) is a w3c specification for
adding semantics and other metadata to html to cater to users of assistive technology.
... 7 arpa glossary, infrastructure .arpa (
address and routing parameter area) is a top-level domain used for internet infrastructure purposes, especially reverse dns lookup (i.e., find the domain name for a given ip
address).
...And 40 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
an easier method of building a firefox/thunderbird
addon for developers who are well-acquainted with ides like netbeans, eclipse, etc.
...install extensions for firefox from the mozilla
add-ons website.
...you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension developer https://
addons.mozilla.org/firefox/
addon/7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions.
...And 39 more matches
Index
7
address book interfaces mailnews, mozilla, seamonkey, thunderbird this page contains a list of the interfaces that you'll will most likely hit when writing patches for the
address book or writing extensions.
... the complete list of interfaces for the
address book can be found here.
...
address book examples show how to perform various tasks and provide code snippets.
...And 38 more matches
Starting WebLock
these two methods are used to dynamically
add or remove an observer to a notification topic.
... but weblock needs to be instantiated and
added to the observer service automatically, which also implies some sort of persistent data (after all, we want to have the component start up every time the application does).
... getting access to the category manager two fields in the nsmodulecomponentinfo structure introduced in the last section are
addresses for registration and unregistration callbacks.
...And 36 more matches
panel - Archive of obsolete content
creates transient dialogs to implement part of an
add-on's user interface.
... your
add-on can receive notifications when a panel is shown or hidden by listening to its show and hide events.
... opening a panel will close any panel created by the panel() constructor that is already open, even if that panel was opened by a different
add-on sdk based extension.
...And 35 more matches
The box model - Learn web development
p
adding, margin and border will cause other elements to be pushed away from the box unless we decide to change the display type to inline, elements such as headings (e.g.
... vertical p
adding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
... horizontal p
adding, margins, and borders will apply and will cause other inline boxes to move away from the box.
...And 34 more matches
Index - Learn web development
they provide a human-readable
address for any web server available on the internet.
... 42 javascript basics beginner, codingscripting, javascript, learn, web, l10n:priority javascript ("js" for short) is a full-fledged dynamic programming language that can
add interactivity to a website.
...we'll probably
add to this resource as time goes on.
...And 34 more matches
nsIDOMWindowUtils
, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long a
additionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmouseeventtowindow(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrol...
... nsidomelement aelement); nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay); obsolete since gecko 31.0 nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay, [optional] in unsigned long a
additionalflags); boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, in boolean areverse); obsolete since gecko 31.0 boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, [optional] in unsigned long a
additionalflags); void sendsimplegestureevent(in astring atype, in float ax, in float ay, in unsigned long adirect...
... key_flag_prevent_default 0x0001 getdefaultprevented() returns true if this is specified to a
additionalflags of sendkeyevent().
...And 34 more matches
Box-shadow generator - CSS: Cascading Style Sheets
this tool lets you construct css box-shadow effects, to
add box shadow effects to your css objects.
... box-shadow generator html content <div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> <div class="button" data-type="
add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disabl...
..."> <div class="ui-slider-name"> position x </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="
add"></div> <div class="ui-slider-input" data-topic="posx" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position y </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-slider" data-topic=...
...And 34 more matches
XUL Migration Guide - Archive of obsolete content
this guide aims to help you migrate a xul-based
add-on to the sdk.
... first we'll outline how to decide whether your
add-on is a good candidate for migration via a comparison of the benefits and limitations of the sdk versus xul development.
... whether you should migrate a particular
add-on is largely a matter of how well the sdk's supported apis meet its needs.
...And 33 more matches
Drawing graphics - Learn web development
add the following code into it, just below the opening <body> tag: <canvas class="mycanvas"> <p>
add suitable fallback here.</p> </canvas> we have
added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could
add them back in if you wanted, but we will set them using javascri...
... now
add the following lines of javascript inside the <script> element: const canvas = document.queryselector('.mycanvas'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; here we have stored a reference to the canvas in the canvas constant.
... if you save and load your example in a browser now, you'll see nothing, which is fine, but you'll also see scrollbars — this is a problem for us, which happens because the <body> element has a margin that,
added to our full-window-size canvas, results in a document that's wider than the window.
...And 33 more matches
React interactivity: Events and state - Learn web development
in this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully
add and delete tasks, and toggle tasks as completed.
...for example: const btn = document.queryselector('button'); btn.
addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
... in the above example, we're
adding an onclick attribute to the <button> element.
...And 33 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.
...note that these are also abstract cross-window objects; customizableui will manage the actual dom manipulation involved with
adding/moving/removing widgets in all windows for you.
... customizableui provides apis to
add, move and remove all these different widgets, and mostly abstracts the dom away from you.
...And 33 more matches
NSS tools : certutil
command options -a
add an existing certificate to a certificate database.
... -e
add an email certificate to the certificate database.
... -s create an individual certificate and
add it to a certificate database.
...And 33 more matches
Color picker tool - CSS: Cascading Style Sheets
i-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; p
adding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-pi...
... .ui-color-picker .input[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; p
adding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100...
...ition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; p
adding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; p
adding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png...
...And 33 more matches
Content Scripts - Archive of obsolete content
many
add-ons need to access and modify the content of web pages.
... but the main
add-on code doesn't get direct access to web content.
... instead, sdk
add-ons need to factor the code that gets access to web content into separate scripts that are called content scripts.
...And 32 more matches
context-menu - Archive of obsolete content
adds items, submenus, and menu separators to the page's context menu.
... usage instead of manually
adding items when particular contexts occur and then removing them when those contexts go away, you bind items to contexts, and the
adding and removing is automatically handled for you.
...when the user invokes the context menu, all of the items bound to the current context are automatically
added to the menu.
...And 32 more matches
Localizing with Koala
introduction this tutorial will guide you through making a couple of changes to firefox's user interface using koala, an
add-on for komodo edit created to help localizing mozilla.
...if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated:
add "mdc search" manage search engines...
... go to tools >
add-ons.
...And 32 more matches
Using IndexedDB - Web APIs
start a transaction and make a request to do some database operation, like
adding or retrieving data.
...so for example, don't use 2.4 as a version number: var request = indexeddb.open("mytestdatabase", 2.4); // don't do this, as the version will be rounded to 2 generating handlers the first thing you'll want to do with almost all of the requests you generate is to
add success and error handlers: request.onerror = function(event) { // do something with request.errorcode!
...if you want to avoid
adding error handlers to every request, you can instead
add a single error handler on the database object, like so: db.onerror = function(event) { // generic error handler for all errors targeted at this database's // requests!
...And 32 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="
add-axis" class="button">
add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span...
...i-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; p
adding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-pi...
... .ui-color-picker .input[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; p
adding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("images/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top:...
...And 32 more matches
widget - Archive of obsolete content
create a simple user interface for an
add-on in firefox's
add-on bar.
... usage "widgets" are small pieces of content that live in the firefox 4
add-on bar.
...first, your users will be accustomed to interacting with
add-ons via widgets and the
add-on bar.
...And 31 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
add-on versioning
add-ons should specify their versions using the toolkit version format.
... how applications determine compatibility when installing
add-ons applications look at the targetapplication entries in the
add-on's install.rdf.
...
additionally the minversion and maxversion of this entry must be a range that includes the version of the running application.
...And 31 more matches
certutil
-a
add an existing certificate to a certificate database.
... -e
add an email certificate to the certificate database.
... -s create an individual certificate and
add it to a certificate database.
...And 31 more matches
Legacy layout methods - Learn web development
this knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in
addition to allowing you to work on existing projects which use these types of systems.
...
add the following to the bottom of your css: div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; } here we've set both to be 48% of their parent's width — this totals 96%, leaving us 4% free to act as a gutter between the two columns, giving the content some space to breathe.
... in the <style> element,
add the following code, which gives the wrapper container a width of 980 pixels, with p
adding on the right hand side of 20 pixels.
...And 29 more matches
Client-side storage - Learn web development
separate storage for each domain there is a separate data store for each domain (each separate web
address loaded in the browser).
...
add the following lines to your javascript file: // create needed constants const rememberdiv = document.queryselector('.remember'); const forgetdiv = document.queryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname');...
...
add this snippet below your previous code: // stop the form from submitting when a button is pressed form.
addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to
add an event listener, the handler function of which will run when the "say hello" button is clicked.
...And 28 more matches
Using DTMF with WebRTC - Web APIs
let dialstring = "12024561111"; let callerpc = null; let receiverpc = null; let dtmfsender = null; let has
addtrack = false; let mediaconstraints = { audio: true, video: false }; let offeroptions = { offertoreceiveaudio: 1, offertoreceivevideo: 0 }; let dialbutton = null; let logelement = null; these are, in order: dialstring the dtmf string the caller will send when the "dial" button is clicked.
...this will be obtained while setting up the connection, in the gotstream() function shown in
adding the audio to the connection.
... has
addtrack because some browsers have not yet implemented rtcpeerconnection.
addtrack(), therefore requiring the use of the obsolete
addstream() method, we use this boolean to determine whether or not the user agent supports
addtrack(); if it doesn't, we'll fall back to
addstream().
...And 28 more matches
CSS3 - Archive of obsolete content
new modules are also
added when new needs are identified.
... css color module level 3 recommendation since june 7th, 2011
adds the opacity property, and the hsl(), hsla(), rgba() and rgb() functions to create <color> values.
... css namespaces module recommendation since september 29th, 2011
adds the support for the xml namespaces by defining the notion of css qualified name, using the ' | ' syntax and
adding the @namespace css at-rule.
...And 27 more matches
2D maze game with device orientation - Game development
yle> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'game'); game.state.
add('boot', ball.boot); game.state.
add('preloader', ball.preloader); game.state.
add('mainmenu', ball.mainmenu); game.state.
add('howto', ball.howto); game.state.
add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html website with some basic content in the <head> section: charset, title, css styling and the inclusion of the jav...
...if there's nothing specified in that last argument or the element is not found, the canvas will be
added to the <body> tag.
... without the framework, to
add the canvas element to the page, you would have to write something like this inside the <body> tag: <canvas id='game' width='320' height='480'></canvas> the important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.
...And 26 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
in this article we'll be using variables and props to make our app dynamic, allowing us to
add and delete todos, mark them as complete, and filter them by status.
... code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-
adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-
adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode.
... to prove it, go to that array, and try changing some of the todo object's completed property values, and even
add a new todo object.
...And 26 more matches
Introduction to XPCOM for the DOM
a tutorial about how to
add a new interface is also provided, and eventually, a more detailed discussion of class inheritance in c++.
...this is described in section 1.e, "how to
add an interface".
...that is why each time a pointer to an interface is assigned the
address of an object, we have to increase the reference count of that object by one.
...And 26 more matches
nsIZipWriter
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) once all the operations you wish to perform are
added to the queue, a call to processqueue() will perform the operations in the order they were
added to the queue.
... note: although it is not necessary to
add directory entries in order to
add file entries within them, some zip utilities may have problems with that, so it may be best to
add the directory entries explicitly first.
...to create an instance, use: var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstance(components.interfaces.nsizipwriter); method overview void
addentrychannel(in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsichannel achannel, in boolean aqueue); void
addentrydirectory(in autf8string azipentry, in prtime amodtime, in boolean aqueue); void
addentryfile(in autf8string azipentry, in print32 acompression, in nsifile afile, in boolean aqueue); void
addentrystream(in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsiinputstream astream, in boolean aqueue); void close(); nsizipentry getentry(in autf8string azipe...
...And 26 more matches
How to build custom form controls - Learn web development
for any interaction you do
add, it is vital to spend time in the design stage; if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it.
...we will
add aria semantics in a bit.
... .select { /* this will create a positioning context for the list of options;
adding this to .select:focus-within will be a better option when fully supported */ position: relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state.
...And 25 more matches
Creating our first Vue component - Learn web development
create the component's template section by
adding <template></template> to the top of the file.
...inside the <script> tags,
add a default exported object export default {}, which is your component object.
... your file should now look like this: <template> </template> <script> export default {}; </script> we can now begin to
add actual content to our todoitem.
...And 25 more matches
Signaling and video calling - Web APIs
in
addition, there is a short timeout period; the glitch instance is for quick experiments and testing only.
... first up is the
addition of the function sendtooneuser().
... as the existing code allows the sending of arbitrary message types, no
additional changes are required.
...And 25 more matches
Border-image generator - CSS: Cascading Style Sheets
{ width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; p
adding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { ...
...rgin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; p
adding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; p
adding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png...
...") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; p
adding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", aria...
...And 25 more matches
Building up a basic demo with Three.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; p
adding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element, that three.js wi...
...
add this code into our second <script> element, just below the javascript comment.
...when creating new objects in the demo, we
add them all inside the scene to become visible on the screen.
...And 24 more matches
Configuring Build Options
the default options are the most well-supported, so it is preferable to
add as few options as possible.
... mozconfig contains two types of options: options prefixed with mk_
add_options are passed to client.mk.
... options prefixed with ac_
add_options are passed to configure, and affect the build process.
...And 24 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
changing default search setting from extensions many
add-ons, for monetization or other reasons, change several search-related settings at install time.
... while this is generally considered acceptable behavior, considerable care must be taken to avoid violating the mozilla
add-on guidelines or creating an adverse user experience.
... due to the large volume of user complaints regarding hidden settings being changed against their will, and not being restored after the
add-ons responsible are disabled, mozilla will take any steps necessary to mitigate the impact of offending
add-ons.
...And 23 more matches
Modularization techniques - Archive of obsolete content
the caller passes in an id and a pointer to a
address to place the resulting interface.
... reference counting is performed using the
addref() and release() methods.
...
addref() increments that reference count, and release() decrements it.
...And 23 more matches
Client-side form validation - Learn web development
"please enter a valid email
address" (the data you entered is not in the right format).
... minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numerical input types type: specifies whether the data needs to be a number, an email
address, or some other specific preset type.
...to make an input mandatory,
add this attribute to the element.
...And 23 more matches
Details of the object model - JavaScript
in
addition, any object can be associated as the prototype for another object, allowing the second object to share the first object's properties.
...the subclass inherits all the properties of the superclass and
additionally can
add new properties or modify the inherited ones.
... for example, assume the employee class includes only the name and dept properties, and manager is a subclass of employee that
adds the reports property.
...And 23 more matches
Getting Started (jpm) - Archive of obsolete content
the
add-on sdk includes a command-line tool that you use to initialize, run, test, and package
add-ons.
... this tutorial walks through creating a simple
add-on using the sdk.
... prerequisites to create
add-ons for firefox using the sdk, you'll need: firefox version 38 or later.
...And 22 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.
...you don't need to implement this observer yourself, although you may
add an observer to the datasource if you want to be notified when the data changes.
...however, as it is possible to use and/or implement other query types with templates, these
additional types may support automatic updating.
...And 22 more matches
Componentizing our Svelte app - Learn web development
we'll componentize our app, then
add more functionality to allow users to update existing components.
...
add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> ...
...first of all, we need to import it —
add the following line at the top of the todos.svelte <script> section: import filterbutton from './filterbutton.svelte' now, replace the filters <div> with a call to the filterbutton component, which takes the current filter as a prop — the below line is all you need: <filterbutton {filter} /> note: remember that when the html attribute name and variable matches, they can be repla...
...And 22 more matches
Index
4 foss guide, spidermonkey feel free to
add your own spidermonkey-based open source projects (and if necessary
add categories)!
... 22 js::
add*root jsapi reference, needscontent, obsolete, reference, référence(2), spidermonkey these functions are obsoleted, use js::persistentrooted instead.
... full documentation of how to define a jsnative (or a jsfastnative, the equivalent typedef which preceded it) is available in the api header "js/callargs.h"
added in spidermonkey 24.
...And 22 more matches
Inputs and input sources - Web APIs
a full webxr experience isn't just about showing the user a wholly virtual scene or augmenting reality by
adding to or altering the world around them.
... 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.
... any
additional capabilities a webxr controller may have are accessed through the input source's gamepad object.
...And 22 more matches
Getting started (cfx) - Archive of obsolete content
this tutorial walks through creating a simple
add-on using the cfx command-line tool.
...see: getting started with jpm cfx to jpm prerequisites to create
add-ons for firefox using the sdk, you'll first need to follow the instructions to install and activate the sdk.
... initializing an empty
add-on in the command prompt, create a new directory.
...And 21 more matches
Theme changes in Firefox 2 - Archive of obsolete content
feeds/
addfeedreader.xul feeds/
addfeedreader.css new file that presents ui for
adding a new feed reader.
... file description of change browser/bookmarks/
addbookmark.css updated to include microsummary-related css changes.
... browser/feeds/
addfeedreader.css new file; css used for the window to
add a new feed reader.
...And 21 more matches
Building up a basic demo with the PlayCanvas engine - Game development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: playcanvas demo</title> <style> body { margin: 0; p
adding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set th...
...
add the following code to the bottom of your second <script> element: var app = new pc.application(canvas); app.start(); the pc global object contains all the playcanvas functions available in the engine.
...again,
add the following lines at the bottom of your script.
...And 21 more matches
UI pseudo-classes - Learn web development
more recently, the css selector level 3 and css basic ui level 3
added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of.
...for example: <form> <fieldset> <legend>feedback form</legend> <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> </div> <div> <label for="lname">last name: </label> <input id="lname" name="lname" type="text" required> </div> <div> <label for="email">email
address (include if you want a response): </label> <input id="email" name="email" type="email"> </div> <div><button>submit</button></div> </fieldset> </form> here, the first name and last name are required, but the email
address is optional.
...form controls are optional by default, so you could just do your optional styling by default, and
add styles on top for required controls.
...And 21 more matches
Styling Vue components with CSS - Learn web development
styling vue components with css before we move on to
add more advanced features to our app, we should
add some basic css to make it look better.
...
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; p
adding: 0; } button { border: none; margin: 0; p
adding: 0; width: auto; overflow: visible; background: transparent; ...
...f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically
added to our site.
...And 21 more matches
Creating localizable web applications
cheatsheet don't hardcode english text, formats (numbers, dates,
addresses, etc.), word order or sentence structure.
... see examples of the
addons.mozillaorg code at /
addons/trunk/site/app/config/language.php and /
addons/trunk/site/app/config/language.inc.php.
...by
adding locale dropdown menu at bottom of page) and remember this choice for the future visits.
...And 21 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
at the moment it supports three main sorts of targets: restartless
add-ons, tabs, and workers.
... when about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for
add-ons and one for workers.
... whether or not system
add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showsystem
addons preference.
...And 21 more matches
Content Processes - Archive of obsolete content
conversely, an
add-on process was supposed to run all the code associated with a single
add-on.
... neither content or
add-on proceses were ever actually implemented, but by the time they were cancelled, the sdk was already designed with them in mind.
... to understand this article, it's probably best to read it as if content and
add-on processes actually exist.
...And 20 more matches
page-mod - Archive of obsolete content
for example, the following
add-on displays an alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.alert("page matches ruleset");' }); you can modify the document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); you can su...
...pply the content script(s) in one of two ways: as a string literal, or an array of string literals, assigned to the contentscript option, as above as separate files supplied in your
add-on's "data" directory.
...so you can rewrite the above code like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: "./my-script.js" }); unless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems getting your
add-on approved on amo.
...And 20 more matches
ui/frame - Archive of obsolete content
experimental create html iframes, using bundled html, css and javascript, that can be
added to a designated area of the firefox user interface.
... at the moment you can only
add frames to a toolbar.
... constructing frames the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your
add-ons "data" directory.
...And 20 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 has an
add-on system similar to the one in firefox, and there are some komodo extensions that provide
additional help in extension development.
... the only notable
additions is a file named makefile under src.
...And 20 more matches
Manipulating documents - Learn web development
you can use this object to return and manipulate information on the html and css that comprises the document, for example get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and
add them to the current element as children, or even delete it altogether.
...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.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> the dom on the other hand looks like this: note: this dom tree diagram was created using ian hickson's live dom viewer.
...
add a <script></script> element just above the closing </body> tag.
...And 20 more matches
Working with Svelte stores - Learn web development
e) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; p
adding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
... in app.svelte we'll import the component;
add the following import statement below the existing one: import alert from './components/alert.svelte' then call the alert component just above the todos call, like this: <alert /> <todos {todos} /> load your test app now, and you should now see the alert message on screen.
...
add the following import statement below the existing ones: import { alert } from '../stores.js' update your
addtodo() function like so: function
addtodo(name) { todos = [...todos, { id: newtodoid, name, completed: false }] $alert = `todo '${name}' has been
added` } update removetodo() like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) todoss...
...And 20 more matches
Vue conditional rendering: editing existing todos - Learn web development
previous overview: client-side javascript frameworks next now it is time to
add one of the major parts of functionality that we're still missing — the ability to edit existing todo items.
...we'll also look at
adding functionality to delete todo items.
...is.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; p
adding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure you understand everything the component is doing before moving on.
...And 20 more matches
Hacking Tips
optionally, a condition on the ins->id() of the lir instruction can be
added to select precisely the instruction you are looking for.
... once the breakpoint is on codegenerator function of the lir instruction,
add a command to generate a static breakpoint in the generated code.
...() (gdb) once you hit the generated breakpoint, you can replace it by a gdb breakpoint to make it conditional, the procedure is to first replace the generated breakpoint by a nop instruction, and to set a breakpoint at the
address of the nop.
...And 20 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
the standard arithmetic operators are supported, including
addition, subtraction, modulus (or remainder) arithmetic, and so forth.
... the + operator also does string concatenation: 'hello' + ' world'; // "hello world" if you
add a string to a number (or other value) everything is converted into a string first.
... this might trip you up: '3' + 4 + 5; // "345" 3 + 4 + '5'; // "75"
adding an empty string to something is a useful way of converting it to a string itself.
...And 20 more matches
The Essentials of an Extension - Archive of obsolete content
there are two accepted standards for
add-on ids.
... <em:name>xul school hello world</em:name> <em:description>welcome to xul school!</em:description> <em:version>0.1</em:version> <em:creator>appcoast</em:creator> <em:homepageurl>https://developer.mozilla.org/docs/xul_school</em:homepageurl> this is the data that is displayed before and after the extension is installed, that you can see in the
add-ons manager.
... there are many other tags that can be
added, for contributors and translators.
...And 19 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
this centralized preference file can lock preferences (lockpref) or initialize them (defaultpref) based on environment variables (user, home...) and/or ldap queries (fetch email
address, common name , language, homepage etc...) from the enterprise directory.
... the name of the file can be anything you want because it is named by a general.config preference that should be
added at the end of file mozilla_home/default/pref/autoconf.js or mozilla_home/greprefs/autoconf.js: pref("general.config.filename", "mozilla.cfg");.
... autoconfig directives here we want to set users central mail preferences: create one account from their login name, get their email
address from an ldap request and set the enterprise imap and smtp servers.
...And 19 more matches
Floats - Learn web development
first, we'll start off with some simple html —
add the following to your html body, removing anything that was inside there before: <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...tibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); p
adding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it
add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); p
adding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 19 more matches
Practical positioning examples - Learn web development
in
addition, so-called "single page apps" are becoming very popular — especially for mobile web uis — because having everything served as a single file cuts down on the number of http requests required to view all the content, thereby improving performance.
... general setup to begin with,
add the following between your opening and closing <style> tags: html { font-family: sans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin.
... next,
add the following just below your previous css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick.
...And 19 more matches
TypeScript support in Svelte - Learn web development
then you'll have to tell npm to download dependencies and start the project in development mode, like we usually do: npm install npm run dev
adding typescript support to an existing svelte project to
add typescript support to an existing svelte project you can follow these instructions.
...you can now start
adding types progressively.
... once you have typescript configured, you can start using it from a svelte component by just
adding a <script lang='ts'> at the beginning of the script section.
...And 19 more matches
Mozilla DOM Hacking Guide
"interface flattening is the ability to call methods on an object regardless of the interface it was defined on." for example, when we have the document object in javascript, we can call indistinctly document.getelementbyid(), or document.
addeventlistener(), although they are defined on two different interfaces (domdocument and domeventtarget.
... static prbool sdosecuritycheckin
addproperty;: help me!
...we pass the
address of this nsiid object to the second macro.
...And 19 more matches
Profiling with the Firefox Profiler
in
addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much information as the firefox profiler web app.
... custom annotations in bug 1334218 an annotation was
added to presshell::paint to show the url of the document being painted.
... these annotations are not too complex to
add so if you would like something
added, file a bug.
...And 19 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
cation-----" #define ns_cert_vfy_trailer "-----end certificate for signature verification-----" #define ns_sig_header "-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* sample 6 commands */ typedef enum { generate_csr,
add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certenc= 7, certvfy= 8, sig = 9 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { ...
..._fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request file name not found\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-g -d <dbdirpath> -s <subject> -r <csr> \n"); exit(-1); } } /* * validate the options used for
add cert to db command */ static void validate
addcerttodbcommand(const char *progname, const char *dbdir, const char *nicknamestr, const char *truststr, const char *certfilename, const char *certreqfilename, const char *issuernames...
...(char *infilename, prbool ascii) { certsigneddata signeddata; secitem reqder; certcertificaterequest *certreq = null; secstatus rv = secsuccess; prarenapool *arena = null; reqder.data = null; arena = port_newarena(der_default_chunksize); if (arena == null) { rv = secfailure; goto cleanup; } rv = re
adderfromfile(&reqder, infilename, ascii); if (rv) { rv = secfailure; goto cleanup; } certreq = (certcertificaterequest*) port_arenazalloc (arena, sizeof(certcertificaterequest)); if (!certreq) { rv = secfailure; goto cleanup; } certreq->arena = arena; /* since cert request is a signed data, must decode to get the ...
...And 19 more matches
nsINavBookmarkObserver
inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbeforeitemremoved(in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onendupdatebatch(); void onfolder
added(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 folder, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print64 folder, in print64...
... parent, in print32 index); obsolete since gecko 1.9 void onitem
added(in long long aitemid, in long long aparentid, in long aindex, in unsigned short aitemtype, in nsiuri auri, in autf8string atitle, in prtime adate
added, in acstring aguid, in acstring aparentguid); void onitemchanged(in long long aitemid, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); void onitemmoved(in long long aitemid, in long long aoldparentid, in long aoldindex, in long long anewparentid, in long anewindex, in unsigned short aitemtype, in acstring aguid, in acstring aoldparentguid, in acstring anewparentguid); void onitemremov...
...siuri auri, in acstring aguid, in acstring aparentguid); void onitemreplaced(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void onitemvisited(in long long aitemid, in long long avisitid, in prtime atime, in unsigned long atransitiontype, in nsiuri auri, in long long aparentid, in acstring aguid, in acstring aparentguid); void onseparator
added(in print64 parent, in print32 index); obsolete since gecko 1.9 void onseparatorremoved(in print64 parent, in print32 index); obsolete since gecko 1.9 methods onbeforeitemremoved() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409.
...And 19 more matches
Zombie compartments
they can be caused by bugs in firefox itself, or by bugs in firefox
add-ons.
... firefox’s own javascript code also gets one or more compartments and so do
add-on scripts.
... viewing live compartments if you want to see a list of live compartments, type "about:memory" into the
address bar and click on the measure button.
...And 19 more matches
Element - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... eventtarget.
addeventlistener() registers an event handler to a specific event type on the element.
... element.toggleattribute() toggles a boolean attribute, removing it if it is present and
adding it if it is not present, on the specified element.
...And 19 more matches
@media - CSS: Cascading Style Sheets
/* at the top level of your code */ @media screen and (min-width: 900px) { article { p
adding: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries.
... deprecated media types: css2.1 and media queries 3 defined several
additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used.
...
added in media queries level 4.
...And 19 more matches
passwords - Archive of obsolete content
interact with firefox's password manager to
add, retrieve and remove stored credentials.
...different sorts of stored credentials include various
additional properties, as outlined in this section.
... you can use the passwords api with three sorts of credentials:
add-on credentials html form credentials http authentication credentials
add-on credential these are associated with your
add-on rather than a particular web site.
...And 18 more matches
Localization - Archive of obsolete content
the sdk supports localization of strings appearing in: your main
add-on's javascript code html files packaged with your
add-on the title, description and homepage fields of your
add-on's metadata the title and description fields of your
add-on's preferences.
... it doesn't, yet, support localization of css or content scripts, or the
add-on's title and description that appear in the
add-ons manager.
... localized strings translated strings are kept in a directory called "locale" under your main
add-on directory, one file for each locale.
...And 18 more matches
Setting up your own test automation environment - Learn web development
add the chromedriver and geckodriver driver's location to your system path variable.
... note: just to reiterate, the path you
add to path needs to be the path to the directory containing the drivers, not the paths to the drivers themselves!
... paste the following into the bottom of your file (updating the path as it actually is on your machine): #
add webdriver browser drivers to path export path=$path:/users/bob save and close this file, then restart your terminal/command prompt to reapply your bash configuration.
...And 18 more matches
sample2
*/ #ifndef port_errortostring #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif /* sample 6 commands */ typedef enum { generate_csr,
add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certenc= 7, certvfy= 8, sig = 9 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s %s %s %s %s %s %s %s %s %s\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirp...
...ogname, dbdir, subjectstr); validationfailed = pr_true; } if (!certreqfilename) { pr_fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request file name not found\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-g -d <dbdirpath> -s <subject> -r <csr> \n"); exit(-1); } } /* * validate the options used for
add cert to db command */ static void validate
addcerttodbcommand(const char *progname, const char *dbdir, const char *nicknamestr, const char *truststr, const char *certfilename, const char *certreqfilename, const char *issuernamestr, const char *serialnumberstr, prbool selfsign) { prbool validationfailed = pr_false; if (!nicknamestr) { pr_fprintf(pr_stderr, "%s -a -d %s -n : nick name is missing\n",...
...rivkey; } /* * get the certificate request from csr */ static certcertificaterequest * getcertrequest(char *infilename, prbool ascii) { certsigneddata signeddata; secitem reqder; certcertificaterequest *certreq = null; secstatus rv = secsuccess; prarenapool *arena = null; reqder.data = null; arena = port_newarena(der_default_chunksize); if (arena == null) { rv = secfailure; goto cleanup; } rv = re
adderfromfile(&reqder, infilename, ascii); if (rv) { rv = secfailure; goto cleanup; } certreq = (certcertificaterequest*) port_arenazalloc (arena, sizeof(certcertificaterequest)); if (!certreq) { rv = secfailure; goto cleanup; } certreq->arena = arena; /* since cert request is a signed data, must decode to get the inner data */ port_memset(&signeddata, 0, sizeof(signeddata)); rv = sec_asn1decodeitem(...
...And 18 more matches
Understanding WebAssembly text format - WebAssembly
if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version
adding functionality to your module ok, that’s not very interesting, let’s
add some executable code to this module.
... for example, local.get is defined to push the value of the local it read onto the stack, and i32.
add pops two i32 values (it implicitly grabs the previous two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the resulting i32 value.
...so for example, after executing the following function: (func (param $p i32) (result i32) local.get $p local.get $p i32.
add) the stack contains exactly one i32 value — the result of the expression ($p + $p), which is handled by i32.
add.
...And 18 more matches
dev/panel - Archive of obsolete content
for a simple walkthrough of using the dev/panel api to
add a new tool, see
adding a panel to the toolbox.
... basic usage defining the panel constructor to
add a new tool you first need to define a constructor that inherits from the panel class, and in that constructor you need to supply values for various properties .
... you can set the constructor up manually if you like, or you can use the
add-on sdk core/heritage module to simplify the mechanics of inheriting from panel.
...And 17 more matches
Release notes - Archive of obsolete content
firefox 35 highlights
added access keys for context menu.
... "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file")
added the ability to attach stylesheets to individual tabs.
... firefox 33 highlights
added support for context menus in panels via a new option in the panel constructor.
...And 17 more matches
cfx to jpm - Archive of obsolete content
the
add-on sdk includes a command-line tool that you use to initialize, run, test, and package
add-ons.
...
add-on incompatibilities in most respects,
add-ons created with cfx will work fine with jpm.
...
add-on id the
add-on id is a unique identifier for your
add-on.
...And 17 more matches
Menu - Archive of obsolete content
note: this page documents the jetpack prototype, which has since been replaced by the
add-on sdk.
... please see the wiki page and online documentation for more information on how to use the
add-on sdk.
... methods
add(items) clear() contexton(node) hide() insertbefore(newitems, target) item(target) popupon(node) remove(target) replace(target, newitems) reset() set(items) show(anchornode)
add(items)
adds items to the ...
...And 17 more matches
Common causes of memory leaks in extensions - Extensions
while bug 695480 should prevent most of these compartment leaks,
add-ons still need to be aware of the practices that caused these leaks, as the fix causes many
add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist.
... for some examples found in real-world
add-ons, see bug 712733, bug 725875, and bug 727552.
...consider the following example code that could be part of your browser.xul overlay: gbrowser.
addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...And 17 more matches
Building up a basic demo with Babylon.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: babylon.js demo</title> <style> html,body,canvas { margin: 0; p
adding: 0; width: 100%; height: 100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the...
...
add the following code to the bottom of your second <script> element: var engine = new babylon.engine(canvas); the babylon global object contains all the babylon.js functions available in the engine.
...while creating new objects in the demo, we will be
adding them all to the scene to make them visible on the screen.
...And 17 more matches
Introduction to CSS layout - Learn web development
in
addition to being able to change the default presentation by turning an item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display.
... however, when using these, you will generally need to invoke
additional properties.
... however, if we
add display: flex to the parent, the three items now arrange themselves into columns.
...And 17 more matches
Positioning - Learn web development
static positioning static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here." to demonstrate this, and get your example set up for future sections, first
add a class of positioned to the second <p> in the html: <p class="positioned"> ...
... </p> now
add the following rule to the bottom of your css: .positioned { position: static; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph.
...to try this out,
add the following declarations to the .positioned rule in your css: top: 30px; left: 30px; note: the values of these properties can take any units you'd logically expect — pixels, mm, rems, %, etc.
...And 17 more matches
Introduction to events - Learn web development
ways of using web events there are a number of ways to
add event listener code to web pages so it runs when the associated event fires.
...you'd have to
add 100 attributes to the file; it would quickly turn into a maintenance nightmare.
... with javascript, you could easily
add an event handler function to all the buttons on the page no matter how many there were, using something like this: const buttons = document.queryselectorall('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = bgchange; } note that another option here would be to use the foreach() built-in method available on nodelist objects: buttons.foreach(function(button) { button.onclick = bgchange; }); note: separating your programming logic from your content also makes your site more friendly to search engines.
...And 17 more matches
A first splash into JavaScript - Learn web development
e below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; p
adding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
... } else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.
addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.
addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; co...
... the place where we'll be
adding all our code is inside the <script> element at the bottom of the html: <script> // your javascript goes here </script>
adding variables to store our data let's get started.
...And 17 more matches
Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side javascript frameworks next at this point we'll start
adding some interactivity to our app, providing the ability to
add and display new todo items.
...
adding interactivity now we've got a refactored componentized version of our todo app, lets walk through how we can
add the interactivity we need to make the app functional.
... we can capture the keydown event via the on modifier, which is just ember syntactic sugar around
addeventlistener and removeeventlistener (see this explanation if needed).
...And 17 more matches
Deploying our app - Learn web development
previous overview: understanding client-side tools in the final article in our series, we take the example toolchain we built up in the previous article and
add to it so that we can deploy our sample app.
... we push the code to github, deploy it using netlify, and even show you how to
add a simple test into the process.
... the build process again, because we're using parcel for development, the build option is extremely simple to
add.
...And 17 more matches
Extending a Protocol
implementing the navigator.echo() in your favorite editor, open dom/webidl/navigator.webidl at the end of the file,
add: partial interface navigator { [throws] promise<domstring> echo(domstring astring); }; now we need to implement the echo() method in c++, so open up ./dom/base/navigator.h and let's
add the method definition, so under public:: already_
addrefed<promise> echo(const nsastring& astring, errorresult& arv); we use nsastring& as the domstring comes in from js as utf-16.
... now let's implement the method in ./dom/base/navigator.cpp - we
add a little bit of error boilerplate stuff, as is customary: already_
addrefed<promise> navigator::echo(const nsastring& astring, errorresult& arv) { if (!mwindow || !mwindow->getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(mwindow->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing magic will happen here!
... 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.
...And 17 more matches
NSS Tools certutil
-s create an individual certificate and
add it to a certificate database.
... -a
add an existing certificate to a certificate database.
...use the exact nickname or alias of the ca certificate, or use the ca's email
address.
...And 17 more matches
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d...
...see signaling in lifetime of a webrtc session for more details about the signaling process.event handlersalso inherits event handlers from: eventtargeton
addstream the rtcpeerconnection.on
addstream event handler is a property containing the code to execute when the
addstream event, of type mediastreamevent, is received by this rtcpeerconnection.
... such an event is sent when a mediastream is
added to this connection by the remote peer.
...And 17 more matches
Using media queries - CSS: Cascading Style Sheets
to test and monitor media states using the window.matchmedia() and mediaquerylist.
addlistener() javascript methods.
... deprecated media types: css2.1 and media queries 3 defined several
additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used.
...
added in media queries level 4.
...And 17 more matches
page-worker - Archive of obsolete content
this can point to a remote file: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: "http://en.wikipedia.org/wiki/internet" }); it can also point to an html file which you've packaged with your
add-on.
... to do this, save the file in your
add-on's data directory and create the url using the data.url() method of the self module: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: require("sdk/self").data.url("myfile.html") }); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
...with contentscriptfile you pass a url which points to a script saved under your
add-on's data directory.
...And 16 more matches
Index - Game development
26 audio for web games audio, games, web audio api, audio sprites, spatialization, syncing tracks audio is an important part of any game; it
adds feedback and atmosphere.
... 33 mobile touch controls controls, games, javascript, mobile, pointer, touch that covers
adding touch controls for mobile; in the next article we'll see how to
add keyboard and mouse support.
... 34 unconventional controls controls, doppler, games, javascript, makey makey, proximity, tv leap motion, voice i hope you liked the experiments — if you have any others that you think might interest other people, feel free to
add details of them here.
...And 16 more matches
Index
found 689 pages: # page tags and summary 1
add-ons
add-ons, extension, extensions, landing, mozilla
add-ons allow developers to extend and modify the functionality of firefox.
... 675 creating an appealing
add-on listing
add-ons, beginner, guide, webextension, publishing there are two essential steps to getting people to use your
add-on: they need to discover your
add-on and open the listing page, then the listing page needs to encourage them to click the
add to firefox button.
... the content you
add to a listing is therefore vital: from making effective use of keywords in your descriptions, to get visibility in external search engine results, through having an icon that attracts a user’s attention from a category list, to screenshots that show how useful your
add-on is.
...And 16 more matches
Performance
key points to keep in mind scripts registered during
addon startup get executed during session restore.
... performance best practices declaring stateless functions once per process bad: //
addon.js services.mm.loadframescript("framescript.js", true) // framescript.js const precomputedconstants = // ...
... do some work on the window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-
addon:response-from-child", {something: result}) }
addmessagelistener("my-
addon:request-from-parent", dosomething) why is this bad?
...And 16 more matches
InstallListener
installlisteners are notified of an
addoninstall's progress.
... they may be registered to hear events from all
addoninstalls through
addinstalllistener or to a single
addoninstall through
addlistener.
... method overview void onnewinstall(in
addoninstall install) void ondownloadstarted(in
addoninstall install) void ondownloadprogress(in
addoninstall install) void ondownloadended(in
addoninstall install) void ondownloadcancelled(in
addoninstall install) void ondownloadfailed(in
addoninstall install) void oninstallstarted(in
addoninstall install) void oninstallended(in
addoninstall install, in
addon
addon) void oninstallcancelled(in
addoninstall install) void oninstallfailed(in
addoninstall install) void onexternalinstall(in
addon install, in
addon existing
addon, in boolean needsrestart) methods onnewinstall() called when a new instance of
addoninstall is created, primarily so ui can di...
...And 16 more matches
XPIDL
writing xpidl interface files xpidl closely resembles omg idl, with extended syntax to handle iids and
additional types.
...in
addition, there are a few built-in native types.
... in
addition to this list, nearly every idl file includes nsrootidl.idl in some fashion, which also defines the following types: table 2: types provided by nsrootidl.idl idl typedef c++ in parameter c++ out parameter js type notes prtime (xpidl unsigned long long typedef, 64 bits) number prtime is in microseconds, while js date assumes time in milliseconds ...
...And 16 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in
addition to the ability to place items accurately onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each gri...
...if you have created
additional rows using the grid-template-rows property then grid will continue placing items in these rows.
...And 16 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
with css, there are lots of ways to
add color to your html elements to create just the look you want.
... fortunately,
adding color to your html is actually really easy to do, and you can
add color to nearly anything.
... color the color to use when drawing the text and any text decorations (such as the
addition of under- or overlines, strike-through lines, and so forth.
...And 16 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
see our autoplay guide for
additional information about how to properly use autoplay.
...see cors settings attributes for
additional information.
...in
addition to providing controllability, these events let you monitor the progress of both download and playback of the media, as well as the playback state and position.
...And 16 more matches
Proxy Auto-Configuration (PAC) file - HTTP
additional attempts will continue beginning at one hour, always
adding 30 minutes to the elapsed time between attempts.
...after 20 minutes, the browser will ask if proxies should be retried, asking again after an
additional 40 minutes.
... queries will continue, always
adding 20 minutes to the elapsed time between queries.
...And 16 more matches
Communicating With Other Scripts - Archive of obsolete content
this section of the guide explains how content scripts can communicate with: your main.js file, or any other modules in your
add-on other content scripts loaded by your
add-on page scripts (that is, scripts embedded in the web page or included using <script> tags) main.js your content scripts can communicate with your
add-on's "main.js" (or any other modules you're written for your
add-on) by sending it messages, using either the port.emit() api or the postmessage() api.
...any two content scripts can communicate by using the main
add-on script to manually relay messages between the content scripts.
... for example: if an
add-on creates a single panel object and loads several content scripts into the panel at the same time, then they can interact with each other.
...And 15 more matches
Interacting with page scripts - Archive of obsolete content
by default, content scripts loaded by
add-ons and scripts loaded by web pages are insulated from each other: content scripts can't interact directly with page scripts or access javascript objects they create page scripts can't interact directly with content scripts or access objects they create.
... in this example a page script
adds a string variable foo to the window: <!doctype html"> <html> <head> <script> window.foo = "hello from page script" </script> </head> </html> the content script can see this object if it uses unsafewindow.foo instead of window.foo: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.ht...
... expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from
add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.
addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from
add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...And 15 more matches
simple-prefs - Archive of obsolete content
you can store booleans, integers, and string values, and users can configure these preferences in the
add-ons manager.
... this gives users a consistent way to access and modify preferences across different
add-ons.
... this api is for your
add-on's preferences.
...And 15 more matches
ui/sidebar - Archive of obsolete content
a sidebar is a vertical strip of user interface real estate for your
add-on that's attached to the left-hand side of the browser window.
...unlike modules such as panel, the content must be local, typically loaded from the
add-on's data directory via a url constructed using self.data.url(): var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); from firefox 34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").
... communicating with sidebar scripts you can't directly access your sidebar's content from your main
add-on code, but you can send messages between your main
add-on code and scripts loaded into your sidebar.
...And 15 more matches
Autodial for Windows NT - Archive of obsolete content
if you turn on the autodial feature, windows will automatically dial whenever any application tries to access a network
address that can't be reached.
...microsoft
added a windows system service (remote access auto connection) to handle autodial for all other applications.
... if this service is running, and control panel | network connections | advanced | dialup preferences is set to enable autodial, then any application trying to access the internet will trigger the autodial feature whenever an internet
address cannot be reached.
...And 15 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
this article explains how to
add a toolbar button to a toolkit application (such as firefox, thunderbird, or kompozer) using overlays.
...
adding the toolbar button toolkit applications have customizable toolbars; therefore, it's common practice for extensions to
add their toolbar buttons to the toolbar palette, rather than
adding them directly to the toolbar.
...
adding a button to the toolbar palette is very easy.
...And 15 more matches
Building up a basic demo with A-Frame - Game development
when creating new objects in the demo, we will be
adding them all to the scene to make them visible on the screen.
... let's create the scene by
adding an <a-scene> element inside the <body> element: <a-scene> </a-scene>
adding a cube
adding the cube to the scene is done by
adding a simple <a-box> element inside the <a-scene> element.
...
add it now: <a-box color="#0095dd" position="0 1 0" rotation="20 40 0"> </a-box> it contains a few parameters already defined: color, position and rotation — these are fairly obvious, and define the base color of the cube, the position inside the 3d scene, and the rotation of the cube.
...And 15 more matches
Building up a basic demo with PlayCanvas editor - Game development
to
add an entity to the scene you have to click on the big plus button located in the top left area of the editor, next to the hierarchy text.
... when hovering over that button with your mouse the label will say '
add entity' — that's exactly what we want to do.
...go ahead and click box — it will be
added to the scene.
...And 15 more matches
WAI-ARIA basics - Learn web development
wai-aria is a technology that can help with such problems by
adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on.
... objective: to gain familiarity with wai-aria, and how it can be used to provide useful
additional semantics to enhance accessibility where required.
... the initial solution was to
add one or more hidden links at the top of the page to link to the navigation (or whatever else), for example: <a href="#hidden" class="hidden">skip to navigation</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page.
...And 15 more matches
Grids - Learn web development
add this to the css inside your file: .container { display: grid; } unlike flexbox, the items will not immediately look any different.
... to see something that looks more grid-like, we will need to
add some columns to the grid.
... let's
add three 200-pixel columns here.
...And 15 more matches
Getting started with CSS - Learn web development
adding css to our document the very first thing we need to do is to tell the html document that we have some css rules we want it to use.
... to link styles.css to index.html
add the following line somewhere inside the <head> of the html document: <link rel="stylesheet" href="styles.css"> this <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute.
... you can test that the css works by
adding a rule to styles.css.
...And 15 more matches
HTML text fundamentals - Learn web development
this article explains the way html can be used to structure a page of text by
adding headings and paragraphs, emphasizing words, creating lists, and more.
...in the example below,
add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field.
...: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.
addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.
addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution...
...And 15 more matches
HTML table advanced features and accessibility - Learn web development
adding a caption to your table with <caption> you can give your table a caption by putting it inside a <caption> element and nesting that inside the <table> element.
...we'd recommend using the <caption> element instead, however, as summary is deprecated by the html5 spec, and can't be read by sighted users (it doesn't appear on the page.) active learning:
adding a caption let's try this out, revisiting an example we first met in the previous article.
...
add a suitable caption for the table.
...And 15 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
passing parameters to a settimeout() function any parameters that you want to pass to the function being run inside the settimeout() must be passed to it as
additional parameters at the end of the list.
... put an empty <div> element inside the <body>, then
add a ↻ character inside it.
... const spinner = document.queryselector('div'); let rotatecount = 0; let starttime = null; let raf; below the previous code, insert a draw() function that will be used to contain our animation code, which includes the timestamp parameter: function draw(timestamp) { } inside draw(),
add the following lines.
...And 15 more matches
Understanding client-side JavaScript frameworks - Learn web development
beginning our react todo list let's say that we’ve been tasked with creating a proof-of-concept in react – an app that allows users to
add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.
... this article will walk you through putting the basic app component structure and styling in place, ready for individual component definition and interactivity, which we'll
add later.
...react interactivity: editing, filtering, conditional rendering as we near the end of our react journey (for now at least), we'll
add the finishing touches to the main areas of functionality in our todo list app.
...And 15 more matches
NSS API Guidelines
in
addition, some low-level apis may be completely opaque to higher level layers.
...the certdb library manipulates the certificate database (
add, create, delete certificates and crls).
... it also provides general certificate-handling routines (create a certificate, verify,
add/check certificate extensions).
...And 15 more matches
NSS tools : modutil
modutil can
add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... options -
add modulename
add the named pkcs #11 module to the database.
... -jar jar-file
add a new pkcs #11 module to the database using the named jar file.
...And 15 more matches
NSS Tools crlutil
list of possible algorithms: md2 | md4 | md5 | sha1 | sha256 | sha384 | sha512 -n nickname specify the nickname of a certificate or key to list, create,
add to a database, modify, or validate.
... for example: 20050204153000z
add an extension to a crl or a crl certificate entry:
addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... arg1, arg2: specific to extension type extension parameters
addext uses the range that was set earlier by
addcert and will install an extension to every cert entries within the range.
...And 15 more matches
NSS tools : modutil
modutil can
add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... options -
add modulename
add the named pkcs #11 module to the database.
... -jar jar-file
add a new pkcs #11 module to the database using the named jar file.
...And 15 more matches
Handling Mozilla Security Bugs
version 1.1 important: anyone who believes they have found a mozilla-related security vulnerability can and should report it by sending email to
address security@mozilla.org.
...at the same time, mozilla.org is also creating a larger "mozilla security bug group" by which mozilla contributors and others can participate in
addressing security vulnerabilities in mozilla.
... note that the focus of this new structure is restricted solely to
addressing actual security vulnerabilities arising from problems in mozilla code.
...And 15 more matches
Places utilities for JavaScript
string wrapnode(nsinavhistoryresultnode anode, string atype, nsiuri aoverrideuri); array unwrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexcludeitems, boolean aexpandqueries); boolean show
addbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showminimal
addbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker, boolean aloadinsidebar, string akeyword, string apostdata); boolean show
addlivemar...
...kui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimal
addlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimal
addmultibookmarkui(array nsiuri aurilist); boolean showbookmarkproperties(int aid); boolean showfolderproperties(int aid); boolean show
addfolderui(string atitle, int adefaultinsertionpoint, boolean ashowpicker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); ...
... the showminimal
add methods open the dialog by its alternative uri.
...And 15 more matches
Applying styles and colors - Web APIs
you will learn how to
add different colors, line styles, gradients, patterns and shadows to your drawings.
...tx.strokestyle = 'rgb(0, ' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample transparency in
addition to drawing opaque shapes to the canvas, we can also draw semi-transparent (or translucent) shapes.
...see the next two sections for demonstrations of these
additional line styles.
...And 15 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
these issues have since been
addressed, letting us simplify our webrtc negotiation significantly.
... the best thing about perfect negotiation is that the same code is used for both the caller and the callee, so there's no repetition or otherwise
added levels of negotiation code to write.
...the stun server listed here is obviously not a real one; you'll need to replace stun.myserver.tld with the
address of a real stun server.
...And 15 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these ...
...
addressing each item individually we can place all four items spanning row and column tracks.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box3 {...
...And 15 more matches
HTTP Index - HTTP
on top of these basic concepts, numerous extensions have appeared over the years,
adding new functionality and new semantics by creating new http methods or headers.
... 16 content security policy (csp) csp, content security policy, reference, security content security policy (csp) is an
added layer of security that helps to detect and mitigate certain types of attacks, including cross site scripting (xss) and data injection attacks.
...this serves as an
additional layer of protection above and beyond the same-origin policy which can mitigate speculative side channel attacks as well as cross-site script inclusion attacks.
...And 15 more matches
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a load event handler and a little code.
... it is also common for an
add-on to require to run a script only when it is installed for the first time, or every time it is updated.
... it can be used to write or copy necessary files to the profile folder, like the initial db the
add-on will use for storage.
...And 14 more matches
The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and p
addings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
...in order to use this page, you'll need to install the remote xul manager extension and
add developer.mozilla.org to the whitelist.
... here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was
added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient css property.
...And 14 more matches
Tabbed browser - Archive of obsolete content
// gbrowser is only accessible from the scope of // the browser window (browser.xul) gbrowser.
addtab(...); if gbrowser isn't defined your code is either not running in the scope of the browser window or running too early.
...s.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.gbrowser.
addtab(...); from a dialog if your code is running in a dialog opened directly by a browser window, you can use: window.opener.gbrowser.
addtab(...); if window.opener doesn't work, you can get the most recent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var mainwind...
...ow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.
addtab(...); opening a url in a new tab //
add tab gbrowser.
addtab("http://www.google.com/"); //
add tab, then make active gbrowser.selectedtab = gbrowser.
addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
...And 14 more matches
Promises - Archive of obsolete content
on failed", e); } } }); can be converted to a pure promise-based equivalent as such: request("login", { username: user, password: password }) .then(response => { if (response.messages) return publish({ username: user, messages: response.messages }); }) .then(null, (e) => { self.reporterror("publication failed", e); }); file io file io in
add-ons should be done via the os.file api, which provides a simple, but powerful, interface for reading, writing, and manipulating both text and binary files.
... let processor = new fileprocessor(); for (let file of files) { let data = yield os.file.read(file); processor.
add(data); } // now write the processed files back out, as a binary blob.
... let download_2 = yield downloads.createdownload({ source: url_2, target: path_2, }); //
add it to the downloads list used by the download manager ui.
...And 14 more matches
Creating a Microsummary - Archive of obsolete content
in each step of revising the transform sheet and other code in this tutorial, new material
added will be shown in boldface so you can follow along more easily.
...to begin building the generator, create a new empty text file and
add an xml declaration and empty <generator> tag to it: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1"> </generator> giving it a name generators should have name attributes which are arbitrary descriptions of the microsummaries the generator creates.
...since our generator will be creating microsummaries displaying the firefox download count, let's give it the name "firefox download count": <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> </generator>
adding an xslt transform sheet generators must include an xslt transform sheet (also known as an xslt stylesheet) which transforms the page content into its microsummary.
...And 14 more matches
Cross Package Overlays - Archive of obsolete content
for example, you could
add menu items or toolbars to the mozilla browser window.
... we'll use this feature to
add a toolbar to the mozilla browser window.
... the mozilla mail application uses overlays to
add content to the browser window.
...And 14 more matches
RDF in Mozilla FAQ - Archive of obsolete content
ar remote = ds.queryinterface(components.interfaces.nsirdfremotedatasource); if (remote.loaded) { alert("the datasource was already loaded!"); } else { alert("the datasource wasn't loaded, but it's loading now!"); // rdf/xml datasources are all nsirdfxmlsinks var sink = ds.queryinterface(components.interfaces.nsirdfxmlsink); // attach the observer to the datasource-as-sink sink.
addxmlsinkobserver(observer); // now observer's methods will be called-back as // the load progresses.
... to use 'assert' to
add one assertion and 'unassert' to remove one.
...for example, the following xul fragment illustrates how to
add the bookmarks service as a datasource into a xul template.
...And 14 more matches
CSS basics - Learn web development
(for example, there are many color values in
addition to red.) note the other important parts of the syntax: apart from the selector, each ruleset must be wrapped in curly braces.
... fonts and text now that we've explored some css fundamentals, let's improve the appearance of the example by
adding more rules and information to the style.css file.
...
add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags).
...And 14 more matches
Arrays - Learn web development
here we look at why this is useful, then explore how to create an array, retrieve,
add, and remove items stored in an array, and more besides.
... if we didn't have arrays, we'd have to store every item in a separate variable, then call the code that does the printing and
adding separately for each item.
...if we had 10 items to
add to the invoice it would already be annoying, but what about 100 items, or 1000?
...And 14 more matches
Introduction to automated testing - Learn web development
this is a great way to perform tasks like linting and minifying code,
adding in css prefixes or transpiling nascent javascript features for maximum cross-browser reach, and so on.
... you can run your gulp task with the following commands — try this now: gulp
adding some real tasks to gulp to
add some real tasks to gulp, we need to think about what we want to do.
... autoprefixer to scan our css and
add vendor prefixes only where needed (see gulp-autoprefixer).
...And 14 more matches
NSS functions
updated - function has new arguments such as new flag or
addition to structure.
...in
addition to the functions listed here, applications that support ssl use some of the certificate functions, crypto functions, and utility functions described below on this page.
... the nss home page links to
additional ssl documentation.
...And 14 more matches
NSS tools : crlutil
list of possible algorithms: md2 | md4 | md5 | sha1 | sha256 | sha384 | sha512 -n nickname specify the nickname of a certificate or key to list, create,
add to a database, modify, or validate.
...for example: 20050204153000z *
add an extension to a crl or a crl certificate entry:
addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... arg1, arg2: specific to extension type extension parameters
addext uses the range that was set earlier by
addcert and will install an extension to every cert entries within the range.
...And 14 more matches
NSS tools : crlutil
list of possible algorithms: md2 | md4 | md5 | sha1 | sha256 | sha384 | sha512 -n nickname specify the nickname of a certificate or key to list, create,
add to a database, modify, or validate.
...for example: 20050204153000z *
add an extension to a crl or a crl certificate entry:
addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... arg1, arg2: specific to extension type extension parameters
addext uses the range that was set earlier by
addcert and will install an extension to every cert entries within the range.
...And 14 more matches
Places Developer Guide
bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for
adding, editing and deleting items in the bookmarks collection.
... accessing bookmarks and related items accessing item properties for all items: string getitemtitle(aitemid) - returns an item's title int64 getitemindex(aitemid) - returns an item's position in it's parent folder prtime getitemtype(aitemid) - returns the type of an item (bookmark, folder, separator) prtime getitemdate
added(aitemid) - returns the time in microseconds that an item was
added prtime getitemlastmodified(aitemid) - returns the time in microseconds that an item was last modified int64 getfolderidforitem(aitemid) - returns the id of the folder containing the given item.
... setitemdate
added(aitemid, adate
added) - set the date the item was first
added, in microseconds.
...And 14 more matches
Mozilla
in
addition, you'll find helpful articles about how the code works, how to build
add-ons for mozilla applications and the like.
...
add-ons
add-ons allow developers to extend and modify the functionality of firefox.
...
adding a new css property this page describes how to
add a new css property to the style system.
...And 14 more matches
ARIA: button role - Accessibility
adding role="button" will make an element appear as a button control to a screen reader.
... in
addition to the ordinary button widget, role="button" should be included when creating a toggle button or menu button using a non button element.
... whether an element is a toggle button or not can be indicated with the aria-pressed attribute in
addition to the button role (if the element is not already a native button element): if aria-pressed is not used, or is set to the "undefined" state, the button is not a toggle button.
...And 14 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email
address.
...displays a spinner and
adds default validation when supported.
...in
addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.
...And 14 more matches
Working with objects - JavaScript
in
addition to objects that are predefined in the browser, you can define your own objects.
... = 'string value'; myobj[rand] = 'random number'; myobj[obj] = 'object'; myobj[''] = 'even an empty string'; console.log(myobj); please note that all keys in the square bracket notation are converted to string unless they're symbols, since javascript object property names (keys) can only be strings or symbols (at some point, private names will also be
added as the class fields proposal progresses, but you won't use them with [] form).
... for example, in the above code, when the key obj is
added to the myobj, javascript will call the obj.tostring() method, and use this result string as the new key.
...And 14 more matches
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.
...
add the following to your script, below the first block: webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the net result of this is that we call our exported webassembly function exported_func, which in turn calls our imported javascript function imported_func, which logs the value provided inside the webassembly instance (42) ...
... starting soon in firefox, in
addition to viewing webassembly as text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) webassembly using the text format.
...And 14 more matches
Developing for Firefox Mobile - Archive of obsolete content
with the
add-on sdk you can develop
add-ons that run on this new version of firefox mobile as well as on the desktop version of firefox.
... right now not all modules are fully functional, but we're working on
adding support for more modules.
... this tutorial explains how to run sdk
add-ons on an android device connected via usb to your development machine.
...And 13 more matches
Building accessible custom components in XUL - Archive of obsolete content
se"/> <label value="conference fee" flex="1"/> <label value="lodging" flex="1"/> <label value="dinner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to
add some minimal styling to make it actually look like a spreadsheet.
... <code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; p
adding: 3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; p
adding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
...further reading grid element reference description element reference label element reference grid tutorial label tutorial
adding roles with dhtml accessibility download stage-2.zip install stage-2.xpi using the new dhtml accessibility techniques in firefox 1.5, we can declare the role of each element in our spreadsheet.
...And 13 more matches
MenuModification - Archive of obsolete content
modifying a menu menus have a number of methods which may be used to
add and remove items.
...
adding items to a menu the appenditem method may be used to append a new item to the end of the popup associated with a menu.
... <script> function
addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="
add" oncommand="
addtomenu()"/> in this example, the
addtomenu function is called when the button is pressed.
...And 13 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 con...
... the button element has two attributes "label" and "oncommand" a javascript function named "
addbutton()" this script first gets a reference to the box with getelementbyid(), which is the container to
add a new button to.
...
addbutton() the calls the createelement() function to create a new button.
...And 13 more matches
tabbrowser - Archive of obsolete content
onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods
addprogresslistener,
addtab,
addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, ...
...this is useful for
add-ons that need to use events related to tabs in the browser window.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...And 13 more matches
How CSS is structured - Learn web development
html lang="en"> <head> <meta charset="utf-8"> <title>my css experiments</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>create your test html here</p> </body> </html> styles.css: /* create your test css here */ p { color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then
add your test css code to your css file.
...
add html to be styled by the selectors.
...
add html, then
add the two p { ...
...And 13 more matches
CSS property compatibility table for form controls - Learn web development
margin yes yes p
adding partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
... border partial yes margin yes yes p
adding partial[1] yes this property is not applied on webkit based browsers on mac osx or ios.
... border yes yes margin yes yes p
adding partial[1] partial[1] on opera, the spinners are zoomed in, which can hide the content of the field.
...And 13 more matches
Sending forms through JavaScript - Learn web development
urlencodeddata = urlencodeddatapairs.join( '&' ).replace( /%20/g, '+' ); // define what happens on successful data submission xhr.
addeventlistener( 'load', function(event) { alert( 'yeah!
... data sent and response loaded.' ); } ); // define what happens in case of error xhr.
addeventlistener( 'error', function(event) { alert( 'oops!
... something went wrong.' ); } ); // set up our request xhr.open( 'post', 'https://example.com/cors.php' ); //
add the required http header for form data post requests xhr.setrequestheader( 'content-type', 'application/x-www-form-urlencoded' ); // finally, send our data.
...And 13 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.
... almost any web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web
address (url).
... anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or target, that contains the web
address.
...And 13 more matches
Getting started with HTML - Learn web development
0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.
addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.
addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution...
....value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.
addeventlistener('input', updatecode); window.
addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = ca...
... active learning:
adding attributes to an element another example of an element is <a>.
...And 13 more matches
Graceful asynchronous programming with Promises - Learn web development
the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.gettracks().foreach(track => mypeerconnection.
addtrack(track, chatstream)); setstatusmessage("connected"); }).catch(err => { setstatusmessage("failed to connect"); }); } this function starts by using a function called setstatusmessage() to update a status display with the message "calling...", indicating that a call is being attempted.
... it then calls getusermedia(), asking for a stream that has both video and audio tracks, then once that's been obtained, sets up a video element to show the stream coming from the camera as a "self view," then takes each of the stream's tracks and
adds them to the webrtc rtcpeerconnection representing a connection to another user.
... if a promise has succeeded or failed and you later
add a success/failure callback, the correct callback will be called, even though the event took place earlier.
...And 13 more matches
Starting our Svelte Todo list app - Learn web development
we want our users to be able to browse,
add and delete tasks, and also to mark them as complete.
...
add new tasks.
...to get rid of this, remove the name prop from src/main.js; it should now look like so: import app from './app.svelte' const app = new app({ target: document.body }) export default app now if you check your testing server url you'll see our todos.svelte component being rendered:
adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like.
...And 13 more matches
Focus management with Vue refs - Learn web development
you should see a focus outline on the input for
adding new to-do items.
...the focus should move to the "
add" button.
...in
addition, what happens when you press tab again varies depending on the browser you're using.
...And 13 more matches
Eclipse CDT
download "eclipse ide for c/c++ developers" (not eclipse ide for enterprise java developers) from the eclipse download page, install it, and
add the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac).
...(if you're thinking of
adding tips, please first consider how widely useful they'll be before
adding to this already lengthy page.) for further documentation see the official eclipse user guide and eclipse cdt user guide.
...select "c/c++ build > build variables", and
add a variable "mozconfig", and set it to the path of your .mozconfig file relative to the top source directory.
...And 13 more matches
Building the WebLock UI
in this chapter, however, we are going to be building a user interface for the weblock component that's meant to be
added to the existing mozilla browser[other-mozlike-browsers].
...as you can see, weblock is initialized as a global javascript variable, available in the scope of these functions and others: var weblock = components.classes["@dougt/weblock"] .getservice() .queryinterface(components.interfaces.iweblock); in
addition to this basic setup, you must also write javascript that uses the
addsite method to
add new sites to the white list.
... the url that the
addsite method expects is a string, so we can pass a string directly in from the user interface, or we can do a check on the string and verify that it's a valid url.
...And 13 more matches
nsIJumpListBuilder
widget/public/nsijumplistbuilder.idlscriptable please
add a summary to this article.
...callers should begin the creation of a new jump list using initlistbuild(),
add sub lists using
addlisttobuild(), then commit the jump list using commitlistbuild().
...user may also pin items to jump lists, which take up
additional slots.
...And 13 more matches
nsINavHistoryService
components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); method overview astring getpagetitle(in nsiuri auri); void markpageasfollowedbookmark(in nsiuri auri); void markpageasfollowedlink(in nsiuri auri); void markpageastyped(in nsiuri auri); boolean can
adduri(in nsiuri auri); long long
addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery(in nsinavhistoryquery aquery, in nsinavhistoryquer...
...ns options); void querystringtoqueries(in autf8string aquerystring, [array, size_is(aresultcount)] out nsinavhistoryquery aqueries, out unsigned long aresultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void
addobserver(in nsinavhistoryobserver observer, in boolean ownsweak); void removeobserver(in nsinavhistoryobserver observer); void runinbatchmode(in nsinavhistorybatchcallback acallback, in nsisupports aclosure); void importhistory(in nsifile file); astring getcharsetforuri(in nsiuri auri); astring setcharsetforuri(in nsiuri auri, in astring acharset); ...
...this can be and is called before the page is actually
added to history, since the page isn't
added until it actually starts loading.
...And 13 more matches
nsIXULTemplateBuilder
the condition syntax allows for common conditional handling;
additional filtering may be applied by
adding a custom filter to a rule with the builder's
addrulefilter() method.
...optionally, the rule may have a <bindings> section which may be used to define
additional variables to be used within an action body.
... each of these declared bindings must be supplied to the query processor via its
addbinding() method.
...And 13 more matches
Autoconfiguration in Thunderbird
in many cases, people should be able to download and install thunderbird, enter their real name, email
address and password in the account setup wizard and have a fully functioning mail client and get and send their mail as securely as possible.
... it was
added because we cannot assume that all big isps (including microsoft) will set up a configuration server for thunderbird.
...for more complicated setups, for example when the login name does not appear in the email
address, the xml file can also be generated by the isp.
...And 13 more matches
ARIA live regions - Accessibility
including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you
add the attribute before the changes occur — either in the original markup, or dynamically using javascript.
... planets_info) { planettitle.textcontent = planets_info[planet].title; planetdescription.textcontent = planets_info[planet].description; } else { planettitle.textcontent = 'no planet selected'; planetdescription.textcontent = 'select a planet to view its description'; } } const renderplanetinfobutton = document.queryselector('#renderplanetinfobutton'); renderplanetinfobutton.
addeventlistener('click', event => { const planetsselect = document.queryselector('#planetsselect'); const selectedplanet = planetsselect.options[planetsselect.selectedindex].value; renderplanetinfo(selectedplanet); }); as the user selects a new planet, the information in the live region will be announced.
... here is a screenshot of voiceover on mac announcing the update (via subtitles) to the live region: preferring specialized live region roles in the following well-known predefined cases it is better to use a specific provided "live region role": role description compatibility notes log chat, error, game or other type of log to maximize compatibility,
add a redundant aria-live="polite" when using this role.
...And 13 more matches
Border-radius generator - CSS: Cascading Style Sheets
width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; p
adding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { ...
...ild { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; p
adding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; p
adding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png...
...") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; p
adding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-...
...And 13 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
creation of
additional tracks to hold content you can define an explicit grid with grid layout.
... the grid layout specification is flexible enough to
add additional rows and columns when needed.
... features such as
adding “as many columns that will fit into a container” are included.
...And 13 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
in a responsive design, you may want to display the layout as a single column,
adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens.
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; p
adding: 10px; } nav ul { list-style: none; margin: 0; p
adding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> ...
... .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen sizes, we can now
add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns.
...And 13 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, you can see that two items have wrapped onto a new line.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yourself when deciding between grid or flexbox is: do i only need to control the layout by row or column – use a flexbox do i need to contro...
... in
addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout.
...And 13 more matches
Module structure of the SDK - Archive of obsolete content
commonjs is the underlying infrastructure for both the sdk and the
add-ons you build using the sdk.
... except for scripts that interact directly with web content, all the javascript code you'll write or use when developing
add-ons using the sdk is part of a commonjs module, including: sdk modules: the javascript modules which the sdk provides, such as panel and page-mod.
... local modules: each of the javascript files under your
add-on's "lib" directory.
...And 12 more matches
Creating annotations - Archive of obsolete content
the matched element is highlighted and has a click handler bound to it which sends a message to the main
add-on code.
... the selector page mod can be switched on and off using a message from the main
add-on code.
...the click handler sends a message called show back to the main
add-on code.
...And 12 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.get
addonbyid("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 for firefox 2 se...
...</div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.
addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences.
...further enhancements would include // handling for fields dynamically
added to the page (e.g., by page javascript).
...And 12 more matches
Creating a Help Content Pack - Archive of obsolete content
this is still very much a work in progress, tho, and i need to complete the rest of it soon (where "complete" means "use what's there that's good, build on the stuff that's not as good, and
add other useful information as necessary".
...(we're still not actually to the point where we're describing the actual data in each of these, so we'll just use some filler data for now.)
add the following code inside the rdf:description element you just created: <nc:panellist> <rdf:seq> </rdf:seq> </nc:panellist> you'll create the relevant information descriptions within the rdf:seq element.
... nc:platform (
added in mozilla 1.8b2/firefox 1.1) when present specifies the platforms to which the information stored in the referenced data sources applies.
...And 12 more matches
jspage - Archive of obsolete content
at(a).each(function(b){if(b instanceof function){b=class.instantiate(b);}this.implement(b); },this);}};var chain=new class({$chain:[],chain:function(){this.$chain.extend(array.flatten(arguments));return this;},callchain:function(){return(this.$chain.length)?this.$chain.shift().apply(this,arguments):false; },clearchain:function(){this.$chain.empty();return this;}});var events=new class({$events:{},
addevent:function(c,b,a){c=events.removeon(c);if(b!=$empty){this.$events[c]=this.$events[c]||[]; this.$events[c].include(b);if(a){b.internal=true;}}return this;},
addevents:function(a){for(var b in a){this.
addevent(b,a[b]);}return this;},fireevent:function(c,b,a){c=events.removeon(c); if(!this.$events||!this.$events[c]){return this;}this.$events[c].each(function(d){d.create({bind:this,delay:a,"argumen...
...,c[d]); }return this;}if(c){c=events.removeon(c);}for(d in this.$events){if(c&&c!=d){continue;}var b=this.$events[d];for(var a=b.length;a--;a){this.removeevent(d,b[a]); }}return this;}});events.removeon=function(a){return a.replace(/^on([a-z])/,function(b,c){return c.tolowercase();});};var options=new class({setoptions:function(){this.options=$merge.run([this.options].extend(arguments)); if(!this.
addevent){return this;}for(var a in this.options){if($type(this.options[a])!="function"||!(/^on[a-z]/).test(a)){continue;}this.
addevent(a,this.options[a]); delete this.options[a];}return this;}});var element=new native({name:"element",legacy:window.element,initialize:function(a,b){var c=element.constructors.get(a); if(c){return c(b);}if(typeof a=="string"){return document.newelement(a,b);}return docu...
...t(c||"iframe",d);var b=function(){var g=$try(function(){return c.contentwindow.location.host;});if(!g||g==window.location.host){var h=new window(c.contentwindow); new document(c.contentwindow.document);$extend(h.element.prototype,element.prototype);}e.call(c.contentwindow,c.contentwindow.document);};var a=$try(function(){return c.contentwindow; });((a&&a.document.body)||window.frames[d.id])?b():c.
addlistener("load",b);return c;}});var elements=new native({initialize:function(f,b){b=$extend({ddup:true,cash:true},b); f=f||[];if(b.ddup||b.cash){var g={},e=[];for(var c=0,a=f.length;c<a;c++){var d=document.id(f[c],!b.cash);if(b.ddup){if(g[d.uid]){continue;}g[d.uid]=true; }if(d){e.push(d);}}f=e;}return(b.cash)?$extend(f,this):f;}});elements.implement({filter:function(a,b){if(!a){return this;}return...
...And 12 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
many browsers, such as internet explorer, also support pre-w3c apis and have never
added extensive support for the w3c-compliant ones.
... before i go into the differences between mozilla and internet explorer, i'll cover some basic ways you can make a web application extensible in order to
add new browser support later.
...not only does this make the code easier to read, it simplifies
adding support for new clients: var elm = getelmbyid("myid"); function getelmbyid(aid){ var element = null; if (ismozilla || isie5) element = document.getelementbyid(aid); else if (isnetscape4) element = document.layers[aid]; else if (isie4) element = document.all[aid]; return element; } the above code still has the issue of browser sniffing, or detecting which browser the...
...And 12 more matches
Space Manager Detailed Design - Archive of obsolete content
* * you can use queryinterface() on this frame to get any
additional * interfaces.
...the 'count' member of the band data struct * indicates how large the array of trapezoids needs to be */ nsresult getbanddata(nscoord ayoffset, const nssize& amaxsize, nsbanddata& abanddata) const; /** *
add a rectangular region of unavailable space.
...must not be null * @param aunavailablespace the bounding rect of the unavailable space * @return ns_ok if successful * ns_error_failure if there is already a region tagged with aframe */ nsresult
addrectregion(nsiframe* aframe, const nsrect& aunavailablespace); /** * resize the rectangular region associated with aframe by the specified * deltas.
...And 12 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
additional software.
... many plugins are part of
additional software for media types.
...in this case, the plugin is the part of the software package that is browser-specific, as a mechanism to give the application
additional "hooks" into the browser.
...And 12 more matches
Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'.
... to
add a new menu onto the main application menubar, you will need to overlay this menubar.
... for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is
added to the main menu bar just before the tools menu.
...And 12 more matches
Custom toolbar button - Archive of obsolete content
in the rest of this page, the term application means the mozilla application where you want to
add the button.
...you will
add the other directories and files that are shown in the diagram.
...the last section in the file specifies that this extension
adds content to the application.
...And 12 more matches
Document Object Model - Archive of obsolete content
specific xul elements also provide
additional functions which may be used.
...although there is only ever one document associated with a window at a time, you may load
additional documents using various methods.
... the window object isn't defined by any dom specification, but in mozilla is sometimes considered part of dom level 0, a name used by some developers to refer to the dom-like functions before they were
added to specifications.
...And 12 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
public-key cryptography uses certificates to
address the problem of impersonation.
... to get a driver's license, you typically apply to a government agency, such as the department of motor vehicles, which verifies your identity, your ability to drive, your
address, and other information before issuing the license.
...to get a library card, you may need to provide only your name and a utility bill with your
address on it.
...And 12 more matches
JavaScript basics - Learn web development
previous overview: getting started with the web next javascript is a programming language that
adds interactivity to your website.
... javascript ("js" for short) is a full-fledged dynamic programming language that can
add interactivity to a website.
...to begin, let's examine how to
add javascript to your page for creating a hello world!
...And 12 more matches
Package management basics - Learn web development
in
addition, what happens if you find a better tool that you want to use instead of the current one, or a new version of your dependency is released that you want to update to?
...it makes more sense to use a package manager such as npm, as this will guarantee that the code is
added and removed cleanly, as well as a host of other advantages.
... in
addition, package managers handle duplicate dependencies (something that becomes important and common in front-end development).
...And 12 more matches
Eclipse CDT Manual Setup
select "general > content types", expand "text > c source file > c++ source file", click "
add" and
add "*.mm".
... eclipse cdt doesn't currently understand objective-c files (although there is a project that promises to
add objective-c support), so for now, this is the best we can do to give eclipse a chance of expanding its understanding of the source into the objective-c files.
... eclipse cdt will try to format c/c++ code that you
add as you type.
...And 12 more matches
Multiple Firefox profiles
a profile in firefox is the collection of settings, customizations,
add-ons, and other personalizations that a user has made or installed into their copy of firefox.
...having different profiles would help separate work and personal life, or allow each family member to have his or her own set of bookmarks, settings, and
add-ons.
...while using the nightly channel, you may encounter some
add-ons that have become temporarily incompatible with new api changes, until the
add-on developer has a chance to update them.
...And 12 more matches
Limitations of chrome scripts
these are the sorts of things that will break an old
add-on in multiprocess firefox.
... you'll get the shims for your
add-on by default, unless you set the multiprocesscompatible flag in your
add-on's install manifest.
... however, these shims are not a substitute for migrating extensions: they are only a temporary measure, and will be removed eventually they can have a bad effect on responsiveness there are likely to be edge cases in which they don't work properly you can see all the places where your
add-on uses compatibility shims by setting the dom.ipc.shims.enabledwarnings preference and watching the browser console as you use the
add-on.
...And 12 more matches
Using the Browser API
it consists of two major parts: custom <iframe> attributes: by
adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content.
... the html an <iframe> is turned into a browser iframe by setting the mozbrowser attribute on it: <iframe src="http://mozilla.org" mozbrowser> in
addition, the <iframe> can be loaded in its own child process — separate to the page embedding this frame — by including the remote attribute.
... the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.
addeventlistener('touchend',function() { browser.goback(); }); fwd.
addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
...And 12 more matches
Using the Places history service
the places history service ("navhistory") implements these history interfaces: nsiglobalhistory2: basic
add page, is visited functionality used by the docshell when visiting and rendering pages.
... nsiglobalhistory3:
adds extra functions for dealing with redirects and hints for rendering (gecko flags).
... nsibrowserhistory:
adds functions used by the basic browser like marking pages as typed in the url bar, and removing pages as from the history interface.
...And 12 more matches
An Overview of XPCOM
in
addition to writing well-commented code that tells the client developer the rules about init(), the developer can take a couple steps to make this contract even clearer.
...it is the responsibility of the function that creates the interface pointer to
add the initial reference, or owning reference, to the count.
...the difference is a subtle one, since interface pointers and regular pointers are both just
addresses in memory.
...And 12 more matches
Observer Notifications
additionally, it will have been removed from any windowcontext tree it was part of.
... cookies these topics indicate whenever a cookie has been changed (
added, changed, cleared, or deleted) or its setting rejected by the browser.
... topic description cookie-changed called upon a cookie change (
added, changed, cleared, or deleted) cookie-rejected called when the setting of a cookie was rejected by the browser (per the user's preferences) http-on-response-set-cookie this is fired only when a cookie is created due to the presence of set-cookie header in the response header of any network request.
...And 12 more matches
nsINavBookmarksService
to use this service, use: var navbookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); method overview void
addobserver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginupdatebatch(); obsolete since gecko 1.9 void changebookmarkuri(in long long aitemid, in nsiuri anewuri); long long createdynamiccontainer(in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex); note: renamed from createcontainer in gecko 1.9 obsolete since geck...
... obsolete since gecko 2.0 long long getfolderidforitem(in long long aitemid); boolean getfolderreadonly(in long long aitemid); astring getfoldertitle(in print64 folder); obsolete since gecko 1.9 nsiuri getfolderuri(in print64 folder); obsolete since gecko 1.9 long long getidforitemat(in long long aparentid, in long aindex); prtime getitemdate
added(in long long aitemid); astring getitemguid(in long long aitemid); obsolete since gecko 14.0 long long getitemidforguid(in astring aguid); obsolete since gecko 14.0 long getitemindex(in long long aitemid); prtime getitemlastmodified(in long long aitemid); autf8string getitemtitle(in long long aitemid); unsigned short getitemtype(in long ...
... void replaceitem(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void runinbatchmode(in nsinavhistorybatchcallback acallback, in nsisupports auserdata); void setfolderreadonly(in long long afolder, in boolean areadonly); void setfoldertitle(in print64 folder, in astring title); obsolete since gecko 1.9 void setitemdate
added(in long long aitemid, in prtime adate
added); void setitemguid(in long long aitemid, in astring aguid); obsolete since gecko 14.0 void setitemindex(in long long aitemid, in long anewindex); void setitemlastmodified(in long long aitemid, in prtime alastmodified); void setitemtitle(in long long aitemid, in autf8string atitle); void setkeywordforbook...
...And 12 more matches
Setting HTTP request headers
in
addition to the actual content, some important information is passed with http headers for both http requests and responses.
... you can
add your own http headers to any request the application makes, whether the request is initiated by your code explicitly opening an http channel, because of xmlhttprequest activity, an <img> element in content, or even from css.
...//
adds "x-hello: world" header to the request httpchannel.setrequestheader("x-hello", "world", false); in the example code above we have a variable named httpchannel which points to an object implementing nsihttpchannel.
...And 12 more matches
Using the CSS Painting API - Web APIs
we also
add a little bit of complexity later in this tutorial.
... using the paint worklet to use the paint worklet, we need to register it using
addmodule() and include it in our css, ensuring the css selector matches a dom node in our html registering the worklet the setup and design of our paint worklet took place in the external script shown above.
... css.paintworklet.
addmodule('nameofpaintworkletfile.js'); this can be done using the paint worklet's
addmodule() method in a <script> within the main html or in an external javascript file linked to from the document.
...And 12 more matches
Using files from web applications - Web APIs
using the file api, which was
added to the dom in html5, it's now possible for web content to ask the user to select local files and then read the contents of those files.
... if you want to use the dom file api from extensions or other browser chrome code, you can; however, note there are some
additional features to be aware of.
...you need to use eventtarget.
addeventlistener() to
add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.
addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by th...
...And 12 more matches
Performance API - Web APIs
entries of this type are created by calling performance.mark() to
add a named domhighrestimestamp (the mark) to the browser's performance timeline.
...entries of this type are created by calling performance.measure() to
add a nameddomhighrestimestamp (the measure) between two marks to the browser's performance timeline.
... high resolution time level 2 recommendation
adds performance attribute on window and workerglobalscope.
...And 12 more matches
Creating a cross-browser video player - Developer guides
e download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still
added to the <video> element, and the player's default control set is switched off later with javascript.
...in
addition a download link is displayed to allow users to download the mp4 video file, should they wish to (providing those without flash installed with a method of viewing the video, a fallback for a fallback if you like).
... the control set most browser's default video controls have the following functionality: play/pause mute volume control progress bar skip ahead go fullscreen the custom control set will also support this functionality, with the
addition of a stop button.
...And 12 more matches
The "codecs" parameter in common media types - Web media technologies
for that reason, the codecs parameter can be
added to the mime type describing media content.
...for this reason, you can
add the codecs parameter to the media type.
...each component is a fixed number of characters long; if the value is less than that length, it must be p
added with leading zeros.
...And 12 more matches
Porting the Library Detector - Archive of obsolete content
this example walks through the process of porting a xul-based
add-on to the sdk.
... it's a very simple
add-on and a good candidate for porting because there are suitable sdk apis for all its features.
... the
add-on is paul bakaus's library detector.
...And 11 more matches
console - Archive of obsolete content
enables your
add-on to log error, warning or informational messages.
... if you have started firefox for your
add-on from the command line with jpm run or jpm test then these messages appear in the command shell you used.
... if the
add-on has been installed in firefox, then the messages appear in the browser console.
...And 11 more matches
Creating Event Targets - Archive of obsolete content
this is especially useful if you want to build your own modules, either to organize your
add-on better or to enable other developers to reuse your code.
...it will emit events when the user
adds and visits bookmarks, enabling users of the module to listen for these events using the sdk's standard event api.
... using the places api first, let's write some code using places api that logs the uris of bookmarks the user
adds.
...And 11 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
for complex extensions, it may be necessary to create components in c++ that provide
additional functionality.
...in
addition, binary components need to be recompiled for every major firefox release, which can be frustrating.
...first of all, it lists the subdirectories that make up the extension, so the build system knows where to look for
additional makefiles.
...And 11 more matches
MMgc - Archive of obsolete content
(the second switch will slow your application down a lot more than the first switch, so you could try the first, then the second.) when a missing write barrier is detected, mmgc will assert and drop you into the debugger, and will print out a message telling you which object contained the missing write barrier, the
address of the member variable that needs it, and what object didn't get marked due to the missing write barrier.
...leak detection (for unmanaged memory) when the application is exiting, mmgc will detect memory leaks in its unmanaged memory allocators and print out the
addresses and sizes of the leaked objects, and stack traces if stack traces are enabled.
...class object { public: object() { refcount = 0; } void
addref() { refcount++; } void release() { if (!--refcount) delete this; } int refcount; } reference counting is a kind of automatic memory management.
...And 11 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
most installation scripts, including the one discussed here, take the following basic form (in pseudo-code and with links to the sections in which these installation steps are documented): initinstall(); if (verify_space()) { err =
add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file
addition process, here part of the main installation block, is on lines 24 to 41; the registration part of the main installation block is on lines 42-58; and the execution at the end of...
...if you choose not to register the installed software or do the verifications at the front end of the installation, then at a minimum, the install scripts mustinitialize,
add the files to be installed, and execute.
... note also that when you call methods on the install--as you do so often in installation scripts (getfolder, initinstall,
addfile, and performinstall are all examples of common install object methods)--the install object is implicit; like the window object in regular web page scripts, the install object does not need to be prefixed to the method.
...And 11 more matches
Build the brick field - Game development
building the brick field is a little bit more complicated than
adding a single object to the screen, although it's still easier with phaser than in pure javascript.
... defining new variables first, let's define the needed variables —
add the following below your previous variable definitions: var bricks; var newbrick; var brickinfo; the bricks variable will be used to create a group, newbrick will be a new object
added to the group on every iteration of the loop, and brickinfo will store all the data we need.
... rendering the brick image next, let's load the image of the brick —
add the following load.image() call just below the others: function preload() { // ...
...And 11 more matches
Styling links - Learn web development
now let's
add some more information to get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; p
adding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px...
... the third rule uses the a selector to get rid of the default text underline and focus outline (which varies across browsers anyway), and
adds a tiny amount of p
adding to each link — all of this will become clear later on.
... active learning: style your own links in this active learning session, we'd like you to take our empty set of rules and
add your own declarations to make the links look really cool.
...And 11 more matches
Making decisions in your code — conditionals - Learn web development
each extra choice requires an
additional block to put in between if() { ...
...ather">select the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.
addeventlistener('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
... in the javascript, we are storing a reference to both the <select> and <p> elements, and
adding an event listener to the <select> element so that when its value is changed, the setweather() function is run.
...And 11 more matches
Video and Audio APIs - Learn web development
let's go through an example,
adding features as we go.
... first of all,
add the following to the bottom of your code, so that the playpausemedia() function is invoked when the play button is clicked: play.
addeventlistener('click', playpausemedia); now to define playpausemedia() —
add the following, again at the bottom of your code: function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play...
... stopping the video next, let's
add functionality to handle stopping the video.
...And 11 more matches
What is JavaScript? - Learn web development
we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can
add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; p
adding: 3px 10px; display: inline-block; cu...
...rsor: pointer; } and finally, 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)!
...for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.
addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run.
...And 11 more matches
Getting started with Vue - Learn web development
additionally, vue takes a "middle ground" approach to tooling like client-side routing and state management.
... in
addition to allowing you to progressively integrate vue into your applications, vue also provides a progressive approach to writing markup.
... to install the cli, run the following command in your terminal: npm install --global @vue/cli or if you'd prefer to use yarn: yarn global
add @vue/cli once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>.
...And 11 more matches
Performance best practices for Firefox front-end engineers
hide your panels if you’re
adding a new xul <xul:popup> or <xul:panel> to a document, set the hidden attribute to true by default.
... javascript code might, for example, change dom node attributes (either directly or by
adding or removing classes from elements), and can also
add, remove, or delete dom nodes.
... writing tests to ensure you don’t
add more synchronous style flushes unlike reflow, there isn’t a “observer” mechanism for style recalculations.
...And 11 more matches
DownloadList
method overview promise<array<download>> getall(); promise
add(download adownload); promise remove(download adownload); promise
addview(object aview); promise removeview(object aview); void removefinished([optional] function afilterfn); methods getall() retrieves a snapshot of the downloads that are currently in the list.
... the returned array does not change when downloads are
added or removed, though the download objects it contains are still updated in real time.
...
add()
adds a new download to the end of the items list.
...And 11 more matches
WebRequest.jsm
the webrequest module provides an api to
add event listeners for the various stages of making an http request.
... you can use this api to implement a content policy in an
add-on (for example, an ad or script blocker), as you could using nsicontentpolicy.
... the webrequest api is modeled on chrome's webrequest extension api, which makes it easier to write cross-browser
add-on code.
...And 11 more matches
Localization content best practices
it's important to consider this when
adding strings, and especially localization comments for strings that contain references, or obscure technical details.
...when you have to change a key id,
adding a progressive number to the existing key should always be used as a last resort.
... for example, suppose this string needs to be changed from "event" to "
add new event": new-event-header = event
add-new-event-header is definitely a better choice for the new string than new-event-header1.
...And 11 more matches
Investigating leaks using DMD heap scan mode
analyzing the logs getting the pid and
address of the leaking object the first step is to figure out the pid of the leaking process.
... the second step is to figure out the
address of the leaking object, usually a window.
... * 0x7f0897082c00: this is the
address of the leaking window.
...And 11 more matches
Working with data
example: creating an array of strings var cstr1 = ctypes.jschar.array()('rawr'); var cstr2 = ctypes.jschar.array()('boo'); var mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.
addressofelement(0).contents.readstring(); // outputs: "rawr" mycarray_ofstrings.
addressofelement(1).contents.readstring(); // outputs: "boo" example: creating an array of integers var jsarr = [4, 10]; var mycarr = ctypes.int.array(jsarr.length)(jsarr); // specifying length is optional, can omit.
... this will also work: `ctypes.int.array()(jsarr)` mycarr.
addressofelement(0).contents; // outputs: 4 mycarr.
addressofelement(1).contents; // outputs: 10 type casting you can type cast data from one type to another by using the ctypes.cast() function: var newobj = ctypes.cast(origobj, newtype); this will return a new object whose data block is shared with the original object, but whose type is newtype.
... // lets create an array of long's var my = ctypes.long.array()([1, 2, 3, 4]); my.tostring(); // this outputs to browser console: `"ctypes.long.array(4)([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("3"), ctypes.int64("4")])"` my.
addressofelement(1).contents; // this outputs `int64 { }` my.
addressofelement(1).contents.tostring(); // 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).cont...
...And 11 more matches
Debugger - Firefox Developer Tools
new debugger([global, …]) create a debugger object, and apply its
adddebuggee method to each of the givenglobal objects to
add them as the initial debuggees.
... this property gives debugger code a single point of control for disentangling itself from the debuggee, regardless of what sort of events or handlers or “points” we
add to the interface.
...changing this flag value will recompile all jit code to
add or remove code coverage instrumentation.
...And 11 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
tasks get
added to the task queue when: a new javascript program or subprogram is executed (such as from a console, or by running the code in a <script> element) directly.
... an event fires,
adding the event's callback function to the task queue.
... a timeout or interval created with settimeout() or setinterval() is reached, causing the corresponding callback to be
added to the task queue.
...And 11 more matches
WebGL model view projection - Web APIs
however, if a triangle str
addles the border of this space then it is chopped up into new triangles, and only the parts of the new triangles that are in clip space are kept.
...in
addition there is a jsfiddle link at the bottom of each section.
... the obvious question is "why the extra dimension?" it turns out that this
addition allows for lots of nice techniques for manipulating 3d data.
...And 11 more matches
Alerts - Accessibility
examples of common problems include e-mail
addresses which are not valid, or a name field which does not contain at least a first name or a surname.
... here is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail
address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br ...
.../> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail
address or entered name are valid.
...And 11 more matches
Consistent list indentation - CSS: Cascading Style Sheets
remember that, at this point, the list item has no p
adding or borders.
... if we
add two more list items, we get a result like that shown in figure 2.
...since that parent has no p
adding or margins yet, we get the situation shown in figure 3.
...And 11 more matches
Cross-browser audio basics - Developer guides
</audio> muted if you want the audio to start muted (no volume),
add the muted attribute.
... manipulating the audio element with javascript in
addition to being able to specify various attributes in html, the <audio> element comes complete with several properties and methods that you can manipulate via javascript.
... myaudio.
addeventlistener("loadstart", function() { //grabbing the file }); durationchange if you just want to know as soon as the duration of your media is established, this is the event for you.
...And 11 more matches
SVG documentation index - SVG: Scalable Vector Graphics
8 other resources reference, svg here is a list of
additional resources on svg: 9 project svg no summary!
... 21
additive needscompattable, needsexample, svg, svg attribute no summary!
...after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is
added to each component.
...And 11 more matches
simple-storage - Archive of obsolete content
lets an
add-on store data so that it's retained across firefox restarts.
... this module works similarly to dom storage on the web, except that it's only available for
add-ons.
... usage the simple storage module exports an object called storage that is persistent and scoped to your
add-on.
...And 10 more matches
High-Level APIs - Archive of obsolete content
modules listed on this page implement high-level apis for building
add-ons: creating user interfaces, interacting with the web, and interacting with the browser.
...
addon-page create a page that does not contain navigational elements.
... context-menu
adds items, submenus, and menu separators to the page's context menu.
...And 10 more matches
Tutorials - Archive of obsolete content
getting started installation how to install the jpm tool, which you will use for developing
add-ons.
... getting started walkthrough of creating a simple
add-on with the sdk, using jpm.
... create user interfaces
add a toolbar button attach a button to the firefox
add-on toolbar.
...And 10 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
this is used to allow the user to toggle the display of
additional information.
... table 1: types of buttons that can be displayed in the dialog element
additionally, there are two special button names, extra1 and extra2.
... you can even display icons in menus by
adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri.
...And 10 more matches
Getting Started with Firefox Extensions - Archive of obsolete content
extensions
add new functionality to mozilla applications such as firefox and thunderbird.
... they can
add anything from a toolbar button to a completely new feature.
... they allow the application to be customized to fit the personal needs of each user if they need
additional features, while keeping the applications small to download.
...And 10 more matches
XPCOM Objects - Archive of obsolete content
well, those are applications that, simply put, take the underlying platform with perhaps a few changes and
additions, and then write their own chrome layer.
...there is no comprehensive list of these (that we know of), and that's understandable since it would be a very long list, and it can be extended by
add-ons.
... this._prefservice = cc["@mozilla.org/preferences-service;1"].getservice(ci.nsiprefbranch); this._prefvalue = this._prefservice.getboolpref("somepreferencename"); this._prefservice.queryinterface(ci.nsiprefbranch2); this._prefservice.
addobserver("somepreferencename", this, false); this._prefservice.queryinterface(ci.nsiprefbranch); this is a common piece of code you'll see when initializing components or jsm that rely on preferences.
...And 10 more matches
Popup Menus - Archive of obsolete content
just
add additional ones after the first menupopup element.
... to associate the popup with an element, you
add one of three attributes to the element.
... the attribute you
add depends on which type of popup you want to create.
...And 10 more matches
Building a Theme - Archive of obsolete content
the file preview.png is shown as a preview of the theme in the themes panel of the
add-ons window.
...this is a value you come up with to identify your extension in email
address format (note that it should not be your email).
...note: this parameter must be in the format of an email
address, although it does not have to be a valid email
address.
...And 10 more matches
What is a Domain Name? - Learn web development
they provide a human-readable
address for any web server available on the internet.
... any internet-connected computer can be reached through a public ip
address, either an ipv4
address (e.g.
... 173.194.121.32) or an ipv6
address (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337).
...And 10 more matches
Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right html form controls and other html elements,
adding some very simple styling via css, and describing how data is sent to a server.
...forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example,
add another item to a list, or show or hide a ui feature).
... a web form's html is made up of one or more form controls (sometimes called widgets), plus some
additional elements to help structure the overall form — they are often referred to as html forms.
...And 10 more matches
Images in HTML - Learn web development
fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was
added.
... you could embed the image using its absolute url, for example: <img src="https://www.example.com/images/dinosaur.jpg"> but this is pointless, as it just makes the browser do more work, looking up the ip
address from the dns server all over again, etc.
...in
addition, never point your src attribute at an image hosted on someone else's website that you don't have permission to link to.
...And 10 more matches
Third-party APIs - Learn web development
extending the mapquest example let's
add some more functionality to the mapquest example to show how to use some other features of the api.
...
adding different controls the map has a number of different controls available; by default it just shows a zoom control.
... you can expand the controls available using the map.
addcontrol() method;
add this to your code, inside the window.onload handler: map.
addcontrol(l.mapquest.control()); the mapquest.control() method just creates a simple full-featured control set, and it is placed in the top-right hand corner by default.
...And 10 more matches
Accessibility in React - Learn web development
a user can
add a new task, check and uncheck tasks, delete tasks, or edit task names.
... exploring the keyboard usability problem start by clicking on the input at the top of our app, as if you're going to
add a new task.
...press the tab key, and you will see the outline appear around the "
add" button beneath the input.
...And 10 more matches
Handling common HTML and CSS problems - Learn web development
this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to
add support into browsers, tackling responsive design problems, and more.
... more complex elements like html <video>, <audio>, and <canvas> (and other features besides) have natural mechanisms for fallbacks to be
added, which work on the same principle as described above.
... you can
add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.
...And 10 more matches
Chrome registration
starting with gecko 2.0, the root chrome.manifest is the only manifest used; you can
add manifest commands to that file to load secondary manifests.
... manifest flags manifest lines can have multiple, space-delimited flags
added at the end of the registration line.
... this example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://my
addon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://my
addon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://my
addon/content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install int...
...And 10 more matches
Communicating with frame scripts
asynchronous messaging to send an asynchronous message the frame script uses the global sendasyncmessage() function: // frame script sendasyncmessage("my-
addon@me.org:my-e10s-extension-message"); sendasyncmessage() takes one mandatory parameter, which is the name of the message.
...if you're using the message manager in an
add-on, a good way to do that is to prefix messages with your
add-on's id.
... the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script
addeventlistener("click", function (event) { sendasyncmessage("my-
addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages from content, a chrome script needs to
add a message listener using the message manager's
addmessagelistener() api.
...And 10 more matches
Application Translation with Mercurial
the localization of the lightning calendar
add-on also takes place on these branches.
... lightning and cal-* denote branches of lightning, the calendar
add-on for thunderbird.
... paste the following content into the file: [ui] username = firstname lastname <mynick@example.com> merge = internal:merge [alias] qexport = export -g -r qtip qexportall = diff -r qparent [defaults] commit = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email
address which later will be public on the internet after your translation patch got accepted and uploaded.
...And 10 more matches
DMD
desktop firefox (linux) build build firefox with these options: ac_
add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/linux64/common-opt or a similar file before pushing.
...
add --debug to run under gdb.
... desktop firefox (mac) build build with these options: ac_
add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/macosx64/common-opt or a similar file before pushing.
...And 10 more matches
Refcount tracing and balancing
refcount tracing logs calls to
addref and release, preferably for a particular set of classes, including call-stacks in symbolic form (on platforms that support this).
... xpcom_mem_comptr_log this environment variable enables logging of
additions and releases of objects into nscomptrs.
... however, having an nscomptr log and using it in the creation of the balance tree allows
addref and release calls that we know are matched to be eliminated from the tree, so it makes it much easier to debug reference count leaks of objects that have a large amount of reference counting traffic.
...And 10 more matches
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?
... age: (strictly incrementing from arbitrary origin) the default starts at jan 1, 2000 and
adds an hour for every message.
...And 10 more matches
McCoy
mccoy is an application that allows
add-on authors to provide secure updates to their users.
... applications periodically look for and install updates to their
add-ons.
... it's important that the update information retrieved has not been tampered with since being written by the
add-on author.
...And 10 more matches
SpiderMonkey 1.8.5
to migrate, simply
add a jsbool strict parameter to each setter function.
... the rooting apis (js_
addroot, js_removeroot, etc.) have been replaced with a family of type-safe functions (js_
addstringroot, js_removestringroot, etc.) that are easier to use correctly.
...new javascript language features javascript 1.8.5
adds support for ecmascript edition 5, including es5 strict mode.
...And 10 more matches
nsIEffectiveTLDService
method overview acstring getbasedomain(in nsiuri auri, [optional] in pruint32 a
additionalparts); acstring getbasedomainfromhost(in autf8string ahost, [optional] in pruint32 a
additionalparts); acstring getpublicsuffix(in nsiuri auri); acstring getpublicsuffixfromhost(in autf8string ahost); methods getbasedomain() returns the base domain of a uri; that is, the public suffix with a given number of
additional domain name parts.
... acstring getbasedomain( in nsiuri auri, [optional] in pruint32 a
additionalparts ); parameters auri the uri to be analyzed.
... a
additionalparts the number of domain name parts to be returned in
addition to the public suffix.
...And 10 more matches
about:debugging - Firefox Developer Tools
at the moment it supports three main sorts of targets: restartless
add-ons, tabs, and workers.
... the information on this page is the same as the information on the this firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the
addition of a tabs section with an entry for each of the tabs open on the remote device.
... above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via usb, to firefox preview, on a pixel 2, as well as the title of the page that you are debugging, and the
address of the page.
...And 10 more matches
Background Tasks API - Web APIs
in
addition, the event loop handles interactions with the operating system, updates to the browser's own user interface, and so forth.
... interfaces the background tasks api
adds only one new interface: idledeadline an object of this type is passed to the idle callback to provide an estimate of how long the idle period is expected to last, as well as whether or not the callback is running because its timeout period has expired.
...in
addition, this example demonstrates how to schedule updates to the document content using requestanimationframe().
...And 10 more matches
The HTML DOM API - Web APIs
for example, consider a document with two elements, one of which has two more elements nested inside it: while the document interface is defined as part of the dom specification, the html specification significantly enhances it to
add information specific to using the dom in the context of a web browser, as well as to using it to represent html documents specifically.
... among the things
added to document by the html standard are: support for accessing various information provided by the http headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth.
...this expands the element class to
add html-specific general features to the element nodes.
...And 10 more matches
Operable - Accessibility
guideline 2.1 — keyboard accessible: make all functionality available from a keyboard this guideline covers the necessity of making core website functionality available via a keyboard in
addition to other means (e.g.
... see ui controls and building keyboard accessibility back in 2.1.4 character key shortcuts (a)
added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the relevant user interface component is in focus.
... 2.2.6 timeouts (aaa)
added in 2.1 if there is a timeout (caused by user inactivity) warn users at the start of a process so they will not be surprised that a timeout exists (or only allow the timeout to occur after 20 hours of inactivity.
...And 10 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
we
add margins, p
adding, and borders using these physical properties of margin-left, p
adding-left, and so on.
...i have
added dir="rtl" to the html element, which switches the writing mode from the default for an english language document of ltr.
... .wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now take a look at a grid layout example, we can...
...And 10 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
see our autoplay guide for
additional information about how to properly use autoplay.
...see cors settings attributes for
additional information.
... you can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, p
adding, margin, etc.
...And 10 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
to provide
additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1.
...instead,
add the css vertical-align property to the row.
...we'll
add <thead>, <tbody>, and <tfoot> in the next example.
...And 10 more matches
Authoring MathML - MathML
to use it, just insert one line in your document header: <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mp
added-min.js"></script> note that these two scripts perform feature detection of the mspace or mp
added elements (see the browser compatibility table on these pages).
... there is also a similar script to display a warning at the top of the page for browsers without good mathml support and let the users choose between one of the fallback above: <script src="https://fred-wang.github.io/mathml-warning.js/mp
added-min.js"></script> if you don't want to use this link to github but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of mathml support.
... for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mp
added): function hasmathmlsupport() { var div = document.createelement("div"), box; div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml support (gecko and webkit).
...And 10 more matches
Web video codec guide - Web media technologies
each codec provides a link to a section below which offers
additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of.
...
additionally, all codecs have their strengths and weaknesses.
...
additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors.
...And 10 more matches
Communicating using "port" - Archive of obsolete content
to enable
add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
... here's a simple
add-on that sends a message to a content script using port: var tabs = require("sdk/tabs"); var alertcontentscript = "self.port.on('alert', function(message) {" + " window.alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript: alertcontentscript }); worker.port.emit("alert", "message from the
add-on"); }); tabs.open("http://www.mozilla.org"); in total, the port object defines four functions: emit()...
... accessing port accessing port in the content script note that the global self object is completely different from the self module, which provides an api for an
add-on to access its data files and id.
...And 9 more matches
Two Types of Scripts - Archive of obsolete content
this enables you to call functions like: window.alert("hello there"); in an
add-on's main scripts you can't do that, because the
add-on code does not execute in the context of a page, and the dom is therefore not available.
... so there are two distinct sorts of javascript scripts you might include in your
add-on and they have access to different sets of apis.
... in the sdk documentation we call one sort "
add-on code" and the other sort "content scripts".
...And 9 more matches
Working with Events - Archive of obsolete content
the
add-on sdk supports event-driven programming.
... objects emit events on state changes that might be of interest to
add-on code, such as browser windows opening, pages loading, network requests completing, and mouse clicks.
... by registering a listener function to an event emitter an
add-on can receive notifications of these events.
...And 9 more matches
ui/button/toggle - Archive of obsolete content
experimental
add a toggle button to the firefox user interface.
... you can
add a "badge" to a button using its badge property.
...you can also
add, or change, the listener afterwards: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: firstclick, onchange: firstchange }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.r...
...And 9 more matches
Storing annotations - Archive of obsolete content
first, import the simple-storage module with a declaration like: var simplestorage = require('sdk/simple-storage'); in the module scope, initialize an array which will contain the stored annotations: if (!simplestorage.storage.annotations) simplestorage.storage.annotations = []; now we'll
add a function to the module scope which deals with a new annotation.
...nnotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the
add-on that displays all the previously entered annotations.
...so the content script binds a click handler to the links which will send the url to the
add-on.
...And 9 more matches
Creating Reusable Modules - Archive of obsolete content
with the sdk you don't have to keep all your
add-on in a single "index.js" file.
...you then import and use these modules from other parts of your
add-on using the require() statement, in exactly that same way that you import core sdk modules like page-mod or panel.
... it can often make sense to structure a larger or more complex
add-on as a collection of modules.
...And 9 more matches
Inline options - Archive of obsolete content
the user interface for the preferences defined with this new syntax appears in the extension's detail view in the
add-on manager.
...here is an example of an options.xul file: <?xml version="1.0"?> <!doctype mydialog system "chrome://my
addon/locale/mydialog.dtd"> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting type="bool" pref="extensions.my
addon.bool" title="boolean" desc="stored as a boolean preference" /> </vbox> note that it's limited to <setting> tags.
... some examples: <!-- boolean examples --> <setting pref="extensions.my
addon.bool1" type="bool" title="boolean 1"/> <setting pref="extensions.my
addon.bool2" type="bool" title="boolean 2"> description of boolean 2 </setting> <!-- boolean stored as an integer --> <setting pref="extensions.my
addon.boolint" type="boolint" title="boolean 3" on="1" off="2"/> <!-- integer example --> <setting pref="extensions.my
addon.int" type="integer" title="integer"/> <!-- string examp...
...And 9 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.
addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
... (to better ensure others do not also implement the same event with a different meaning, one might either attach a namespace to <myextensiondataelement/> and check on the event handler for the correct namespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties
adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to
add the event listener to the top-level document directly as shown below (also see: accessing the elements of the top-level document from a c...
...rface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.document.
addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); if you need to to pass lots of data, consider using cdata sections instead of the simple attributes on a custom element.
...And 9 more matches
Appendix D: Loading Scripts - Archive of obsolete content
most
add-ons and xul runner applications provide their primary functionality by loading and executing javascript code.
... because there are such a diverse array of
add-ons, and because the needs of developers have grown organically over time, the gecko runtime provides a number of means to dynamically load and execute javascript files.
...this is easily resolved by deferring the work to a dynamically
added onload hander.
...And 9 more matches
Handling Preferences - Archive of obsolete content
user preferences: the file user.js in the user's profile directory holds
additional preferences the user has set.
...in
addition, certain preferences may be locked such that users cannot change them.
...right-clicking on the list reveals several options that allow you to modify preference values and
add new ones.
...And 9 more matches
Intercepting Page Loads - Archive of obsolete content
note: performance is very important when it comes to
add-ons and page loads.
...in a nutshell, from the chrome code in the overlay we
add an event listener for the load event.
... this._loadhandler = function() {that._onpageload(); }; gbrowser.
addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window.
...And 9 more matches
Index of archived content - Archive of obsolete content
.htaccess ( hypertext access ) 2015 mdn fellowship program api navigator navigator.moznotification
add-ons
add-on sdk builder guides content scripts communicating with other scripts communicating using "port" communicating using "postmessage" cross-domain content scripts interacting with page scripts loading content scripts reddit example port self ...
...ce content processes getting started modules private properties firefox compatibility module structure of the sdk porting the library detector program id sdk api lifecycle sdk and xul comparison testing the
add-on sdk two types of scripts working with events xul migration guide high-level apis
addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications p...
... util/uuid window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials
add a context menu item
add a menu item to firefox
adding a button to the toolbar annotator creating annotations displaying annotations implementing the widget overview storing annotations chrome authorit...
...And 9 more matches
Manifest Files - Archive of obsolete content
that means that all you need to do to install a new package is
add a new manifest file either into the application chrome directory or the user specific chrome directory.
... note: starting in gecko 2.0, only the file named chrome.manifest is read automatically; if you need to read multiple manifest files, use the manifest command in that file to import
additional manifests.
...doesn't work with utf-8 with bom.)
add the following line to it: content tests file:///c:/testfiles/ the file path in that line should point to the directory created above.
...And 9 more matches
XBL Example - Archive of obsolete content
the content of the pages will be specified in the xul file, not in xbl, but we'll need to
add it inside the deck.
...the flex attribute has been
added to a number of elements so that it stretches in the right way.
... page property next, a property that holds the current page will be
added.
...And 9 more matches
XUL Questions and Answers - Archive of obsolete content
as an extension author, you have at least two options: use dom methods to dynamically create or rearrange elements file an enhancement request in bugzilla to have extra ids
added.
...possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print,
add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network.
... how to
add and remove values to/from, set up inside a <prefwindow> container to handle the preference?
...And 9 more matches
Multiple-column layout - Learn web development
you can follow along by downloading the multicol starting point file and
adding the css into the appropriate places.
...the column-count property will create as many columns as the value you give it, so if you
add the following css to your stylesheet and reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column.
...
adding a rule between columns with column-rule.
...And 9 more matches
What’s in the head? Metadata in HTML - Learn web development
adding a title we've already seen the <title> element in action — this can be used to
add a title to the document.
... this however can get confused with the <h1> element, which is used to
add a top level heading to your body content — this is also sometimes referred to as the page title.
... metadata: the <meta> element metadata is data that describes data, and html has an "official" way of
adding metadata to a document — the <meta> element.
...And 9 more matches
Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with
adding simple images to a webpage, the next step is to start
adding video and audio players to your html documents!
... in this article we'll look at doing just that with the <video> and <audio> elements; we'll then finish off by looking at how to
add captions/subtitles to your videos.
... objective: to learn how to embed video and audio content into a webpage, and
add captions/subtitles to video.
...And 9 more matches
Fetching data from the server - Learn web development
just inside the <script> element,
add the following code.
...to convert "verse 1" to "verse1.txt" we need to convert the v to lower case, remove the space, and
add .txt on the end.
...
add the following lines inside your updatedisplay() function: verse = verse.replace(" ", ""); verse = verse.tolowercase(); let url = verse + '.txt'; to begin creating an xhr request, you need to create a new request object using the xmlhttprequest() constructor.
...And 9 more matches
Object building practice - Learn web development
let's start by
adding the following constructor to the bottom of our code.
... horizontal and vertical velocity (velx and vely) — each ball is given a horizontal and vertical velocity; in real terms these values are regularly
added to the x/y coordinate values when we animate the balls, to move them by this much on each frame.
... drawing the ball first
add the following draw() method to the ball()'s prototype: ball.prototype.draw = function() { ctx.beginpath(); ctx.fillstyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); } using this function, we can tell the ball to draw itself onto the screen, by calling a series of members of the 2d canvas context we defined earlier (ctx).
...And 9 more matches
Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app,
adding in the html for it, and then breaking that html structure into components.
... planning out the layout of the todomvc app in the last article we set up a new ember project, then
added and configured our css styles.
... at this point we
add some html, planning out the structure and semantics of our todomvc app.
...And 9 more matches
Introduction to client-side frameworks - Learn web development
a brief history when javascript debuted in 1996, it
added occasional interactivity and excitement to a web that was, up until then, composed of static documents.
...this application should allow users to do things like render a list of tasks,
add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application.
...we can iterate over the data to render it; we can
add to an object to make a new task; we can use an identifier to find, edit, or delete a task.
...And 9 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
previous overview: client-side javascript frameworks next as we near the end of our react journey (for now at least), we'll
add the finishing touches to the main areas of functionality in our todo list app.
...
add the edittask() function inside your app component, in the same place as the other functions: function edittask(id, newname) { const editedtasklist = tasks.map(task => { // if this task has the same id as the edited task if (id === task.id) { // return {...task, name: newname} } return task; }); settasks(editedtasklist); } pass edittask into our <todo /> component...
...
add the following line just inside the top of your todo(props) { … } component definition: const [isediting, setediting] = usestate(false); next, we're going to rethink the <todo /> component — from now on, we want it to display one of two possible “templates", rather than the single template it's used so far: the "view" template, when we are just viewing a todo; this is what we’ve used ...
...And 9 more matches
Rendering a list of Vue components - Learn web development
previous overview: client-side javascript frameworks next at this point we've got a fully working component; we're now ready to
add multiple todoitem components to our app.
... in this artcle we'll look at
adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive.
...
adding some data to render first we need to get an array of to-do items.
...And 9 more matches
Debugging on Mac OS X
creating a debuggable build first, you need to build the application you're going to debug using --disable-optimize--enable-debug-symbols in your .mozconfig (also
add --enable-debug if you want assertions etc.
...now, right click on the root item, select '
add files to "<project-name>"', select all the files and directories in your source directory, untick "copy items if needed", then click
add.
... (these will then be progressively
added under the root item <project-name> in the left-hand pane.
...And 9 more matches
source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void
addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations...
...selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] number acolumn, [optional] number aalign); void setselection(number astart, number aend); breakpoint management void
addbreakpoint(number alineindex, [optional] string acondition); array getbreakpoints(); boolean removebreakpoint(number alineindex); properties attribute type description dirty boolean set this value to false whenever you save the text; the editor will update it to true when the content is changed.
...in
addition, when this value changes, the "dirtychanged" event is sent.
...And 9 more matches
about:memory
once firefox's memory usage has gotten high) open a new tab and type "about:memory" into the
address bar and hit "enter".
...if it gets higher, it indicates that
additional memory reporters should be
added.
... dmd can be used to determine where these memory reporters should be
added.
...And 9 more matches
PRHostEnt
a structure that defines a list of network
addresses.
... this structure is output from pr_gethostbyname and pr_gethostby
addr and passed to pr_enumeratehostent.
... syntax #include <prnetdb.h> typedef struct prhostent { char *h_name; char **h_aliases; #if defined(_win32) print16 h_
addrtype; print16 h_length; #else print32 h_
addrtype; print32 h_length; #endif char **h_
addr_list; } prhostent; fields the structure has the following fields: h_name pointer to the official name of host.
...And 9 more matches
Property attributes
spidermonkey
additionally defines several non-standard property attributes.
... mxr id search for jsprop_permanent jsprop_propop_accessors passed to js_define(uc)property* and js_defineelement if getters/setters are jspropertyop/jsstrictpropertyop
added in spidermonkey 38.
...obsolete since jsapi 39 this flag has an
additional special meaning when used with js_defineproperty, js_fs, and other apis that define properties: it means that the name parameter is actually an integer unsafely cast to a pointer type, not a string.
...And 9 more matches
Animated PNG graphics
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the portable network graphics (png) format,
adding support for animated images.
... it is intended to be a replacement for simple animated images that have traditionally used the gif format, while
adding support for 24-bit images and 8-bit transparency.
... structure an apng stream is a normal png stream as defined in the png specification, with three
additional chunk types describing the animation and providing
additional frame data.
...And 9 more matches
amIWebInstaller
toolkit/mozapps/extensions/amiwebinstaller.idlscriptable this interface is used to allow web pages to start installing
add-ons.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean install
addonsfromwebpage(in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
... methods install
addonsfromwebpage() installs an array of
add-ons at the request of a webpage.
...And 9 more matches
nsIDNSRecord
since a dns query may return more than one resolved ip
address, the record acts like an enumerator, allowing the caller to easily step through the list of ip
addresses.
... inherits from: nsisupports last changed in gecko 1.7 method overview prnet
addr getnext
addr(in pruint16 aport); native code only!
... acstring getnext
addrasstring(); boolean hasmore(); void rewind(); attributes attribute type description canonicalname acstring for example, www.mozilla.org --> rheet.mozilla.org.
...And 9 more matches
nsIHTMLEditor
editor/idl/nsihtmleditor.idlscriptable please
add a summary to this article.
... inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void
adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void
addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aeven...
...aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); nsisupportsarray getlinkedobjects(); void getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean
add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent...
...And 9 more matches
nsIServerSocket
netwerk/base/public/nsiserversocket.idlscriptable please
add a summary to this article.
...to create an instance, use: var serversocket = components.classes["@mozilla.org/network/server-socket;1"] .createinstance(components.interfaces.nsiserversocket); method overview void init(in long aport, in boolean aloopbackonly, in long abacklog); void initwith
address([const] in prnet
addrptr a
addr, in long abacklog);native code only!
... void close(); void asynclisten(in nsiserversocketlistener alistener); prnet
addr get
address();native code only!
...And 9 more matches
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.
... query.involves(identity1, identity2, ...):
add the constraint that the message must "involve" one of the identities provided.
... gloda.daterange([lowerdate1, upperdate1], [lowerdate2, upperdate2], ...):
add the constraint that the message date (per the message's date header) must fall within one of the specified inclusive ranges.
...And 9 more matches
Browser Console - Firefox Developer Tools
however, rather than logging this information for a single content tab, it logs information for all content tabs, for
add-ons, and for the browser's own code.
... if you also want to use the other web developer tools in the regular web toolbox with
add-on or browser code, consider using the browser toolbox.
...to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and
add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings.
...And 9 more matches
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.
... get
additionaltools() returns an array of tooldefinition objects for tools
added by
addons.
... window.document.body.
addeventlistener("click", this.handleclick); } mypanel.prototype = { open: function() { // any asynchronous operations should be done here.
...And 9 more matches
Migrating from Firebug - Firefox Developer Tools
the devtools do not have a side panel like the command editor (which is requested in bug 1133849), but therefore has a separate tool called scratchpad, which can be
added as panel to the toolbox or opened in a separate window via firefox menu > developer > scratchpad or shift + f4.
... in firebug you
add new rules by right-clicking and choosing
add rule...
...the devtools also have a context menu option for that named
add new rule and
additionally have a + button within the rules panel's toolbar to create new rules.
...And 9 more matches
Dragging and Dropping Multiple Items - Web APIs
mozilla supports the ability to drag multiple items using some
additional non-standard methods.
... these are methods that mirror the types property as well as the getdata(), setdata() and cleardata() methods, however, they take an
additional argument that specifies the index of the item to retrieve, modify or remove.
... setting and getting with indices the mozsetdataat() method allows you to
add multiple items during a dragstart event.
...And 9 more matches
HTML Drag and Drop API - Web APIs
this overview of html drag and drop includes a description of the interfaces, basic steps to
add drag-and-drop support to an application, and an interoperability summary of the interfaces.
...datatransfer objects also have methods to
add or remove items to the drag's data.
... the dragevent and datatransfer interfaces should be the only ones needed to
add html drag and drop capabilities to an application.
...And 9 more matches
Timing element visibility with the Intersection Observer API - Web APIs
the sidebar is represented using an <aside> element, and is styled as follows: aside { grid-column: 1; grid-row: 2; background-color: cornsilk; p
adding: 5px 10px; } aside ul { p
adding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen.
... articles each article is contained in an <article> element, styled like this: article { background-color: white; p
adding: 6px; } article:not(:last-child) { margin-bottom: 8px; } article h2 { margin-top: 0; } this creates article boxes with a white background which float atop the blue background, with a small margin around the article.
... .ad { height: 96px; p
adding: 6px; border-color: #555; border-style: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position: relative; float: right; p
adding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here.
...And 9 more matches
Using Service Workers - Web APIs
let’s start this section by looking at a code sample — this is the first block you’ll find in our service worker: self.
addeventlistener('install', (event) => { event.waituntil( caches.open('v1').then((cache) => { return cache.
addall([ './sw-test/', './sw-test/index.html', './sw-test/style.css', './sw-test/app.js', './sw-test/image-list.js', './sw-test/star-wars-logo.jpg', './sw-test/gallery/', './sw-test/gallery/bountyhunters.jpg', '.
.../sw-test/gallery/mylittlevader.jpg', './sw-test/gallery/snowtroopers.jpg' ]); }) ); }); here we
add an install event listener to the service worker (hence self), and then chain a extendableevent.waituntil() method onto the event — this ensures that the service worker will not install until the code inside waituntil() has successfully occurred.
...this returns a promise for a created cache; once resolved, we then call a function that calls
addall() on the created cache, which for its parameter takes an array of origin-relative urls to all the resources you want to cache.
...And 9 more matches
Using Web Workers - Web APIs
in
addition, they can perform i/o using xmlhttprequest (although the responsexml and channel attributes are always null).
... note: see the web workers api landing page for reference documentation on workers and
additional guides.
...in
addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
...And 9 more matches
Using CSS animations - CSS: Cascading Style Sheets
you can optionally include
additional keyframes that describe intermediate steps between the start and end of the animation.
... <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and
addressed her in a languid, sleepy voice.</p> note: reload page to see the animation, or click the codepen button to see the animation in the codepen environment.
...
adding another keyframe let’s
add another keyframe to the previous example’s animation.
...And 9 more matches
box-sizing - CSS: Cascading Style Sheets
if the element has any border or p
adding, this is then
added to the width and height to arrive at the size of the box that's rendered on the screen.
... this means that when you set width and height, you have to adjust the value you give to allow for any border or p
adding that may be
added.
... for example, if you have four boxes with width: 25%;, if any has left or right p
adding or a left or right border, they will not by default fit on one line within the constraints of the parent container.
...And 9 more matches
filter - CSS: Cascading Style Sheets
if they have different lengths, the missing equivalent filter functions from the longer list are
added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules.
...gb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); p
adding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { p
adding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgb...
...en; } #img2 { width:100%; height:auto; -moz-filter:brightness(2); -webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; height:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); p
adding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { p
adding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } contrast() the contrast() function adjusts the contrast of the input image.
...And 9 more matches
Audio and Video Delivery - Developer guides
if you need something extra, it's possible to
add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums.
... a quick example — first set up your audio and custom controls in html: <audio id="my-audio" src="http://jplayer.org/audio/mp3/miaow-01-tempered-song.mp3"></audio> <button id="my-control">play</button>
add a bit of javascript to detect events to play and pause the audio: window.onload = function() { var myaudio = document.getelementbyid('my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play";...
... } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); } } mycontrol.
addeventlistener('click', function() { switchstate(); }, false); window.
addeventlistener( "keypress", checkkey, false ); } you can try this example out here.
...And 9 more matches
HTML documentation index - HTML: Hypertext Markup Language
3 applying color to html elements using css beginner, css, css colors, guide, html, html colors, html styles, styling html, color with css, there are lots of ways to
add color to your html elements to create just the look you want.
... 22 itemprop attribute, global attribute, html, html microdata, microdata, reference the itemprop global attribute is used to
add properties to an item.
... 36 html attribute reference attribute, attributes, beginner, configuring, element attributes, elements, html, reference, settings, web elements in html have attributes; these are
additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
...And 9 more matches
Evolution of HTTP - HTTP
with the help of the new http headers, the ability to transmit other documents than plain html files has been
added (thanks to the content-type header).
...n and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-and-see approach over the 1991-1995 period: a server and a browser
added one feature and it saw if it got traction.
... pipelining has been
added, allowing to send a second request before the answer for the first one is fully transmitted, lowering the latency of the communication.
...And 9 more matches
Browser detection using the user agent - HTTP
in
addition, it is not practical to test every one of the less popular browsers and test for them.
...can you prevent it by
adding some non-semantic <div> or <span> elements?
...the agent might be an older version of chrome, from before support was
added, or (because the feature was experimental at the time) it could be a later version of chrome that removed it.
...And 9 more matches
Closures - JavaScript
here's a slightly more interesting example—a make
adder function: function make
adder(x) { return function(y) { return x + y; }; } var
add5 = make
adder(5); var
add10 = make
adder(10); console.log(
add5(2)); // 7 console.log(
add10(2)); // 12 in this example, we have defined a function make
adder(x), that takes a single argument x, and returns a new function.
... in essence, make
adder is a function factory.
... it creates functions that can
add a specific value to their argument.
...And 9 more matches
Media container formats (file types) - Web media technologies
base 3gp media mime types audio video audio/3gpp video/3gpp audio/3gpp2 video/3gpp2 audio/3gp2 video/3gp2 these mime types are the fundamental types for the 3gp media container; other types may be used depending on the specific codec or codecs in use; in
addition, you can
add the codecs parameter to the mime type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.
... the original mpeg-4 part 1 file format was introduced in 1999; the version 2 format, defined in part 14, was
added in 2003.
... when specifying the mpeg-4 media type (audio/mp4 or video/mp4), you can
add the codecs parameter to the mime type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.
...And 9 more matches
self - Archive of obsolete content
access data that is bundled with the
add-on, and
add-on metadata.
... note that the self module is completely different from the global self object accessible to content scripts, which is used by a content script to communicate with the
add-on code.
... globals properties uri this property represents an
add-on associated unique uri string.
...And 8 more matches
ui/button/action - Archive of obsolete content
experimental
add a button to the firefox user interface.
... you can
add a "badge" to a button using its badge property.
...you can also
add, or change, the listener afterwards: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firs...
...And 8 more matches
Chapter 1: Introduction to Extensions - Archive of obsolete content
about extensions management using the
add-ons manager firefox's
add-ons manager is an excellent way to manage extensions, and is a great step up in ease of use.
... the
add-ons manager handles the following tasks: safely installs and uninstalls
add-ons makes sure
add-ons are compatible with the version of firefox you're using manages a whitelist of sites trusted for installing
add-ons helps troubleshoot
add-ons by disabling them and offering a safe mode confirms and runs updates provides access to
add-ons' settings dialogs provides access to
add-ons' support sites development environment amenities initially, there wasn't adequate documentation available, and extension developers were largely left to fend for themselves1; however, now there's a considerable store of knowledge.
... this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 extensions and themes published at the firefox
add-ons site (https://
addons.mozilla.org).
...And 8 more matches
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.
...the key to this ability, if you'll pardon the pun, is the ability to
add a keyword to any mozilla bookmark.
...once that's done, all it takes to go to the cnn home page would be to type <tt>cnn</tt> into the
address bar.
...And 8 more matches
Making it into a static overlay - Archive of obsolete content
the two ways of doing that are to integrate it into the mozilla codebase (in which case it is no longer an extension but rather part of the default mozilla distribution) and to package it into an installer that users can run from within mozilla to
add the extension to their mozilla installation.
...because our extension modifies an existing file in the mozilla distribution, before we package it up we need to separate the modifications into a different file and
add them back in at run time via a dynamic xul overlay.
...static overlays are
added to a xul file via a reference at the top of the file (much like stylesheets and javascript scripts).
...And 8 more matches
Tamarin build documentation - Archive of obsolete content
note that
additional command-line arguments are only available in the debug configuration.
... the tamarin codebase has the ability to build
additional code which supports debugging hooks.
... $ make cppflags=-davmplus_verbose
additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug 537817) has been fixed in the tamarin-redux repo.
...And 8 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
the sessions can be set using the searchsessions attribute or by calling the
addsession method.
...hlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods
addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... gloda new in thunderbird 3
addrbook new in thunderbird 3 requires seamonkey 2.0 the user's
address book is searched.
...And 8 more matches
Creating a Window - Archive of obsolete content
those will be
added in the next section.
...if you want to force the window to become visible you can
add the width and height attribute to the window tag.
...you would normally
add this line as is at the top of each xul file.
...And 8 more matches
Keyboard Shortcuts - Archive of obsolete content
you could
add any character for this attribute to require that key to be pressed.
... here are some
additional examples: <keyset> <key id="copy-key" modifiers="control" key="c"/> <key id="explore-key" modifiers="control alt" key="e"/> <key id="paste-key" modifiers="accel" key="v"/> </keyset> keycode attribute the key attribute is used to specify the key that must be pressed.
... vk_d vk_e vk_f vk_g vk_h vk_i vk_j vk_k vk_l vk_m vk_n vk_o vk_p vk_q vk_r vk_s vk_t vk_u vk_v vk_w vk_x vk_y vk_z vk_numpad0 vk_numpad1 vk_numpad2 vk_numpad3 vk_numpad4 vk_numpad5 vk_numpad6 vk_numpad7 vk_numpad8 vk_numpad9 vk_multiply vk_
add vk_separator vk_subtract vk_decimal vk_divide vk_f1 vk_f2 vk_f3 vk_f4 vk_f5 vk_f6 vk_f7 vk_f8 vk_f9 vk_f10 vk_f11 vk_f12 vk_f13 vk_f14 vk_f15 vk_f16 vk_f17 vk_f18 vk_f19 vk_f20 vk_f21 vk_f22 vk_f23 vk_f24 vk_num_lock vk_scroll_lock vk_comma vk_period v...
...And 8 more matches
Templates - Archive of obsolete content
try
adding a bookmark in the browser while you have the example window open.
... inside the template by
adding these two attributes to the box above, it allows the generation of elements using the template.
... more examples by
adding these features to the container the template is in, which in this case is a box, and to the elements inside the template, we can generate various interesting lists of content from external data.
...And 8 more matches
Using Spacers - Archive of obsolete content
« previousnext » in this section, we will find out how to
add some spacing in between the elements we have created.
...
adding spacers one of the problems with developing user interfaces is that each user has a different display.
...in
addition, different platforms may have special requirements on the user interface.
...And 8 more matches
XUL Structure - Archive of obsolete content
when you type the url of an html page into the browser's
address field, the browser locates the web site and downloads the content.
... this chrome package registration is the way firefox extensions are able to
add features to the browser.
...for example, the messenger component has descriptions of the mail messages list window, the composition window and the
address book dialogs.
...And 8 more matches
XUL Template Primer - Bindings - Archive of obsolete content
the <bindings> element is used to create
additional,optional variable bindings, in
addition to those that are specified in a rule's <conditions>.
...netscape.com/nc-rdf#friends" object="?friends"/> <member container="?friends" child="?friend"/> <triple subject="?friend" predicate="http://home.netscape.com/nc-rdf#name" object="?name"/> </conditions> <bindings> <binding subject="?friend" predicate="http://home.netscape.com/nc-rdf#
address" object="?
addr"/> <binding subject="?
addr" predicate="http://home.netscape.com/nc-rdf#street" object="?street"/> </bindings> <action> <hbox uri="?friend"> <label value="?name"/> <label value="?street"/> </hbox> </action> </rule> </template> </vbox>...
...see the rdf/xml file friends.rdf, below, a simple database with name and
address information for some of my good friends.
...And 8 more matches
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward: var el = document.getelementsbytagname("canvas")[0]; el.
addeventlistener("touchstart", handlestart); el.
addeventlistener("touchmove", handlemove); el.
addeventlistener("touchend", handleend); el.
addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around).
...the function touchhandler will assign proper variables to the ship's position so that we can use it for both cases: when the player touches the screen but doesn't move it (touchstart), and when the finger is moved on the screen (touchmove): document.
addeventlistener("touchstart", touchhandler); document.
addeventlistener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ",...
... you can
add more pointers to the game by using; this.game.input.
addpointer up to ten pointers can be managed simultaneously.
...And 8 more matches
Animations and tweens - Game development
loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to animations.
add() seen below: ball = game.
add.sprite(50, 250, 'ball'); ball.animations.
add('wobble', [0,1,0,2,0,1,0,2,0], 24); to
add an animation to the object we use the animations.
add() method, which contains the following parameters the name we chose for the animation an array defining the order in which to display the frames during the animation.
... applying the animation when the ball hits the p
addle in the arcade.collide() method call that handles the collision between the ball and the p
addle (the first line inside update(), see below) we can
add an extra parameter that specifies a function to be executed every time the collision happens, in the same fashion as the ballhitbrick() function.
... update the first line inside update() as shown below: function update() { game.physics.arcade.collide(ball, p
addle, ballhitp
addle); game.physics.arcade.collide(ball, bricks, ballhitbrick); p
addle.x = game.input.x || game.world.width*0.5; } then we can create the ballhitp
addle() function (having ball and p
addle as default parameters), playing the wobble animation when it is called.
...And 8 more matches
HTML: A good basis for accessibility - Learn web development
an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll
add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
...<br><br> i'll
add another paragraph here too.
...
additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain.
...And 8 more matches
HTML: A good basis for accessibility - Learn web development
an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll
add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
...<br><br> i'll
add another paragraph here too.
...
additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain.
...And 8 more matches
Accessible multimedia - Learn web development
let's take the video example from above and
add custom controls to them.
...these controls of course won't do anything by default; to
add functionality, we will use javascript.
... we will first need to store references to each of the controls —
add the following to the top of your javascript file: const playpausebtn = document.queryselector('.playpause'); const stopbtn = document.queryselector('.stop'); const rwdbtn = document.queryselector('.rwd'); const fwdbtn = document.queryselector('.fwd'); const timelabel = document.queryselector('.time'); next, we need to grab a reference to the video/audio player itself —
add this line below the previous lines: const player = document.queryselector('video'); this holds a reference to a htmlmediaelement object, which has several useful properties and methods available on it that can be used to wire up functionality to our buttons.
...And 8 more matches
Beginner's guide to media queries - Learn web development
you can easily make the viewport smaller and larger to see where the content would be improved by
adding a media query and tweaking the design.
...you can start with your desktop or widest view and then
add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and
add layout as the viewport becomes larger.
... walkthrough: a simple mobile-first layout our starting point is an html document with some css applied to
add background colors to the various parts of the layout.
...And 8 more matches
Styling web forms - Learn web development
form controls were
added to html in the html 2 specification in 1995; css wasn't released until late 1996, and wasn't supported very well by browsers for a few years after that.
...to make your forms' appearance consistent with the rest of your content, you can
add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size: 100%; } the inherit property value causes the property value to match the computed value of the property of its parent element; inheriting the value of the parent.
... box sizing all text fields have complete support for every property related to the css box model, such as width, height, p
adding, margin, and border.
...And 8 more matches
Advanced text formatting - Learn web development
this is usually a feeling, thought or piece of
additional background information description lists use a different wrapper than the other list types — <dl>; in
addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element.
...this is usually a feeling, thought, or piece of
additional background information.</dd> </dl> the browser default styles will display description lists with the descriptions indented somewhat from the terms.
...this is usually a feeling, thought, or piece of
additional background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists;
add elements to the raw text in the input field so that it appears as a description list in the output field.
...And 8 more matches
HTML table basics - Learn web development
add these inside the body of your html.
...
add the following inside your table tags: <td>hi, i'm your first cell.</td> if we want a row of four cells, we need to copy these tags three times.
...every cell we
add makes the row grow longer.
...And 8 more matches
Looping code - Learn web development
canvas.height = height; function random(number) { return math.floor(math.random()*number); } 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(); } } btn.
addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: 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(); } random(x), defined earlier...
...after each time the loop has run, 1 will be
added to i (i++), then the process will start again.
...sults in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.
addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textconten...
...And 8 more matches
Beginning our React todo list - Learn web development
previous overview: client-side javascript frameworks next let's say that we’ve been tasked with creating a proof-of-concept in react – an app that allows users to
add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.
... this article will walk you through putting the basic app component structure and styling in place, ready for individual component definition and interactivity, which we'll
add later.
...
add a task using the mouse or keyboard.
...And 8 more matches
Handling common accessibility problems - Learn web development
<br><br> i'll
add another paragraph here too.
... <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll
add another paragraph here too.</p> <h2>my subheading</h2> <p>this is the first subsection of my document.
...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.
...And 8 more matches
Cross Process Object Wrappers
add-on code is still allowed to use cpows "unsafely".
... however, if an
add-on passes a cpow into a platform api, and that platform api then attempts an unsafe operation on it, this will throw an exception.
... so as a general rule,
add-ons should avoid passing cpows into non-
addon code.
...And 8 more matches
Implementing QueryInterface
( aiid.equals(nscomtypeinfo<nsisupports>::getiid()) ) foundinterface = ns_static_cast(nsisupports*, ns_static_cast(nsix*, this)); // i (may) have multiple |nsisupports| in me, // so first i cast to a specific base to avoid ambiguity else foundinterface = 0; nsresult status; if ( !foundinterface ) status = ns_nointerface; else { ns_
addref(foundinterface); status = ns_ok; } *ainstanceptr = foundinterface; return status; } what's so good about it?
...it has more than one return, but the primary return is at the end of the function as expected; and the
additional return is clear and alone at the top of the function.
... it only has one
addref.
...And 8 more matches
L20n Javascript API
when a context instance is frozen, no more resources can be
added or linked.
... var ctx = l20n.getcontext(); ctx.
addresource('<hello "hello, world!">'); ctx.requestlocales(); requestlocales can be called multiple times after the context instance emitted the ready event, in order to change the current language fallback chain, for instance if requested by the user.
... ctx.registerlocales('en-us', ['en-us', 'fr', 'pl']); ctx.requestlocales('fr-ca', 'fr'); ctx.ready(function() { // ctx.supportedlocales == ['fr']; }); ctx.
addresource(text: string)
add a string as the content of a resource to the context instance.
...And 8 more matches
Anonymous Shared Memory
first protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot);
addr = pr_memmap(fm); attr = pr_newprocessattr(); pr_processattrsetinheritablefilemap( attr, fm, shmname ); pr_createprocess(client); pr_destroyprocessattr(attr); ...
... y
adda ...
... pr_memunmap(
addr ); pr_closefilemap(fm); client: ...
...And 8 more matches
Bytecode Descriptions
format: jof_ic
add stack: lval, rval ⇒ (lval + rval) the binary + operator.
... pop two values, convert them to primitive values,
add them, and push the result.
... if both values are numeric,
add them; if either is a string, do string concatenation instead.
...And 8 more matches
JS_FS
//
added in spidermonkey 38 #define js_fninfo(name,call,info,nargs,flags) ...
... //
added in spidermonkey 17 #define js_self_hosted_fn(name,selfhostedname,nargs,flags) ...
... //
added in spidermonkey 31 #define js_self_hosted_sym_fn(symbol, selfhostedname, nargs, flags) ...
...And 8 more matches
TPS Tests
set up an environment and run a test to run tps, you should create a new firefox account using a restmail.net email
address (strictly speaking, restmail isn't required, but it will allow tps to automatically do account confirmation steps for you.
...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/dist/nightly.app/contents/macos/firefox ...
... you can sign up for an fxa account on stage or dev by creating an fxa account after
adding the identity.fxaccounts.autoconfig.uri preference (with the appropriate value) to about:config.
...And 8 more matches
XPCOM array guide
this array is read-only, and the interface does not provide any methods that will allow
adding and removing members.
... nsimutablearray - a scriptable container for scriptable xpcom objects, which allows
addition and removal of member objects.
...in the case of scriptable arrays like nsiarray however, the enumeration mechanism is often preferred because it avoids the
addref / release overhead that comes from accessing each object.
...And 8 more matches
nsIBrowserSearchService
netwerk/base/public/nsibrowsersearchservice.idlscriptable please
add a summary to this article.
... method overview void
addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback); void
addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url); void getdefaultengines([optional] out unsigned long enginecount, [retval, array, size_is(e...
... methods
addengine()
adds a new search engine from the file at the supplied uri, optionally asking the user for confirmation first.
...And 8 more matches
nsIDownloadManager
toolkit/components/downloads/public/nsidownloadmanager.idlscriptable this interface lets applications and extensions communicate with the download manager,
adding and removing files to be downloaded, fetching information about downloads, and being notified when downloads are completed.
...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 geck...
...(see bug 416683) download_type_download 0 the download type used by
adddownload.
...And 8 more matches
nsIMsgDBHdr
agged); void markhasattachments(in boolean hasattachments); void setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned long andflags(in unsigned long flags); void setreferences(in string references); acstring getstringreference(in long refnum); void setrecipientsarray(in string names, in string
addresses,in unsigned long num
addresses); void setcclistarray(in string names, in string
addresses,in unsigned long num
addresses); void setbcclistarray(in string names, in string
addresses,in unsigned long num
addresses);new in thunderbird 3.1 [noscript] void getauthorcollationkey(out octetptr key, out unsigned long len); [noscript] void getsubjectcollationkey(out o...
...any children of the ignored message will be marked as read when
added to the database.
... orflags() unsigned long orflags(in unsigned long flags); parameters flags flags to be
added to the current message flags.
...And 8 more matches
nsIMsgFolder
void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); void recursivedelete(in boolean deletestorage, in nsimsgwindow msgwindow); void createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder
addsubfolder(in astring foldername); void createstorageifmissing(in nsiurllistener urllistener); void compact(in nsiurllistener alistener, in nsimsgwindow amsgwindow); void compactall(in nsiurllistener alistener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflin...
... boolean testsemaphore(in nsisupports semholder); void getnewmessages(in nsimsgwindow awindow, in nsiurllistener alistener); void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); long getnumnewmessages(in boolean deep); void setnumnewmessages(in long numnewmessages); acstring generatemessageuri(in nsmsgkey msgkey); void
addmessagedispositionstate(in nsimsgdbhdr amessage,in nsmsgdispositionstate adispositionflag); void markmessagesread(in nsisupportsarray messages, in boolean markread); void markallmessagesread(); void markmessagesflagged(in nsisupportsarray messages, in boolean markflagged); void markthreadread(in nsimsgthread thread); void setlabelformessages(in nsisuppo...
...dow); acstring getstringproperty(in string propertyname); void setstringproperty(in string propertyname, in acstring propertyvalue); boolean isancestorof(in nsimsgfolder folder); boolean containschildnamed(in astring name); nsimsgfolder getchildnamed(in astring aname); nsimsgfolder findsubfolder(in acstring escapedsubfoldername); void
addfolderlistener(in nsifolderlistener listener); void removefolderlistener(in nsifolderlistener listener); void notifypropertychanged(in nsiatom property, in acstring oldvalue, in acstring newvalue); void notifyintpropertychanged(in nsiatom property, in long oldvalue, in long newvalue); void notifyboolpropertychanged(in nsiatom property, in boolean oldvalue, in bo...
...And 8 more matches
nsIPermissionManager
netwerk/base/nsipermissionmanager.idlscriptable please
add a summary to this article.
... last changed in gecko 16 (firefox 16 / thunderbird 16 / seamonkey 2.13) inherits from: nsisupports method overview void
add(in nsiuri uri, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime); void
addfromprincipal(in nsiprincipal principal, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime); void remove(in autf8string host, in string type); void removefromprincipal(in nsiprincipal principal, in string type); void removepermission(in nsipermission perm); void removeallsince(in int64_t since); void removeall(); pruint32 testexactpermission(in nsiuri uri, in string type); ...
... methods
add()
add permission information and permission type for a given uri.
...And 8 more matches
nsIWindowMediator
implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void
addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
... methods
addlistener() register a listener for window status changes.
... void
addlistener( in nsiwindowmediatorlistener alistener ); parameters alistener the listener to register.
...And 8 more matches
ctypes.open
a native file for use on unix systems is an so file, which is created and a c function called
add() is written.
... int
add(int a, int b) { return a + b; } to make this a shared library, a native file which can be loaded and used from js-ctypes, compile it with these commands: gcc -fpic -c mycfuntionsforunix.c gcc -shared -o mycfuntionsforunix.so mycfuntionsforunix.o a file named mycfuntionsforunix.so is successfully created.
... this native file can be placed in any folder of an
addon and then loaded from js-ctypes.
...And 8 more matches
Web Console remoting - Firefox Developer Tools
actor preferences to allow the web console to configure logging options while it is running, we have
added the setpreferences packet: { "to": "conn0.console9", "type": "setpreferences", "preferences": { "networkmonitor.saverequestandresponsebodies": false } } reply: { "updated": [ "networkmonitor.saverequestandresponsebodies" ], "from": "conn0.console10" } for convenience you can use webconsoleclient.setpreferences(prefs, onresponse).
... in firefox 25 we
added the getpreferences request packet: { "to": "conn0.console34", "type": "getpreferences", "preferences": [ "networkmonitor.saverequestandresponsebodies" ] } reply packet: { "preferences": { "networkmonitor.saverequestandresponsebodies": false }, "from": "conn0.console34" } you can also use the webconsoleclient.getpreferences(prefs, onresponse).
... the private flag tells if the error comes from a private window/tab (
added in firefox 24).
...And 8 more matches
Using the Gamepad API - Web APIs
in
addition to these events, the api also
adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page.
... you can use gamepadconnected like this: window.
addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
...gamepadconnected), a second event is dispatched to the focused window, gamep
addisconnected: window.
addeventlistener("gamep
addisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used.
...And 8 more matches
Capabilities, constraints, and settings - Web APIs
in
addition, the only acceptable input device is a camera facing the user (a "selfie cam").
... advanced constraints so-called advanced constraints are created by
adding an advanced property to the constraint set; this property's value is an array of
additional constraint sets which are considered optional.
...to collect a list of the available devices, you can call navigator.mediadevices.enumeratedevices(), then for each device which meets the desired criteria,
add its deviceid to the mediaconstraints object that eventually gets passed into getusermedia().
...And 8 more matches
Node - Web APIs
in
addition, every kind of dom node is represented by an interface based on node.
...for example, attempting to
add children to a node type that cannot have children will throw an exception.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node...
...And 8 more matches
WebRTC connectivity - Web APIs
the description includes information about the kind of media being sent, its format, the transfer protocol being used, the endpoint's ip
address and port, and other information needed to describe a media transfer endpoint.
...this exchange is handled using interactive connectivity establishment (ice, a protocol which lets two devices use an intermediary to exchange offers and answers even if the two devices are separated by network
address translation (nat).
...regardless of whether it's a new call, or reconfiguring an existing one, these are the basic steps which must occur to exchange the offer and answer, leaving out the ice layer for the moment: the caller captures local media via navigator.mediadevices.getusermedia() the caller creates rtcpeerconnection and called rtcpeerconnection.
addtrack() (since
addstream is deprecating) the caller calls rtcpeerconnection.createoffer() to create an offer.
...And 8 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.
addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.
addeventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
... we need to
add a gainnode and connect that through our audio graph to actually apply amplitude variations to our sound.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.
addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.
addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator();...
...And 8 more matches
Background audio processing using AudioWorklet - Web APIs
an audio context's audio worklet is a worklet which runs off the main thread, executing audio processing code
added to it by calling the context's audioworklet.
addmodule() method.
... calling
addmodule() loads the specified javascript file, which should contain the implementation of the audio processor.
... access the audio context's audioworklet through its audioworklet property, and call the audio worklet's domxref("worklet.
addmodule", "
addmodule()")}} method to install the audio worklet processor module.
...And 8 more matches
Web applications and ARIA FAQ - Accessibility
aria provides
additional semantics to describe the role, state, and functionality of many familiar user interface controls, such as menus, sliders, trees, and dialogs.
... it also provides
additional structural information, helping authors identify landmarks, regions, and grids on their pages.
...you may want to consider implementing aria using progressive enhancement techniques—such as
adding aria using javascript, not directly to your markup—in order to more gracefully support older browsers and assistive technologies.
...And 8 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
he grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div cl...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; align-self: start; } .item3 { grid-area: c; align-self: end; } .item4 { grid-ar...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; justify-self: start; } .item3 { grid-area: c; justify-self: end; } .item4 { gri...
...And 8 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
...to do this
add the names inside the square brackets with whitespace between them [sidebar-end main-start].
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
...And 8 more matches
<color> - CSS: Cascading Style Sheets
css level 2
added the orange keyword.
... css colors level 4
added the rebeccapurple keyword to honor web pioneer eric meyer.
... #adff2f grey #808080 honeydew #f0fff0 hotpink #ff69b4 indianred #cd5c5c indigo #4b0082 ivory #fffff0 khaki #f0e68c lavender #e6e6fa lavenderblush #fff0f5 lawngreen #7cfc00 lemonchiffon #fffacd lightblue #
add8e6 lightcoral #f08080 lightcyan #e0ffff lightgoldenrodyellow #fafad2 lightgray #d3d3d3 lightgreen #90ee90 lightgrey #d3d3d3 lightpink #ffb6c1 lightsalmon #ffa07a lightseagreen #20b2aa lightskyblue #87cefa lightslategray #77...
...And 8 more matches
Challenge solutions - Developer guides
selectors second paragraph blue challenge without changing your html file,
add a single rule to your css file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue.
... solution
add a rule with an id selector of #second and a declaration color: blue;, as shown below: #second { color: blue; } a more specific selector, p#second also works.
... both paragraphs blue challenge now change the rule you have just
added (without changing anything else), to make the first paragraph blue too.
...And 8 more matches
<input type="time"> - HTML: Hypertext Markup Language
this is simple enough, with the label and input as we've seen before, but with the
addition of a <p> element with a <span> to display the value of the time input: <form> <label for="starttime">start time: </label> <input type="time" id="starttime"> <p> value of the <code>time</code> input: <code> "<span id="value">n/a</span>"</code>.
... </p> </form> the javascript code
adds code to the time input to watch for the input event, which is triggered every time the contents of an input element change.
... var starttime = document.getelementbyid("starttime"); var valuespan = document.getelementbyid("value"); starttime.
addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data.
...And 8 more matches
Expressions and operators - JavaScript
there are also compound assignment operators that are shorthand for the operations listed in the following table: compound assignment operators name shorthand operator meaning assignment x = y x = y
addition assignment x += y x = x + y subtraction assignment x -= y x = x - y multiplication assignment x *= y x = x * y division assignment x /= y x = x / y remainder assignment x %= y x = x % y exponentiation assignment x **= y x = x ** y left shift assignment x <<= y x = x << y right shift assig...
...the standard arithmetic operators are
addition (+), subtraction (-), multiplication (*), and division (/).
...for example: 1 / 2; // 0.5 1 / 2 == 1.0 / 2.0; // this is true in
addition to the standard arithmetic operations (+, -, *, /), javascript provides the arithmetic operators listed in the following table: arithmetic operators operator description example remainder (%) binary operator.
...And 8 more matches
Inheritance and the prototype chain - JavaScript
here is what happens when trying to access a property: // let's create an object o from function f with its own properties a and b: let f = function () { this.a = 1; this.b = 2; } let o = new f(); // {a: 1, b: 2} //
add properties in f function's prototype f.prototype.b = 3; f.prototype.c = 4; // do not set the prototype f.prototype = {b:3,c:4}; this will break the prototype chain // o.[[prototype]] has properties b and c.
...in javascript, any function can be
added to an object in the form of a property.
... { constructor: ƒ dosomething(), __proto__: { constructor: ƒ object(), hasownproperty: ƒ hasownproperty(), isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolocalestring(), tostring: ƒ tostring(), valueof: ƒ valueof() } } we can
add properties to the prototype of dosomething(), as shown below.
...And 8 more matches
Installing and uninstalling web apps - Progressive web apps (PWAs)
depending on the device and features of the operating system and browser, this can result in what is essentially a fully featured application (for example, using webapk on android) or as a shortcut
added to their device’s screen.
... firefox for android on an android device using firefox, you'll see a "home" icon with a plus (+) icon inside it—this is the "
add to home screen" icon displayed for any site that has the necessary features in place.
... tapping this will show a confirmation banner—pressing the banner's big "+
add to home screen" button completes the action,
adding the app to the home screen.
...And 8 more matches
ui - Archive of obsolete content
you give it an icon, a label, and a click handler: var ui = require("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or
add it to a toolbar.
...this can then be
added to a designated area of the firefox user interface.
... at the moment you can only
add frames to a toolbar.
...And 7 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
run jpm init, accepting all the defaults open the file index.js and
add the code above run jpm run open ietf.org in the browser window that opens.
...to do this, you need to: save the script in
add-on's data directory.
... for example, if we save the script above under the
add-on's data directory in a file called my-script.js: // import the page-mod api var pagemod = require("sdk/page-mod"); // import the self api var self = require("sdk/self"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: self.data.url("my-script.js") }); or from firefox 34 onwards: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a scrip...
...And 7 more matches
Preferences - Archive of obsolete content
you should do the following:
add this line to some .properties file (for all of your locales), say to chrome://myext/locale/defaults.properties: extensions.myext.welcomemessage=localized default value
add the default value for extensions.myext.welcomemessage, pointing to that properties file, by
adding the following line to your file with default preferences (see below).
... (this is not exactly how it's coded in libpref, but it's equivalent) where the default values are read from all mozilla-based applications read (application directory)/defaults/preferences/*.js in
addition to that, recent versions of toolkit applications (firefox 1.0, thunderbird 1.0, and the like but not the mozilla suite) read extension defaults -- usually located in (profile folder)/extensions/(id)/defaults/preferences/ these files use simple javascript-like syntax.
... to
add a default value for a preference, you should
add a line like this to your default preferences file: pref("extensions.extensionname.preferencename", false); how to install an extension's defaults files for mozilla suite (not firefox and thunderbird), copy them to (appdir)/defaults/pref in your install script.
...And 7 more matches
Enhanced Extension Installation - Archive of obsolete content
if it is, a small set of metadata about it is written to the appropriate datasource (name, version, a flag to tell the system to properly install it on the next startup), and it is
added to the appropriate type container.
...if there is, and this remote information makes it so that the item is now compatible with the running version of the application, the item is configured in the manner described above (metadata written,
added to container).
...it locates the staged copy of the xpi file, extracts its contents (logging file
additions as it goes into {guid}/uninstall/uninstall), loads the install manifest file and copies all metadata into the appropriate datasource.
...And 7 more matches
Extension Etiquette - Archive of obsolete content
ideally, the location would be below the
add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator").
... sub-menus should be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the
add-on manager).
... other ui elements in general, toolbar items are very useful to end users because they can be removed or
added to various toolbars as necessary.
...And 7 more matches
Custom XUL Elements with XBL - Archive of obsolete content
you should see a new item in the hello world menu, that opens a binding test window where you can
add "persons" to a list.
...in this case we're
adding the "persons" dynamically, so you'll have to look into the js file to see how xshelloperson elements are created and
added to the dom just like any other.
...
addperson : function(aevent) { // ...
...And 7 more matches
Localizing an extension - Archive of obsolete content
« previousnext » this article expands upon the previous samples on extension writing by
adding localization support to our stock watcher extension.
...if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension
adding preferences to an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension.
...to
add a reference to the correct locale file for a given xul file, we need to
add one line to the xul file.
...And 7 more matches
Anonymous Content - Archive of obsolete content
xbl content xbl can be used to automatically
add a set of elements inside another element.
...mechanisms are provided for
adding attributes to the inner elements that were specified on the outer element.
...the content tag is used to declare anonymous content that will be
added to the scroll bar.
...And 7 more matches
Grids - Archive of obsolete content
inside that you should
add row elements, which are used for each row.
... 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.
...you could
add additional nested boxes or even another grid inside a single cell.
...And 7 more matches
The Box Model - Archive of obsolete content
various attributes placed on the child elements in
addition to some css style properties control the exact position and size of the children.
...
added elements will be placed underneath each other in a column.
...login prompt example you can
add as many elements as you want inside a box, including other boxes.
...And 7 more matches
Trees - Archive of obsolete content
(using advanced features, progress meters or checkboxes also can be
added to the tree) a tree consists of two parts, the set of columns, and the tree body.
...by using this element, you can specify
additional information about how the data in the columns are sorted and if the user can resize the columns.
... 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.
...And 7 more matches
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...
...happy debugging :) venkman follow these instructions to install venkman into your xulrunner application (xulrunner 1.9 and later): get venkman from
addons.mozilla.org (v0.9.87 at the time of writing).
...And 7 more matches
Extentsions FAQ - Archive of obsolete content
option #3 install status buttons 1.0 <https://
addons.mozilla.org/firefox/1272/> "lets you put toolbar buttons at either end of the status-bar.
... just drag them there from the toolbar customisation window, like you would when
adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
...<https://bugzilla.mozilla.org/show_bug.cgi?id=312818> "thunderbird requires domain in
addresses and doesn't always
add default" there is an extension that allows what you want attached to one of the comments in this bug.
...And 7 more matches
TCP/IP Security - Archive of obsolete content
when a user wants to transfer data across networks, the data is passed from the highest layer through intermediate layers to the lowest layer, with each layer
adding information.
... the payload consists of the information passed down from the previous layer, while the header contains layer-specific information such as
addresses.
... as previously explained, data is passed from the highest to the lowest layer, with each layer
adding more information.
...And 7 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the resolution to this issue is to
add the following code to your browser.css file somewhere below where the main-window is made transparent to support aero glass.
...if your firefox button relies on some button styling from toolbarbuttons.css you'll need to
add comparable style rules for #appmenu-toolbar-button in browser.css.
...a little experimenting may be required to fully
address this issue with your theme.
...And 7 more matches
Theme changes in Firefox 4 - Archive of obsolete content
in
addition, due to the way the archive is optiimized, some zip utilities don't work with it.
... controlling the actual icon size used by
add-on toolbar buttons the iconsize attribute of the browser's toolbar elements now has a different default value on each toolbar independently.
... use of the iconsize attribute on toolbar elements
add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar.
...And 7 more matches
Reference - Archive of obsolete content
well if you combine the two, you can have inherited private variables: function myclass(){ var property = 5; this.tellme = function(){ return property; } } function myotherclass(){ myclass.apply( this ); } var o = new myotherclass; alert( o.tellme() ); //alerts 5 as you'd expect — the preceding comment was
added by psygnisfive (talk – contribs) on 22:23, 4 december 2006 terminology we need a terminology appendix.
...--nickolay 11:50, 26 aug 2005 (pdt) i'll
add it to my todo list for the new skins.
...thanks :) -- dria 21:06, 26 aug 2005 (pdt) coding style should semicolons be
added to all the examples?
...And 7 more matches
Desktop mouse and keyboard controls - Game development
previous overview: control mechanisms next now when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to
add mouse and keyboard support, so the game can be playable also on desktop.
...first, we'd need an event listener to listen for the pressed keys: document.
addeventlistener('keydown', keydownhandler, false); document.
addeventlistener('keyup', keyuphandler, false); whenever any key is pressed down, we're executing the keydownhandler function, and when press finishes we're executing the keyuphandler function, so we know when it's no longer pressed.
...that way, if you already implemented the buttons as shown in the mobile touch controls article, it will work out of the box on the desktop too: var buttonenclave = this.
add.button(10, 10, 'logo-enclave', this.clickenclave, this); the button will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickenclave() function when clicked.
...And 7 more matches
Extra lives - Game development
we can make the game enjoyable for longer by
adding lives.
... new variables
add the following new variables below the existing ones in your code: var lives = 3; var livestext; var lifelosttext; these respectively will store the number of lives, the text label that displays the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives.
...
add the following lines below the existing scoretext definition inside your create() function: livestext = game.
add.text(game.world.width-5, 5, 'lives: '+lives, { font: '18px arial', fill: '#0095dd' }); livestext.anchor.set(1,0); lifelosttext = game.
add.text(game.world.width*0.5, game.world.height*0.5, 'life lost, click to continue', { font: '18px arial', fill: '#0095dd' }); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; the livestext and lifelosttext objects look very similar to the scoretext one — they define a position on the screen, the actual text to display, and the font styling.
...And 7 more matches
Debugging CSS - Learn web development
perhaps it is being inherited from a parent element and you need to
add a rule to overwrite it in the context of this element.
... the following video provides some useful tips on debugging css using the firefox devtools: editing values in
addition to turning properties on and off, you can edit their values.
...
adding a new property you can
add properties using the devtools.
...And 7 more matches
Flexbox - Learn web development
items flex to fill
additional space and shrink to fit into smaller spaces.
... try
adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we
added any css.
...one way in which you can fix this is to
add the following declaration to your <section> rule: flex-wrap: wrap; also,
add the following declaration to your <article> rule: flex: 200px; try this now; you'll see that the layout looks much better with this included: we now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line.
...And 7 more matches
The HTML5 input types - Learn web development
now we'll look at the functionality of newer form controls in detail, including some new input types, which were
added in html5 to allow collection of specific types of data.
... e-mail
address field this type of field is set using the value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email
address into the field.
... you can also use the multiple attribute in combination with the email input type to allow several email
addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email
addresses, including the @ key.
...And 7 more matches
How the Web works - Learn web development
in
addition to the client and the server, we also need to say hello to: your internet connection: allows you to send and receive data on the web.
... dns: domain name servers are like an
address book for websites.
... when you type a web
address in your browser, the browser looks at the dns to find the website's real
address before it can retrieve the website.
...And 7 more matches
Build your own function - Learn web development
next,
add the following inside the <script> element: function displaymessage() { } we start off with the keyword function, which means we are defining a function.
... finally,
add the following code inside the curly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this is quite a lot of code...
...in a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user
adding a new contact and the operation completing successfully, etc.
...And 7 more matches
Object-oriented JavaScript for beginners - Learn web development
there are lots of things you could know about a person (their
address, height, shoe size, dna profile, passport number, significant personality traits ...) , but in this case we are only interested in showing their name, age, gender, and interests, and we also want to be able to write a short introduction about them based on this data, and get them to say hello.
...
add this function within the script element: function createnewperson(name) { const obj = {}; obj.name = name; obj.greeting = function() { alert('hi!
...
add the following lines below your previous code
addition: let person1 = new person('bob'); let person2 = new person('sarah'); save your code and reload it in the browser, and try entering the following lines into your js console: person1.name person1.greeting() person2.name person2.greeting() cool!
...And 7 more matches
Getting started with Svelte - Learn web development
svelte sticks closely to the classic web development model of html, css, and js, just
adding a few extensions to html and javascript.
... note: recently svelte has
added official typescript support, one of its most requested features.
... it extends css by
adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles.
...And 7 more matches
Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this article we'll
add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
... using computed properties the aim here is to
add a summary count of our to-do list.
... to create a computed property, we need to
add a computed property to our component object, much like the methods property we've used previously.
...And 7 more matches
Introducing a complete toolchain - Learn web development
in
addition, you should include tests before you deploy to your production server to ensure your software works as intended — this already sounds like a necessary toolchain.
...however, this project has only 4 svg images, which were manually minified using svgo before
adding them to the project.
... as mentioned previously, github is a source code repository service that
adds community features such as issue tracking, following project releases and much more.
...And 7 more matches
The Firefox codebase: CSS Guidelines
before
adding more css it is good practice to check if the css that is being written is needed, it can be the case that a common component has been already written could be reused with or without changes.
... formatting spacing & indentation 2 spaces indentation is preferred
add a space after each comma, except within color functions: linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always
add a space before !important.
...however, never try to increase the selector of the rule you are
adding as it can easily become hard to understand.
...And 7 more matches
Message manager overview
this usage is deprecated because the
add-on sdk uses "content script" to refer to a similar but different kind of script.
... its most important functions and attributes are: childcount : contains the number of children (typically, browser windows) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts
addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagem...
... its most important functions and attributes are: childcount : contains the number of children (typically, browser tabs) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in this window broadcastasyncmessage() : send a message to all frame scripts in this window
addmessagelistener() : start listening to a specific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access you can access it as a property of the browser window: // chrome script let windowmm = window.messagema...
...And 7 more matches
MathML Torture Test
se">)</mo> </mrow> </math> </td></tr> <tr> <td>22</td> <td><img src="https://udn.realityripple.com/samples/dc/c12454a963.png" width="159" height="81" alt="texbook, 18.41" /></td> <td> <math display="block"> <mrow> <mo stretchy="false">{</mo> <munder> <mrow> <mover> <mrow> <mp
added width="0em"><mphantom><mo>(</mo></mphantom></mp
added> <mi>a</mi> <mo>,</mo> <mo>...</mo> <mo>,</mo> <mi>a</mi> </mrow> <mover> <mo>&overbrace;</mo> <mrow> <mi>k</mi> <mtext> </mtext> ...
... <mi>a</mi> <mtext>'s</mtext> </mrow> </mover> </mover> <mo>,</mo> <mover> <mrow> <mp
added width="0em"><mphantom><mo>(</mo></mphantom></mp
added> <mi>b</mi> <mo>,</mo> <mo>...</mo> <mo>,</mo> <mi>b</mi> </mrow> <mover> <mo>&overbrace;</mo> <mrow> <mi>ℓ</mi> <mtext> </mtext> <mi>b</mi> <mtext>'s</mtext> </mrow> </mover> </mover> </mrow> <munder> ...
...>d</mi> <mi>π</mi> <mo stretchy="false">(</mo> <mi>t</mi> <mo stretchy="false">)</mo> </mrow> </math> </td></tr> <tr> <td>22</td> <td> <math dir="rtl" display="block"> <mrow> <mo stretchy="false">{</mo> <munder> <mrow> <mover> <mrow> <mp
added width="0em"><mphantom><mo>(</mo></mphantom></mp
added> <mi>𞸀</mi> <mo>,</mo> <mo>...</mo> <mo>,</mo> <mi>𞸀</mi> </mrow> <mover> <mo>&overbrace;</mo> <mrow> <mi>𞸟</mi> <mtext>&n...
...And 7 more matches
NSPR Error Handling
pr_access_fault_error one of the arguments of the preceding function specified an invalid memory
address.
... pr_illegal_access_error one of the arguments of the preceding function specified an invalid memory
address.
... pr_
address_not_available_error the network
address (prnet
addr) is not available (probably in use).
...And 7 more matches
PR_Bind
binds an
address to a specified socket.
... syntax #include <prio.h> prstatus pr_bind( prfiledesc *fd, const prnet
addr *
addr); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket.
...
addr a pointer to a prnet
addr object representing the
address to which the socket will be bound.
...And 7 more matches
sslfnc.html
if you are performing operations that require write permission, for example s/mime operations such as
adding a certificate, use nss_initreadwrite instead.
...nss 2.8 supports tls in
addition to ssl2 and ssl3.
... description if you are writing an application that will use ssl sockets that handshake as a server, you must call ssl_configserversessionidcache to configure
additional session caches for server sessions.
...And 7 more matches
Property cache
nor do operations such as
add that only need to look up a property (.tostring) in unusual cases.
...without this guarantee, every access to a property via a prototype chain would have to recheck each link in the prototype chain, even though assigning to __proto__ is very rare.)
adding guarantee — if at time t0 the object x has shape s, and rt->protohazardshape is z, and x does not inherit a jsprop_shared or jsprop_readonly property with name n from any prototype, and at time t1 an object y has shape s and rt->protohazardshape is z, and no shape-regenerating gc occurred, then y does not inherit a jsprop_shared or jsprop_readonly property named n from any prototype.
... (informally:
adding a shared or readonly property to a prototype changes rt->protohazardshape.) (at the moment, xml objects and resolve hooks can trigger bugs in the implementation that break some of these guarantees.
...And 7 more matches
SpiderMonkey 1.8.7
new javascript language features xxx needs updating javascript 1.8.5
adds support for ecmascript edition 5, including es5 strict mode.
... since this is a conservative collector, it will often find "garbage"
addresses which can trigger warnings from certain code analysis tools.
... js_
addroot has been replaced by js_
addobjectroot, js_
addvalueroot and js_
addstringroot; similar changes were made for js_
addnamedroot and js_removeroot.
...And 7 more matches
History Service Design
this system provides
additional performance, flexibility, and querying capabilities over the old one, for both end users and extensions developers.
... objectives the primary objectives of the new history service implementation in places are: improve access to browsing history allow association of useful metadata with urls flexible query system for both end-users and
add-ons developers clean architecture for ease of code reuse and maintainability the most known and visible feature of history are views.
... performance to ensure performance a bunch of statements, commonly used when
adding or reading visit informations, are created at startup.
...And 7 more matches
Creating the Component Code
several new options have been
added to regxpcom in versions 1.4 and later.
...the variable kifactoryiid, for example, provides methods like equals() that can be used to facilitate comparisons in the code, as in the following example from the mozilla source: using class methods to handle identifiers if (aiid.equals(ns_get_iid(nsisupports))) { *ainstanceptr = (void*)(nsisupports*)this; ns_
addref_this(); return ns_ok; } finally, sample_cid is an example of a cid that uniquely identifies the component.
...it is only called once, which gives you a chance to
add any one time setup functionality.
...And 7 more matches
Finishing the Component
however, some point in the future, the nsifoo interface requires a major change, and methods are reordered, some are
added, others are removed.
...the location of the file and the steps for
adding that location to the build system vary depending on how you build this component.
... once you have made sure that your component builds with the new header file, you must derive the weblock class from the interface nsicontentpolicy, which you can do by simply
adding a public declaration when defining the class.
...And 7 more matches
Setting up the Gecko SDK
adding the gecko sdk to the project settings in order to build anything that uses gecko, you have to further modify the project so that it knows where to find the gecko sdk on the disk.
...this window is where you
add the include paths to the gecko sdk as well as two preprocessor defines: xpcom_glue mozilla_strict_api at a minimum, you must include the nspr, the embedstring and string include directories, and the xpcom include subdirectory.
... if your component will use other parts of the sdk (e.g., necko), you will have to
add these include directories to this field as well.
...And 7 more matches
Using XPCOM Utilities to Make Things Easier
instead of implementing the nsisupports yourself, ns_impl_isupports1 can expand to the implementation of
addref, release, and queryinterface for any object.
...for example: ns_impl_isupports2(classname, interface1, interface2) ns_impl_isupportsn(classname, interface1, ..., interfacen) these macros automatically
add the nsisupports entry for you, so you don't need to do something like this: ns_impl_isupports2(classname, interface1, nsisupports) take a close look at the above example.
... declaration macros ns_decl_nsisupports declares
addref, release, and queryinterface for you, and it also defines the mrefcnt required by ns_impl_isupports.
...And 7 more matches
nsIComponentManager
66 introduced gecko 0.7 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void
addbootstrappedmanifestlocation(in nsilocalfile alocation); void createinstance(in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void createinstancebycontractid(in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void getclassobject(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result);...
... void getclassobjectbycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void removebootstrappedmanifestlocation(in nsilocalfile alocation); methods
addbootstrappedmanifestlocation() loads a "bootstrapped" chrome.manifest file from the specified directory or xpi file.
... this method was introduced in gecko 8 to let bootstrapped
add-ons provide content at chrome:// uris.
...And 7 more matches
nsIMsgDatabase
mailnews/db/msgdb/public/nsimsgdatabase.idlscriptable please
add a summary to this article.
... nsimsgfolder afolder); void close(in boolean aforcecommit); void commit(in nsmsgdbcommit committype); void forceclosed(); void clearcachedhdrs; void resethdrcachesize(in unsigned long size); nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void
addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean
addhdrtodb); void listallkeys(in nsmsgkeyarrayref outputkeys); native code only!
...in nsmsgkey key, in nsmsglabelvalue label); void setstringproperty(in nsmsgkey akey, in string aproperty, in string avalue); void markimapdeleted(in nsmsgkey key, in boolean deleted, in nsidbchangelistener instigator); void applyretentionsettings(in nsimsgretentionsettings amsgretentionsettings, in boolean adeleteviafolder); boolean hasnew(); void clearnewlist(in boolean notify); void
addtonewlist(in nsmsgkey key); void startbatch(); void endbatch(); nsimsgofflineimapoperation getofflineopforkey(in nsmsgkey messagekey, in boolean create); void removeofflineop(in nsimsgofflineimapoperation op); nsisimpleenumerator enumerateofflineops(); void listallofflineopids(in nsmsgkeyarrayptr offlineopids); native code only!
...And 7 more matches
nsIMsgSearchSession
searchsession.
addscopeterm(components.interfaces.nsmsgsearchscope.offlinemail, afolder); var searchterm = searchsession.createterm(); var value = searchterm.value; value.str = avalue; searchterm.value = value; searchterm.op = searchsession.booleanor; searchterm.booleanand = false; searchsession.appendterm(searchterm); searchsession.search(null); inherits from: nsisupports method overview void
addsear...
...tener(in nsimsgsearchnotify listener); void unregisterlistener(in nsimsgsearchnotify listener); void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); long countsearchscopes(); void getnthsearchscope(in long which,out nsmsgsearchscopevalue scopeid, out nsimsgfolder folder); void
addscopeterm(in nsmsgsearchscopevalue scope, in nsimsgfolder folder); void
adddirectoryscopeterm(in nsmsgsearchscopevalue scope); void clearscopes(); [noscript] boolean scopeusescustomheaders(in nsmsgsearchscopevalue scope, in voidptr selection, in boolean forfilters); boolean isstringattribute(in nsmsgsearchattribvalue attrib); void
addallscopes(in nsmsg...
...searchscopevalue attrib); void search(in nsimsgwindow awindow); void interruptsearch(); void pausesearch(); void resumesearch(); [noscript] nsmsgsearchtype setsearchparam(in nsmsgsearchtype type, in voidptr param); [noscript] void
addresultelement(in nsmsgresultelement element); boolean matchhdr(in nsimsgdbhdr amsghdr, in nsimsgdatabase adatabase); void
addsearchhit(in nsimsgdbhdr header, in nsimsgfolder folder); attributes attribute type description searchterms nsisupportsarray readonly: numsearchterms unsigned long readonly: runningadapter nsimsgsearchadapter readonly: searchparam voidptr not scriptable and readonly: searchty...
...And 7 more matches
Using the clipboard
now that we have the object to copy, a transferring object needs to be created: var str = "text to copy"; var trans = transferable(sourcewindow); trans.
adddataflavor("text/unicode"); // we multiply the length of the string by 2, since it's stored in 2-byte utf-16 // format internally.
...the function
adddataflavor is used to tell the transferable that it needs to transfer data of a certain flavor.
... you can repeat the last two lines and call
adddataflavor and settransferdata for multiple flavors.
...And 7 more matches
LDAP Support
it assumes you are already familiar with configuring preferences for deployed builds in
addition to setting up thunderbird to use an ldap directory.
... mail compose typedown in mail compose, when typing a partial mail
address, a typedown window appears listing possible matches against
address books and ldap directories.
... ldap schema the following table summarizes the schema used by thunderbird to map between ldap attributes and attributes within the the
address book.
...And 7 more matches
Creating a Custom Column
getting started in this example we will be developing a small extension that will be
adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set).
...
adding a column by far the easiest part is the physical
addition of the column.
...to attach our column we
add another treecol tag ("colreplyto") with the settings that we would like to use.
...And 7 more matches
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.
...then you will find strange gaps between elements, even if you haven’t set any margin or p
adding on them.
... if a shadow dom contains a "slotted" element (an element with a slot attribute after it has been inserted inside a <slot> element — see
adding flexibility with slots for an explanation of how these are used), the "slotted" element will be shown inside its corresponding <slot> element, with a "reveal" link alongside it.
...And 7 more matches
Using the CSS Typed Object Model - Web APIs
we start with some html: a paragraph with a link, as well as a definition list to which we will
add all the css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we
add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap().
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values,
adding a <dt> and <dd> for each for (const [prop, val] of defaultcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } the computedstylemap() method returns a stylepropertymapreadonly o...
...And 7 more matches
Advanced animations - Web APIs
in this part we will have a closer look at the motion itself and are going to
add some physics to make our animations more advanced.
...
adding velocity now that we have a ball, we are ready to
add a basic animation like we have learned in the last chapter of this tutorial.
...the ball gets moving by
adding a velocity vector to the position.
...And 7 more matches
Key Values - Web APIs
[3] firefox did not
add support for the symbol key until firefox 37.
...in
addition, not all keyboards have all of these keys.
... keycode_tv_timer_programming (258) [1] firefox
added proper support for the "tv" key in firefox 37; before that, this key generated the key code "live".
...And 7 more matches
Using the Payment Request API - Web APIs
options (optional) — an object containing
addtional options related to the payment.
...for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }) this object provides the developer with access to details they can use to complete the logical steps required after the payment completes, such as an email
address to contact the customer, a shipping
address for mailing goods out to them, etc.
... const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.
addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
...And 7 more matches
RTCTrackEvent - Web APIs
the webrtc api interface rtctrackevent represents the track event, which is sent when a new mediastreamtrack is
added to an rtcrtpreceiver which is part of the rtcpeerconnection.
... the target is the rtcpeerconnection object to which the track is being
added.
... receiver read only the rtcrtpreceiver used by the track that's been
added to the rtcpeerconnection.
...And 7 more matches
Lifetime of a WebRTC session - Web APIs
it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip
addressing system, and realized that something had to be done before we ran out of
addresses to use, so they started working on designing a new 64-bit
addressing system.
... but they realized that it would take longer to complete the transition than 32-bit
addresses would last, so other smart people came up with a way to let multiple computers share the same 32-bit ip
address.
... network
address translation (nat) is a standard which supports this
address sharing by handling routing of data inbound and outbound to and from devices on a lan, all of which are sharing a single wan (global) ip
address.
...And 7 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
window.
addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.
addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.query...
...selector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that toggles webxr on and off into xrbutton, then
adds a handler for click events.
... function sessionstarted(session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.
addeventlistener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.
addeventlistener("pointermove", handlepointermove); canvas.
addeventlistener("contextmenu", (event) => { event.preventdefault(); }); } if (allowkeyboardmotion) { document.
addeventlistener("keydown", hand...
...And 7 more matches
Using XMLHttpRequest - Web APIs
function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.
addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously.
...there are four primary ways of analyzing this xml document: using xpath to
address (or point to) parts of it.
...*/ however, more modern techniques are available, since the responsetype attribute now supports a number of
additional content types, which makes sending and receiving binary data much easier.
...And 7 more matches
Accessibility documentation index - Accessibility
5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the
addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents.
...an
addition and/or deletion in an editable document), and comments (e.g.
...examples of common problems include e-mail
addresses which are not valid, or a name field which does not contain at least a first name or a surname.
...And 7 more matches
system - CSS: Cascading Style Sheets
syntax /* keyword values */ system: cyclic; system: numeric; system: alphabetic; system: symbolic; system:
additive; system: fixed; /* combined values */ system: fixed 3; system: extends decimal; this may take one of three forms: one of the keyword values cyclic, numeric, alphabetic, symbolic,
additive, or fixed.
...
additive used to represent "sign-value" numbering systems, such as roman numerals, which rather than reuse digits in different positions to obtain different values, define
additional digits for larger values.
... the value of a number in such a system can be found out by
adding the digits in the number.
...And 7 more matches
CSS values and units - CSS: Cascading Style Sheets
left | right | none | inline-start | inline-end such values are used without quotes: .box { float: left; } css-wide values in
addition to the pre-defined keywords that are part of the specification for a property, all css properties accept the css-wide property values initial, inherit, and unset, which explicitly specify defaulting behaviors.
... a fourth value of revert was
added in the cascade level 4 specification, but it does not currently have good browser support.
... specifications specification status comment css values and units module level 4 editor's draft
adds the vi, vb, ic, cap, lh and rlh units.
...And 7 more matches
Layout and the containing block - CSS: Cascading Style Sheets
each box is divided into four areas: content area p
adding area border area margin area many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true.
...percentage values that are applied to the width, height, p
adding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block.
... if the position property is absolute, the containing block is formed by the edge of the p
adding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
...And 7 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
the email input displays the same, but will match the :invalid pseudo-class if more than one comma-separated email
address is included if the attribute is not present.
... when multiple is set on the email input type, the user can inlclude zero (if not also required), one or more comma-separated email
addresses.
... <input type="email" multiple name="emails" id="emails"> if and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated e-mail
addresses.
...And 7 more matches
<input type="url"> - HTML: Hypertext Markup Language
this doesn't necessarily mean the url
address exists, but it is at least formatted correctly.
...
additional attributes in
addition to the attributes that operate on all <input> elements regardless of their type, url inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the in...
...this can help avoid cases in which the user mis-types their web site's
address, or provides an invalid one.
...And 7 more matches
Link types - HTML: Hypertext Markup Language
note: this may be a mailto: hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the
address.
... <a>, <area>, <form> <link> noreferrer prevents the browser, when navigating to another page, to send this page
address, or any other value, as referrer via the referer: http header.
... <a>, <area>, <form> <link> opener reverts implicit rel="noopener"
addition on links with target="_blank" (see related html spec discussion, webkit change, and firefox bug discussion).
...And 7 more matches
An overview of HTTP - HTTP
it is never the server (though some mechanisms have been
added over the years to simulate server-initiated messages).
...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).
...with http/1.1 and the host header, they may even share the same ip
address.
...And 7 more matches
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
we examine how to
add offline functionality.
... installation the api allows us to
add event listeners for key events we are interested in — the first one is the install event: self.
addeventlistener('install', (e) => { console.log('[service worker] install'); }); in the install listener, we can initialize the cache and
add files to it for offline use.
... var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.
addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); return cache.
addall(contenttocache); }) ); }); there are two things that need an explanation here: what extendableevent.waituntil does, and what the caches object is.
...And 7 more matches
Using templates and slots - Web Components
so for example: <template id="my-paragraph"> <style> p { color: white; background-color: #666; p
adding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just
adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version 79).
...
adding flexibility with slots so far so good, but the element isn't very flexible.
... so, if we want to
add a slot into our trivial example, we could update our template's paragraph element like this: <p><slot name="my-text">my default text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots, <my-paragraph> just contains the fallback content "my default text".
...And 7 more matches
platform/xpcom - Archive of obsolete content
for example, the
add-on below implements the nsiobserver interface to listen for and log all topic notifications: var { class } = require('sdk/core/heritage'); var { unknown } = require('sdk/platform/xpcom'); var { cc, ci } = require('chrome') var observerservice = cc['@mozilla.org/observer-service;1'].
... getservice(ci.nsiobserverservice); var starobserver = class({ extends: unknown, interfaces: [ 'nsiobserver' ], topic: '*', register: function register() { observerservice.
addobserver(this, this.topic, false); }, unregister: function() { observerservice.removeobserver(this, this.topic); }, observe: function observe(subject, topic, data) { console.log('star observer:', subject, topic, data); } }); var starobserver = starobserver(); starobserver.register(); implementing xpcom factories the xpcom module exports a class called factory which implements the nsifactory interface.
... for example, this
add-on defines a subclass of unknown called helloworld that implements a function called hello.
...And 6 more matches
Low-Level APIs - Archive of obsolete content
many
add-ons are likely to want to use modules from this category.
...you can use these modules in your
add-on if you need to, but should be aware that the cost of privileged access is the need to take more elaborate security precautions.
... chrome the chrome module gives an
add-on sdk
add-on access to the components object, which in turn gives it access to a large set of privileged low-level firefox apis.
...And 6 more matches
Listening for Load and Unload - Archive of obsolete content
if your
add-on exports a function called main(), then that function will be called whenever the
add-on is loaded, and it will be passed an object containing a string describing the reason it was loaded as well as any arguments passed to it.
... if your
add-on exports a function called onunload(), then that function will be called when the
add-on is unloaded, and it will be passed a string describing the reason it was unloaded.
...you can just place your
add-on's code at the top level instead of wrapping it in a function assigned to exports.main().
...And 6 more matches
Using third-party modules (jpm) - Archive of obsolete content
the
add-on sdk includes a command-line tool that you use to initialize, run, test, and package
add-ons.
... the
add-on sdk is extensible by design: you can use the modules that ship inside firefox, but you can also create your own modules and make them available for anyone else to use.
...module developers can publish sdk modules to npm, and
add-on developers can install them from npm and build them into their
add-ons.
...And 6 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
modifying software would be changing its functionality or
adding new functions.
... these conditions will vary from one license to the next, but the open source definition stipulates the following minimum conditions: the integrity of the author’s source code must be preserved; no discrimination may be made against individuals or organizations; no discrimination may be made based on field of endeavor; no
additional licensing can be required when redistributing; license must not be specific to a product; license must not interfere with other software.
...the “no
additional licensing can be required when redistributing” rule means that you cannot prohibit the software’s use from anyone who does not buy a separate license.
...And 6 more matches
Setting up an extension development environment - Archive of obsolete content
explore this profile a little: change some settings, install any
additional extensions, and finally close this instance of firefox.
... tip: you can install either the developer profile or devprefs
add-ons to handle setting these preferences automatically, and skip the rest of this section.
...note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in
addition to warnings for your own extension.
...And 6 more matches
Signing an XPI - Archive of obsolete content
see signing and distributing your
add-on.
...in my case it's c:\apps\nspr-4.6\
add path
add the nss tools bin/ and lib/, and the nspr lib/ directories to the system path.
...certificate common name: xpi test organization: tjworld organization unit: software state or province: nottingham country (must be exactly 2 characters): gb username: tj email
address: certificates@lan.tjworld.net generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert"
added to database exported certificate to x509.raw and x509.cacert.
...And 6 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
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.
...
additionally, server-side technologies have also evolved, supporting and connecting different resources to different browsers.
...in
addition to these components, you will also find the piece of code that is responsible for the dhtml ticker.
...And 6 more matches
No Proxy For configuration - Archive of obsolete content
overview as browsers rapidly grew in popularity in the mid-90's, many network administrators
added proxy servers.
... entry points: preferences | advanced | proxies control-click menu for off line-online icon (network plug) configuration the no proxy list is composed of either domain elements or ipv4
address elements.
...s not block the main domain (mozilla.org) a hostname (without domain) hostname-only (see problems below) "localhost" also blocks any possible domains that start with the entry ("www.otherdomain.localhost") a hostname (with domain) domain name "www.mozilla.org" does not block hostnames or domains that end in the same string (other-www.mozilla.org) an ip
address ip
address "1.2.3.4" does not block hostnames that resolve to the ip
address ("127.0.0.1" does not block "localhost") a network network w/ cidr block "10.0.0.0/8" does not block hostnames that resolve to the ip
address range (10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" onl...
...And 6 more matches
Drag and Drop Example - Archive of obsolete content
first, we'll
add the wrapper scripts: <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an
additional script file dragboard.js is included which will contain the code we will write ourselves.
...we'll
add a boardobserver to the file dragboard.js in a moment.
... next, a palette will be
added to the right side of the window.
...And 6 more matches
Using microformats - Archive of obsolete content
loading the microformats api the microformats object is created using the new javascript script loader
added to firefox 3.
... predefined microformats firefox 3 provides definitions implementing several common microformats: adr represents an
address (such as a street or mailing
address).
... tag used to
add tags to other microformats.
...And 6 more matches
Monitoring downloads - Archive of obsolete content
onload: function() { // initialization code this.initialized = true; this.strings = document.getelementbyid("downloadlogger-strings"); this.dlmgr = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); this.dlmgr.
addlistener(downloadlogger); // open the database, placing its file in the profile directory this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); // get access to the storage service and ...
...the download manager instance is cached into a member variable in the downloadlogger object for reuse later, and its
addlistener() method is called to start listening for download status updates.
... note: the mozistorageconnection method close() is being
added to firefox 3 alpha 8; in prior versions of firefox, there is no way to explicitly close the database.
...And 6 more matches
New Skin Notes - Archive of obsolete content
please
add any feedback to this page.
...--callek
add "what not to do" css class to stylesheet, as discussed on talk:core javascript 1.5 reference.
...--dria headers need a little p
adding.
...And 6 more matches
Reading from Files - Archive of obsolete content
in
addition, lines may be read by reading the file up until a linefeed character is detected.
...this method actually takes a number of
additional arguments, however they are optional so they do not need to be specified if they aren't needed.
...a further read from the file will read
additional characters after the first 20.
...And 6 more matches
Menus - Archive of obsolete content
no special code needs to be written to open or close a menu or submenu, and, in
addition, the menus are placed on screen in the appropriate locations automatically.
...you can do this by
adding a flexible spacer.
...another way is to
add shortcut keys called access keys for each menu element to make it easier to access the menu commands.
...And 6 more matches
Creating a Skin - Archive of obsolete content
add a line to the file 'chrome/installed-chrome.txt of the following form: skin,install,url,file:///stuff/blueswayedshoes/ where the last part points to the directory you created.
... make sure to
add a slash at the end.
...
adding style rules first, let's decide what kind of changes we want to make.
...And 6 more matches
Tree View Details - Archive of obsolete content
next, let's look at some
additional functions that views may implement.
... in
addition to the getlevel method, there is a hasnextsibling function which, given a row, should return true if there is another row afterwards at the same level.
...this tree will only support a single parent level with an inner child level, but it could be extended to support
additional levels without too much effort.
...And 6 more matches
Using Remote XUL - Archive of obsolete content
the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .
add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
...for apache, you can do this by
adding the following line to your mime.types file: application/vnd.mozilla.xul+xml .xul alternately,
add this line to your httpd.conf file or, if the apache server is configured to allow it, to the .htaccess file in the directory from which the xul file is served:
addtype application/vnd.mozilla.xul+xml .xul then restart your web server.
... [optionally
add something about how flex only applies to one axis] note that for remote xul documents you can see changes you make to the ui by reloading the document with your browser's "reload" function, just as with a typical html page.
...And 6 more matches
The Implementation of the Application Object Model - Archive of obsolete content
a site admin could
add new bookmarks to the file, and then the user would pick them up.
...it does not make sense to confuse or obscure the purpose of html by
adding in a whole slew of new functionality that hasnothing to do with the display of web pages.
...if we ship a browser that does not have 100% support for css2, for example, but we've extended html by
adding 20-30 new tags, people are going to put down their blinders and see only the fact that we were off
adding a whole slew of new stuff to html when we could have been firming up our standards story.
...And 6 more matches
toolbar - Archive of obsolete content
note: gecko 2.0
adds support for external toolbars.
... note: starting in gecko 1.9.1, toolbar items are moved from the toolbarpalette and
added to the toolbar when a toolbar is first displayed.
...the value of this attribute should be a comma-separated list of item ids from the toolbarpalette or,
additionally, any of the following strings: "separator", "spring", "spacer".
...And 6 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.
... creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides
additional functionality (for example linky, which
adds an item to the context menu for opening multiple links in a document or selection).
... 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.
...And 6 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
in
addition, the jaxer “ajax server” (a project i work on at aptana) is an example of ssjs that uses not only spidermonkey, but also embeds the entire firefox browser engine in the application server such that you can do server-side dom manipulation and other ajaxy things server-side that rhino was not built to do.
...ote resource var u = new url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then
additional namespaces default xml namespace = "http://purl.org/rss/1.0/"; var dc = new namespace( "http://purl.org/dc/elements/1.1/" ); var rdf = new namespace( "http://www.w3.org/1999/02/22-rdf-syntax-ns#" ); // use e4x to process the feed var x = new xml( str ); for each( var i in x..item ) { print( "title: " + i.title + "\n" ); print( "about: " + i.@rdf::about + "\n" ); print( "link: " + i.lin...
...this accounts for
added simplicity and promotes rapid development methodologies.
...And 6 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} by making the content of each card 45% the width of the containing element, and
adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent.
...i also
added a border to the image, so that it would have a nice frame.
...thus: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} finishing the style
adding the background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image.
...And 6 more matches
Describing microformats in JavaScript - Archive of obsolete content
property specifications each property in the properties structure is specified by its name, and may include
additional attributes if the property so requires.
...possible values are: datetime an iso date anyuri a uri email an email
address tel a telephone number html html including tags float a floating-point number microformat a microformat microformat_property a specific property within the microformat specified by microformat.
... custom custom data a simple example the hcard microformat for defining contact information makes use of the adr microformat to define an
address.
...And 6 more matches
Build the brick field - Game development
however, it will quickly get boring if all you do is bounce the ball off the walls and the p
addle.
...
add the following lines to your code below the variables which you have previously declared in your program.
... var brickrowcount = 3; var brickcolumncount = 5; var brickwidth = 75; var brickheight = 20; var brickp
adding = 10; var brickoffsettop = 30; var brickoffsetleft = 30; here we've defined the number of rows and columns of bricks , their width and height, the p
adding between the bricks so they won't touch each other and a top and left offset so they won't start being drawn right from the edge of the canvas.
...And 6 more matches
Buttons - Game development
instead of starting the game right away we can leave that decision to the player by
adding a start button they can press.
...
add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation.
...
add the following to the bottom of the preload() function: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high.
...And 6 more matches
Backgrounds and borders - Learn web development
from
adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
...a background-color extends underneath the content and p
adding box of the element.
... in the example below, we have used various color values to
add a background color to the box, a heading, and a <span> element.
...And 6 more matches
Organizing your CSS - Learn web development
comment your css
adding comments to your css will help any future developer work with your css file, but will also help you when you come back to the project after a break.
...*/ a good tip is to
add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the css.
...in that case you could
add the url of the tutorial to the comments.
...And 6 more matches
Pseudo-classes and pseudo-elements - Learn web development
if we wanted to make the first paragraph in an article larger and bold, we could
add a class to that paragraph and then
add css to that class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got
added to the top of the document?
...instead of
adding the class, we could use the :first-child pseudo-class selector — this will always target the first child element in the article, and we will no longer need to edit the html (this may not always be possible anyway, maybe due to it being generated by a cms.) all pseudo-classes behave in this same kind of way.
... they target some bit of your document that is in a certain state, behaving as if you had
added a class into your html.
...And 6 more matches
Sizing items in CSS - Learn web development
if you
add a <div> to your html with no content, then give it a border as we did with the image, you will see a line on the page.
... in the example above, try
adding some text inside the empty element.
... percentage margins and p
adding if you set margins and p
adding as a percentage, you may notice some strange behavior.
...And 6 more matches
Styling tables - Learn web development
to do this,
add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { p
adding: 20px; } the most important parts to note are as fo...
... we've set some p
adding on the <th> and <td> elements — this gives the data items some space to breathe, making the table look a lot more legible.
... first,
add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now
add the following css into your style.css file, below the previous
addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: ...
...And 6 more matches
create fancy boxes - Learn web development
all of the following: its box model properties: width, height, p
adding, border, etc.
... box model tweak the box model alone allows us to do some basic stuff, like
adding simple borders, making squares, etc..
... it starts to get interesting when you push the properties to the limit by having negative p
adding and/or- margin by having border-radius larger than the actual size of the box.
...And 6 more matches
Advanced form styling - Learn web development
px auto; max-width: 400px; } form > div { margin-bottom: 20px; } select { -webkit-appearance: none; appearance: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; p
adding: 0; margin: 0; box-sizing: border-box; width: 100%; p
adding: 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 simultaneousl...
... also bear in mind that we've
added some javascript to the page that lists the files selected by the file picker, below the control itself.
... we've applied some global normalizing css to all the controls and their labels, to get them to size in the same way, adopt their parent font, etc., as mentioned in the previous article: button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; p
adding: 0; margin: 0; box-sizing: border-box; width: 100%; p
adding: 5px; height: 30px; } we also
added some uniform shadow and rounded corners to the controls on which it made sense: input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } on other controls like range types, progress bars, and meters the...
...And 6 more matches
Test your skills: Form validation - Learn web development
form validation 1 in this task, we are providing you with a simple support query form, and we want you to
add some validation features to it: make all of the input fields mandatory to complete before the form can be submitted.
... change the type of the "email
address" and "phone number" fields to make the browser apply some more specific validation suitable for the data being asked for.
...to help, you might want to consider
adding some simple css to show when a form field is valid or invalid.
...And 6 more matches
Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to
add some images and video to a funky splash page all about mozilla!
...unfortunately, no images or video have been
added yet — this is your job!
... you need to
add some media to make the page look nice and make more sense.
...And 6 more matches
Basic math in JavaScript — numbers and operators - Learn web development
you can test this by typing in the following: typeof mynumber; to fix the calculation, you can do this: number(mynumber) + 3; arithmetic operators arithmetic operators are the basic operators that we use to do sums in javascript: operator name purpose example +
addition
adds two numbers together.
... operator precedence in javascript is the same as is taught in math classes in school — multiply and divide are always done first, then
add and subtract (the calculation is always evaluated from left to right).
... increment and decrement operators sometimes you'll want to repeatedly
add or subtract one to or from a numeric variable value.
...And 6 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
an error message to indicate what's gone wrong: "typeerror: guesssubmit.
addeventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail.
... if we look at line 86 in our code editor, we'll find this line: guesssubmit.
addeventlistener('click', checkguess); the error message says "guesssubmit.
addeventlistener is not a function", which means that the function we're calling is not recognized by the javascript interpreter.
...here's a shortcut to save you some time in this instance:
addeventlistener().
...And 6 more matches
Inheritance in JavaScript - Learn web development
in
addition, we present some advice on when and where you might use oojs, and look at how classes are dealt with in modern ecmascript syntax.
... an updated greeting() method, which sounds a bit more formal than the standard greeting() method — more suitable for a teacher
addressing some students at school.
... defining a teacher() constructor function the first thing we need to do is create a teacher() constructor —
add the following below the existing code: function teacher(first, last, age, gender, interests, subject) { person.call(this, first, last, age, gender, interests); this.subject = subject; } this looks similar to the person constructor in many ways, but there is something strange here that we've not seen before — the call() function.
...And 6 more matches
Object prototypes - Learn web development
in this article, we explain how prototype chains work and look at how the prototype property can be used to
add methods to existing constructors.
... objective: to understand javascript object prototypes, how prototype chains work, and how to
add new methods onto the prototype property.
... modifying prototypes let's have a look at an example of modifying the prototype property of a constructor function — methods
added to the prototype are then available on all object instances created from the constructor.
...And 6 more matches
Client-Server Overview - Learn web development
add a new article to a wiki,
add a new contact to a database).
...
additional information can be encoded with the request (for example, html form data).
... information can be encoded as: url parameters: get requests encode data in the url sent to the server by
adding name/value pairs onto the end of it — for example http://mysite.com?name=fred&age=11.
...And 6 more matches
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
ember generate component-class footer next, go and find the newly-created todomvc/app/components/footer.js file and update it to the following: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class footercomponent extends component { @service('todo-data') todos; } now we need to go back to our todo-data.js file and
add some functionality that will allow us to return the number of incomplete todos (useful for showing how many are left), and clear the completed todos out of the list (which is what the “clear completed” functionality needs).
... in todo-data.js,
add the following getter underneath the existing all() getter to define what the incomplete todos actually are: get incomplete() { return this.todos.filter(todo => { return todo.iscompleted === false; }); } using array.filter(), we declare that "incomplete" todos are ones that have iscompleted equal to false.
... next,
add the following action underneath the existing
add(text) action: @action clearcompleted() { this.todos = this.incomplete; } this is rather nice for clearing the todos — we just need to set the todos array to equal the list of incomplete todos.
...And 6 more matches
Command line crash course - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to
add your own command line interface (cli) tools.
... introducing command options most terminal commands have options — these are modifiers that you
add onto the end of a command, which make it behave in a slightly different way.
... your output should look something like this (curl will first output some download counters and suchlike): location: /docs/web/api/fetch location: /docs/web/api/globalfetch/globalfetch.fetch() location: /docs/web/api/globalfetch/fetch location: /docs/web/api/windoworworkerglobalscope/fetch although contrived, we could take this result a little further and transform the location: line contents,
adding the base origin to the start of each one so that we get complete urls printed out.
...And 6 more matches
Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by
adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars,
address bar, search bar, and tab strip.
...these resources are then packed in a zip for publication on
addons.mozilla.org (amo) or for self-distribution.
... for more information on self-distribution, visit signing and distributing your
add-on.
...And 6 more matches
mach
$ cd objdir-firefox $ mach build
adding mach to your shell's search path if you
add mach to your path (by modifying the path environment variable to include your source directory, or by copying mach to a directory in the default path like /usr/local/bin) then you can type mach anywhere in your source directory or your objdir.
... you can
add the command to your .profile so it will run automatically when you start the shell: source /path/to/mozilla-central/python/mach/bash-completion.sh this will enable tab completion of mach command names, and in the future it may complete flags and other arguments too.
...however - mach does offer some
additional features over manual invocation of client.mk: if on windows, mach will automatically use pymake instead of gnu make, as that is preferred on windows.
...And 6 more matches
Displaying Places information using views
the following table shows the mappings between these magic column id values and their corresponding nsinavhistoryresultnode properties: treecol id or anonid corresponding nsinavhistoryresultnode property title title url uri date time visitcount accesscount keyword * description * date
added date
added lastmodified lastmodified tags tags ** icon *keyword and description are looked up in the places database using the nsinavhistoryresultnode property itemid.
...if you need to display
additional data or otherwise require more control over your view, you may need to write your own.
... convenience properties in
addition to the methods above, some properties of convenience are implemented directly on the built-in tree view.
...And 6 more matches
AsyncShutdown.jsm
example at some point during shutdown, the
add-on manager needs to ensure that all
add-ons have safely written their data to disk, before writing its own data.
... asyncshutdown.profilebeforechange.
addblocker( "
add-on manager: shutting down", function condition() { let promise = ...
...in this case, a crash report is produced, with information on all the shutdown blockers that have not been resolved, and all the
additional debug information returned by calls to info().
...And 6 more matches
Localizing without a specialized tool
if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated:
add "mdc search" manage search engines...
... you should see something like this: x-testing browser chrome browser aboutcerterror.dtd //
add and localize this file aboutdialog.dtd +aboutlink +aboutlink.accesskey +aboutversion +closecmdgnome.accesskey +closecmdgnome.label +copyright +copyright.accesskey +copyrightgnome.accesskey +copyrightinfo1 +copyrightinfo2 +licenselink +licenselinkt...
...ext aboutprivatebrowsing.dtd //
add and localize this file aboutrobots.dtd //
add and localize this file ...
...And 6 more matches
A guide to searching crash reports
the first link in each "signature" column cell links to a signature report, which contains
additional details about crash reports with that signature.
... the "
add term" link in each "signature" column cell lets you perform a narrower subsequent search among crash reports with that signature.
... the links in the remaining column cells also let you perform a narrower subsequent search with that link's value
added to the search criteria.
...And 6 more matches
An overview of NSS Internals
this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides
additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
...usually, nss will flush all data to disk as soon as new data has been
added to permanent storage.
... in
addition to the freebl, softoken, and ckbi modules, there is an utility library for general operations (e.g., encoding/decoding between data formats, a list of standardized object identifiers (oid)).
...And 6 more matches
NSS Tools modutil
you can use the tool to
add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... -
add modulename
add the named pkcs #11 module to the database.
... -jar jar-file
add a new pkcs #11 module to the database using the named jar file.
...And 6 more matches
NSS tools : signtool
to help
address some of these problems, you can associate digital signatures with the files in a jar archive.
...a network administrator manager might sign the same files with an
additional digital signature based on a company-generated certificate to indicate that the product is approved for use within the company.
...this is the case for some test certificates, as well as certificates issued by netscape certificate management system: you must download the the ca certificate in
addition to obtaining your own signing certificate.
...And 6 more matches
Tutorial: Embedding Rhino
in this document: runscript: a simple embedding entering a context initializing standard objects collecting the arguments evaluating a script printing the result exiting the context expose java apis using java apis implementing interfaces
adding java objects using javascript objects from java using javascript variables calling javascript functions javascript host objects defining host objects counter example counter's constructors class name dynamic properties defining javascript "methods"
adding counter to runscript runscript: a simple embedding about the si...
... expose java apis using java apis no
additional code in the embedding needed!
...for example, we can see how to implement java.lang.runnable in a rhino shell session: js> obj = { run: function() { print("hi"); } } [object object] js> obj.run() hi js> r = new java.lang.runnable(obj); [object object] js> t = new java.lang.thread(r) thread[thread-0,5,main] js> t.start() hi
adding java objects the next example is runscript2.
...And 6 more matches
JS_InitClass
these properties, if any, are
added to the class's new prototype object.
...these functions, if any, are
added to the class's new prototype object.
...these properties, if any, are
added to the new class's constructor.
...And 6 more matches
Web Replay
to prevent this from having an effect on iteration order (and execution behavior) in the table, the main table classes (for now plhashtable and pldhashtable) are instrumented so that they always iterate over elements in the order they were
added when recording or replaying.
... some
additional instrumentation is performed, per the 'allowed non-determinism', section above.
... when taking the first snapshot all
addressable memory in the process is enumerated and write-protected, and as faults occur a special exception handler thread unprotects the memory, copies its contents and marks it as dirty.
...And 6 more matches
amIWebInstallListener
the default implementation displays a confirmation dialog when
add-ons are ready to install and uses the observer service to notify when installations are blocked.
... methods onwebinstallblocked() called when the website is not allowed to directly prompt the user to install
add-ons.
... ainstalls the
addoninstalls that were blocked.
...And 6 more matches
nsIDocShell
method overview void
addsessionstorage(in nsiprincipal principal, in nsidomstorage storage); void
addstate(in nsivariant adata, in domstring atitle, in domstring aurl, in boolean areplace); void beginrestore(in nsicontentviewer viewer, in boolean top); void createaboutblankcontentviewer(in nsiprincipal aprincipal); void createloadinfo(out nsidocshellloadinfo loadinfo); voi...
... kcharsetfrompreviousloading methods
addsessionstorage()
add a webapps session storage object to the docshell.
... void
addsessionstorage( in nsiprincipal principal, in nsidomstorage storage ); parameters principal the principal to use for the new storage object.
...And 6 more matches
nsIGlobalHistory3
method overview void
adddocumentredirect(in nsichannel aoldchannel, in nsichannel anewchannel, in print32 aflags, in boolean atoplevel); unsigned long geturigeckoflags(in nsiuri auri); void seturigeckoflags(in nsiuri auri, in unsigned long aflags); methods
adddocumentredirect() notifies the history system that the page loading via aoldchannel redirected to anewchannel.
... implementations should generally
add the uri for aoldchannel to history for link coloring, but are advised not to expose it in the history user interface.
...otherwise, nsiglobalhistory2.
adduri() should be called with redirect=true.
...And 6 more matches
nsIMessageListenerManager
to access this service, use: var globalmm = components.classes["@mozilla.org/globalmessagemanager;1"] .getservice(components.interfaces.nsimessagelistenermanager); method overview void
addmessagelistener(in astring messagename, in nsimessagelistener listener, [optional] in boolean listenwhenclosed) void removemessagelistener(in astring messagename, in nsimessagelistener listener); void
addweakmessagelistener(in astring messagename, in nsimessageli...
...stener listener); void removeweakmessagelistener(in astring messagename, in nsimessagelistener listener); methods
addmessagelistener() register listener to receive messagename.
... void
addmessagelistener(in astring messagename, in nsimessagelistener listener, [optional] in boolean listenwhenclosed); parameters messagename a string indicating the name of the message to listen for.
...And 6 more matches
nsISHEntry
to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void
addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation...
... boolean hasdetachededitor(); violates the xpcom interface guidelines boolean hasdynamically
addedchild(); boolean isdynamically
added(); void seteditordata(in nsdocshelleditordataptr adata); violates the xpcom interface guidelines void setissubframe(in boolean aflag); void setscrollposition(in long x, in long y); void settitle(in astring atitle); void setuniquedocidentifier(); void seturi(in nsiuri auri); void setviewerbounds(in nsintrect bounds); native code only!
... methods
addchildshell() saved child docshells corresponding to contentviewer.
...And 6 more matches
nsISocketTransport
to create an instance, call nsisockettransportservice.createtransport() method overview prnet
addr getpeer
addr(); native code only!
... prnet
addr getself
addr(); native code only!
... disable_ipv6 2 when this flag is set, the socket will ignore any ipv6
addresses the host may offer and will only attempt to connect to ipv4
addresses.
...And 6 more matches
nsITransactionManager
inherits from: nsisupports last changed in gecko 1.7 method overview void
addlistener(in nsitransactionlistener alistener); void beginbatch(); void clear(); void dotransaction(in nsitransaction atransaction); void endbatch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at any...
... methods
addlistener()
adds a listener to the transaction manager's notification list.
...the listener's nsitransactionlistener.
addref() method is called.
...And 6 more matches
XPCOM
it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in
addition to c++.
...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.
...here is how to make the same component in python using pyxpcom.fun with xbl and xpconnectgenerating guidsguids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy
add-ons—like extensions and themes—that were created prior to firefox 1.5.
...And 6 more matches
Activity Manager examples
// step 1:
adding a process into the activity manager const nsiap = components.interfaces.nsiactivityprocess; const nsiae = components.interfaces.nsiactivityevent; const nsiam = components.interfaces.nsiactivitymanager; let gactivitymanager = components.classes["@mozilla.org/activity-manager;1"].getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // as...
... instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.
addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and
adding an event using process' attributes process.state = components.interfaces.nsiactivityprocess.state_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-...
...event;1"].createinstance(nsiae); // localization is omitted, initiator is omitted event.init(folder.prettiestname + " is processed", null, "no junk found", process.starttime, // start time date.now()); // completion time event.contexttype = process.contexttype; // optional event.contextobj = process.contextobj; // optional gactivitymanager.
addactivity(event); showing a user-defined activity with cancel capability (javascript) this sample improves the previous one by providing an nsiactivitycancelhandler to allow the user to cancel the process.
...And 6 more matches
Using the Multiple Accounts API
it includes a user's full name and e-mail
address.
... assign the identity to the account with the
addidentity() method.
... var identity = accountmanager.createidentity(); identity.email="fred@myisp.com"; var server = accountmanager.createincomingserver("pop3"); server.username = "fred"; server.hostname = "pop.myisp.com"; var account = accountmanager.createaccount(); account.incomingserver = server; account.
addidentity(identity); that's it!
...And 6 more matches
Index - Firefox Developer Tools
5
add-ons web development, web development:tools developer tools that are not built into firefox, but ship as separate
add-ons.
... 15 browser toolbox debug, firefox, javascript the browser toolbox enables you to debug
add-ons and the browser's own javascript code rather than just web pages like the normal toolbox.
...both firefox’s built-in developer tools and the firebug
add-on use debugger to implement their javascript debuggers.
...And 6 more matches
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes;
add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... inactive rules (not shown): if a rule is inactive (e.g., p
adding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked.
...in
addition, the information that appears on the page itself show you what pseudo-class you are examining.
...And 6 more matches
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.beziercurveto()
adds a cubic bézier curve to the current path.
... canvasrenderingcontext2d.quadraticcurveto()
adds a quadratic bézier curve to the current path.
... canvasrenderingcontext2d.arc()
adds a circular arc to the current path.
...And 6 more matches
EventTarget.removeEventListener() - Web APIs
the eventtarget.removeeventlistener() method removes from the eventtarget an event listener previously registered with eventtarget.
addeventlistener().
... mozsystemgroup: available only in code running in xbl or in firefox' chrome, it is a boolean defining if the listener is
added to the system group.
... return value undefined matching event listeners for removal given an event listener previously
added by calling
addeventlistener(), you may eventually come to a point at which you need to remove it.
...And 6 more matches
RTCIceCandidate.relatedPort - Web APIs
if the candidate is a host candidate (that is, its ip is in fact the real ip
address of the remote peer), relatedport is null.
...you can't specify the value of relatedport in the options object, but the
address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its rel-port field.
... the related
address (related
address) and port are not used at all by ice itself; they are provided for analysis and diagnostic purposes only, and their inclusion may be blocked by security systems, so do not rely on them having non-null values.
...And 6 more matches
URL API - Web APIs
the url standard also defines concepts such as domains, hosts, and ip
addresses, and also attempts to describe in a standard way the legacy application/x-www-form-urlencoded mime type used to submit web forms' contents as a set of key/value pairs.
...also covered are definitions of various terms related to
addressing of computers on a network, and the algorithms for parsing ip
addresses and dom
addresses are specified.
... let
addr = new url("/docs/web/api/url_api"); let host =
addr.host; let path =
addr.pathname; the snippet above creates a url object for the article you're reading right now, then fetches the host and pathname properties.
...And 6 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
when we have a set of items that we want to display horizontally, we may well end up with
additional space.
... to prevent the image growing too large,
add a max-width to the image.
... .media .content { flex: 1; p
adding: 10px; } .image { flex: 1; } you could also give each side different flex-grow factors, for example setting the side with the image to flex: 1 and the content side to flex: 3.
...And 6 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
the ie/edge (≤15) version of the specification is prefixed with an -ms prefix and the properties implemented in ie/edge (≤15) are as follows: grid-template-columns as -ms-grid-columns grid-template-rows as -ms-grid-rows grid-row-start as -ms-grid-row grid-column-start as -ms-grid-column align-self as -ms-grid-row-align justify-self as -ms-grid-column-align the ie version has
additional properties not required in the new specification of -ms-grid-column-span and -ms-grid-row-span.
...{ border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { p
adding: 10px; align-self: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="text">this is a media object example.
...to create gaps between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; p
adding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class...
...And 6 more matches
clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: p
adding-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: p
adding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below.
... p
adding-box uses the p
adding box as the reference box.
...And 6 more matches
display - CSS: Cascading Style Sheets
in
addition, see the following material, which covers the various values of display in depth.
... we've included p
adding and background-color on the containers and their children, so that it is easier to see the effect the display values are having.
... <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; p
adding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { p
adding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) ...
...And 6 more matches
<input type="radio"> - HTML: Hypertext Markup Language
the user never sees the value or the name (unless you expressly
add code to display it).
... let's
add a little bit of code to our example so we can examine the data generated by this form.
... the html is revised to
add a <pre> block to output the form data into: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we
add some javascript to set up an event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("f...
...And 6 more matches
Using the application cache - HTML: Hypertext Markup Language
you do not need to list all pages you want cached in the manifest file, the browser implicitly
adds every page that the user visits and that has the manifest attribute set to the application cache.
...in
addition, the browser also sends a checking event to the window.applicationcache object, and fetches the manifest file, following the appropriate http caching rules.
... if the manifest file has changed, all the files listed in the manifest—as well as those
added to the cache by calling applicationcache.
add()—are fetched into a temporary cache, following the appropriate http caching rules.
...And 6 more matches
Index - HTTP
found 122 pages: # page tags and summary 1 http headers http, http header, networking, overview, reference http headers allow the client and the server to pass
additional information with the request or the response.
... 59 early-data client hints, http, header, request the early-data header is set by an intermediate to indicates that the request has been conveyed in tls early data, and
additionally indicates that an intermediary understands the 425 (too early) status code.
... 75 from http, reference, header the from request header contains an internet email
address for a human user who controls the requesting user agent.
...And 6 more matches
Intl.Locale.prototype.hourCycle - JavaScript
like other
additional locale data, hour cycle type is an extension subtag, which extends the data contained in a locale string.
... examples these examples will show you how to
add hour cycle data to your locale object.
...
adding an hour cycle via the locale string in the unicode locale string spec, the hour cycle is a locale string "extension subtag".
...And 6 more matches
Object.create() - JavaScript
propertiesobject optional if specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be
added to the newly-created object, with the corresponding property names.
... note that such a different order may arise statically via disparate fixed codings such as here, but also dynamically via whatever the order any such property-
adding code-branches actually get executed at runtime as depends on inputs and/or random-variables.
... then again, the actual iteration order is not guaranteed no matter what the order members are
added.
...And 6 more matches
Object.freeze() - JavaScript
a frozen object can no longer be changed; freezing an object prevents new properties from being
added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed.
... in
addition, freezing an object also prevents its prototype from being changed.
... description nothing can be
added to or removed from the properties set of a frozen object.
...And 6 more matches
Web audio codec guide - Web media technologies
additionally, webrtc implementations generally use a subset of these codecs for their encoding and decoding of media, and may support
additional codecs as well, for optimal cross-platform support of video and audio conferencing, and to integrate better with legacy telecommunication solutions.
...in
addition, browsers may choose to support
additional codecs not included on this list.
...in
addition to choosing the type of encoder to use, you may have the opportunity to adjust the encoder using parameters that choose specific algorithms, tune those algorithms, and specify how many passes to apply while encoding.
...And 6 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
also, taking an existing site and
adding responsiveness to it, to make it mobile/tablet friendly, can be a lot more effort than just creating a separate mobile site or app, especially if it is a sprawling enterprise site.
... to get these sitting side-by-side we have used the following rules: x-card { width: 100%; } x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; p
adding: 2rem; } x-card:nth-child(3) { width: 40%; float: left; height: 100%; overflow: auto; p
adding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left.
... border-box sizing the p
adding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } this basically means that width and height will now set the dimensions of an element all the way up to and including the border, not just the content.
...And 6 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
the most popular approach is the app shell concept, which mixes ssr and csr in exactly the way described above, and in
addition follows the "offline first" methodology which we will explain in detail in upcoming articles and use in our example application.
...in
addition to the basic shell, you can
add other features such as
add to home screen or push notifications, safe in the knowledge that the app will still work ok if they are not supported by the user's browser — this is the beauty of progressive enhancement.
... progressive: start with the "good, old basic website” and progressively
add new features while remembering to detect if they are available in the browser and gracefully handle any errors that crop up if support is not available.
...And 6 more matches
Reddit Example - Archive of obsolete content
this example
add-on creates a panel containing the mobile version of reddit.
... when the user clicks on the title of a story in the panel, the
add-on opens the linked story in a new tab in the main browser window.
... to accomplish this the
add-on needs to run a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target url.
...And 5 more matches
SDK and XUL Comparison - Archive of obsolete content
advantages of the sdk simplicity the sdk provides high-level javascript apis to simplify many common tasks in
add-on development, and tool support which greatly simplifies the process of developing, testing, and packaging an
add-on.
... security if they're not carefully designed, firefox
add-ons can open the browser to attack by malicious web pages.
... although it's possible to write insecure
add-ons using the sdk, it's not as easy, and the damage that a compromised
add-on can do is usually more limited.
...And 5 more matches
Guides - Archive of obsolete content
content processes the sdk was designed to work in an environment where the code to manipulate web content runs in a different process from the main
add-on code.
... testing the
add-on sdk learn how to run the
add-on sdk test suites.
... sdk infrastructure module structure of the sdk the sdk, and
add-ons built using it, are of composed from reusable javascript modules.
...And 5 more matches
indexed-db - Archive of obsolete content
experimental exposes the indexeddb api to
add-ons.
...for example: window.indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb || window.msindexeddb; var request = window.indexeddb.open("mydatabase"); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; because your main
add-on code can't access the dom, you can't do this.
... the database created will be unique and private per
add-on, and is not linked to any website database.
...And 5 more matches
url - Archive of obsolete content
for example: var url = require("sdk/url").url("https://developer.mozilla.org/
add-ons?example=true&visible=yes#top"); console.log(url.scheme); // https userpass the username:password part of the url, null if not present.
...for example: var url = require("sdk/url").url("https://developer.mozilla.org/
add-ons?example=true&visible=yes#top"); console.log(url.host); // developer.mozilla.org port the port number of the url, null if none was specified.
...for example: var url = require("sdk/url").url("https://developer.mozilla.org/
add-ons?example=true&visible=yes#top"); console.log(url.path); // /
add-ons?example=true&visible=yes#top hostname the domain of the url, as a string.
...And 5 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.
... id: provide
add-on id to attach to loaded modules.
...lkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolev all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow relative urls and resolve them to
add-on root: // ./main -> resource://my-
addon/root/main.js './': 'resource://my-
addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shortest to allow overlapping mapping.
...And 5 more matches
Display a Popup - Archive of obsolete content
you can run content scripts in the panel: although the script running in the panel can't directly access your main
add-on code, you can exchange messages between the panel script and the
add-on code.
... in this tutorial we'll create an
add-on that
adds an action button to the toolbar that displays a panel when clicked.
... the panel just contains a <textarea> element: when the user presses the return key, the contents of the <textarea> is sent to the main
add-on code.
...And 5 more matches
Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in
add-on's "data" directory.
... this
add-on creates a button with mozilla favicon as an icon.
... unless script is extremely simple, maintain the script as a separate file in
add-on's data directory.
...And 5 more matches
Listening to events in Firefox extensions - Archive of obsolete content
} b.
addeventlistener("event", callback, false) where b is the browser or tabbrowser you wish to watch for events from.
... some of the more interesting dom events you may wish to monitor are listed here: event description domlink
added dispatched when a new html <link> element is detected in the document.
...both browser and tabbrowser elements support the following: var progresslistener = { //
add nsiwebprogressimplementation here } b.
addprogresslistener(progresslistener); where b is the browser or tabbrowser you want to listen to events for.
...And 5 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
many
add-ons need to dynamically generate dom content, either xul or html, from their scripts.
...onclick) for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just
add them as 'on...' attributes, but as events, using
addeventlistener elem.
addeventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie.
...var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function
addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", ...
...And 5 more matches
Observer Notifications - Archive of obsolete content
this example code shows you what an implementation of the nsiobserver interface looks like: let testobserver = { observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { window.alert("data received: " + adata); } } } in order for this observer to work, you need to use the observer service that provides methods for you to
add, remove, notify and enumerate observers.
...
adding an observer to the observer service is simple, invoking the
addobserver method with three parameters.
... getservice(components.interfaces.nsiobserverservice); observerservice.
addobserver(testobserver, "xulschoolhello-test-topic", false); you should come up with a notification topic that is unique so you know it will not conflict with firefox or other extensions topics.
...And 5 more matches
Using Dependent Libraries In Extension Components - Archive of obsolete content
// assume that we're in <extensiondir>/components, and we want to find // <extensiondir>/libraries nscomptr<nsifile> libraries; rv = alocation->getparent(getter_
addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cstring("libraries")); library->appendnative(ns_literal_cstring("dummy")); // loop through and load dependent libraries for (char const *const *dependent = kdependentlibraries; *...
... dependant libraries on the mac must be loaded with a special system function ns
addimage() with the flag ns
addimage_option_match_filename_by_installname.
... // assume that we're in <extensiondir>/components, and we want to find // <extensiondir>/libraries nscomptr<nsifile> libraries; rv = alocation->getparent(getter_
addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cstring("libraries")); library->appendnative(ns_literal_cstring("dummy")); nscstring path; // loop through and load dependent libraries for (char const *const *dependent = kdependentlibraries;...
...And 5 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
some gecko-based browsers provide
additional information via the registry, and where appropriate, these registry keys are also mentioned, with the necessary version caveats.
...thus, some mozilla based browsers, such as the netscape 6 installer, write to the hkey_current_user key in
addition; this doesn't require administrator privileges.
...in
addition, if you have made your plugin scriptable and accessible from javascript, you ought to put the associated xpt file in the components directory.
...And 5 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
this function should
add the data to drag to the transferdata object.
...to do this,
add data and flavours to the transferdata object, which is the second argument to ondragstart.
...the ondragstart function
adds data to the transferdata object.
...And 5 more matches
JavaScript crypto - Archive of obsolete content
you can then register event handlers for these events with the document.
addeventlistener() method.
...<script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.
addeventlistener("smartcard-insert", onsmartcardchange, false); document.
addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script>...
...*/); loading pkcs #11 modules long deletemodule(domstring modulename); long
addmodule(domstring modulename, domstring libraryfullpath, long cryptomechanismflags, long cipherflags); loads or removes a new pkcs #11 module.
...And 5 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.
... the questions in this faq
address mozilla's support for encryption and related security functionality, information important to mozilla contributors relating to encryption functionality in mozilla, and general questions on u.s.
...export of source code for open source software is
addressed in part 740 (pdf), section 740.13(e), "unrestricted encryption source code"; export of binaries is
addressed in 740.17.
...And 5 more matches
Nanojit - Archive of obsolete content
fragment *f = fragmento->getanchor((void *)0xdeadbeef); f->lirbuf = buf; f->root = f; // create a lir writer lirbufwriter out(buf); // write a few lir instructions to the buffer:
add the first parameter // to the constant 2.
... out.ins0(lir_start); lins *two = out.insimm(2); lins *firstparam = out.insparam(0, 0); lins *result = out.ins2(lir_
add, firstparam, two); out.ins1(lir_ret, result); // emit a lir_loop instruction.
... typedef js_fastcall int32_t (*
addtwofn)(int32_t);
addtwofn fn = reinterpret_cast<
addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0; } code explanation interesting part are the lines 46-50: // write a few lir instructions to the buffer:
add the first parameter // to the constant 2.
...And 5 more matches
MenuItems - Archive of obsolete content
adding shortcut keys to menu items a shortcut key may be associated with a menu item.
...
adding icons to menu items an icon may be
added to a menu item using the image attribute.
...in
addition to the image, a special class "menuitem-iconic" must be used on the menuitem to indicate that an icon is expected.
...And 5 more matches
Filtering - Archive of obsolete content
for instance, to apply a filter, you might
add a new <triple> element.
...if this is set, we
add a filter, otherwise we remove it.
...this example only
adds one triple, but you could
add others, or
add <member> elements.
...And 5 more matches
Template and Tree Listeners - Archive of obsolete content
to assign a builder listener to a builder, use the
addlistener method.
... 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 tree builder will handle the
adding or removing of rows, but will call the observer so that it can perform some task.
...And 5 more matches
Broadcasters and Observers - Archive of obsolete content
in
addition, if you place the disabled attribute on the command element, any elements hooked up to it will also become disabled automatically.
...if someone
added a new back button using an extension, it wouldn't be handled.
...to make an element an observer,
add an observes attribute to it.
...And 5 more matches
Focus and Selection - Archive of obsolete content
rearranging the tab order you can change the order in which elements are focused when the user presses the tab key by
adding a tabindex attribute to an element.
...you can respond to focus changes by
adding an onfocus or onblur attribute on an element.
...you can also
add event handlers dynamically using the dom function
addeventlistener.
...And 5 more matches
Introduction to XBL - Archive of obsolete content
however, xul provides no means in which you can change how an element works (or
add a new element which can be reused).
...the behavior describes the properties and methods of the scroll bar in
addition to describing the xul elements that make up a scroll bar.
...a binding has five types of things that it declares: content: child elements that are
added to the element that the binding is bound to.
...And 5 more matches
List Controls - Archive of obsolete content
they work similar to the html select element, which performs both functions, but the xul elements have
additional features.
...a scroll bar will appear that the user can use to display the
additional rows.
... 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.
...And 5 more matches
Localization - Archive of obsolete content
once you have created a dtd file for your xul, you will need to
add a line to the xul file which indicates that you want to use the dtd file.
...to do this,
add a line of the following form somewhere near the top of the xul file: <!doctype window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the url indicated is to be used as a dtd for the file.
... you also need to
add the locale to the chrome.manifest file, for example: locale findfile en-us locale/ declaring entities the entities are declared using a simple syntax as shown below: <!entity findlabel "find"> this example creates an entity with the name findlabel and the value "find".
...And 5 more matches
Manipulating Lists - Archive of obsolete content
similar to the dom appendchild() function except that it takes a string label, and you do not have to worry about where to
add it in the list structure.
... 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'.
...the syntax is as follows: list.insertitemat(3, "thursday", "thu"); list.removeitemat(3); the insertitemat() function takes an
additional argument, the position to insert the new item.
...And 5 more matches
More Menu Features - Archive of obsolete content
pup 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"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox>
adding a menu to our find files example let's
add a menu to the find files dialog.
... we'll just
add a few simple commands to a file menu and an edit menu.
... <menuitem label="close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar> here we have
added two menus with various commands on them.
...And 5 more matches
Open and Save Dialogs - Archive of obsolete content
to
add filters, call the appendfilters() function to set the file types that you wish to have displayed.
... fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will
add filters for html and for image files.
... the second example will
add filters for text files and for all files.
...And 5 more matches
Styling a Tree - Archive of obsolete content
style
added to the tree element will apply to the entire tree.
...
adding a style to the treecol element does not cause the style to be applied to the column but only to the header.
...for properties that are 'readonly', it
adds a red border around the row.
...And 5 more matches
Toolbars - Archive of obsolete content
adding a toolbar like a number of elements, xul toolbars are a type of box.
...multiple toolbars can be created just as easily by
adding more toolbar elements after the first one.
...customizable toolbars firefox or other toolkit applications have customizable toolbars; therefore, many extensions
add their toolbar buttons to the toolbar palette, rather than
adding them directly to the toolbar.
...And 5 more matches
XBL Inheritance - Archive of obsolete content
the child binding can
add properties, methods and event handlers.
... the child binding will have all the features it defines in
addition to the features from the binding it inherits from (and any that binding inherits from and so on up the tree).
... to extend an existing binding,
add an extends attribute on to the binding tag.
...And 5 more matches
XPCOM Interfaces - Archive of obsolete content
in
addition, it will have code which copies and renames it.
...for example, the nsi
addressbook is the interface for interacting with an
address book, nsisound is used for playing files and nsilocalfile is used for files.
...a second line of code needs to be
added as follows: var afile = components.classes["@mozilla.org/file/local;1"].createinstance(); if (afile) afile.queryinterface(components.interfaces.nsilocalfile); the function queryinterface() is a function provided by all components which can be used to get a specific interface of that component.
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
in
addition, there is an active community of accessibility developers within the mozilla project that will be happy to help you with any concerns or questions you have in regards to making your xul applications fully accessible.
...in cases where duplication of functionality is not possible (such as a window without a menu bar), toolbar buttons can be made focusable by
adding the special css rule -moz-user-focus: normal.
...the problem occurs when a developer decides to
add functionality that jumps the user to the second form field once 3 digits have been entered into the first form field.
...And 5 more matches
prefwindow - Archive of obsolete content
attributes buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog,
addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bo...
... extra1: an optional
additional button.
... extra2: a second optional
additional button.
...And 5 more matches
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
mk_
add_options moz_build_projects="xulrunner mccoy" mk_
add_options moz_objdir=@topsrcdir@/../mccoybase # global options ac_
add_options --enable-debug ac_
add_options --disable-optimize # xulrunner options ac_
add_app_options xulrunner --enable-application=xulrunner # mccoy options ac_
add_app_options mccoy --enable-application=mccoy ac_
add_app_options mccoy --with-libxul-sdk=../xulrunner/dist the first...
...make sure you change the application name (following ac_
add_app_options to that of your app.
...you can also
add other options to this section if you want them to apply to your app only.
...And 5 more matches
Mozprofile - Archive of obsolete content
in
addition to creating profiles, mozprofile can install
addons and set preferences.
...command line usage mozprofile may be used to create profiles, set preferences in profiles, or install
addons into profiles.
...api usage to use mozprofile as an api you can import mozprofile.profile and/or the
addonmanager.
...And 5 more matches
Sunbird Theme Tutorial - Archive of obsolete content
creating a unique identifier create an identifier that is likely to be unique, in the form: <tt>something@domain-name</tt> it must contain an at-sign (<tt>@</tt>), making it look something like an e-mail
address, but it does not need to be a real e-mail
address.
...if you want to make it clear that your made-up name is not a real domain,
add <tt>.invalid</tt> to the end.
...
add this line at the end: label {color: red;} save the file.
...And 5 more matches
Desktop gamepad controls - Game development
previous overview: control mechanisms next now we'll look at
adding something extra — support for gamepad controls, via the gamepad api.
...first, we need an event listener to listen for the connection of the new device: window.
addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on...
...then, if the buttons are available we loop through them; if the pressed property is set to true, then we
add them to the buttonspressed array for later processing.
...And 5 more matches
Unconventional controls - Game development
implementing mobile and desktop controls is recommended is a must, and gamepad controls
add that extra experience.
...you can check them by printing the responses out in the console: window.
addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console.
... you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can
add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game.
...And 5 more matches
Images, media, and form elements - Learn web development
try
adding max-width: 100% to the <img> element in the example above.
... many form controls are
added to your page by way of the <input> element — this defines simple form fields such as text inputs, through to more complex fields
added in html5 such as color and date pickers.
... there are some
additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fieldset> and <legend>.
...And 5 more matches
Supporting older browsers - Learn web development
this is straightforward if you have an existing website which you are
adding to or replacing, as you probably have analytics available which can tell you the technology people are using.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); p
adding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); p
adding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item ...
...we
add a simpler layout based on older and well-supported techniques, then use the newer css to create the layout that over 90% of your audience will see.
...And 5 more matches
Styling lists - Learn web development
than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a p
adding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
... the <dl> element has a top and bottom margin of 16px (1em), but no p
adding set.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { p
adding-left: 2rem; list-style-type: none; } ul li { p
adding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: set the p
adding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.
...And 5 more matches
Basic native form controls - Learn web development
we cover newer form controls
added in html5 in the next two articles.
... note: html5 enhanced the basic original single line text field by
adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to entering urls or numbers.
... password field one of the original input types was the password text field type: <input type="password" id="pwd" name="pwd"> the password value doesn't
add any special constraints to the entered text, but it does obscure the value entered into the field (e.g.
...And 5 more matches
Example 1 - Learn web development
: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; p
adding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow ...
...: hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; p
adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; p
adding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; over...
...flow-x: hidden; } .select .option { p
adding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; vis...
...And 5 more matches
Useful string methods - Learn web development
for example, we may have a list of web
addresses and only want to print out the ones that contain "mozilla".
... let's try entering the following lines to see what happens: let r
addata = 'my name is mud'; r
addata.tolowercase(); r
addata.touppercase(); updating parts of a string you can replace one substring inside a string with another substring using the replace() method.
...y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.
addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.
addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.v...
...And 5 more matches
Server-side web frameworks - Learn web development
for example, the flask (python) web framework
adds routes to view functions using a decorator.
...an email
address), and isn't malicious in any way (crackers can use certain patterns of code to do bad things such as deleting database records).
...an email field would only allow valid email
addresses).
...And 5 more matches
Getting started with React - Learn web development
in
addition, many of the developer-experience benefits of a react app, such as writing interfaces with jsx, require a compilation process.
...
adding a compiler like babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step.
... it's possible to
add react to a website without create-react-app by copying some <script> elements into an html file, but the create-react-app cli is a common starting point for react applications.
...And 5 more matches
Gecko info for Windows accessibility vendors
gecko is the core architecture that we are
adding accessibility to, in order to support basic accessibility in all applications that are based on it.
...in
addition, if it is a role_alert, a screen reader should treat it as a message box -- that is, to read the entire contents.
...in
addition, event_selection
add and event_selectionremove are fired on the the child who's selection changed.
...And 5 more matches
Creating reftest-based unit tests
refox'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 reftest-wait class to a test (or disabling the script that removes it) will keep it open longer.
...new tests can be
added to the reftest.list file, which can contain any number of tests.
...the cost of
adding a new test to an automated suite is very, very low.
...And 5 more matches
Debugging on Windows
you can also redirect the console output to a file (by
adding "> filename.txt" for example, without the quotes).
... setting breakpoints in dlls which are not yet loaded in memory vc++ 6.0: go to project > settings..., debug tab and select "
additional dlls" from the drop down list.
... check "locate
additional dlls" option.
...And 5 more matches
Old Thunderbird build
for
additional information, see the build documentation.
... the source code requires 3.6gb of free space or more and
additionally 5gb or more for default build.
... build configuration to build thunderbird, you need to
add a file named mozconfig to the root directory of the comm-central checkout that contains the following line: ac_
add_options --enable-application=mail you can create a file with this line by doing this: cd comm-central echo 'ac_
add_options --enable-application=mail' > mozconfig if you omit this line, the build system will build firefox instead.
...And 5 more matches
Simple Thunderbird build
for
additional, more detailed information, see the build documentation.
...it now needs to be placed inside the mozilla source code, in a directory named comm/ (this is inverse from thunderbird 59 and earlier): hg clone https://hg.mozilla.org/mozilla-central source/ cd source/ hg clone https://hg.mozilla.org/comm-central comm/ the source code requires 3.6gb of free space or more and
additionally 5gb or more for default build.
... build configuration to build thunderbird, you need to
add a file named mozconfig to the root directory of the mozilla-central checkout that contains the following line: ac_
add_options --enable-application=comm/mail you can create a file with this line by doing this in the source/ directory: echo 'ac_
add_options --enable-application=comm/mail' > mozconfig if you omit this line, the build system will build firefox instead.
...And 5 more matches
Frame script loading and lifetime
to listen for an event, when your frame script is unloaded (due to tab close for instance), you must set the third argument of
addmessagelistener to true.
... for example, from bootstrap.js: services.mm.
addmessagelistener( 'my-
addon-id', { receivemessage: function() { console.log('incoming message from frame script:', amsg.data); } }, true // must set this argument to true, otherwise sending message from framescript will not work during and after the unload event on the contentmessagemanager triggers ); then in your frame script, listen for the unload event of the message manager (which is the global this), and sending a message.
... if you did not set the third argument to true in bootstrap.js on services.mm.
addmessagelistener, sending this message during, and after, the unloading event will do nothing.
...And 5 more matches
Storage access policy: Block cookies from trackers
as described above, note that nightly may include
additional protections that end up getting removed or changed before they reach our release users.
... second, firefox uses an
additional "entity list", which prevents domains from being classified as trackers when they are loaded on a top-level site owned by the same organization.
...we may choose to apply
additional restrictions to third-party storage access in the future.
...And 5 more matches
UpdateListener
an updatelistener receives messages from an update check for a single
add-on, though it is possible to pass the same updatelistener to as many calls to findupdates() as you like.
... either onupdateavailable() or onnoupdateavailable(), depending on whether a newer version of the
addon was found.
... method overview void oncompatibilityupdateavailable(in
addon
addon) void onnocompatibilityupdateavailable(in
addon
addon) void onupdateavailable(in
addon
addon, in
addoninstall install) void onnoupdateavailable(in
addon
addon) void onupdatefinished(in
addon
addon, in integer error) methods oncompatibilityupdateavailable() called when the update check found compatibility information for the application and platform version that the update check was being performed for.
...And 5 more matches
Mozilla Content Localized in Your Language
you are free to
add, edit, remove, and localize everything in this section according to how the localization team for your language agrees.
... all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and
add your locale code tag at the bottom.
...
additional discussions can be found here.
...And 5 more matches
QA phase
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 directly from en-us before you can build.
... 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=[browser or mail] you will need to specify which application you're localizing in the fourth line (e.g., for firefox, that's browser, thunderbird would be mail).
...And 5 more matches
PR_AcceptRead
syntax #include <prio.h> print32 pr_acceptread( prfiledesc *listensock, prfiledesc **acceptedsock, prnet
addr **peer
addr, void *buf, print32 amount, printervaltime timeout); parameters the function has the following parameters: listensock a pointer to a prfiledesc object representing a socket descriptor that has been called with the pr_listen function, also known as the rendezvous socket.
... peer
addr a pointer a pointer to a prnet
addr object.
... on return, peer
addr points to the
address of the remote socket.
...And 5 more matches
NSS 3.14 release notes
introduction the nss team has released network security services (nss) 3.14, which is a minor release with the following new features: support for tls 1.1 (rfc 4346) experimental support for dtls 1.0 (rfc 4347) and dtls-srtp (rfc 5764) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc 5705) in
addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md5 hash algorithm is now disabled by default.
...for an
additional explantation on gpl/lgpl compatibility, see security/nss/copying in the source code.
... support for tls 1.1 (rfc 4346) has been
added (https://bugzilla.mozilla.org/show_bug.cgi?id=565047).
...And 5 more matches
NSS 3.54 release notes
certificate authority changes the following ca certificates were
added: bug 1645186 - certsign root ca g2 sha-256 fingerprint: 657cfe2fa73faa38462571f332a2363a46fce7020951710702cdfbb6eeda3305 bug 1645174 - e-szigno root ca 2017 sha-256 fingerprint: beb00b30839b9bc32c32e4447905950641f26421b15ed089198b518ae2ea1b99 bug 1641716 - microsoft ecc root certificate authority 2017 sha-256 fingerprint: 358df39d764a...
...f9e1b766e9c972df352ee15cfac227af6ad1d70e8e4a6edcba02 bug 1641716 - microsoft rsa root certificate authority 2017 sha-256 fingerprint: c741f70f4b2a8d88bf2e71c14122ef53ef10eba0cfa5e64cfa20f418853073e0 the following ca certificates were removed: bug 1645199 -
addtrust class 1 ca root sha-256 fingerprint: 8c7209279ac04e275e16d07fd3b775e80154b5968046e31f52dd25766324e9a7 bug 1645199 -
addtrust external ca root sha-256 fingerprint: 687fa451382278fff0c8b11f8d43d576671c6eb2bceab413fb83d965d06d2ff2 bug 1641718 - luxtrust global root 2 sha-256 fingerprint: 54455f7129c20b1447c418f997168f24c58fc5023bf5da5be2eb6e1dd8902ed5 bug 1639987 - staat der nederlanden root ca - g2 sha-25...
... bug 1603042 -
add tls 1.3 external psk support.
...And 5 more matches
Rhino scopes and contexts
typically this object will have been created with initstandardobjects and may also have
additional objects specific to the embedding.
... sealed shared scopes the ecmascript standard defines that scripts can
add properties to all standard library objects and in many cases it is also possible to change or delete their properties as well.
... such behavior may not be suitable with shared scopes since if a script by mistake
adds a property to a library object from the shared scope, that object would not be garbage collected until there are no active references to the shared scope potentially leading to memory leaks.
...And 5 more matches
64-bit Compatibility
for more information and platform specific details on virtual
address widths, see this article on wikipedia.
...similarly, when
adding types to jsbuiltins.h, remember to use _js_ptr for pointer-width values.
...the following table contains the most relevant opcodes: platform alias 32-bit op 64-bit op ldp ld ldq ldcp ldc ldcq pi
add add qi
add piand and qiand pilsh lsh qilsh pirsh rsh qirsh pursh ush qursh pcmov cmov qcmov pior or qior pxor xor qxor
addp i
addp q
addp peq - puge eq - uge qeq - quge pcall icall qcall the 32-bit versions have the following inputs and out...
...And 5 more matches
Self-hosted builtins in SpiderMonkey
this restriction was
added because otherwise it's extremely easy to accidentally call methods that have been changed by content, changing the behavior from what was expected.
...a prototype property can be
added from the self-hosted code itself.
... the file utilities.js provides some
additional, js-implemented helper functions.
...And 5 more matches
JSAPI User Guide
then it
adds whatever custom classes, functions, and variables (like window) the application wants to provide; see custom objects below.
...*/ my_
addproperty, my_delproperty, my_getproperty, my_setproperty, my_enumerate, my_resolve, my_convert, my_finalize }; jsobject *obj; /* * define an object named in the global scope that can be enumerated by * for/in loops.
...*/ char *filename; unsigned int lineno; /* * the return value comes back here -- if it could be a gc thing, you must *
add it to the gc's "root set" with js_
add*root(cx, &thing) where thing * is a jsstring *, jsobject *, or jsdouble *, and remove the root before * rval goes out of scope, or when rval is no longer needed.
...And 5 more matches
JS::Remove*Root
vp js::heap<js::value>
address of the js::value variable to remove from the root set.
... this must have been passed to one of js::
addvalueroot, js::
addnamedvalueroot or js::
addnamedvaluerootrt.
... rp js::heap<jsstring *>
address of the jsstring * variable to remove from the root set.
...And 5 more matches
JS_Remove*Root
vp jsval *
address of the jsval variable to remove from the root set.
... this must have been passed to either js_
addvalueroot or js_
addnamedvalueroot.
... spp jsstring *
address of the jsstring* variable to remove from the root set.
...And 5 more matches
Using RAII classes in Mozilla
raii classes are useful when two operations (e.g., lock/unlock,
addref/release, pushstate/popstate) must be paired.
... this involves just one
addition to the class, and the inclusion of attributes.h: class moz_raii nsautoscriptblocker {...} this is much simpler and more thorough than the guardobject runtime assertions, but are unfortunately currently only run on mac os x and linux builds, which means that guardobject should still be used for raii guards which may be used in windows-only code.
... in the common case, using these macros involves these three
additions to a class: class moz_raii nsautoscriptblocker { public: explicit nsautoscriptblocker(jscontext *cx moz_guard_object_notifier_param) { // note: no ',' before macro moz_guard_object_notifier_init; nscontentutils::
addscriptblocker(cx); } ~nsautoscriptblocker() { nscontentutils::removescriptblocker(); } private: moz_decl_use_guard_object_notifier }; moz_guard_object_n...
...And 5 more matches
Components.utils.exportFunction
the exported function does not have to be
added to the less privileged code's global window object: it can be exported to any object in the target scope.
...this includes
add-on sdk content scripts.
... options : object optional parameter that supplies
additional options.
...And 5 more matches
amIInstallTrigger
return value install() starts a new installation of a set of
add-ons.
... boolean install( in nsivariant aargs, in amiinstallcallback acallback optional ); parameters aargs the
add-ons to install.
... this should be a js object, each property is the name of an
add-on to be installed.
...And 5 more matches
nsIAbCard
the nsiabcard interface is used to represent and manipulate cards in the
addressbook.
... following a huge refactoring of the
address book code, most of the documentation below is out of date.
...see //github.com/realityripple/uxp/blob/master//mailnews/
addrbook/public/nsiabcard.idl for more details.
...And 5 more matches
nsIBrowserHistory
it
adds functions used by the basic browser like, marking pages as typed in the url bar, and removing pages as from the history interface.
...to use this service, use: var browserhistory = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsibrowserhistory); method overview void
addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri au...
... methods
addpagewithdetails() obsolete since gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) note: this method was removed in gecko 15.0.
...And 5 more matches
Component; nsIPrefBranch
method overview void
addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); void clearuserpref(in string aprefname); void deletebranch(in string astartingat); boolean getboolpref(in string aprefname, requires gecko 54 [optional] in boolean adefaultvalue); string getcharpref(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); req...
... methods
addobserver()
adds a preference change observer.
...for example, if your observer is registered with
addobserver("bar.", ...) on a branch with root "foo.", modifying the preference "foo.bar.baz" will trigger the observer, and adata parameter will be "bar.baz".
...And 5 more matches
nsIWebProgress
the nsiwebprogress interface is used to
add or remove nsiwebprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
...a nsiwebprogresslistener instance receives notifications for the nsiwebprogress instance to which it
added itself, and it may also receive notifications from any nsiwebprogress instances that are children of that nsiwebprogress instance.
... uriloader/base/nsiwebprogress.idlscriptable please
add a summary to this article.
...And 5 more matches
nsIXULTemplateQueryProcessor
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.
...the initializeforbuilding(), compilequery() and
addbinding() methods may not be called after generateresults() has been called until the builder indicates that the generated output is being removed by calling the done() method.
...method overview void
addbinding(in nsidomnode arulenode, in nsiatom avar, in nsiatom aref, in astring aexpr); print32 compareresults(in nsixultemplateresult aleft, in nsixultemplateresult aright, in nsiatom avar, in unsigned long asorthints); nsisupports compilequery(in nsixultemplatebuilder abuilder, in nsidomnode aquery, in nsiatom arefvariable, in nsiatom amembervariable); void done(); nsisimpleenumerator generateresults(in nsisupports adatasource, in nsixultemplateresult aref, in nsisupports aquery); nsisupports getdatasource(in nsiarray adatasources, in nsidomnode arootnode, in boolean ais...
...And 5 more matches
Weak reference
when you hold an owning reference on an object (i.e., you have
addrefed it), you are holding that object in existence for the duration of your reference.
... nsresult
addobserver( nsiobserver* ); nsresult notifyobservers( nsimessage* ); // ...
... nsresult nsobservable::
addobserver( nsiobserver* aobserver ) { mobserver = getter_
addrefs( ns_getweakreference(aobserver) ); // ...or append this to the list of observers return ns_ok; } nsresult nsobservable::notifyobservers( nsimessage* amessage ) { nscomptr<nsiobserver> observer = do_queryreferent(mobserver); if ( observer ) observer->noticemessage(amessage); else mobserver = 0; // or remove this observer from the list, he's gone away return ns_ok; } // ...
...And 5 more matches
XUL Overlays
though overlays often define ui elements that have been
added as a result of an update or enhancement of some kind, they can be used in many different ways.
... overlays provide a general mechanism for:
adding ui for
additional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document.
... though there is no formal restriction on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as
additional components.
...And 5 more matches
Mail event system
nsifolders each store individual lists of folder listeners which are maintained with
addlistener() and removelistener().
...if the object just needs to be notified about one folder, it should call that folder's
addlistener method.
...the nsimsgmailsession interface actually only allows
adding and removal of listeners - the notifications happen through the nsifolderlistener interface as well.
...And 5 more matches
customDBHeaders Preference
in
addition to the preference outlined in setting up extension development environment, you'll want to
add the following preferences: // this allows you to
add extra headers while composing messages user_pref("mail.compose.other.header", "x-superfluous,x-other,x-whatever"); // this enables the preservation of custom headers as incoming mail is processed user_pref( "mailnews.customdbheaders", "x-superfl...
...user_pref( "mailnews.customdbheaders", "x-superfluous x-other");
adding a column the reply-to column tutorial does a good job of explaining how to
add a column with an overlay, so i'll just show you my overlay file: <?xml version="1.0" ?> <overlay id="colsuperfluousoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type='application/javascript' src='chrome://superfluous/content/superfluous.js'/> <tree id="threadtree"> ...
...<treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're
adding matches the reference from your javascript code (i.e.
...And 5 more matches
Browser Toolbox - Firefox Developer Tools
the browser toolbox enables you to debug
add-ons and the browser's own javascript code rather than just web pages like the normal toolbox.
... note: if you want to debug a specific
add-on that is restartless or sdk-based then try the
add-on debugger.
... use the browser toolbox for
add-ons that are neither.
...And 5 more matches
console - Web APIs
you may use string substitution and
additional arguments with this method.
...you may use string substitution and
additional arguments with this method.
...you may use string substitution and
additional arguments with this method.
...And 5 more matches
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
...in
addition, the following handlers are specific to htmlelement.
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 5 more matches
Intersection Observer API - Web APIs
the values in rootmargin define offsets
added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in intersectionobserverentry.rootbounds when the callback is executed).
...l bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); p
adding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; height: 18px; p
adding: 2px; text-align: center; } .tople...
... let thresholdsets = [ [], [0.5], [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], [0, 0.25, 0.5, 0.75, 1.0] ]; for (let i=0; i<=1.0; i+= 0.01) { thresholdsets[0].push(i); } //
add each box, creating a new observer for each for (let i=0; i<4; i++) { let template = document.queryselector("#boxtemplate").content.clonenode(true); let boxid = "box" + (i+1); template.queryselector(".samplebox").id = boxid; wrapper.appendchild(document.importnode(template, true)); // set up the observer for this box observeroptions.threshold = thresholdsets[i]; ob...
...And 5 more matches
KeyboardEvent: code values - Web APIs
pause" "pause" 0x0046 "scrolllock" "scrolllock" 0x0047 "numpad7" "numpad7" 0x0048 "numpad8" "numpad8" 0x0049 "numpad9" "numpad9" 0x004a "numpadsubtract" "numpadsubtract" 0x004b "numpad4" "numpad4" 0x004c "numpad5" "numpad5" 0x004d "numpad6" "numpad6" 0x004e "numpad
add" "numpad
add" 0x004f "numpad1" "numpad1" 0x0050 "numpad2" "numpad2" 0x0051 "numpad3" "numpad3" 0x0052 "numpad0" "numpad0" 0x0053 "nump
addecimal" "nump
addecimal" 0x0054 (alt + printscreen) "printscreen" "" 0x0055 "unidentified" "" 0x0056 "intlbackslash" "intlbackslash"...
... "audiovolumedown" "volumedown" (was "volumedown" until chrome 50) 0xe02f "unidentified" "" 0xe030 "audiovolumeup" "volumeup" (was "volumeup" until chrome 50) 0xe031 "unidentified" "" 0xe032 "browserhome" "browserhome" 0xe033, 0xe034 "unidentified" "" 0xe035 "nump
addivide" "nump
addivide" 0xe036 "unidentified" "" 0xe037 "printscreen" "printscreen" 0xe038 "altright" "altright" 0xe039, 0xe03a "unidentified" "" 0xe03b "unidentified" "help" 0xe03c~ 0xe044 "unidentified" "" 0xe045 "numlock" "numlock" 0xe046 (ctrl...
...ntrol (0x3b) "controlleft" "controlleft" kvk_rightshift (0x3c) "shiftright" "shiftright" kvk_rightoption (0x3d) "altright" "altright" kvk_rightcontrol (0x3e) "controlright" "controlright" kvk_function (0x3f) "fn" (no events fired actually) "" (no events fired actually) kvk_f17 (0x40) "f17" "f17" kvk_ansi_keyp
addecimal (0x41) "nump
addecimal" "nump
addecimal" kvk_ansi_keypadmultiply (0x43) "numpadmultiply" "numpadmultiply" kvk_ansi_keypadplus (0x45) "numpad
add" "numpad
add" kvk_ansi_keypadclear (0x47) "numlock" "numlock" kvk_volumeup (0x48) "audiovolumeup" (was "volumeup" until firefox 48) "audiovolumeup" (was "volumeup" until chrome 50) ...
...And 5 more matches
Using Touch Events - Web APIs
// register touch event handlers someelement.
addeventlistener('touchstart', process_touchstart, false); someelement.
addeventlistener('touchmove', process_touchmove, false); someelement.
addeventlistener('touchcancel', process_touchcancel, false); someelement.
addeventlistener('touchend', process_touchend, false); process an event in an event handler, implementing the application's gesture semantics.
... // create touchstart handler someelement.
addeventlistener('touchstart', function(ev) { // iterate through the touch points that were activated // for this element and process each event 'target' for (var i=0; i < ev.targettouches.length; i++) { process_target(ev.targettouches[i].target); } }, false); prevent the browser from processing emulated mouse events.
...
add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree).
...And 5 more matches
Starting up and shutting down a WebXR session - Web APIs
assuming you're already familiar with 3d graphics in general and webgl in particular, taking that next bold step into mixed reality—the idea of presenting artificial scenery or objects in
addition to or in place of the real world—is not overly complicated.
...
additionally, it is updated to maintain compatibility with browsers as their support for webxr and other technologies related to it and to the implementation of the polyfill change over time.
... 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.
...And 5 more matches
Using the Web Audio API - Web APIs
this is what our current audio graph looks like: now we can
add the play and pause functionality.
... // select our play button const playbutton = document.queryselector('button'); playbutton.
addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audiocontext.state === 'suspended') { audiocontext.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (this.dataset.playing === 'true') { audioelement.pause(); this.dataset.playing = 'false'; } }, false); we also need to take into account what to do when the track finishes playing.
... our htmlmediaelement fires an ended event once it's finished playing, so we can listen for that and run code accordingly: audioelement.
addeventlistener('ended', () => { playbutton.dataset.playing = 'false'; }, false); modifying sound let's delve into some basic modification nodes, to change the sound that we have.
...And 5 more matches
Using the alert role - Accessibility
when this role is
added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it.
... possible effects on user agents and assistive technology when the alert role is
added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having an alert role in the operating system's accessibility api.
... 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.
...And 5 more matches
Cognitive accessibility - Accessibility
other permanent cognitive impairments include aphasia, speech and language, autism,
add/adhd, dyslexia, and dyscalculia.
...another form it can take is depression, such as when mourning the loss of a loved one, or being momentarily s
addened by a tweet or video they just saw online.
... it may seem like an overwhelming challenge to
address the wide range of cognitive differences, especially when solutions for two different people may be conflicting.
...And 5 more matches
Perceivable - Accessibility
see also
add your own subtitles & closed captions (youtube).
... 1.3.4 orientation (aa)
added in 2.1 content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
... understanding orientation 1.3.5 identify input purpose (aa)
added in 2.1 follow the list of 53 input fields to programmatically identify the purpose of a field.
...And 5 more matches
CSS Box Alignment - CSS: Cascading Style Sheets
however the specification notes that the box alignment specification should be referred to as it may
add additional capabilities over what is currently in flexbox.
... when aligning items on the inline axis you will use the properties which begin with justify-: justify-items justify-self justify-content when aligning items on the block axis you will use the properties that begin align-: align-items align-self align-content flexbox
adds an
additional complication in that the above is true when flex-direction is set to row.
...the alignment subjects are baseline aligned against each other by
adding p
adding inside the boxes.
...And 5 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
additionally, any new values defined in the box alignment module will apply to flexible box layout; in otherwords, the box alignment module, once completed, will supercede the definitions here." in a later article in this series — aligning items in a flex container — we will take a thorough look at how the box alignment properties apply to flex items.
... the gap properties a recent
addition to the box alignment specification has been the row-gap and column-gap properties, along with the shorthand gap.
...this would be done via html, by
adding a dir and lang attribute to the html element to indicate the document language and default text direction.
...And 5 more matches
Flow Layout and Overflow - CSS: Cascading Style Sheets
giving an element a fixed height and width, then
adding significant content to the box, creates a basic overflow example: the content goes into the box.
... using a value of scroll contains the content in its box and
add scrollbars to enable viewing it.
... scrollbars will be
added even if the content fits in the box.
...And 5 more matches
Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; p
adding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with e...
...'unmute' : 'mute'); } } this function is then called by the relevant event handlers: video.
addeventlistener('play', function() { changebuttonstate('playpause'); }, false); video.
addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.
addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be set via css changeb...
...uttonstate('playpause'); }); mute.
addeventlistener('click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the play and pause events are reacted to on the video.
...And 5 more matches
Audio and video manipulation - Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example
adding reverb/compression effects to audio, or grayscale/sepia filters to video.
...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.
...his.video.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.
addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { ...
...And 5 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email
addresses, locations in the same page, or anything else a url can
address.
...links are not restricted to http-based urls — they can use any url scheme supported by browsers: sections of a page with fragment urls pieces of media files with media fragments telephone numbers with tel: urls email
addresses with mailto: urls while web browsers may not support other url schemes, web sites can with registerprotocolhandler() hreflang hints at the human language of the linked url.
... note: when using target,
add rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g.
...And 5 more matches
<input type="button"> - HTML: Hypertext Markup Language
a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.
addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the do...
...
addeventlistener() is then used to establish a function that will be run when click events occur on the button.
...
adding keyboard shortcuts to buttons keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard.
...And 5 more matches
<input type="file"> - HTML: Hypertext Markup Language
events change and input supported common attributes required
additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlinputelement properties properties that apply only to elements of type file methods select() value a file input's value attribute contains a domstring that represents the path to the selected file(s).
...
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 fi...
... non-standard attributes in
addition to the attributes listed above, the following non-standard attributes are available on some browsers.
...And 5 more matches
<input type="number"> - HTML: Hypertext Markup Language
you can set a default value for the input by including a number inside the value attribute, like so: <input id="number" type="number" value="42">
additional attributes in
addition to the attributes commonly supported by all <input> types, inputs of type number support these attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the maximum value to accept for this input min the minimum value to accept for this ...
...our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to
add a step value of 10: <input type="number" placeholder="multiple of 10" step="10"> in this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1.
... for example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our html to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far: <input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> then we
add some css to narrow the width of the element with the id selector #number: #number { width: 3em; } the result looks like this: offering suggested values you can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the id of a <datalist>, which in turn contains one <option> element per suggested value.
...And 5 more matches
<input type="range"> - HTML: Hypertext Markup Language
additional attributes in
addition to the attributes shared by all <input> elements, range inputs offer the following attributes: attribute description list the id of the <datalist> element that contains optional pre-defined options max the maximum permitted value min the minimum permitted value step the stepping interval, used both for...
...
adding hash marks and labels the html specification gives browsers some flexibility on how to present the range control.
...the specification describes how to
add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.
...And 5 more matches
Microformats - HTML: Hypertext Markup Language
the properties are carried in class attributes that can be
added to any html element, while the data values re-use html element content and semantic attributes.
...in
addition to being machine-readable, their format is designed to be easily read by humans.
... to
add a property to an object, the p-*, u-*, dt-*, e-* class names are used on one of the object's descendants.
...And 5 more matches
HTTP caching - HTTP
without requiring an
additional trip to the server.
...for the files in the application that will not change, you can usually
add aggressive caching.
...infrequently updated files are named in a specific way: in their url, usually in the filename, a revision (or version) number is
added.
...And 5 more matches
Intl.Locale.prototype.collation - JavaScript
cjk characters (used in chinese) trad traditional style ordering (such as in spanish) unihan pinyin ordering for latin, unihan radical-stroke ordering for cjk characters (used in chinese) zhuyin pinyin ordering for latin, zhuyin order for bopomofo and cjk characters (used in chinese) examples like other locale subtags, the collation type can be
added to the intl.locale object via the locale string, or a configuration object argument to the constructor.
...
adding a collation type via the locale string in the unicode locale string spec, collation types are locale key "extension subtags".
... these subtags
add additional data about the locale, and are
added to locale identifiers by using the -u extension.
...And 5 more matches
Digital audio concepts - Web media technologies
in
addition, samples may use signed or unsigned values, as well.
... to provide
additional room for a low-pass filter in order to avoid distortion caused by aliasing, an
additional 2.05 khz transition band is
added to the pre-sampling frequency (resulting in 22,050 hz).
...er expects precise audio reproduction and may have an ear for sound that's good enough to make out the intricate details of unaltered audio audio loops and samples used in music and sound effects production work situations in which audio clips or samples may be remixed and then compressed; using lossless audio for the mastering process avoids compressing previously compressed data, resulting in
additional quality loss factors that may recommend the use of lossy compression include: very large source audio constrained storage (either because the storage space is small, or because there's a large amount of sound to store into it) a need to constrain the network bandwidth required to broadcast the audio; this is especially important for live streams and teleconferencing psychoacoustic...
...And 5 more matches
Image file type and format guide - Web media technologies
.pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in;
add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
... apng (animated portable network graphics) apng is a file format first introduced by mozilla which extends the png standard to
add support for animated images.
...the simplest, and most commonly used, form of bmp file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row p
added with 0x00 bytes to a multiple of 4 bytes wide.
...And 5 more matches
OpenSearch description format
(see reference material for links to other browsers' documentation.) firefox also supports
additional features not in the opensearch standard, such as search suggestions and the <searchform> element.
... this article focuses on creating opensearch-compatible search plugins that support these
additional firefox features.
... opensearch description files can be advertised as described in autodiscovery of search plugins, and can be installed programmatically as described in
adding search engines from web pages.
...And 5 more matches
Populating the page: how browsers work - Web Performance
it occurs whenever a user requests a page by entering a url into the
address bar, clicking a link, submitting a form, as well as other actions.
...if you navigate to https://example.com, the html page is located on the server with ip
address of 93.184.216.34.
... your browser requests a dns lookup, which is eventually fielded by a name server, which in turn responds with an ip
address.
...And 5 more matches
Communicating using "postMessage" - Archive of obsolete content
however, the context-menu module does not support port, so to send messages from a content script to the
add-on via a context menu object, you must use message events.
... to receive a message from the
add-on script, use self's on function: self.on("message", function(
addonmessage) { // handle the message }); like all event-registration functions, this takes two parameters: the name of the event, and the handler function.
... handling message events in the
add-on script to send a message to a content script, use the worker's postmessage function.
...And 4 more matches
lang/functional - Archive of obsolete content
let { method } = require("sdk/lang/functional"); let mynumber = { times: method(times),
add: method(
add), number: 0 }; function times (target, x) { return target.number *= x; } function
add (target, x) { return target.number += x; } console.log(mynumber.number); // 0 mynumber.
add(10); // 10 mynumber.times(2); // 20 mynumber.
add(3); // 23 parameters lambda : function the function to be wrapped and returned.
... let { partial } = require("sdk/lang/functional"); let
add = function
add (x, y) { return x + y; } let
addone = partial(
add, 1);
addone(5); // 6
addone(10); // 11 partial(
add,
addone(20))(2); // 23 parameters fn : function function on which partial application is to be performed.
...: mixed
additional arguments returns function : the partial function.
...And 4 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
unfortunately,
adding listeners for any of these events to a document has a highly deleterious effect on performance, an effect which is not mitigated in the slightest by later removing those listeners.
...while they are still viable for
add-ons targeting only the latest firefox, those wishing to support older browsers will need to provide fallbacks.
...for instance, rather than watching for the creation of <a> elements and
adding event listeners to them as they are created, an event listener can be
added to the root <html> element, and when the event fires, the event.target and its parents can be searched for a matching element.
...And 4 more matches
JavaScript Object Management - Archive of obsolete content
« previousnext » chrome javascript in this section we'll look into how to handle javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other
add-ons resulting from such global namespace pollution.
...this needs to be replaced with an identifier name which is unique to your
add-on.
... if your
add-on is called sergeant pepper, for instance, then sgtpepper would be a good namespace name.
...And 4 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
if you find it lacking or missing some piece of information, please consider
adding it once you've found it.
... the amo developer hub the amo developer hub is a great guide for
add-on developers.
... it includes links to tutorials and documentation, development tools, and most notably, the mozilla
add-ons forum.
...And 4 more matches
Useful Mozilla Community Sites - Archive of obsolete content
it's a very powerful tool you have when developing on top of the mozilla platform, and you should take advantage of it in order to create a truly successful
add-on .
... amo amo (mozilla
add-ons) is the official mozilla repository for
add-ons.
... it allows you to upload, search and download all types of
add-ons for mozilla applications.
...And 4 more matches
Security best practices in extensions - Archive of obsolete content
some items mentioned are strict guidelines, meaning that if you don't follow them then your
add-on will not be approved on mozilla
add-ons.
...there are ways to get around the content/chrome security barrier, if for example, you want a web page to send a notification to the
add-on (or vice versa).
... apis and other data handling web content is more than just pages, and more and more
add-ons are interacting with web services via an application programming interface (api).
...And 4 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
notice the
added space beneath the image in figure 2.
...figure 4 shows what happens when we
add an image to the mix.
... of course, documents authored in xhtml strict or html strict will trigger the "standards" rendering mode, so we're going to go through two basic ways to
address the problem in strict documents, and a number of ways to call on these "fixes." setting images to be blocks the first choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element.
...And 4 more matches
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").
...
add the npapi sdk include path (example : c:\npapi-sdk\headers) to project properties|(all configurations)|c++|general|
additional include directories.
...so,
add some files first.
...And 4 more matches
In-Depth - Archive of obsolete content
adding an image to the right of a toolbar this tutorial is done with mozilla 1.2 in mind.
...what this file does, is it takes the standard toolbar that is used in mozilla and
adds an image to the one side of it.
... if you look at the modern skin, you'll notice that it
adds the image to the other side of the toolbar.
...And 4 more matches
Block and Line Layout Cheat Sheet - Archive of obsolete content
finally, it will
add p
adding and border to determine the final width.
... nsinlineframe mflags ns_inline_frame_contains_percent_aware_child this flag is set if the inline frame has any children that have a percentage value set (via the style context) for the width or height of the content area, p
adding, border, or margin.
... mcomputedwidth mcomputedheight mcomputedmargin mcomputedborderp
adding mcomputedp
adding mcomputedoffsets mcomputedminwidth mcomputedmaxwidth mcomputedminheight mcomputedmaxheight given the current container frame and the style applied to the child, these values are the resolved values for the child frame's box.
...And 4 more matches
JavaScript Client API - Archive of obsolete content
this document is somewhat outdated, and the api isn't well-supported for use from
add-ons; tread carefully.
...(so for example, bookmarkstore.create()
adds a new bookmark to the firefox profile).
...when your tracker detects that an item has changed, you should
add it to this list by calling: this.
addchangedid(guid); these guids correspond to the .id fields of your record objects; see the section on the store class for more about defining and maintaining the mapping between guids and records.
...And 4 more matches
Hidden prefs - Archive of obsolete content
address book "get map" button pref ("mail.
addr_book.mapit_url.format" ) the format for this pref is: @a1 ==
address, part 1 @a2 ==
address, part 2 @ci == city @st == state @zi == zip code @co == country if the pref is set to "", no "get map" button will appear in the
addressbook card preview pane.
... the default (defined in mailnews.js) is: pref("mail.
addr_book.mapit_url.format", "http://www.mapquest.com/maps/map.adp...st&zipcode=@zi");
addressbook quick search query pref ("mail.
addr_book.quicksearchquery.format" ) the format for this pref is: @v == the escaped value typed in the quick search bar in the
addressbook every occurance of @v will be replaced.
...the default (defined in mailnews.js) is: pref("mail.
addr_book.quicksearchquery.format","?(or(primaryemail,c,@v)(displayname,c,@v)(firstname,c,@v)(lastname,c,@v))"); "and", "or" and "not" are valid.
...And 4 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
in
addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications.
... in
addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface widgets.
... modular, embeddable: gecko's modular architecture enables developers to
add or remove modules with little effort, fitting the software to the available hardware and adjusting functionality to match product requirements.
...And 4 more matches
LIR - Archive of obsolete content
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 sourc...
... call subroutine that returns void 34 calli integer call subroutine that returns an int 35 callq quad 64 bit call subroutine that returns a quad 36 calld double call subroutine that returns a double branch 37 j void jump always 38 jt void jump if true 39 jf void jump if false 40 jtbl void jump to
address in table 41 label void a jump target (no machine code is emitted for this) 42 not in use guards 43 x void exit always 44 xt void exit if true 45 xf void exit if false 46 xtbl void exit via indirect jump 47 xbarrier void a lir_xbarrier cause no code to be generated, but it acts like a never-...
...eger 64 bit unsigned quad greater-than-or-equal 72 not in use arithmetic 73 eqd integer double equality 74 ltd integer double less-than 75 gtd integer double greater-than 76 led integer double less-than-or-equal 77 ged integer double greater-than-or-equal 78 negi integer negate int 79
addi integer
add int 80 subi integer subtract int 81 muli integer multiply int 82 divi integer i386/64 divide int 83 modi integer modulo int - lir_modi is a hack.
...And 4 more matches
Extensions - Archive of obsolete content
extensions typically overlay the host application's ui to
add toolbar buttons, menus and other features.
...to support prism specifically, you'll need to
add prism to the list of target applications in the extension's install.rdf file.
... the code snippet will look something like this: <em:targetapplication> <!– prism –> <description> <em:id>prism@developer.mozilla.org</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:targetapplication> in
addition to the install manifest changes, you may want to expose your extension into the prism ui.
...And 4 more matches
Supporting private browsing mode - Archive of obsolete content
detecting whether private browsing mode is permanent requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) firefox 4
added support for having private browsing mode permanently enabled.
... in
addition, there is a browser:purge-session-history notification that is sent when the browser purges private data that extensions can watch in order to know when it's time to do the same.
...ener() { this.init(); } privatebrowsinglistener.prototype = { _os: null, _inprivatebrowsing: false, // whether we are in private browsing mode _watcher: null, // the watcher object init : function () { this._inited = true; this._os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); this._os.
addobserver(this, "private-browsing", false); this._os.
addobserver(this, "quit-application", false); try { var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); this._inprivatebrowsing = pbs.privatebrowsingenabled; } catch(ex) { // ignore exceptions in older versions of firef...
...And 4 more matches
Actionscript Acceptance Tests - Archive of obsolete content
testname.as.asc_args this file specifies
additional arguments to pass to asc when compiling the test: # asc args for file # two modes are available: # override| all command line arguments (except builtin.py) are ignored and replaced by these # merge| merge these args in with the current args # specifiy an arg that starts with -no will disable the arg...
...testname.as.avm_args this file specifies
additional arguments to pass to the shell when running the test - the user can use the special variable $dir to refer to the current directory.
...any
additional args on the uses_swfversion line will be passed to each run of the vm.
...And 4 more matches
Elements - Archive of obsolete content
it should usually declare xbl as the default namespace (unless an xbl namespace prefix is used) and it may
additionally declare other namespace prefixes used in your binding.
...namespaces in xml besides the default namespace, you can declare any amount of
additional namespaces to handle your content.
...a xbl binding can
add anonymous content, fields, properties, methods, and event handlers to html/xml elements.
...And 4 more matches
Mac stub installer - Archive of obsolete content
to do this, in
addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#33> note that if you are using the debug target of the installer binary all shared libraries are expected to have the name format <libn...
... how do i
add an installer package to the mac installer?
...
adding a package involves a few steps:
add a section named for your <component> to the packages-mac manifest that describes which files from dist belong to which module.
...And 4 more matches
Containment Properties - Archive of obsolete content
we can
add the containment attribute to do this.
...if the starting node (or ref) has that predicate as one of its triples in the rdf data, the builder will use it in
addition to checking if it is a container.
...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 4 more matches
Commands - Archive of obsolete content
in
addition, the menu commands would need to be enabled and disabled depending on whether the focused element had selected text or not, and for paste operations, whether there is something suitable on the clipboard to paste.
...in
addition, text fields and other widgets have a number of commands which they already support that you can invoke.
...
additionally, if you set the disabled attribute on the command, the command will be disabled and it will not be invoked.
...And 4 more matches
Element Positioning - Archive of obsolete content
a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of p
adding.
...the width of the box containing the buttons is the total width of the buttons plus the p
adding between them.
...the quick way is to simply
add the width and height attributes on an element, much like you might do on an html img tag.
...And 4 more matches
Install Scripts - Archive of obsolete content
this involves the use of two functions,
adddirectory() and
addfile().
... the
adddirectory() function tells the installer that a directory from the xpi archive (and all of its contents) should be installed to a particular location.
... the
addfile() is similar but for a single file.
...And 4 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.
...only one rule is used, but you may
add others if needed.
...And 4 more matches
Using Visual Studio as your XUL IDE - Archive of obsolete content
> text editor > file extension and
add the extension "xul" with "xml editor".
...if you already have a xml or xul file opened, visual studio will
add the menu item xml to the main menu.
...to
add the xul.xsd from the package that you have downloaded.
...And 4 more matches
browser - Archive of obsolete content
it is similar to an iframe except that it holds a page history and contains
additional methods to manipulate the currently displayed page.
..., droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods
addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: ...
...this boundary has a number of special effects, such as making window.top == window (unless the browser is
added to a chrome document), and preventing documents from inheriting the principal of the parent document.
...And 4 more matches
listbox - Archive of obsolete content
additional rows can be viewed using a scroll bar.
... attributes disabled, disablekeynavigation, preference, rows, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, listboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods
additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox i...
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...And 4 more matches
XULRunner tips - Archive of obsolete content
when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest
add a "skin" line: skin communicator classic/1.0 skin/communicator/
add a skin folder named "communicator" and
add a single css file named "communicator.css" with this content: @import url("chrome://global/skin"); dom inspector to
add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these steps: download the dom inspector (instead of clicking the "
add to.
... save the dom_inspector-*.xpi package to a temporary directory unzip the package copy the following files: chrome/inspector.jar to the chrome directory of your xulrunner application components/inspector-cmdline.js to your components directory defaults/preferences/inspector.js to your preferences directory open your chrome.manifest file and
add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no locale inspector en-us jar:inspector.jar!/locale/inspector/ skin inspector modern/1.0 jar:inspector.jar!/skin/modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/po...
...rome://inspector/content/viewers/stylerules/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/dom/commandoverlay.xul to launch dom inspector in your application, you need to open its main window, with a command like this: window.open("chrome://inspector/content/inspector.xul", "", "chrome"); alternatively, the dom inspector may also be
added as an extension: (if you already have inspector installed for another application you can skip to the next step) follow the instructions above through "unzip the package." create a file in the extensions directory of your application with the same name as the dom inspector id (inspector@mozilla.org) containing one line of text -- the exact path to the root directory of dom inspector (wher...
...And 4 more matches
Gecko Compatibility Handbook - Archive of obsolete content
while they support the css 1 standard to some degree, the implementations are not complete and have non-standard features
added.
... in
addition, internet explorer 4 and netscape navigator 4 use completely different methods of embedding third-party software into the browser.
... after restarting your browser,
add the the user-agent strings that you want to test to the list (tools | user agent switcher | options | options...
...And 4 more matches
Introduction to SSL - Archive of obsolete content
these capabilities
address fundamental concerns about communication over the internet and other tcp/ip networks: ssl server authentication allows a user to confirm a server's identity.
...in
addition, all data sent over an encrypted ssl connection is protected with a mechanism for detecting tampering-that is, for automatically determining whether the data has been altered in transit.
...in
addition, ssl 2.0 support is entirely removed in firefox 8.
...And 4 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
browser vendors such as netscape and microsoft competed to
add compelling features to the html they supported in their browsers in order to provide the richest most compelling content to their users and to entice web authors to support them.
...mozilla/version followed by a comment token which gave
additional information regarding the operating system being used, etc.
...in
addition to navigator.useragent other properties such as appname and appversion were available in the navigator object which could be used in browser vendor/version detection strategies.
...And 4 more matches
Collision detection - Game development
we need to think about
adding collision detection so it can bounce off the bricks and break them.
... let's write that down in code: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; } } } }
add the above block to your code, below the keyuphandler() function.
...we can do that by
adding an extra parameter to indicate whether we want to paint each brick on the screen or not.
...And 4 more matches
Finishing up - Game development
let's first
add a variable to store the number of lives in the same place where we declared our other variables: var lives = 3; drawing the life counter looks almost the same as drawing the score counter —
add the following function to your code, below the drawscore() function: function drawlives() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("lives: "+lives, canvas.width-6...
...we can also reset the ball and the p
addle positions when the player begins with their next life.
... so, in the draw() function replace the following three lines: alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game with this, we can
add slightly more complex logic to it as given below: lives--; if(!lives) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } else { x = canvas.width/2; y = canvas.height-30; dx = 2; dy = -2; p
addlex = (canvas.width-p
addlewidth)/2; } now, when the ball hits the bottom edge of the screen, we're subtracting one life from the lives variable.
...And 4 more matches
Move the ball - Game development
delete all the javascript you currently have inside your html file except for the first two lines, and
add the following below them.
...now, let's draw the ball —
add the following inside your draw() function: ctx.beginpath(); ctx.arc(50, 50, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame.
... first,
add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to
add a small v...
...And 4 more matches
Track the score and win - Game development
add the following into your javascript, after the rest of your variables: var score = 0; you also need a drawscore() function, to create and update the score display.
...
add the following after the collisiondetection() function: function drawscore() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("score: "+score, 8, 20); } drawing text on a canvas is similar to drawing a shape.
... to award a score each time a brick is hit,
add a line to the collisiondetection() function to increment the value of the score variable each time a collision is detected.
...And 4 more matches
Physics - Game development
adding physics phaser is bundled with three different physics engines — arcade physics, p2 and ninja physics — with a fourth option, box2d, being available as a commercial plugin.
...
add the physics.startsystem() method at the beginning of the create function (make it the first line inside the function), as shown below: game.physics.startsystem(phaser.physics.arcade); next, we need to enable our ball for the physics system — phaser object physics is not enabled by default.
...
add the following line at the bottom of the create() function: game.physics.enable(ball, phaser.physics.arcade); next, if we want to move our ball on the screen, we can set velocity on its body.
...And 4 more matches
Randomizing gameplay - Game development
our game appears to be completed, but if you look close enough you'll notice that the ball is bouncing off the p
addle at the same angle throughout the whole game.
... making rebounds more random we can change the ball's velocity depending on the exact spot it hits the p
addle, by modifying the x velocity each time the ballhitp
addle() function is run using a line along the lines of the below.
...
add this new line to your code now, and try it out.
...And 4 more matches
Fundamental text and font styling - Learn web development
e list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the microsoft core fonts for the web initiative in the late 90s and early 2000s): name generic type notes arial sans-serif it's often considered best practice to also
add helvetica as a preferred alternative to arial as, although their font faces are almost identical, helvetica is considered to have a nicer shape, even if arial is more broadly available.
... a font-family example let's
add to our previous example, giving the paragraphs a sans-serif font: p { color: red; font-family: helvetica, arial, sans-serif; } this gives us the following result: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat.
... you should note that text-decoration can accept multiple values at once, if you want to
add multiple decorations simultaneously, for example text-decoration: underline overline.
...And 4 more matches
What is a URL? - Learn web development
a url is nothing more than the
address of a given unique resource on the web.
... deeper dive basics: anatomy of a url here are some examples of urls: https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's
address bar to tell it to load the associated page (resource).
...alternatively, it is possible to directly use an ip
address, but because it is less convenient, it is not often used on the web.
...And 4 more matches
HTML basics - Learn web development
failing to
add a closing tag is one of the standard beginner errors and can lead to strange results.
...html contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most: <h1>my main title</h1> <h2>my top level heading</h2> <h3>my subheading</h3> <h4>my sub-subheading</h4> now try
adding a suitable title to your html page just above your <img> element.
... paragraphs as explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content: <p>this is a single paragraph</p>
add your sample text (you should have it from what should your website look like?) into one or a few paragraphs, placed directly below your <img> element.
...And 4 more matches
From object to iframe — other embedding technologies - Learn web development
; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.
addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.
addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution...
...\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.
addeventlistener('input', updatecode); window.
addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = t...
...plus if everybody started to do this, all the
additional bandwidth would start to cost mozilla a lot of money.
...And 4 more matches
Making asynchronous programming easier with async and await - Learn web development
previous overview: asynchronous next more recent
additions to the javascript language are async functions and the await keyword, part of the so-called ecmascript 2017 javascript edition (see ecmascript next support in mozilla).
... so the async keyword is
added to functions to tell them to return a promise rather than directly returning the value.
... in
addition, this lets synchronous functions avoid any potential overhead that comes with running with support for using await.
...And 4 more matches
Introduction to web APIs - Learn web development
apis like htmlmediaelement, the web audio api, and webrtc allow you to do really interesting things with multimedia such as creating custom ui controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or
adding effects to audio tracks (such as gain, distortion, panning, etc).
... the telegram apis allows you to embed content from telegram channels on your website, in
addition to providing support for bots.
...st playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.
addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, ...
...And 4 more matches
Working with JSON - Learn web development
add the following at the bottom of your javascript code: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; to create a request, we need to create a new request object instance from the xmlhttprequest constructor, using the new keyword.
...
add the following below your last line: let request = new xmlhttprequest(); now we need to open the request using the open() method.
...
add the following line: request.open('get', requesturl); this takes at least two parameters — there are other optional parameters available.
...And 4 more matches
Getting started with Ember - Learn web development
ember with
add-ons emberjs has a plugin architecture, which means that
add-ons can be installed and provide
additional functionality without much, if any, configuration.
...designers and other non-developers can contribute to page templates without any knowledge of javascript, and interactivity can be
added later.
...there are a couple of github issues open about this on the todomvc family of projects:
add keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design.
...And 4 more matches
Framework main features - Learn web development
for instance, consider a function
add(), which takes integers a and b and returns their sum.
... in javascript, that function could be written like this: function
add(a, b) { return a + b; } this code might be trivial for someone accustomed to javascript, but it could still be clearer.
...typescript makes that possible: function
add(a: number, b: number) { return a + b; } the : number written after each parameter here tells typescript that both a and b must be numbers.
...And 4 more matches
Deployment and next steps - Learn web development
there are no
additional runtimes or dependencies to download, parse, execute, and keep running in memory.
... navigate to the root of your app and run npx vercel; the first time you do it, you'll be prompted to enter your email
address, and follow the steps in the email sent to that
address, for security purposes.
... before you start to upload content to your git repository, it is a good practice to
add a .gitignore file to tell git which files to exclude from source control.
...And 4 more matches
Implementing feature detection - Learn web development
we will
add the html5 shiv to our example too so that the html5 semantic elements will style properly in older versions of ie.
... next,
add a <script></script> element at the bottom of your body (just before the closing </body> tag).
...if you look at the latter, you'll see a couple of @supports blocks, for example: @supports (flex-flow: row) and (flex: 1) { main { display: flex; } main div { p
adding-right: 4%; flex: 1; } main div:last-child { p
adding-right: 0; } } this at-rule block applies the css rule within only if the current browser supports both the flex-flow: row and flex: 1 declarations.
...And 4 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.
...if you want this to work correctly, you need to define a function to
add the handler separately, calling it on each iteration and passing it the current value of para and i each time (or something similar).
... the main feature of such tools is the ability to
add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on.
...And 4 more matches
Accessibility/LiveRegionDevGuide
in
addition to the standard priority queue methods,
additional methods will need to be implemented that purge the queue based on one of the priority criterion.
...the object changed events can be further subdivided into object
addition and removal events.
... in at-spi, this is accomplished by appending ":
add" or ":remove" to the event string.
...And 4 more matches
Mozilla accessibility architecture
each of these accessible nodes supports at minimum the generic cross-platform accessibility interface nsiaccessible (which provides a text name, enumerated role identifier and a set of state flags) and sometimes
additional interfaces.
...on windows, we solve this by supporting an
additional interface beyond msaa's iaccesible, for every dom node.
...in
addition, some vendors had asked us to provide information and support for pieces of text smaller than a text node (i.e.
...And 4 more matches
Frequently Asked Questions for Lightweight themes
there are hundreds of thousands community-designed themes to choose from, with more
added every day.
... installing lightweight themes how do i
add lightweight themes to my firefox?
...once a theme is installed, it is saved in the
add-ons manager, where you can enable or disable them as you wish.
...And 4 more matches
Creating JavaScript callbacks in components
here is a very simple example of the observer pattern: [scriptable, uuid(...)] interface stringparserobserver { void onword(string word); }; [scriptable, uuid(...)] interface stringparser { void parse(string data); void
addobserver(stringparserobserver observer); }; in this example, the stringparser will call the stringparserobserver.onword method whenever it finishes parsing a word found in the raw string data.
... here is an example of how to use the callback system: var wordhandler = { onword : function(word) { alert(word); } }; var stringparser = /* get a reference to the parser somehow */ stringparser.
addobserver(wordhandler); stringparser.parse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
...javascript functions as callbacks another common use of the pattern is found in
addeventlistener / removeeventlistener.
...And 4 more matches
Simple Instantbird build
for
additional, more detailed information, see the build documentation.
... 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.
...for example, to create a debug build instead of a release build, that file would contain: ac_
add_options --enable-debug for more on configuration options, see the page configuring build options.
...And 4 more matches
Simple Sunbird build
install mozillabuild, a package of
additional build tools.
... # 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...
... echo 'mk_
add_options moz_objdir=@topsrcdir@/objdir-sb-release' >> .mozconfig # ...in this directory...
...And 4 more matches
Embedding Tips
implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::
addwebbrowserlistener() method.
...hint,
add a native message processing loop after the call to saveuri that terminates when onstatechange indicates persistence has finished..
... at startup use the category manager to register properties of the global object in javascript like this: nscomptr<nsicategorymanager> catman = do_getservice(ns_categorymanager_contractid); if (!catman) return ns_error_failure; nsxpidlcstring previous; catman->
addcategoryentry(javascript_global_property_category, "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); this will cause a component with the contract id my_prop_contract_id to be lazily created when the my_prop_name is resolved in any javascript window scope.
...And 4 more matches
IPDL Tutorial
to experiment with
adding a new ipdl protocol, see creating a new protocol.
... maybe types if you want to pass a potentially undefined argument, you can
add ?
...maybe); }; custom primitive types when you need to send data of a type other than one built into ipdl, you can
add a using declaration in an ipdl specification.
...And 4 more matches
Initial setup
if a community doesn't exist, send an email to the new-locales newsgroup for
additional guidance.
...
add a request about creating your locale's repository to the new locales newsgroup.
...
add a request about creating your locale's repository to the new locales newsgroup.
...And 4 more matches
Gecko Profiler FAQ
i can help you
add one, though.
...if you want to measure things, please measure without the profiler running, because the profiler can
add its own overhead.
... how do we find performance regressions caused by third-party and system
addons, especially ones that only show up after extended uptime?
...And 4 more matches
Reporting a Performance Problem
once uploaded, copy permalink url to your clipboard by right clicking and
add the profile url to a bug for your performance problem and/or send it to the appropriate person.
... viewing
addon performance in geckoview sometimes an
addon or more are slowing down firefox.
... these
addons might be using the extension api in ways that were not meant to.
...And 4 more matches
NSS_3.12_release_notes.html
vfychain.main leaks memory bug 396044: warning: usage of uninitialized variable in ckfw/object.c(174) bug 396045: warning: usage of uninitialized variable in ckfw/mechanism.c(719) bug 401986: mac os x leopard build failure in legacydb bug 325805: diff considers mozilla/security/nss/cmd/pk11util/scripts/pkey a binary file bug 385151: remove the link time dependency from nss to softoken bug 387892:
add entrust root ca certificate(s) to nss bug 433386: when system clock is off by more than two days, oscp check fails, can result in crash if user tries to view certificate [[@ secitem_compareitem_util] [[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command...
...bug 287061: crl number should be a big integer, not ulong bug 301213: combine internal libpkix function tests into a single statically linked program bug 324740:
add generation of sia and aia extensions to certutil bug 339737: libpkix ocsp checking calls cert_verifycert bug 358785: merge nss_libpkix_branch back to trunk bug 365966: infinite recursive call in vfy_verifydigestdirect bug 382078: pkix default http client returns error when try to get an ocsp response.
...bug 399326: libpkix is unable to validate cert for certusagestatusresponder bug 400947: thread unsafe operation in pkix_pl_hashtable_
add cause selfserv to crash.
...And 4 more matches
NSS 3.24 release notes
additional csps are zeroed in the code.
... a ssl_configservercert function has been
added for configuring ssl/tls server sockets with a certificate and private key.
...separate functions for configuring online certificate status protocol (ocsp) responses or signed certificate timestamps are not needed, since these can be
added to the optional sslextraservercertdata struct provided to ssl_configservercert.
...And 4 more matches
NSS 3.35 release notes
applications using nss may explicitly request to use a specific database format, by
adding a type prefix to the database directory, provided at nss initialization time.
...(conversely, nss will never synchronize data from sql to dbm format.)
additional information can be found on this fedora linux project page: https://fedoraproject.org/wiki/changes/nssdefaultfileformatsql
added formally verified implementations of non-vectorized chacha20 and non-vectorized poly1305 64-bit.
...5:8a:12:a5:67:4a:ef:25:f2:8b:a7:dc:fa:ec:ee:a3:48:e5:41:e6:f5:cc:4e:e6:3b:71:b3:61:60:6a:c3 cn = global chambersign root sha-256 fingerprint: ef:3c:b4:17:fc:8e:bf:6f:97:87:6c:9e:4e:ce:39:de:1e:a5:fe:64:91:41:d1:02:8b:7d:11:c0:b2:29:8c:ed significant changes to tls 1.3 were made, along with the update from draft -18 to draft -23: support for keyupdate was
added.
...And 4 more matches
Enc Dec MAC Output Public Key as CSR
filename, prbool ascii) { certsigneddata signeddata; secitem reqder; certcertificaterequest *certreq = null; secstatus rv = secsuccess; prarenapool *arena = null; seckeypublickey *publickey = null; arena = port_newarena(der_default_chunksize); if (arena == null) { rv = secfailure; goto cleanup; } rv = re
adderfromfile(&reqder, infilename, ascii); if (rv) { rv = secfailure; goto cleanup; } certreq = (certcertificaterequest*) port_arenazalloc (arena, sizeof(certcertificaterequest)); if (!certreq) { rv = secfailure; goto cleanup; } certreq->arena = arena; /* since cert request is a signed data, must decode to get the inner ...
...ied format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemail
address(subject); if (!email) email = strdup("(not specified)"); org = cert_getorgname(subject); if (!org) org = strdup("(not specified)"); state = cert_getstatename(subject); if (!state) state = strdup("(not specified)"); country = cert_getcountryname(subject); if (!country) country = strdup("(...
...xt[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int p
addinglength = 0; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, i...
...And 4 more matches
Introduction to the JavaScript shell
countheap([start[, kind]])
added in spidermonkey 1.8 count the number of live gc things in the heap, or things reachable from start when it is given and is not null.
... dumpheap([filename[, start[, tofind[, maxdepth[, toignore]]]]])
added in spidermonkey 1.8 dump the graph of all existing objects (or a specific interesting subgraph) to a file.
... gcparam(name[, value])
added in spidermonkey 1.8 read or configure garbage collector parameters.
...And 4 more matches
JS::PersistentRooted
syntax js::persistentrooted<t> var; //
added in spidermonkey 38 js::persistentrooted<t> var(cx); js::persistentrooted<t> var(cx, initial); js::persistentrooted<t> var(rt); js::persistentrooted<t> var(rt, initial); name type description cx jscontext * the context to get the runtime in which to
add the root rt jsruntime * the runtime in which to
add the root.
...
added in spidermonkey 38 void init(jscontext* cx, t initial) void init(jsruntime* rt) void init(jsruntime* rt, t initial) void reset() reset the value to initial value of the type.
...
added in spidermonkey 38 t& get() returns ptr.
...And 4 more matches
JS::Rooted
syntax js::rooted<t> var(cx); js::rooted<t> var(cx, initial); js::rooted<t> var(rt); js::rooted<t> var(rt, initial); name type description cx jscontext * the context in which to
add the root.
... rt jsruntime * the runtime in which to
add the root.
... const t &get() const operator const t&() const t operator->() const t *
address() returns a pointer to ptr.
...And 4 more matches
JSPropertyOp
they are also the types of the jsclass.
addproperty, getproperty, and setproperty callbacks, which are called during object property accesses.
... syntax typedef bool (* jspropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); typedef bool (* jsstrictpropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); //
added in spidermonkey 1.9.3 name type description cx jscontext * the context in which the property access is taking place.
...a jspropertyop may be installed on an individual property as a getter or setter; or it may be installed on a jsclass to hook property gets, sets, or
adds.
...And 4 more matches
JS_SetOptions
mxr id search for jsoption_xml jsoption_allow_xml
added in spidermonkey 15 if this is off, e4x syntax isn't supported no matter what version number is set.
... mxr id search for jsoption_allow_xml jsoption_moar_xml
added in spidermonkey 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
... mxr id search for jsoption_dont_report_uncaught jsoption_relimit
added in spidermonkey 1.8 throw an exception if a regular expression backtracks more than n3 times, where n is the length of the input string.
...And 4 more matches
Shell global objects
addpromisereactions(promise, onresolve, onreject) calls the js::
addpromisereactions jsapi function with the given arguments.
... functions available only if enable_intl_api is defined
addintlextras(obj)
adds various not-yet-standardized intl functions as properties on the provided object (this should generally be intl itself).
... the
added functions and their behavior are experimental: don't depend upon them unless you're willing to update your code if these experimental apis change underneath you.
...And 4 more matches
Using XPCOM Components
in
addition to the cookiemanager component, for example, the webbrowserfind component is another part of a large set of web browsing interfaces you can use.
...
addsite
add a new site to the whitelist.
... the xpcom component viewer the xpcom component viewer is an
add-on you can install in your browser (in sandbox, not available for now).
...And 4 more matches
Interfacing with the XPCOM cycle collector
add a line declaring that your class nsfoo participates in the cycle collection in nsfoo.cpp: ns_impl_cycle_collection_class(nsfoo) change the line ns_decl_isupports to ns_decl_cycle_collecting_isupports in the definition of nsfoo.
...
add a line ns_decl_cycle_collection_class(nsfoo) within the public portion of definition of nsfoo.
... (we call nsibar the canonical isupports type for nsfoo.)
add a line ns_interface_map_entries_cycle_collection(nsfoo) to the interface map of nsfoo in nsfoo.cpp.
...And 4 more matches
imgIEncoder
modules/libpr0n/public/imgiencoder.idlscriptable please
add a summary to this article.
... 1.0 66 introduced gecko 1.8 inherits from: nsiasyncinputstream last changed in gecko 1.9 (firefox 3) method overview void
addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); void startimageencode(in pruint32 width, in pruint32 height, in pruint32 inputformat, in astring o...
... the following options can be used for each frame, with
addimageframe(): transparency=[yes|no|none] -- default: "yes" overrides default from input format.
...And 4 more matches
mozIPersonalDictionary
to access this service, use var personaldictionary = components.classes["@mozilla.org/spellchecker/personaldictionary;1"] .getservice(components.interfaces.mozipersonaldictionary); method overview void
addcorrection(in wstring word,in wstring correction, in wstring lang); void
addword(in wstring word, in wstring lang); boolean check(in wstring word, in wstring lang); void endsession(); void getcorrection(in wstring word, [array, size_is(count)] out wstring words, out pruint32 count); void ignoreword(in wstring word); void load(); void removecorrection(in wstring word,in wstring correc...
... methods
addcorrection()
adds a misspelling to the list of corrections.
... void
addcorrection( in wstring word, in wstring correction, in wstring lang ); parameters word the incorrect spelling of the word to
add to the list of corrections.
...And 4 more matches
nsIApplicationCache
method overview void activate(); void
addnamespaces(in nsiarray namespaces); void discard(); void gatherentries(in pruint32 typebits, out unsigned long count, [array, size_is(count)] out string keys); nsiapplicationcachenamespace getmatchingnamespace(in acstring key); unsigned long gettypes(in acstring key); void initashandle(in acstring groupid, in acstring clientid); void markentry(in acstring key, in unsigned long typebit...
... item_dynamic 8 this item was
added to the cache using the dynamic scripting api.
...
addnamespaces()
add a set of namespace entries to the application cache.
...And 4 more matches
nsIBlocklistService
xpcom/system/nsiblocklistservice.idlscriptable please
add a summary to this article.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 29 (firefox 29 / thunderbird 29 / seamonkey 2.26) method overview unsigned long get
addonblockliststate(in jsval
addon, [optional] in astring appversion, [optional] in astring toolkitversion); unsigned long getpluginblockliststate(in nsiplugintag plugin, [optional] in astring appversion, [optional] in astring toolkitversion); boolean is
addonblocklisted(in jsval
addon, [optional] in astring appversion, [optional] in astring toolkitversion); constants constant value description state_not_blocked 0 state_softblocked 1 state_blocked 2 state_outdated 3 methods get
addonblockl...
...iststate() determine the blocklist state of an
add-on.
...And 4 more matches
nsIDBChangeListener
example here is an example implementation of the listener (that does nothing): var mylistener = { onhdrflagschanged: function(ahdrchanged, aoldflags, anewflags, ainstigator) {}, onhdrdeleted: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onhdr
added: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onparentchanged: function(akeychanged, oldparent, newparent, ainstigator) {}, onannouncergoingaway: function(ainstigator) {}, onreadchanged: function(ainstigator) {}, onjunkscorechanged: function(ainstigator) {}, onhdrpropertychanged: function(ahdrtochange, aprechange, astatus, ainstigator) {}, onevent: function(adb, aevent...
...) {}, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsidbchangelistener) && !aiid.equals(components.interfaces.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; and to attach it in thunderbird, we must call
addlistener on a nsidbchangeannouncer, typically through a nsimsgdatabase.
... there are a couple of ways to access the message database: if you have a nsimsgfolder, you can do this like so: somefolder.msgdatabase.
addlistener(mylistener); alternately, you can access the message database through the nsimsgdbview like so: gfolderdisplay.view.dbview.db.
addlistener(mylistener); method overview void onhdrflagschanged(in nsimsgdbhdr ahdrchanged, in unsigned long aoldflags, in unsigned long anewflags, in nsidbchangelistener ainstigator); void onhdrdeleted(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); void onhdr
added(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); void onparentchanged(in nsmsgkey akeychanged, in nsmsgk...
...And 4 more matches
nsIDOMOfflineResourceList
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.
... last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports method overview void moz
add(in domstring uri); boolean mozhasitem(in domstring uri); domstring mozitem(in unsigned long index); void mozremove(in domstring uri); void swapcache(); void update(); attributes attribute type description mozitems nsidomofflineresourcelist the list of dynamically-managed entries in the offline resource list.
...And 4 more matches
nsIFaviconService
to use this service, use: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); method overview void
addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring getfavicondataasdataurl(in nsiuri afaviconuri); obsolete since gecko 22.0 nsiuri getfaviconforpage(in ns...
... methods
addfailedfavicon() this method
adds a given favicon's uri to the failed favicon cache.
...void
addfailedfavicon( in nsiuri afaviconuri ); parameters afaviconuri the uri of an icon in the favicon service.
...And 4 more matches
nsIIdleService
to create an instance, use: var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice); method overview void
addidleobserver(in nsiobserver observer, in unsigned long time); void removeidleobserver(in nsiobserver observer, in unsigned long time); attributes attribute type description idletime unsigned long the amount of time in milliseconds that has passed since the last user activity.
... methods
addidleobserver()
add an observer to be notified when the user idles for some period of time, and when they get back from that.
... you can
add the same observer twice.
...And 4 more matches
nsIMacDockSupport
about dockmenu by default firefox
adds two menu items to the dock menu.
... = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.
addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //documen...
...therefore, if you would like to
add or remove items to the menu it is recommended to manipulate the default menu item which is on the hidden window of firefox.
...And 4 more matches
nsIPrefBranch2
method overview void
addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); void removeobserver(in string adomain, in nsiobserver aobserver); methods
addobserver()
add a preference change observer.
...for example, if your observer is registered with
addobserver("bar.", ...) on a branch with root "foo.", modifying the preference "foo.bar.baz" will trigger the observer, and adata parameter will be "bar.baz".
... void
addobserver( in string adomain, in nsiobserver aobserver, in boolean aholdweak ); parameters adomain the preference on which to listen for changes.
...And 4 more matches
nsISearchEngine
netwerk/base/public/nsibrowsersearchservice.idlscriptable please
add a summary to this article.
... last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void
addparam(in astring name, in astring value, in astring responsetype); nsisearchsubmission getsubmission(in astring data, [optional] in astring responsetype, [optional] in astring purpose); boolean supportsresponsetype(in astring responsetype); attributes attribute type description alias astring an optional shortcut alias for the engine.
... methods
addparam()
adds a parameter to the search engine's submission data.
...And 4 more matches
nsIWebBrowser
method overview void
addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance.
... the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive
additional notifications from the browser object.
... the chrome object may optionally implement nsiwebprogresslistener instead of explicitly calling
addwebbrowserlistener() and removewebbrowserlistener() to register a progress listener object.
...And 4 more matches
nsIXMLHttpRequest
note: if you're a web developer or a mozilla
add-on developer, please refer to the xmlhttprequest documentation instead.
... this page contains documentation, specific to mozilla application and
add-on developers.
...for instance, as done in example 2, the flag of load_anonymous is
added, this strips all user data (cookies, tokens, etc).
...And 4 more matches
Storage
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, getter_
addrefs(dbfile)); ns_ensure_success(rv, rv); rv = dbfile->append(ns_literal_string("my_db_file_name.sqlite")); ns_ensure_success(rv, rv); nscomptr<mozistorageservice> dbservice = do_getservice(moz_storage_service_contractid, &rv); ns_ensure_success(rv, rv); nscomptr<mozistorageconnection> dbconn; rv = dbservice->opendatabase(dbfile, getter_
addrefs(dbconn)); ns_ensure_success(rv, rv); note: moz_s...
...similarly, the c++ looks like this: nscomptr<mozistoragestatement> statement; rv = dbconn->createstatement(ns_literal_cstring("select * from table_name where column_name = ?1"), getter_
addrefs(statement)); ns_ensure_success(rv, rv); this example uses the numbered placeholder indexed by zero for a parameter to be bound later (described in binding parameters).
... c++ example: nscomptr<mozistoragestatement> statement; rv = mdbconn->createstatement(ns_literal_cstring("select * from table_name where id = ?1"), getter_
addrefs(statement)); ns_ensure_success(rv, rv); rv = statement->bindint32parameter(0, 1234); ns_ensure_success(rv, rv); note: numerical indexes for parameters are always one less than the number you write in the sql.
...And 4 more matches
Status, Recent Changes, and Plans
made getter_
addrefs( nscomptr& ) apply the same type-safety check that the simple assignment forms do.
...
added do_createinstance.
...
added do_getservice.
...And 4 more matches
Xray vision
scripts running in web pages can
add extra properties to dom objects (also known as expando properties) and even redefine standard dom objects to do something unexpected.
...any modifications to these objects, such as
adding expandos or redefining standard properties, stays in the javascript reflection and does not affect the c++ representation.
... so, in gecko 31 and 32 we've
added xray support for most javascript built-in objects.
...And 4 more matches
Standard OS Libraries
the alternative to standard libraries is creating your own dll (for windows) or so (for linux) file with c functions that can be called from your
add-on with js-ctypes.
... the dll/so/etc file you make must be shipped with your
add-on.
...en-us/library/windows/desktop/dd162805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", [ { "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.
...And 4 more matches
Debugger.Object - Firefox Developer Tools
the hostannotations accessor consults the embedding for
additional information about the referent that might be of interest to the debugger.
...(this function behaves like object.defineproperty, except that the target object is implicit, and in a different compartment from the function and descriptor.) defineproperties(properties)
add the properties given byproperties to the referent.
... seal() prevent properties from being
added to or deleted from the referent.
...And 4 more matches
Console messages - Firefox Developer Tools
the following icons may be used: informational message warning error blocked; for network messages in
addition, a disclosure triangle indicates that further information is available; clicking it displays or collapses that information.
...
additional context menu options are described in the subsection for the message category they apply to.
... if the request was made as an xmlhttprequest, there's an
additional "xhr" tag indicating this.
...And 4 more matches
AudioTrackList - Web APIs
event handlers on
addtrack an event handler to be called when the
addtrack event is fired, indicating that a new audio track has been
added to the media element.
... events
addtrack fired when a new audio track has been
added to the media element.
... also available via the on
addtrack property.
...And 4 more matches
Using images - Web APIs
so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.
addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever.
... new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method
adds two new parameters and lets us place scaled images on the canvas.
... drawimage(image, x, y, width, height) this
adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
...And 4 more matches
Content Index API - Web APIs
this allows users to discover and view what is available, whilst giving developers the ability to
add and manage this content.
... the content index api is an extension to service workers, which allows developers to
add urls and metadata of already cached pages, under the scope of the current service worker.
... service worker
additions the following
additions to the serviceworker have been specified in the content index api spec to provide an entry point for using content indexing.
...And 4 more matches
DataTransfer.mozSetDataAt() - Web APIs
the datatransfer.mozsetdataat() method is used to
add data to a specific index in the drag event's data transfer object.
...mozsetdataat() may only be called with an index argument less than mozitemcount in which case an existing item is modified, or equal to mozitemcount in which case a new item is
added, and the mozitemcount is incremented by one.
... data should be
added in order of preference, with the most specific format
added first and the least specific format
added last.
...And 4 more matches
Examples of web and XML development using the DOM - Web APIs
<!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-d
addy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-d
addy from getting the click.
... ev.stoppropagation(); alert("event propagation halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.
addeventlistener("click", stopevent, false); } </script> </head> <body onload="load();"> <table id="t-d
addy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with javascript (e.g., elt.style.backgroundcolor="rgb(173, 216, 230)").
...you might also like to
add some elements in the page and call this function from different event handlers.
...And 4 more matches
Element.classList - Web APIs
the domtokenlist itself is read-only, although you can modify it using the
add() and remove() methods.
... examples const div = document.createelement('div'); div.classname = 'foo'; // our starting state: <div class="foo"></div> console.log(div.outerhtml); // use the classlist api to remove and
add classes div.classlist.remove("foo"); div.classlist.
add("anotherclass"); // <div class="anotherclass"></div> console.log(div.outerhtml); // if visible is set remove it, otherwise
add it div.classlist.toggle("visible"); //
add/remove visible, depending on test conditional, i less than 10 div.classlist.toggle("visible", i < 10 ); console.log(div.classlist.contains("foo")); //
add or remove multiple classes div.classlist.
add("foo", "bar", "baz"); div.classlist.remove("foo", "bar", "baz"); //
add or remove multiple classes using spread syntax const cls = ["foo", "bar"]; div.classlist.
add(...cls); ...
...div.classlist.remove(...cls); // replace class "foo" with class "bar" div.classlist.replace("foo", "bar"); versions of firefox before 26 do not implement the use of several arguments in the
add/remove/toggle methods.
...And 4 more matches
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget<...
... named inputs are
added to their owner form instance as properties, and can overwrite native properties if they share the same name (e.g.
... events listen to these events using
addeventlistener(), or by assigning an event listener to the oneventname property of this interface.
...And 4 more matches
Drag Operations - Web APIs
add a listener for the dragstart event.
... starting a drag operation in this example, a listener is
added for the dragstart event by using the ondragstart attribute.
... in this example the dragstart listener is
added to the draggable element itself.
...And 4 more matches
Recommended Drag Types - Web APIs
it is recommended to always
add data of the text/plain type as a fallback for applications or drop targets that do not support other types, unless there is no logical text alternative.
... always
add this text/plain type last, as it is the least specific and shouldn’t be preferred.
... do not
add data with the url type — attempting to do so will set the value of the text/uri-list type instead.
...And 4 more matches
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family...
... mouseevent.offsetx read only the x coordinate of the mouse pointer relative to the position of the p
adding edge of the target node.
... mouseevent.offsety read only the y coordinate of the mouse pointer relative to the position of the p
adding edge of the target node.
...And 4 more matches
PaymentRequest.PaymentRequest() - Web APIs
if this sequence is blank, it indicates the merchant cannot ship to the current shipping
address.
...this parameter contains the following fields:
additionaldisplayitems an array of items to be appended to the details.displayitems property.
... this property is commonly used to
add a discount or surcharge line item indicating the different amount in details.modifiers.total.
...And 4 more matches
Pointer events - Web APIs
pointer events
address that need.
...
additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in
addition to new properties for other forms of input: pressure, contact geometry, tilt, etc.
...for example, a pen that is a down state is considered active because it can produce
additional events when the pen is lifted or moved.
...And 4 more matches
TextTrackList - Web APIs
event handlers on
addtrack an event handler to be called when the
addtrack event is fired, indicating that a new text track has been
added to the media element.
... events
addtrack fired when a new text track has been
added to the media element.
... also available via the on
addtrack property.
...And 4 more matches
VideoTrackList - Web APIs
event handlers on
addtrack an event handler to be called when the
addtrack event is fired, indicating that a new video track has been
added to the media element.
... events
addtrack fired when a new video track has been
added to the media element.
... also available via the on
addtrack property.
...And 4 more matches
WebRTC API - Web APIs
once a connection has been established and opened using rtcpeerconnection, media streams (mediastreams) and/or data channels (rtcdatachannels) can be
added to the connection.
... rtctrackevent the interface used to represent a track event, which indicates that an rtcrtpreceiver object was
added to the rtcpeerconnection object, indicating that a new incoming mediastreamtrack was created and
added to the rtcpeerconnection.
... icecandidate an rtcpeerconnectioniceevent which is sent whenever the local device has identified a new ice candidate which needs to be
added to the local peer by calling setlocaldescription().
...And 4 more matches
Lighting a WebXR setting - Web APIs
ambient light can also be used to apply a color tint to a scene; for example, in a game in which the player has a special pair of yellow-tinted glasses, you can
add a yellow ambient light.
...in
addition, the intensity of the light doesn't change over distance.
...
additionally, the more accurate the lighting is designed to be, the more computationally expensive it becomes.
...And 4 more matches
Example and tutorial: Simple synth keyboard - Web APIs
on> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; p
adding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-us...
...er-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; p
adding: 0 6px 0 0; } .settingsbar { p
adding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } ...
... function setup() { notefreq = createnotetable(); volumecontrol.
addeventlistener("change", changevolume, false); mastergainnode = audiocontext.creategain(); mastergainnode.connect(audiocontext.destination); mastergainnode.gain.value = volumecontrol.value; // create the keys; skip any that are sharp or flat; for // our purposes we don't need them.
...And 4 more matches
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-fa...
...see also using navigation timing for
additional information and examples.
... methods implemented from elsewhere eventtarget.
addeventlistener() register an event handler to a specific event type on the window.
...And 4 more matches
Using the log role - Accessibility
the log role is used to identify an element that creates a live region where new information is
added in a meaningful order and old information may disappear.
...in contrast to other types of live region, this role is sequentially ordered and new information is only
added to the end of the log.
... when this role is
added to an element, the browser will send out an accessible log event to assistive technology products which can then notify the user about it.
...And 4 more matches
ARIA annotations - Accessibility
wai-aria version 1.3 sees the
addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents.
...an
addition and/or deletion in an editable document), and comments (e.g.
...the annotations should just work once screenreader support is
added.
...And 4 more matches
ARIA: table role - Accessibility
to create an aria table,
add role="table" to the container element.
... all other semantic table elements, such as <tbody>, <thead>, <tr>, <th>, and <td> need to be
added via associated roles, such as rowgroup, row, columnheader, and cell.
... if the table contains sortable columns or rows, the aria-sort attribute should be
added on the header cell element (not the table itself).
...And 4 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
in
addition, msdn has improved their msaa documentation.
...object_destroy [don't implement, watching system generated versions of this event causes assistive technology crashes] event_object_show [can be important, depending on project] event_object_hide [can be important, depending on project] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selection
add [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and pro...
...windows will
add those objects to your hierarchy for you.
...And 4 more matches
@counter-style - CSS: Cascading Style Sheets
however, although more styles were
added to this set of predefined styles over the years, this system proved too restrictive to fulfill the needs of worldwide typography.
... the @counter-style at-rule
addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.
...prefixes are
added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
...And 4 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
we have negative free space when the natural size of the items
adds up to larger than the available space in the flex container.
... in
addition to the auto keyword, you can use the content keyword as the flex-basis.
...we need to
add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4.
...And 4 more matches
Grid template areas - CSS: Cascading Style Sheets
d hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container.
... grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ".
...you can
add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas.
...And 4 more matches
Shapes from box values - CSS: Cascading Style Sheets
the box values allowable as a shape value are: content-box p
adding-box border-box margin-box the border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.
...a box in css has content, p
adding, border, and margin.
...in all of the examples below i am using an element which has p
adding, a border, and a margin defined in order that you can see the different ways in which content will flow.
...And 4 more matches
Specificity - CSS: Cascading Style Sheets
(the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles
added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
... <div class="foo" style="color: red;">what color am i?</div> .foo[style*="color: red"] { color: firebrick !important; } many javascript frameworks and libraries
add inline styles.
... how to override !important a)
add another css rule with !important, and either give the selector a higher specificity (
adding a tag, id or class to the selector), or
add a css rule with the same selector at a later point than the existing one.
...And 4 more matches
color - CSS: Cascading Style Sheets
working draft
adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions.
...
adds color keyword rebeccapurple.
...
adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
...And 4 more matches
content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content,
added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value...
...color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples headings and quotes this example inserts quotation marks around quotes, and
adds the word "chapter" before headings.
...</p> css q { color: blue; } q::before { content: open-quote; } q::after { content: close-quote; } h1::before { content: "chapter "; /* the trailing space creates separation between the
added content and the rest of the content */ } result image combined with text this example inserts an image before the link.
...And 4 more matches
position - CSS: Cascading Style Sheets
(the containing block is the ancestor relative to which the element is positioned.) if the element has margins, they are
added to the offset.
...one solution is to
add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.
...our total width and height is our content + p
adding + border width/height.</p> <p>we are separated by our margins.
...And 4 more matches
shape-outside - CSS: Cascading Style Sheets
syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: p
adding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gr...
...this can be margin-box, border-box, p
adding-box, or content-box.
... p
adding-box defines the shape enclosed by the outside p
adding edge.
...And 4 more matches
Index - Developer guides
7
adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
... this article will take the same player and show how to
add captions and subtitles to it, using the webvtt format and the <track> element.
...two common approaches are
addeventlistener() and the specific onevent handlers.
...And 4 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
for the purposes of html dates, years are always at least four digits long; years prior to the year 1000 are p
added with leading zeroes ("0"), so the year 72 is written as 0072.
...
adding a day to the year every four years essentially makes the average year 365.25 days long, which is close to correct.
...scientists occasionally
add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of earth's rotation.
...And 4 more matches
<input type="tel"> - HTML: Hypertext Markup Language
using a specific input type for telephone numbers also makes
adding custom validation and handling of phone numbers more convenient.
...
additional attributes in
addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-16 characters, to accept as a v...
...lno">phone number: </label> <input id="telno" name="telno" type="tel" list="defaulttels"> <datalist id="defaulttels"> <option value="111-1111-1111"> <option value="122-2222-2222"> <option value="333-3333-3333"> <option value="344-4444-4444"> </datalist> with the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the email
address; this is typically presented as a popup or drop-down menu containing the suggestions.
...And 4 more matches
HTML elements reference - HTML: Hypertext Markup Language
element description <
address> the html <
address> element indicates that the enclosed html provides contact information for a person or people, or for an organization.
... element description <a> the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email
addresses, locations in the same page, or anything else a url can
address.
...it is useful for writing a poem or an
address, where the division of lines is significant.
...And 4 more matches
Global attributes - HTML: Hypertext Markup Language
in
addition to the basic html global attributes, the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes.
... itemprop used to
add properties to an item.
...it provides a list of element ids (not itemids) with
additional properties elsewhere in the document.
...And 4 more matches
Content-Security-Policy - HTTP
so for compatibility with current browsers while also
adding forward compatibility when browsers get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.example.com; report-to groupname in browsers that support report-to, the report-uri directive will be ignored.
...
adding
additional policies can only further restrict the capabilities of the protected resource, which means that there will be no connection allowed and, as the strictest policy, connect-src 'none' is enforced.
... specifications specification status comment content security policy level 3 working draft
adds manifest-src, navigate-to, report-to, strict-dynamic, worker-src.
...And 4 more matches
HTTP headers - HTTP
http headers let the client and the server pass
additional information with an http request or response.
... response headers hold
additional information about the response, like its location or about the server providing it.
... x-forwarded-for identifies the originating ip
addresses of a client connecting to a web server through an http proxy or a load balancer.
...And 4 more matches
Grammar and types - JavaScript
additionally, a best practice for parseint is to always include the radix parameter.
... parseint('101', 2) // 5 an alternative method of retrieving a number from a string is with the + (unary plus) operator: '1.1' + '1.1' // '1.11.1' (+'1.1') + (+'1.1') // 2.2 // note: the parentheses are
added for clarity, not required.
...in
addition, a literal used in a function is created each time the function is called.
...And 4 more matches
Indexed collections - JavaScript
in
addition to a newly defined variable as shown above, arrays can also be assigned as a property of a new or an existing object: let obj = {} // ...
...alternatively, create an empty array first before
adding the single element to it.
...a boolean context—if your array consists only of dom nodes, for example—you can use a more efficient idiom: let divs = document.getelementsbytagname('div') for (let i = 0, div; div = divs[i]; i++) { /* process div in some way */ } this avoids the overhead of checking the length of the array, and ensures that the div variable is reassigned to the current item each time around the loop for
added convenience.
...And 4 more matches
TypeError: can't define property "x": "obj" is not extensible - JavaScript
usually, an object is extensible and new properties can be
added to it.
... examples
adding new properties to a non-extensible objects in strict mode, attempting to
add new properties to a non-extensible object throws a typeerror.
... in sloppy mode, the
addition of the "x" property is silently ignored.
...And 4 more matches
Intl.Locale.prototype.calendar - JavaScript
islamicc civil (algorithmic) arabic calendar examples
adding a calendar in the locale string calendar eras fall under the category of locale key "extension keys".
... these keys
add additional data about the locale, and are
added to locale identifiers by using the -u extension.
... thus, the calendar era type can be
added to the inital locale identifier string that is passed into the intl.locale constructor.
...And 4 more matches
Intl.Locale.prototype.numeric - JavaScript
these subtags
add additional data about the locale, and are
added to locale identifiers by using the -u extension key.
... thus, the numeric value can be
added to the inital locale identifier string that is passed into the locale constructor.
... to set the numeric value, first
add the -u extension key to the string.
...And 4 more matches
Object.preventExtensions() - JavaScript
the object.preventextensions() method prevents new properties from ever being
added to an object (i.e.
... description an object is extensible if new properties can be
added to it.
...attempting to
add new properties to a non-extensible object will fail, either silently or by throwing a typeerror (most commonly, but not exclusively, when in strict mode).
...And 4 more matches
Object.seal() - JavaScript
the object.seal() method seals an object, preventing new properties from being
added to it and marking all existing properties as non-configurable.
... description by default, objects are extensible (new properties can be
added to them).
... sealing an object prevents new properties from being
added and marks all existing properties as non-configurable.
...And 4 more matches
MathML attribute reference - MathML
depth <mp
added> sets or increments the depth.
... framespacing <mtable> specifies
additional space
added between the table and frame.
... unimplemented groupalign <maligngroup>, <mtable>, <mtd>, <mtr> height <mglyph>, <mp
added>, <mspace> specifies the desired height.
...And 4 more matches
Progressive web app structure - Progressive web apps (PWAs)
the most popular approach is the "app shell" concept, which mixes ssr and csr in exactly the way described above, and in
addition follows the "offline first" methodology which we will explain in detail in upcoming articles and use in our example application.
...in
addition to the basic shell, you can
add other features such as
add to home screen or push notifications, safe in the knowledge that the app will still work ok if they are not supported by the user's browser — this is the beauty of progressive enhancement.
... progressive: start with the "good, old basic website” and progressively
add new features while remembering to detect if they are available in the browser and gracefully handle any errors that crop up if support is not available.
...And 4 more matches
Cross-domain Content Scripts - Archive of obsolete content
in particular, they can't: access content hosted in an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by
adding them to your
add-on's package.json under the "cross-domain-content" key, which itself lives under the "permissions" key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
... this feature is currently only available for content scripts, not for page scripts included in html files shipped with your
add-on.
...n.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.contentwindow.document.getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to
add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the
add-on should successfully retrieve the iframe's content.
...And 3 more matches
port - Archive of obsolete content
this article documents the port object, which is used to communicate between a content script and the main
add-on code.
... the port object provides message sending and receiving api enabling conversations between a content script and the main
add-on code.
... each end of the conversation has access to a port: the content script via the global self property, and the main
add-on code via a worker object associated with the sdk module you've used to attach the content script, such as page-mod or page-worker.
...And 3 more matches
Classes and Inheritance - Archive of obsolete content
in fact, some people (including the
add-on sdk team) prefer to use constructors this way.
... however, since the value of this is undefined for ordinary function calls, we need to
add some boilerplate code to convert them to constructor calls: function shape(x, y) { if (!this) return new shape(x, y); this.x = x; this.y = y; } prototypes every object has an implicit property, known as its prototype.
...to illustrate this, let's
add a member function to the class shape: shape.prototype.draw = function () { throw error("not yet implemented"); } let shape = shape(2, 3); shape.draw(); // => error: not yet implemented inheritance and constructors suppose we want to create a new class, circle, and inherit it from shape.
...And 3 more matches
private-browsing - Archive of obsolete content
check whether a given object is private, so an
add-on can respect private browsing usage per-window private browsing private browsing status is a property of an individual browser window.
... opting into private browsing
add-ons built using the sdk must opt into private browsing by setting the following key in their package.json file: "permissions": {"private-browsing": true} if an
add-on has not opted in, then the high-level sdk modules will not expose private windows, or objects (such as tabs) that are associated with private windows: the windows module will not list any private browser windows, generate any events for private browser windows, or let the
add-on open any private browser windows the tabs module will not list any tabs ...
...that belong to private browser windows, and the
add-on won't receive any events for such tabs any ui components will not be displayed in private browser windows any menus or menu items created using the context-menu will not be shown in context menus that belong to private browser windows the page-mod module will not attach content scripts to documents belonging to private browser windows any panel objects will not be shown if the active window is a private browser window the selection module will not include any selections made in private browser windows
add-ons that have opted in will see private windows, so they will need to use the private-browsing module to check whether objects are private, so as to avoid storing data derived from such objects.
...And 3 more matches
frame/hidden-frame - Archive of obsolete content
usage the module exports a constructor function, hiddenframe, and two other functions,
add and remove.
...
add registers a hidden frame, preparing it to load content.
... the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.
add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.
addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
...And 3 more matches
ui/toolbar - Archive of obsolete content
experimental
add a toolbar to the firefox user interface.
...you can supply three sorts of ui components: action buttons toggle buttons frames this
add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" })...
...this
add-on creates a toolbar containing one button and a frame: var { actionbutton } = require('sdk/ui/button/action'); var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({ url: "./my-frame.html" }); var toolbar = toolbar({ title: "player", ...
...And 3 more matches
util/collection - Archive of obsolete content
functions
addcollectionproperty(object, propname, [backingarray])
adds a collection property to the given object.
... setting the property to a scalar value empties the collection and
adds the value.
... setting it to an array empties the collection and
adds all the items in the array.
...And 3 more matches
Tools - Archive of obsolete content
articles listed here provide a reference for the sdk's tools: cfx enables you to test, run, and package
add-ons.
... cfx is is no longer supported as of firefox 44 and no longer accepted for
add-on submission, jpm should now be used instead.
... console enables your
add-on to log error, warning or informational messages.
...And 3 more matches
Logging - Archive of obsolete content
because dom objects aren't available to the main
add-on code, the sdk provides its own global console object with most of the same methods as the dom console, including methods to log error, warning, or informational messages.
... the console.log() method prints an informational message: console.log("hello world"); try it out: create a new directory, and navigate to it execute jpm init, accepting all the defaults open "index.js" and
add the line above execute jpm run firefox will start, and the following line will appear in the command window you used to execute jpm run: info: hello world!
... console in content scripts you can use the console in content scripts as well as in your main
add-on code.
...And 3 more matches
Finding window handles - Archive of obsolete content
like this hwnd gethwnd(nsibasewindow *window) { nscomptr< nsiwidget > widget; window->getmainwidget(getter_
addrefs(widget)); if (widget) return (hwnd) widget->getnativedata(ns_native_window); } yet another way to find a window handle (parent window handle) this method is for people who want to get the top level window hwnd from the window object in javascript.
...tp/nsapplication/orderfront: * [nswindowptr orderfront:nil] */ var orderfront = sel_registername('orderfront:'); var nswindowptr = ctypes.voidptr_t(ctypes.uint64(nswindowstring)); var rez_orderfront = objc_msgsend(nswindowptr, orderfront, nil); console.log('rez_orderfront:', rez_orderfront, rez_orderfront.tostring()); objc.close(); unix under unix systems, the nativehandle holds a string
address to a gdkwindow* (the asterik/star means pointer).
... var gdkwindow = ctypes.structtype('gdkwindow'); var gpointer = ctypes.voidptr_t; var gtkwindow = ctypes.structtype('gtkwindow'); var gdkwindowptrstring = basewindow.nativehandle; var gdkwinptr = gdkwindow.ptr(ctypes.uint64(gdkwindowptrstring)); var gptr = gpointer(); gdk_window_get_user_data(gdkwinptr, gptr.
address()); var gtkwinptr = ctypes.cast(gptr, gtkwindow.ptr); working with gtkwindow* gtkwindow* to xid // soon to come gtkwindow* to gdkwindow* how to get a gdkwindow* from the gtkwindow*?
...And 3 more matches
Forms related code snippets - Archive of obsolete content
ul", "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.
addeventlistener ?
...
addeventlistener("load", buildcalendars, false) : window.attachevent ?
... attachevent("onload", buildcalendars) : (onload = buildcalendars); document.
addeventlistener ?
...And 3 more matches
On page load - Archive of obsolete content
plications you target) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that
adds a load event listener to appcontent element (browsers) or messagepane (mail): window.
addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ a...
...ppcontent.
addeventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.
addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
... if(doc.location.href.search("forum") > -1) alert("a forum page is loaded"); //
add event listener for page unload aevent.originaltarget.defaultview.
addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).
...And 3 more matches
Progress Listeners - Archive of obsolete content
}, // for definitions of the remaining functions see related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <browser> or a <tabbrowser> element using
addprogresslistener, for example for firefox put the following code in a load listener of a main window: gbrowser.
addprogresslistener(mylistener); when used with a browser, the second argument is a mask which determines the type of events that will be received.
... example: notification when the value in
address bar changes a commonly asked question is how to get notified whenever the url in the
address bar (also known as location bar) changes.
... using the following code, you will get notified when user navigates to another page (by clicking a link, using the back/forward button, by typing an
address in the location bar, etc.) and also when user switches tabs.
...And 3 more matches
JavaScript Daemons Management - Archive of obsolete content
but the daemon constructor itself is nothing but a clone of minidaemon with an
added support for init and onstart functions declarable during the instantiation of the daemon.
... advantages of this approch: abstraction passage of this object to javascript timers (both setinterval and settimeout) optimisation (avoiding closures) modularity the code the code of this framework is split into three files: daemon.js (the core) daemon-safe.js (an extension of the core which
adds a replacement of setinterval with a recursive invocation of settimeout) daemon-methods.js (a wide and highly scalable collection of methods) the only independent module is daemon.js: both the daemon-safe.js module and the daemon-methods.js module require daemon.js to work.
... about the “callback arguments” polyfill in order to make this framework compatible with internet explorer (which doesn't support sending
additional parameters to timers' callback function, neither with settimeout() or setinterval()) we included the ie-specific compatibility code (commented code), which enables the html5 standard parameters' passage functionality in that browser for both timers (polyfill), at the end of the daemon.js module.
...And 3 more matches
Local Storage - Archive of obsolete content
in the initialization method of your one of your "common" or startup objects,
add the following code: let formatter = new log4moz.basicformatter(); let root = log4moz.repository.rootlogger; let logfile = this.getlocaldirectory(); // remember this?
...appender = new log4moz.rotatingfileappender(logfile, formatter); appender.level = log4moz.level["all"]; root.
addappender(appender); after that, you can create a logger object for any object in your project like this: this._logger = log4moz.repository.getlogger("xulschool.someobject"); this._logger.level = log4moz.level["all"]; note: we recommend that you create a logger instance in the constructor of every object and store it in a private variable.
...we normally
add a comment that indicates that logging is not done there for performance reasons.
...And 3 more matches
Using the Stylesheet Service - Archive of obsolete content
the stylesheets registered with this api apply to all documents; firefox 18 extended nsidomwindowutils with load
additionalstylesheet() and remove
additionalstylesheet() to manage stylesheets for a specific document (bug 737003).
...
adding a stylesheet to use the stylesheet service, you get a reference to the service, create a uri and pass the uri to the stylesheet service's loadandregistersheet method.
... determining whether a sheet has been loaded if you are writing an extension and
adding your stylesheet in an onload handler, you'll want to see if your sheet has already been
added.
...And 3 more matches
JXON - Archive of obsolete content
note: if you are interested to
address only some parts of an xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json.
...the object.freeze() method prevents new properties from being
added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed.
...the object.freeze() method prevents new properties from being
added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed.
...And 3 more matches
Layout System Overview - Archive of obsolete content
additionally, layout must support a paginated presentation, where the width of the presentation is constrained by the dimensions of the printed output (paper) and the height of each page is fixed.
...in the normal in-flow case this is quite natural because the sequential
addition of new content results in sequential
addition of new frames, and because everything is in-flow, the new frames do not influence the geometry of the frames that have already been formatted.
...when a content element is modified,
added or removed, layout is notified.
...And 3 more matches
Repackaging Firefox - Archive of obsolete content
the distro extension all the changes you will want to make (for example, changing the default homepage or
adding default bookmarks) can be encapsulated into a firefox extension.
... of course, this strategy only works when your strings either do not need localization, or are programmatically localizable (for example, simply
adding the locale to a url, like http://<locale>.example.com/).
...if you find a preference you think is generally useful to most partner repacks, please
add it below, using the same style: localizable preferences browser.startup.homepage=<string> browser.startup.homepage_reset=<string> url for the default homepage, and what the homepage gets reset to when the user hits "restore to default" in the preferences.
...And 3 more matches
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 to your jar files // however, the policy never comes into play, because // (...
...1)
adding permissions doesn't
add to the policy itself, and // (2)
addurl alone does not set the grant codebase function policy
add (loader, urls) { try { //if have trouble with the policy try changing it to //edu.mit.simile.javafirefoxextensionutils.urlsetpolicy var str = 'edu.mit.simile.javafirefoxextensionutils.urlsetpolicy'; var policyclass = java.lang.class.forname( str, true, loader ); var policy = policyclass.newinstance(); policy.setouterpolicy(java.security.policy.getpolicy()); java.security.policy.setpolicy(policy); policy.
addpermission(new java.security.allpermission()); for (var j=0; j < urls.length; j++) { policy.
addurl(urls[j]); ...
...(this works in firefox 3.x, for firefox 4.x use
addonmanager.get
addonbyid) var extensionpath = components.classes["@mozilla.org/extensions/manager;1"].
...And 3 more matches
Table Cellmap - Archive of obsolete content
now that union uses the fact all
addresses of real tablecellframes are aligned at even boundaries, or in other words they cant have an odd
address.
... if the
address is odd then it holds some other info (mbits).
... take the same table and
adder a header <table> <thead> <tr><td>head cell 1</td><td>head cell 2</td></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </tbody> </table> now we have two different rowgroups and and the rowspans can not cross the borders between the different rowgroups.
...And 3 more matches
Table Layout Regression Tests - Archive of obsolete content
prerequisites in order to run these tests, you will need to have: make sure that your build is a debug build (in short you need ac_
add_options --enable-debug in your .mozconfig file).
...for example ac_
add_options --enable-extensions=all.
... a mozilla tree with the test files at %moz_src%/layout/html/tests, disable_tests should not be defined (so ac_
add_options --enable-tests), patience and time.
...And 3 more matches
Unix stub installer - Archive of obsolete content
how do i
add an installer package to the unix installer?
...
adding a package involves a few steps:
add a section named for your <component> to the packages-unix manifest that describes which files from dist belong to which module.
...
add an <component>.jst install script template file (the jst extension stands for javascript template indicating this is a template for the final install.js for the <component>.xpi.
...And 3 more matches
Windows stub installer - Archive of obsolete content
this section needs to be
added how do i
add an installer package to the windows installer?
...
adding a package involves a few steps:
add a section named for your <component> to the packages-win manifest that describes which files from dist belong to which module.
...
add an <component>.jst install script template file.
...And 3 more matches
Writing to Files - Archive of obsolete content
the default character set is 'utf-8' but this can be changed using an
additional, yet optional, argument to the newoutputstream method.
...these flags should be included in
addition to the 'text' or 'binary' flags when using the newoutputstream method.
...this flag is used when
adding more to an existing file.
...And 3 more matches
Special Condition Tests - Archive of obsolete content
« previousnext » there are several
additional types of conditional tests that may be performed.
...for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <groupbox uri="rdf:*"> <caption label="rdf:http://purl.org/dc/elements/1.1/title"/> </groupbox> </rule> <rule> <label uri="rdf:*" value="rdf:http://www.xulplanet.com/rdf/
address"/> </rule> </template> </vbox> on the first pass, the container where generated content would be inserted is a <vbox>, so the first rule will match and a captioned <groupbox> will be created.
...> <member container="?start" child="?item"/> </query> <rule parent="vbox"> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <groupbox uri="?item"> <caption label="?title"/> </groupbox> </action> </rule> <rule> <binding subject="?item" predicate="http://www.xulplanet.com/rdf/
address" object="?
address"/> <action> <label uri="?item" value="?
address"/> </action> </rule> </template> </vbox> containment tests for rdf sources, the simple rule syntax supports two special conditional tests that are commonly used with multiple rules.
...And 3 more matches
Template Builder Interface - Archive of obsolete content
you can do this using the composite datasource's
adddatasource method.
... you can
add as many datasources as you wish, and you can remove them using the removedatasource method.
... getservice(components.interfaces.nsirdfservice); var ds = rdf.getdatasource("http://www.xulplanet.com/ndeakin/tests/xul/template-guide-streets.rdf"); var tree = document.getelementbyid("thetree"); tree.database.
adddatasource(ds); tree.builder.rebuild(); this is the typical way to
add a datasource to an element, in this case to the tree with the id 'thetree'.
...And 3 more matches
Template Logging - Archive of obsolete content
in
addition, each result generated when the template is first created and initialized is logged.
...each result is logged in a form much like the following: in template with id root using ref http://www.some-fictitious-zoo.com/birds new active result for query 2 matching rule 1: http://www.some-fictitious-zoo.com/birds/emperorpenguin in the example above, a new result has been
added.
...in
addition, this result matches the first <rule> of query 2.
...And 3 more matches
The Joy of XUL - Archive of obsolete content
applications written in xul are based on
additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition 3 (ecmascript); xml 1.0.
...the user interface for all of mozilla's core applications (browser, messenger,
address book, etc.) is written in xul with one single code base supporting all mozilla platforms.
...with xbl, developers can define new content for xul widgets,
add additional event handlers to a xul widget, and
add new interface properties and methods.
...And 3 more matches
Things I've tried to do with XUL - Archive of obsolete content
feel free to
add your own xul experiences here.
...(to
add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox.
...so, as soon as you
add a label or some other element inside, there will be a different amount of "empty space" to allocate in different boxes.
...And 3 more matches
Creating an Installer - Archive of obsolete content
inside the jar file, you can
add all the various files that you want to have installed.
... in
addition, installers should contain an install script (a file named install.js) which can be used to script the installation process.
...you can
add an
additional similar such line for each package you wish to have installed.
...And 3 more matches
More Event Handlers - Archive of obsolete content
« previousnext » in this section, the event object is examined and
additional events are described.
...in the
addeventlistener form, the first argument passed to the listener function will be the event object.
...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"); outerbox.
addeventlistener('command',boxpressed,true); </script> here, an event listener has been
added to the button and another event listener has been
added to the box.
...And 3 more matches
More Tree Features - Archive of obsolete content
to create a set of nested rows, all we need to do is
add a second treechildren element inside the parent treeitem.
... you can then
add items inside that to specify the child rows of an item.
...you do this by
adding the container attribute to it as follows: <treeitem container="true" /> this allows the user to click on the row that corresponds to the treeitem to expand and collapse the inner rows.
...And 3 more matches
Progress Meters - Archive of obsolete content
adding a progress meter a progress meter is a bar that indicates how much of a task has been completed.
... the find files example let's
add a progress meter to our find file dialog.
...however, we'll
add a normal one for now as an animating one can be distracting during development.
...And 3 more matches
Skinning XUL Files by Hand - Archive of obsolete content
make sure you are aware of the way that the global skin defines the skin and which elements, in general, it is
addressing.
...ent { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in
addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids.
... here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); p
adding: 0px; p
adding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
...And 3 more matches
Stacks and Decks - Archive of obsolete content
however, the specialized types of boxes work just like regular boxes in the way they orient the elements inside them, but they have
additional features.
... the stack element might be used for cases where a status indicator needs to be
added over an existing element.
...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="p
adding-left: 1px; p
adding-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.
...And 3 more matches
XUL Event Propagation - Archive of obsolete content
in another example, an onload event handler for a xul window can register a box element to capture all the click events that are raised from its child elements: var bbox = document.getelementbyid("bigbox"); if (bbox) bbox.
addeventlistener("click", function() { alert('captured'); }, true); ...
... <menupopup> </menu> </box>
adding an event listener in order to take advantage of event capturing (or event bubbling with elements that do not already have event listeners), you must
add an event listener to the element that wants to capture events taking place below it.
... any xul element may use the dom
addeventlistener method to register itself to capture events.
...And 3 more matches
button - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... extra1 an optional
additional button.
...And 3 more matches
dialog - Archive of obsolete content
extra1: an optional
additional button.
... extra2: a second optional
additional button.
...the cancel button might be shown as an
additional possibility to close the dialog in this situation (windows and linux) or might be hidden, too (mac os).
...And 3 more matches
label - Archive of obsolete content
attributes accesskey, control, crop, disabled, href, value properties accesskey, accessibletype, control, crop, disabled, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email
address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...And 3 more matches
richlistbox - Archive of obsolete content
attributes disabled, disablekeynavigation, preference, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, scrollboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods
additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox...
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...And 3 more matches
scrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box that has
additional functions that can be used to scroll the content.
...if you just want scrollbars to appear,
add style='overflow: auto;'.
...for the most part, the horizontal and vertical scrollbars will independently handle too-tall and too-wide cases, but each scroll bar takes up
additional width and so the appearance of one scroll bar can trigger the other one if it's close to the edge anyway.
...And 3 more matches
Deploying XULRunner - Archive of obsolete content
additional application files such as icons, etc myapplicationname.exe (this is the "stub executable"...
...
additional application files such as icons, etc macos/ xulrunner (this is the "stub executable"...
...see this blog post for
additional background about this change.
...And 3 more matches
Mozilla release FAQ - Archive of obsolete content
the netscape versions may have a different look/feel than mozilla versions, and also may
add proprietary features.
...i want to
add x feature to mozilla.
...first, you should make sure that mozilla doesn't already have the feature you wish to
add.
...And 3 more matches
Solaris 10 Build Prerequisites - Archive of obsolete content
the installer must install
additional sun-provided packages from the os install dvd, so that dvd has to be available.
...
add /opt/sfw/bin to path environment after installation.
.../opt/jdsbld/bin/env.sh % pkgtool --download build-only -v solaris10/sfw{name1}.spec % pkg
add -d .
...And 3 more matches
Mozilla XForms Specials - Archive of obsolete content
in the mozilla xforms extension we
added a getinstancedocuments() function to the model which returns all the model's instance documents.
...we have
added a function via the getfeature() call on each node, that allows the form author to do that.
...it seems a bit awkward if you have the instance element, so we have
added a getinstancedocument() function directly on the instance element as a shortcut.
...And 3 more matches
The Business Benefits of Web Standards - Archive of obsolete content
introduction and context doing more with less seems to be the mission impossible for web designers:
addressing more customers, a broader audience, more diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a web site.
...these things come naturally to standards developers without
additional effort, time or thought.
...
adding h1, h2, and h3, tags and so on gives proper structure to hypertext documents.
...And 3 more matches
GLSL Shaders - Game development
vertices may, and usually do, have
additional properties.
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: shaders demo</title> <style> body { margin: 0; p
adding: 0; font-size: 0; } canvas { width: 100%; height: 100%; } </style> <script src="three.min.js"></script> </head> <body> <script id="vertexshader" type="x-shader/x-vertex"> // vertex shader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes here </script> <script> // scene setup goes here </script> </body> </html> ...
... the vertex shader code let's continue by writing a simple vertex shader —
add the code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } the resulting gl_position is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.
...And 3 more matches
Audio for Web games - Game development
audio is an important part of any game; it
adds feedback and atmosphere.
... on mobile the user has
added the site to their home screen.
... note:
adding a web app to your mobile's homescreen may change its capabilities.
...And 3 more matches
Game over - Game development
it's fun to watch the ball bouncing off the walls and be able to move the p
addle around, but other than that the game does nothing and doesn't have any progression or end goal.
...if you miss the ball with the p
addle and let it reach the bottom edge of the screen, then it's game over.
...where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the p
addle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the p
addle, so it can bounce off it and get back into the play area.
...And 3 more matches
Mouse controls - Game development
we have already
added keyboard controls, but we could easily
add mouse controls too.
...
add the following line in the same place as the other event listeners, just below the keyup event: document.
addeventlistener("mousemove", mousemovehandler, false); anchoring the p
addle movement to the mouse movement we can update the p
addle position based on the pointer coordinates — the following handler function will do exactly that.
...
add the following function to your code, below the previous line you
added: function mousemovehandler(e) { var relativex = e.clientx - canvas.offsetleft; if(relativex > 0 && relativex < canvas.width) { p
addlex = relativex - p
addlewidth/2; } } in this function we first work out a relativex value, which is equal to the horizontal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and left edge of the viewport (canvas.offsetleft) — effectively this is equal to the distance between the canvas left edge and the mouse pointer.
...And 3 more matches
Load the assets and print them on screen - Game development
our game will feature a ball rolling around the screen, bouncing off a p
addle, and destroying bricks to earn points — familiar, huh?
... in this article we'll look at how to
add sprites into our gameworld.
...
add the following line between the game initialization code (our var game...
...And 3 more matches
Creating fancy letterheaded paper - Learn web development
add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter
adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture.
...
add another background declaration that just
adds the top image to the top of the letter, as a fallback for browsers that don't support the previous declaration.
...
add a white background color to the letter.
...And 3 more matches
Fundamental CSS comprehension - Learn web development
above the two rules,
add a css comment with some text inside it to indicate that this is a set of general styles for the overall page.
...also
add three more comments at the bottom of the css file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents.
... from now on, subsequent styles
added to the stylesheet should be organized in an appropriate place.
...And 3 more matches
Responsive design - Learn web development
in
addition, these mobile sites often offered a very cut down experience.
... @media screen and (min-width: 800px) { .container { margin: 1em 2em; } } you can
add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes.
... by using a flexible grid, you only need to
add in a breakpoint and change the design at the point where the content starts to look bad.
...And 3 more matches
How does the Internet work? - Learn web development
once we
add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.
...thus any computer linked to a network has a unique
address that identifies it, called an "ip
address" (where ip stands for internet protocol).
... it's an
address made of a series of four numbers separated by dots, for example: 192.168.2.10.
...And 3 more matches
What are browser developer tools? - Learn web development
(an
added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot.
... edit as html (sometimes
add attribute/edit text).
... layout: in firefox, this area includes two sections: box model: represents visually the current element's box model, so you can see at a glance what p
adding, border and margin is applied to it, and how big its content is.
...And 3 more matches
Example 4 - Learn web development
: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; p
adding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);...
... } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; p
adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; p
adding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-b...
...ox; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { p
adding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.
add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlis...
...And 3 more matches
Example 5 - Learn web development
: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; p
adding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);...
... } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; p
adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; p
adding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-b...
...ox; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { p
adding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.
add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlis...
...And 3 more matches
How to structure a web form - Learn web development
in
addition to the <fieldset> element, it's also common practice to use html titles (e.g.
... apply the css to the html by
adding the following line inside the html <head>: <link href="payment-form.css" rel="stylesheet"> next, create your form by
adding the outer <form> element: <form> </form> inside the <form> tags,
add a heading and paragraph to inform users how required fields are marked: <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> next...
... we'll
add a larger section of code into the form, below our previous entry.
...And 3 more matches
Test your skills: Multimedia and embedding - Learn web development
you need to:
add the path to the audio file to an appropriate attribute to embed it on the page.
...
add an attribute to make browsers display some default controls.
...
add some appropriate fallback text for browsers that don't support <audio>.
...And 3 more matches
Silly story generator - Learn web development
in
addition you've got a function called randomvaluefromarray() that takes an array, and returns one of the items stored inside the array at random.
...this:
adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
...
adds a partially-completed result() function definiton to your code.
...And 3 more matches
Componentizing our React app - Learn web development
open it up and give it its first line: import react from "react"; since we're going to make a component called todo, you can start
adding the code for that to todo.js too, as follows.
...in app.js,
add the following line near the top of the file to import todo: import todo from "./components/todo"; with this component imported, you can replace all of the <li> elements in app.js with <todo /> component calls.
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg">
add </button> </form> ); } export default form; the <filterbutton /> do the same things you did to create form.js inside filterbutton.js, but call the component filterbutton() and copy the html for the first button inside the <div> element with the class of filters from app.js into the return statement.
...And 3 more matches
Creating a Firefox sidebar
an extension an extension is a kind of
add-ons that
adds new functionalities to firefox.
...there are some ways to create an extension: the new sidebar api has been implemented in firefox 29 as part of the
add-on sdk.
...a sample extension to
add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option.
...And 3 more matches
How Mozilla's build system works
configure also produces some
additional files (like autoconf.mk).
...for example, it says i want these c++ files compiled or look for
additional information in these directories.
...they do this via the
add_tier_dir() function.
...And 3 more matches
ESLint
in order to help people write standard-compliant code from the start and avoid wasting time during code reviews, a set of eslint configuration files have been
added to the code base so that javascript can be analyzed automatically.
... understanding rules and errors not all files are linted currently eslint runs on: .js .jsx .jsm .xml .html .xhtml
additionally, some directories and files are ignored, see the .eslintignore file handling errors if your code fails an eslint rule, you'll get an error similar to this: /gecko/toolkit/mozapps/installer/js-compare-ast.js 18:39 error 'snarf' is not defined.
... node.js is not recognized
add it to your path environment variable by running path="$path:/path/to/node.js/".
...And 3 more matches
Reviewer Checklist
the patch does not
add duplicates of existing code ('almost duplicates' could mean a refactor is needed).
... android apis
added since froyo should be guarded by a version check.
... if working on a new feature, consider
adding prefs to control the behavior.
...And 3 more matches
Browser API
browser api concepts and usage the browser api consists of two major parts: custom <iframe> attributes: by
adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content.
... event-related methods in order to manage the browser <iframe>'s content, many new events were
added (see below).
... the following methods are used to deal with those events: the <iframe> gains support for the methods of the eventtarget interface
addeventlistener(), removeeventlistener(), and dispatchevent().
...And 3 more matches
HTTP Cache
adding a new storage should there be a need to
add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways: [preffered]
add a new <your>storage method on nsicachestorageservice and if needed give it any arguments to specify the storage scope even more.
... implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - nsicachestorage implementations to carry any
additional information down to the cache service.
... [not preferred]
add a new argument to nsiloadcontextinfo; be careful here, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems.
...And 3 more matches
IME handling guide
additionally, ime may be used for handwriting systems or speech input systems on some platforms.
...supported event messages of them are: equeryselectedtext (only with selectiontype::enormal) equerytextcontent equerytextrect equerycaretrect equeryeditorrect
additionally, this does not support query content events with xp line breakers but this must not be any problem since native ime handlers query contents with native line breakers.
...
additionally, all notifications except notify_ime_of_blur should be sent only when it's safe to run script since the notification may cause querying content and/or dispatching composition events.
...And 3 more matches
Code Samples
getting the directory where your
add-on is located if you need to determine the directory in which your
add-on is installed, code like the following will do the trick.
... simply replace yourextensionid with your
add-on's id.
... components.utils.import("resource://gre/modules/
addonmanager.jsm");
addonmanager.get
addonbyid("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.get
addonbyid("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?
...And 3 more matches
PromiseWorker.jsm
finally, the template code should be
added in.
...self.
addeventlistener('message', msg => worker.handlemessage(msg)); abstractworker is a base class for the worker, and it's designed to be used by derived class, which provides above four methods (dispatch, postmessage, close, and log).
... supported built-in javascript error are following: evalerror internalerror rangeerror referenceerror syntaxerror typeerror urierror in
addition to them, stopiteration is also supported (note that stopiteration is deprecated).
...And 3 more matches
XPCOMUtils.jsm
_xpcom_categories: [{ // each object in the array specifies the parameters to pass to // nsicategorymanager.
addcategoryentry().
...when set to true, and only if 'value' // is not specified, the concatenation of the string "service," and the // object's contractid is passed as avalue parameter of
addcategoryentry.
...}; note: the ability to register the component in a category only on specific applications by
adding the apps field to a category entry was
added in gecko 2.
...And 3 more matches
Index
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.
... 21 localizing extension descriptions
add-ons, extensions, guide, internationalization, localization this article provides details on how to go about localizing the descriptions of mozilla
add-ons, as well as for other metadata about your
add-on.
... 22 localizing extension metadata on
addons.mozilla.org
add-ons, extensions, internationalization, localization amo supports localized metadata for each extension.
...And 3 more matches
Localizing extension descriptions
this article provides details on how to go about localizing the descriptions of mozilla
add-ons, as well as for other metadata about your
add-on.
... localizing in gecko 1.9 gecko 1.9 includes a new, more robust method for localizing
add-on descriptions and other metadata.
... localizing before gecko 1.9 before gecko 1.9,
add-on developers must go through a special process to define localized
add-on descriptions for
add-ons targeting toolkit-based apps (such as firefox or thunderbird).
...And 3 more matches
Translation phase
projects the mozilla projects and their l10n workflows are divided into these groups: mozilla applications, mozilla websites, and
add-ons.
... koala a l10n
add-on for the offline, stand-alone komodo edit text editor.
... firefox mobile by
adding firefox® to your mobile phone, you can access rich web content and enjoy your favorite firefox features wherever you go.
...And 3 more matches
Fonts for Mozilla's MathML engine
typically, use a fontconfig configuration /etc/fonts/conf.avail/09-texlive-fonts.conf that points to the opentype directory of texlive, such as: <?xml version="1.0"?> <!doctype fontconfig system "fonts.dtd"> <fontconfig> <dir>/your/path/to/texmf-dist/fonts/opentype</dir> </fontconfig> finally,
add this configuration file to the system font location list and regenerate the fontconfig cache: ln -sf /etc/fonts/conf.avail/09-texlive-fonts.conf /etc/fonts/conf.d/ fc-cache -sf android you must use the mathml-fonts
add-on.
... firefox os you must use the mathml-fonts
add-on.
...as a last resort, install the mathml fonts
add-on.
...And 3 more matches
Leak-hunting strategies and tips
start finding and fixing leaks by running part of the task under nstracerefcnt logging, gradually building up from as little as possible to the complete task, and fixing most of the leaks in the first steps before
adding
additional steps.
... double-
addref: this happens most often when assigning the result of a function that returns an
addrefed pointer (bad!) into an nscomptr without using dont_
addref().
... if you really need to debug leaks that involve js objects closely, you can get detailed printouts of the paths js uses to mark objects when it is determining the set of live objects by using the functions
added in bug 378261 and bug 378255.
...And 3 more matches
TimerFirings logging
interface and observer timers only have an
address, which is less useful, but they are uncommon enough that this usually doesn't matter much.
... first, on mac the code uses dl
addr to get the name immediately, and the output will look like the following.
... 2082435840[100445640]: [81190] fn timer (one_shot 8000 ms): [from dl
addr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dl
addr to get the symbol library and
address, which can be post-processed by tools/rb/fix_stacks.py.
...And 3 more matches
Performance
the articles linked to from here will help you improve performance, whether you're developing core mozilla code or an
add-on.
... measuring
add-on startup performance a guide for
add-on developers on how to set up a performance testing environment.
... xul school:
add-on performance tips for
add-on developers to help them avoid impairing application performance.
...And 3 more matches
Leak And Bloat Tests
startup main mail window open
address book and message composition windows close
address book and message composition windows quit the application future improvements will be discussed on the discussion page of the mozilla wiki.
... manually running tests setting up build set up build thunderbird or seamonkey with your standard mozconfig file, but with the following options set: ac_
add_options --enable-debug ac_
add_options --enable-trace-malloc running the tests in your <objdir> run the following command: make mailbloat this will run the tests and produce some result files.
...todo:
add more information on processing output.
...And 3 more matches
About NSPR
additionally, nspr provides synchronization methods more suited for use by java.
... network
addresses part of nspr deals with manipulation of network
addresses.
... nspr defines a network
address object that is internet protocol (ip) centric.
...And 3 more matches
PR_EnumerateHostEnt
evaluates each of the possible
addresses of a prhostent structure, acquired from pr_gethostbyname or pr_gethostby
addr.
... syntax #include <prnetdb.h> printn pr_enumeratehostent( printn enumindex, const prhostent *hostent, pruint16 port, prnet
addr *
address); parameters the function has the following parameters: enumindex the index of the enumeration.
...to continue an enumeration (thereby getting successive
addresses from the host entry structure), the value should be set to the function's last returned value.
...And 3 more matches
NSS Certificate Download Specification
if the certificates contain a basicconstraints certificate extension that indicates they are ca certificates, and do not already exist in the local certificate database, they are
added as untrusted cas.
...if a certificate chain is being imported then the first certificate in the chain must be the user certificate, and any subsequent certificates will be
added as untrusted ca certificates to the local database.
...if a certificate chain is being imported then the first certificate in the chain must be the ca certificate, and any subsequent certificates will be
added as untrusted ca certificates to the local database.
...And 3 more matches
NSS 3.14.3 release notes
this release is a patch release to
address cve-2013-1620.
... new pkcs #11 mechanisms ckm_nss_hmac_constant_time - constant-time hmac operation for use when verifying a p
added, mac-then-encrypted block of data.
... ckm_nss_ssl3_mac_constant_time - constant-time mac operation for use when verifying a p
added, mac-then-encrypted block of data using the sslv3 mac.
...And 3 more matches
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.
... certutil
added the ability to delete an orphan private key from an nss key database.
...
added the nss-policy-check utility, which can be used to check an nss policy configuration for problems.
...And 3 more matches
NSS 3.52 release notes
bug 1630721 -
add softoken functions for fips.
... bug 1629663 -
add ikev1 quick mode kdf.
... bug 1629105 -
add pkcs11 v3.0 functions to module debug logger.
...And 3 more matches
NSS_3.12.3_release_notes.html
ipherop error reporting (was: pk11_createcontextbysymkey returns null bug 456406: slot list leaks in symkeyutil bug 461085: rfe: export function cert_comparecerts bug 462293: crash on fork after softoken is dlclose'd on some unix platforms in nss 3.12 bug 463342: move some headers to freebl/softoken bug 463452: sql db creation does not set files protections to 0600 bug 463678: need to
add rpath to 64-bit libraries on hp-ux bug 464088: option to build nss without dbm (handy for wince) bug 464223: certutil didn't accept certificate request to sign.
...rt_verifycert bug 469583: coverity: uninitialized variable used in sec_pkcs5createalgorithmid bug 469944: when built with microsoft compilers bug 470351: crlutil build fails on windows because it calls undeclared isatty bug 471539: stop honoring digital signatures in certificates and crls based on weak hashes bug 471665: nss reports incorrect sizes for (aes) symmetric keys bug 471715:
add cert to nssckbi to override rogue md5-collision ca cert bug 472291: crash in libpkix object leak tests due to null pointer dereferencing in pkix_build.c:3218.
... bug 478171: consolidate the coreconf/xxx.mk files for windows bug 478563:
add _msc_ver (the cl version) to coreconf.
...And 3 more matches
SpiderMonkey Build Documentation
when building a version older than 28, you'll
additionally need nspr.
... on mac, linux, or unix, you can install spidermonkey on your system with the
additional command make install.
...thus, in
addition to following the steps above, you should also create a debug build using these steps: cd js/src # this name should end with "_dbg.obj" to make the version control system ignore it.
...And 3 more matches
Creating JavaScript jstest reftests
you should not
add tests of the following type: tests of the jit test of jit correctness belong in the jit-test suite, read more here.
...
additionally, it loads every shell.js and broswer.js file in the subdirectories on the path from js/src/tests to the location of your test.
... if you have functionality several tests share in a given folder, you can
add the functionality to the shell.js or broswer.js file in the directory.
...And 3 more matches
JSClass
syntax struct jsclass { const char *name; uint32_t flags; /* optional since spidermonkey 37 */ jspropertyop
addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermonkey 44 */ /* optional since spidermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermonkey 13 *...
.../ jscheckaccessop checkaccess; /* obsolete since spidermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsolete since spidermonkey 13 */ jstraceop trace; /*
added in spidermonkey 17 */ jsclassinternal reserved1; /* obsolete since spidermonkey 13 */ void *reserved[n]; /* sizeof 'reserved' depends on version */ }; name type description name const char * class name flags uint32_t class flags.
...
addproperty jspropertyop a hook called just after
adding a new property.
...And 3 more matches
Exploitable crashes
if you see a hex
address such as 0x292c2830 rather than a function name such as nslistboxbodyframe::getrowcount at the top of the stack, a bug has caused the program to transfer control to a "random" part of memory that isn't part of the program.
...the last number, in this case 0x00000000, is the memory
address firefox was prevented from accessing.
... if the
address is always zero (or close to zero, such as 0x0000001c), it's probably a null dereference bug.
...And 3 more matches
Using the Places annotation service
id's also offer the ability to
add annotations to containers and queries of the database.
...also, we may
add functions to get all of "your" annotations matching a given namespace.
...however, it is more efficient to just try to do the operation and catch the exception; the extra check requires an
additional database lookup (which has higher overhead).
...And 3 more matches
Generating GUIDs
guids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy
add-ons—like extensions and themes—that were created prior to firefox 1.5.
...
add-ons can (and should) be identified with ids of the form extensionname@organization.tld since firefox 1.5.
... warning: if you just want an id for your
add-on, generating a guid is almost definitely not what you want to do.
...And 3 more matches
Avoiding leaks in JavaScript XPCOM components
this is the strategy used by xpcom, partly because it can be used through a very simple api,
addref and release.
... in c++, we use nscomptr to help manage ownership, and we use macros to implement
addref and release.
...for example, if an object's constructor
adds the object to a list that is reachable from a global variable and nothing ever removes it from the list, the object will never be destroyed since it is always reachable from the list.
...And 3 more matches
Mozilla internal string guide
three ownership models dynamically: reference counted, copy-on-write, buffers (the default) adopted buffers (a buffer that the string class owns, but is not reference counted, because it came from somewhere else) dependent buffers, that is, an underlying buffer that the string class does not own, but that the caller that constructed the string guarantees will outlive the string instance in
addition, there is a special string class, ns[c]autostring, that
additionally contains an internal 64-unit buffer (intended primarily for use on the stack), leading to a fourth ownership model: storage within an auto string's stack buffer auto strings will prefer reference counting an existing reference-counted buffer over their stack buffer, but will otherwise use their stack buffer for anythin...
... there are a number of
additional string classes: classes which exist primarily as constructors for the other types, particularly nsdependent[c]string and nsdependent[c]substring.
... in
addition, there exist multiple other (legacy) encodings.
...And 3 more matches
Receiving startup notifications
the important thing to note is that now instead of registering with the category manager programmatically as was done in the past, you
add lines to your chrome.manifest to let the application handle it for you.
...
additionally, the earliest startup time notification you can receive is now profile-after-change.
... your
add-on will not receive xpcom-startup or app-startup notifications.
...And 3 more matches
How to build a binary XPCOM component using Visual Studio
you can use the project as a starting point and modify the component files to
add your own functionality.
...then make the following tweaks:
add "..\gecko-sdk\include" to
additional include directories
add "..\gecko-sdk\lib" to
additional library directories
add "nspr4.lib xpcom.lib xpcomglue_s.lib" to
additional dependencies
add "xp_win;xp_win32″ to preprocessor definitions turn off precompiled headers (just to keep it simple) use a custom build step for the xpcom idl file (spawns xpidl-build.bat to process the idl with mozilla toolset, not midl) vc++ express project: xpcom-test.zip note: the project uses xpcom_glue.
... let’s specify a simple interface: #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long
add(in long a, in long b); }; remember to generate your own guid.
...And 3 more matches
Components.utils.cloneInto
it returns a reference to the clone: var clonedobject = cloneinto(myobject, targetwindow); you can then assign the clone to an object in the target scope as an expando property, and scripts running in that scope can access it: targetwindow.foo = clonedobject; in this way privileged code, such as an
add-on, can share an object with less-privileged code like a normal web page script.
...example this
add-on script creates an object, clones it into the content window and makes it a property of the content window global: //
add-on script var
addonscriptobject = {"greeting" : "hello from
add-on"}; contentwindow.
addonscriptobject = cloneinto(
addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.
addeventlistener("click", function() { consol...
...e.log(window.
addonscriptobject.greeting); // "hello from
add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it to some other object in the target scope: contentwindow.foo.
addonscriptobject = cloneinto(
addonscriptobject, contentwindow); you can also pass it into a function defined in the page script.
...And 3 more matches
mozIRegistry
in the future, i'll either
add the information about it or at least put in a link to it's documentation.
...in
addition, it likely will have a couple of minor extensions: support for specifying the .reg file name on initialize().
...
adding support so that the underlying moziregistry implementation can be tailored by the initializer (client application).
...And 3 more matches
nsIAnnotationService
notation(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 constant value description expire_session 0 for temporary data that can be discarded when the user exits.
...if there is an important annotation that the user or extension wants to keep, you should
add a bookmark for the page and use an expire_never annotation.
...if there is an important annotation that the user or extension wants to keep, you should
add a bookmark for the page and use an expire_never annotation.
...And 3 more matches
nsIContentPrefService
dom/interfaces/base/nsicontentprefservice.idlscriptable please
add a summary to this article.
...to create an instance, use: var contentprefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); method overview void
addobserver(in astring aname, in nsicontentprefobserver aobserver); nsivariant getpref(in nsivariant agroup, in astring aname, [optional] in nsicontentprefcallback acallback); nsipropertybag2 getprefs(in nsivariant agroup); nsipropertybag2 getprefsbyname(in astring aname); boolean haspref(in nsivariant agroup, in astring aname); void removegroupedprefs(); void re...
...useful for accessing and manipulating preferences in ways that are caller-specific or for which there is not yet a generic method, although generic functionality useful to multiple callers should generally be
added to this unfrozen interface.
...And 3 more matches
nsICookieManager2
the nsicookiemanager2 interface contains
additional methods that expand upon the nsicookiemanager interface.
... netwerk/cookie/nsicookiemanager2.idlscriptable please
add a summary to this article.
...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); boolean findmatchingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsi...
...And 3 more matches
nsIIOService
for loads that are not related to any document, such as loads coming from
addons or internal browser features, use null here.
...for loads from an
addon or from internal browser features, pass the system principal.
... for loads that are not related to any document, such as loads coming from
addons or internal browser features, use null here.
...And 3 more matches
nsINavHistoryObserver
ing avalue); void onpageexpired(in nsiuri auri, in prtime avisittime, in boolean awholeentry); obsolete since gecko 2.0 void ontitlechanged(in nsiuri auri, in astring apagetitle); void onvisit(in nsiuri auri, in long long avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long a
added); constants constant value description attribute_favicon 3 the page's favicon changed.
...note that for typed and hidden pages, the page might not actually have been
added yet.
...void onvisit( in nsiuri auri, in long long avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long a
added ); parameters auri the uri of the page being visited.
...And 3 more matches
nsINavHistoryResultObserver
ltnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containerstatechanged(in nsinavhistorycontainerresultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate); void invalidatecontainer(in nsinavhistorycontainerresultnode acontainernode); void nodeannotationchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedate
addedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeiconchanged(in nsinavhistoryresultnode anode); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long anewindex); void nodekeywordcha...
...although this attribute is read-write, you should not alter it directly; instead, call nsinavhistoryresult.
addobserver() to
add an observer to a result.
... nodedate
addedchanged() called right after the date
added property property of a node has changed.
...And 3 more matches
nsISHistoryListener
inherits from: nsisupports last changed in gecko 1.7 a session history listener is notified when pages are
added to, removed from, and loaded from session history.
... the listener can prevent any action (except
adding a new session history entry) from happening by returning false from the corresponding callback method.
... a session history listener can be registered on a particular nsishistory instance via the nsishistory.
addshistorylistener() method.
...And 3 more matches
nsISelection
add brief description of interface ???
...as a service: var selection = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiselection); method overview void
addrange(in nsidomrange range); void collapse(in nsidomnode parentnode, in long offset); [noscript,notxpcom,nostdcall] boolean collapsed(); void collapsenative(in nsidomnode parentnode, in long offset); native code only!
... methods
addrange()
adds a nsidomrange to the current selection.
...And 3 more matches
nsITreeBoxObject
/layout/xul/base/src/tree/public/nsitreeboxobject.idlscriptable please
add a summary to this article.
...the view is responsible for calling this notification method when rows are
added or removed.
... for non-contiguous
additions/removals, this method should be called multiple times.
...And 3 more matches
Working with Multiple Versions of Interfaces
nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_
addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessibledocument> accdocnode; accdocnode = do_queryinterface(accnode, &rv); if(ns_failed(rv)){ return self; } rv = accdocnode->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.5.
... hwnd gethwndb(nsidomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsicomponentmanager> compmgr; rv = ns_getcomponentmanager(getter_
addrefs(compmgr)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessibleretrieval> refp; rv = compmgr->createinstancebycontractid(accretcid, 0, iar_iid_old, getter_
addrefs(refp)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_
addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessibl...
...edocument> accdocnode; rv = accnode->queryinterface(iad_iid_old, getter_
addrefs(accdocnode)); if(ns_failed(rv)){ return self; } rv = accdocnode->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } there is good news and bad news.
...And 3 more matches
Gloda examples
a) show all messages in a conversation regardless of the folder in which they are stored, b) search messages by subject assuming that you have a message (glodamessage) in the conversation already, this is straight forward using glodamessage.conversation.getmessagescollection() alistener = { /* called when new items are returned by the database query or freshly indexed */ onitems
added: function _onitems
added(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function _onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function _onitemsremoved(aitems, acollection) { }, /* called when our database...
....tagarray); let collection = query.getcollection(mylistener); search messages by daterange searches for all messages within a date range id_q=gloda.newquery(gloda.noun_message); // define a date range form yesterday to now id_q.daterange([new date() - 86400000, new date()]); var mylistener = { /* called when new items are returned by the database query or freshly indexed */ onitems
added: function _onitems
added(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function _onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function _onitemsremoved(aitems, acollection) { }, /* called when our database...
... query completes */ onquerycompleted: function _onquerycompleted(acollection) { var items = acollection.items; for (msg of items) { alert(msg.subject); }; } }; collection = id_q.getcollection(mylistener); show all messages where the from, to and cc values include a specified email
address at present there doesn't appear to be any way of going directly from an email
address to email
addresses that it involves.
...And 3 more matches
MailNews fakeserver
an example of such a manipulation is
adding a folder or
adding messages.
...in
addition, it uses utf-8 as the transmission medium.
...for xpcshell tests in mailnews/news, all files in mailnews/news/test/postings/auto-
add are automatically
added based on the newsgroups header.
...And 3 more matches
Building a Thunderbird extension 5: XUL
we
add widgets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers.
... for our first extension, we will
add some text to the thunderbird status bar.
... in this example you are
adding a line to the indented statusbar.
...And 3 more matches
Theme Packaging
you must have a top-level chrome.manifest file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metadata that is displayed in the appearance section of the
add-ons manager.
... preview.png is a preview image which will show when double-clicked on a theme in the appearance section of the
add-ons manager.
...48x48) png (may contain alpha transparency) which will show up in the appearance section of the
add-ons manager.
...And 3 more matches
Set a breakpoint - Firefox Developer Tools
there are a few options available here:
add breakpoint:
add a standard unconditional breakpoint at this line number (see below).
...
add condition:
add a condition and create a conditional breakpoint (see below).
...
add log:
add a log point, which logs a value to your console rather than pausing execution as a breakpoint does.
...And 3 more matches
AesGcmParams - Web APIs
additionaldata optional a buffersource.
... this contains
additional data that will not be encrypted but will be authenticated along with the encrypted data.
... if
additionaldata is given here then the same data must be given in the corresponding call to decrypt(): if the data given to the decrypt() call does not match the original data, the decryption will throw an exception.
...And 3 more matches
BasicCardResponse - Web APIs
the basiccardresponse dictionary (related to the payment request api, although defined in the basic card payment spec) defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing
address.
... basiccardresponse.billing
address read only secure context optional contains the billing
address of the card used to make the payment.
... { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); //
add event listeners here.
...And 3 more matches
Cache.put() - Web APIs
the put() method of the cache interface allows key/value pairs to be
added to the current cache object.
... often, you will just want to fetch() one or more requests, then
add the result straight to your cache.
... in such cases you are better off using cache.
add()/cache.
addall(), as they are shorthand functions for one or more of these operations.
...And 3 more matches
Cache - Web APIs
cache.
add(request) takes a url, retrieves it and
adds the resulting response object to the given cache.
... this is functionally equivalent to calling fetch(), then using put() to
add the results to the cache.
... cache.
addall(requests) takes an array of urls, retrieves them, and
adds the resulting response objects to the given cache.
...And 3 more matches
Document.execCommand() - Web APIs
most commands affect the document's selection (bold, italics, etc.), while others insert new elements (
adding a link), or affect an entire line (indenting).
... decreasefontsize
adds a <small> tag around the selection or at the insertion point.
... formatblock
adds an html block-level element around the line containing the current selection, replacing the block element containing the line if one exists (in firefox, <blockquote> is the exception — it will wrap any containing block element).
...And 3 more matches
Introduction to the DOM - Web APIs
this is expanded upon as needed by other apis that
add new features and capabilities to the dom.
... for example, the html dom api
adds support for representing html documents to the core dom.
...this function creates a new h1 element,
adds text to that element, and then
adds the h1 to the tree for this document: <html> <head> <script> // run this function when the document is loaded window.onload = function() { // create a couple of elements in an otherwise empty html page const heading = document.createelement("h1"); const heading_text = document.createtextnode("big head!"); ...
...And 3 more matches
Using FormData Objects - Web APIs
var formdata = new formdata(someformelement); for example: var formelement = document.queryselector("form"); var request = new xmlhttprequest(); request.open("post", "submitform.php"); request.send(new formdata(formelement)); you can also append
additional data to the formdata object between retrieving it from a form and sending it, like this: var formelement = document.queryselector("form"); var formdata = new formdata(formelement); var request = new xmlhttprequest(); request.open("post", "submitform.php"); formdata.append("serialnumber", serialnumber++); request.send(formdata); this lets you augment the form's data before sending it alon...
...g, to include
additional information that's not necessarily user-editable.
...simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email
address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.
addeventlistener('submit', function(ev) { var ooutput = docu...
...And 3 more matches
Guide to the Fullscreen API - Web APIs
presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically
adds css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%".
...to get the same fullscreen behavior in webkit, you need to
add your own "width: 100%; height: 100%;" css rules to the element yourself: #myvideo:-webkit-full-screen { width: 100%; height: 100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use css rules to adjust the inner element to match the appearance you want.
...in
addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode.
...And 3 more matches
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25"...
...this prevents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were
added to the dom.
... working draft
added the x and y properties.
...And 3 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
starting with the
addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth.
...each context
additionally tracks the next line in the program that should be run and other information critical to that context's operation.
...each agent is made up of a set of execution contexts, the execution context stack, a main thread, a set for any
additional threads that may be created to handle workers, a task queue, and a microtask queue.
...And 3 more matches
IDBObjectStore - Web APIs
methods idbobjectstore.
add() returns an idbrequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store.
... this is for
adding new records to an object store.
... example this example shows a variety of different uses of object stores, from updating the data structure with idbobjectstore.createindex inside an onupgradeneeded function, to
adding a new item to our object store with idbobjectstore.
add.
...And 3 more matches
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
...trying to
add() the same key twice, or put() with the same index key with a uniqueness constraint.
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 3 more matches
Checking when a deadline is due - Web APIs
when the form's submit button is pressed, we run the
adddata() function, which starts like this: function
adddata(e) { e.preventdefault(); if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { note.innerhtml += '<li>data not submitted — form incomplete.</li>'; return; } in this segment, we check to see if the form fields have all been filled in.
...used the required attribute in my html to force validation, in those that do.) else { var newitem = [ { tasktitle: title.value, hours : hours.value, minutes : minutes.value, day : day.value, month : month.value, year : year.value, notified : "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction opened for task
addition.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var request = objectstore.
add(newitem[0]); in this section we create an object called newitem that stores the data in the format required to insert it into the database.
...And 3 more matches
Microdata DOM API - Web APIs
this attribute returns an htmlpropertiescollection, which can be enumerated to go through each element that
adds one or more properties to the item.
... it can also be indexed by name, which will return an object with a list of the elements that
add properties with that name.
... each element that
adds a property also has an itemvalue idl attribute that returns its value.
...And 3 more matches
Using the Notifications API - Web APIs
in
addition, in chrome and firefox you cannot request notifications at all unless the site is a secure context (i.e.
... var n = new notification('my great song'); document.
addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
...because notification also inherits from eventtarget, it's possible to use the
addeventlistener() method on it.
...And 3 more matches
Page Visibility API - Web APIs
the page visibility api
addresses this.
... budget-based background timeout throttling is now available in modern browsers (firefox 58+, chrome 57+), placing an
additional limit on background timer cpu usage.
...ined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { videoelement.pause(); } else { videoelement.play(); } } // warn if the browser doesn't support
addeventlistener or the page visibility api if (typeof document.
addeventlistener === "undefined" || hidden === undefined) { console.log("this demo requires a browser, such as google chrome or firefox, that supports the page visibility api."); } else { // handle page visibility change document.
addeventlistener(visibilitychange, handlevisibilitychange, false); // when the video pauses, set the...
...And 3 more matches
Path2D - Web APIs
methods path2d.
addpath()
adds a path to the current path.
... path2d.beziercurveto()
adds a cubic bézier curve to the path.
... path2d.quadraticcurveto()
adds a quadratic bézier curve to the current path.
...And 3 more matches
Pointer Lock API - Web APIs
requestpointerlock() the pointer lock api, similar to the fullscreen api, extends dom elements by
adding a new method, requestpointerlock().
...(from https://w3c.github.io/pointerlock/#extensions-to-the-element-interface) pointerlockelement and exitpointerlock() the pointer lock api also extends the document interface,
adding both a new property and a new method.
... if ("onpointerlockchange" in document) { document.
addeventlistener('pointerlockchange', lockchangealert, false); } else if ("onmozpointerlockchange" in document) { document.
addeventlistener('mozpointerlockchange', lockchangealert, false); } function lockchangealert() { if(document.pointerlockelement === canvas || document.mozpointerlockelement === canvas) { console.log('the pointer lock status is now locked'); // do something useful i...
...And 3 more matches
RTCConfiguration - Web APIs
see using certificates below for
additional information.
... constant description "balanced" the ice agent initially creates one rtcdtlstransport for each type of content
added: audio, video, and data channels.
... "public" only ice candidates with public ip
addresses will be considered.
...And 3 more matches
RTCIceCandidate.type - Web APIs
you can't specify the value of type in the options object, but the
address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its cand-type field.
... host the candidate is a host candidate, whose ip
address as specified in the rtcicecandidate.ip property is in fact the true
address of the remote peer.
... srflx the candidate is a server reflexive candidate; the ip indicates an intermediary
address assigned by the stun server to represent the candidate's peer anonymously.
...And 3 more matches
RTCIceCandidate - Web APIs
the article webrtc connectivity provides
additional useful details.
... properties candidate read only a domstring representing the transport
address for the candidate that can be used for connectivity checks.
... the format of this
address is a candidate-attribute as defined in rfc 5245.
...And 3 more matches
RTCRtpSender.setStreams() - Web APIs
description setstreams() is purely
additive.
... it doesn't remove the track from any streams; it simply
adds it to new ones.
... once the track has been
added to all of the streams, renegotiation of the connection will be triggered by the negotiationneeded event being dispatched to the rtcpeerconnection to which the sender belongs.
...And 3 more matches
SVGAnimationElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
...the new instance time is
added to the begin instance times list.
...the new instance time is
added to the begin instance times list.
...And 3 more matches
WebGLRenderingContext.blendEquationSeparate() - Web APIs
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.
...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.
...And 3 more matches
Matrix math for the web - Web APIs
since a 3d point only needs three values (x, y, and z), and the transformation matrix is a 4x4 value matrix, we need to
add a fourth dimension to the point.
... after
adding the w component to the point, notice how neatly the matrix and the point line up: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] [4, 3, 2, 1] // point at [x, y, z, w] the w component has some
additional uses that are out of scope for this article.
... 5], c2r1 = matrix[ 6], c3r1 = matrix[ 7]; let c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11]; let c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15]; // now set some simple names for the point let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; // multiply the point against each part of the 1st column, then
add together let resultx = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3); // multiply the point against each part of the 2nd column, then
add together let resulty = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3); // multiply the point against each part of the 3rd column, then
add together let resultz = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3); // multiply the point agai...
...And 3 more matches
Using textures in WebGL - Web APIs
loading textures the first thing to do is
add code to load the textures.
... to load the image,
add a call to our loadtexture() function within our main() function.
... this can be
added after the initbuffers(gl) call.
...And 3 more matches
Introduction to WebRTC protocols - Web APIs
it needs to bypass firewalls that would prevent opening connections, give you a unique
address if like most situations your device doesn’t have a public ip
address, and relay data through a server if your router doesn’t allow you to directly connect with peers.
... stun session traversal utilities for nat (stun) (acronym within an acronym) is a protocol to discover your public
address and determine any restrictions in your router that would prevent a direct connection with a peer.
... the client will send a request to a stun server on the internet who will reply with the client’s public
address and whether or not the client is accessible behind the router’s nat.
...And 3 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
the primary purpose of webvtt files is to
add text overlays to a <video>.
... you could use this to
add a description to the file.
... webvtt comments comments are an optional component that can be used to
add information to a webvtt file.
...And 3 more matches
Web Workers API - Web APIs
in
addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
... in
addition to dedicated workers, there are other types of worker: shared workers are workers that can be utilized by multiple scripts running in different windows, iframes, etc., as long as they are in the same domain as the worker.
... chrome workers are a firefox-only type of worker that you can use if you are developing
add-ons and want to use workers in extensions and have access to js-ctypes in your worker.
...And 3 more matches
Window.open() - Web APIs
in
addition to the toolbar buttons, firefox (before 76) will render the tab bar if it is visible, present in the parent window.
... location if this feature is on, then the new secondary window renders the location bar or the
address bar.
...in
addition, the window.open() call will also return null, so the originating window will not have access to the new one either.
...And 3 more matches
Window.sidebar - Web APIs
returns a sidebar object which contains several methods for registering
add-ons with the browser.
... methods the sidebar object returned has the following methods: method description (seamonkey) description (firefox)
addpanel(title, contenturl, "")
adds a sidebar panel.
...
addpersistentpanel(title, contenturl, "")
adds a sidebar panel, which is able to work in the background.
...And 3 more matches
Synchronous and asynchronous requests - Web APIs
, url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary list of
additional arguments that are passed through the xhr object (via the arguments property) to the success callback function.
...the
additional arguments (if any) supplied to the invocation of function loadfile are "applied" to the running of the callback function.
...sole.error("the request for " + url + " timed out."); }; xhr.onload = function() { if (xhr.readystate === 4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { console.error(xhr.statustext); } } }; xhr.open("get", url, true); xhr.timeout = timeout; xhr.send(null); } notice the
addition of code to handle the "timeout" event by setting the ontimeout handler.
...And 3 more matches
XRReferenceSpace - Web APIs
it expands upon the base class, xrspace, by
adding support for several different tracking behaviors as well as to request a new reference space which describes the offset transform between the tracked object and another location in the world.
... properties in
addition to the properties inherited from xrspace (of which there are none at this time), xrreferencespace also inherits the properties of eventtarget.
... xrreferencespace defines no
additional properties.
...And 3 more matches
Using the aria-invalid attribute - Accessibility
the aria-invalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.this may include formats such as email
addresses or telephone numbers.
...note that since the default value for aria-required is false, it is not strictly necessary to
add the attribute to input.
... <input name="name" id="name" aria-required="true" aria-invalid="false" onblur="checkvalidity('name', ' ', 'invalid name entered (requires both first and last name)');"/> <br /> <input name="email" id="email" aria-required="true" aria-invalid="false" onblur="checkvalidity('email', '@', 'invalid e-mail
address');"/> note that it is not necessary to validate the fields immediately on blur; the application could wait until the form is submitted (though this is not necessarily recommended).
...And 3 more matches
ARIA Test Cases - Accessibility
we can
add more screen readers if people are willing to step up and provide test results for them.
... widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email
address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible.
...ndow-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - checkbox simple checkbox testcases: set aria-checked="false" for unchecked both remove or set attribute for unchecked case -- also includes an invalid and required checkbox hierarchical (newly
added test not in test results yet) dojo nightly build expected at behavior: screen reader should speak the accessible name followed by both the type being checkbox and the state (checked, unchecked).
...And 3 more matches
ARIA: alert role - Accessibility
screen readers will instantly start reading out the updated content when the role is
added.
... the alert role is
added to the node containing an alert message, not the element causing the alert to be triggered.
...it is perfect for situations such as when a user fills out a form and javascript is used to
add an error message - the alert would immediately read out the message.
...And 3 more matches
An overview of accessible web applications and widgets - Accessibility
aria aria enables developers to describe their widgets in more detail by
adding special attributes to the markup.
... many of these were later
added in html5, and developers should always prefer using the correct semantic html element over using aria.
... example 3: markup for the tabs widget with aria attributes
added.
...And 3 more matches
Accessibility Information for Web Authors - Accessibility
you can also
add a wave bookmarklet in firefox or even wave direct links for checking a webpage.
...no document upload needed and no
additional application to launch; everything is accessible within the firefox browser.
...it's an extension
add-on to firefox 2.x and firefox 3.x.
...And 3 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
in
addition, the "shape" of the text itself will matter.
... one can decrease saturation by
adding white, black, or gray to the color; to take the example further, brightness can be increased by
adding the color white, which also reduces saturation.
... a common example is to
add white to red to get the color pink.
...And 3 more matches
-moz-float-edge - CSS: Cascading Style Sheets
the non-standard -moz-float-edge css property specifies whether the height and width properties of the element include the margin, border, or p
adding thickness.
... /* keyword values */ -moz-float-edge: border-box; -moz-float-edge: content-box; -moz-float-edge: margin-box; -moz-float-edge: p
adding-box; /* global values */ -moz-float-edge: inherit; -moz-float-edge: initial; -moz-float-edge: unset; syntax values border-box the height and width properties include the content, p
adding and border but not the margin.
... content-box the height and width properties include the content, but not the p
adding, border or margin.
...And 3 more matches
::before (:before) - CSS: Cascading Style Sheets
it is often used to
add cosmetic content to an element with the content property.
... /*
add a heart before links */ a::before { content: "♥"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
... examples
adding quotation marks one simple example of using ::before pseudo-elements is to provide quotation marks.
...And 3 more matches
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
every box is composed of four parts (or areas), defined by their respective edges: the content edge, p
adding edge, border edge, and margin edge.
... the p
adding area, bounded by the p
adding edge, extends the content area to include the element's p
adding.
... its dimensions are the p
adding-box width and the p
adding-box height.
...And 3 more matches
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
p
adding the scroll container if you do not want the content to snap right to the edge of the scroll container you can use the scroll-p
adding property or its equivalent longhand values to set some p
adding.
... in the below example i have set scroll-p
adding to 40 pixels.
...try changing the scroll-p
adding value to see how this changes the distance.
...And 3 more matches
Basic Shapes - CSS: Cascading Style Sheets
this type uses functional notation: the type of shape is followed by brackets, inside of which are
additional values used to describe the shape.
...the floated element has 20 pixels of p
adding, border and margin applied, and the shapes inspector highlights these reference boxes.
... you can
add the various box values after your basic shape definition.
...And 3 more matches
animation - CSS: Cascading Style Sheets
1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; p
adding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; p
adding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { p
adding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slide...
...in; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.
addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.
add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var anim = animation[i]; if (btn.classlist.contains('play')) { anim.style.animationplaystate = 'running'; togglebutton(btn, 'pause'); } else if (btn.classlist.contains('pause')) ...
...'play' : 'pause'); anim.style.animationplaystate = ''; anim.classlist.
add('a' + (i + 1)); }, 100) } } animation.foreach(function (node, index) { node.
addeventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.
addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.
addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that...
...And 3 more matches
background-clip - CSS: Cascading Style Sheets
the background-clip css property sets whether an element's background extends underneath its border box, p
adding box, or content box.
... syntax /* keyword values */ background-clip: border-box; background-clip: p
adding-box; background-clip: content-box; background-clip: text; /* global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outside edge of the border (but underneath the border in z-ordering).
... p
adding-box the background extends to the outside edge of the p
adding.
...And 3 more matches
mask-origin - CSS: Cascading Style Sheets
/* keyword values */ mask-origin: content-box; mask-origin: p
adding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box; /* multiple values */ mask-origin: p
adding-box, content-box; mask-origin: view-box, fill-box, border-box; /* non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: p
adding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area.
... p
adding-box the position is relative to the p
adding box.
... for single boxes 0 0 is the upper left corner of the p
adding edge, 100% 100% is the lower right corner.
...And 3 more matches
overflow-x - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the p
adding box's left and right edges.
... hidden content is clipped if necessary to fit horizontally in the p
adding box.
... clip like for hidden, the content is clipped to the element's p
adding box.
...And 3 more matches
overflow-y - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the p
adding box's top and bottom edges.
... hidden content is clipped if necessary to fit vertically in the p
adding box.
... clip like for hidden, the content is clipped to the element's p
adding box.
...And 3 more matches
vertical-align - CSS: Cascading Style Sheets
:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; p
adding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a table: <table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bo...
...ever anyone discovers exactly what the universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> <p>there is another theory which states that this has already happened.</p> </td> </tr> </table> table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { p
adding: 0.5em; font-family: monospace; } note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
... top aligns the top p
adding edge of the cell with the top of the row.
...And 3 more matches
Creating and triggering events - Developer guides
elem.
addeventlistener('build', function (e) { /* ...
...
adding custom data – customevent() to
add more data to the event object, the customevent interface exists and the detail property can be used to pass custom data.
... for example, the event could be created as follows: const event = new customevent('build', { detail: elem.dataset.time }); this will then allow you to access the
additional data in the event listener: function eventhandler(e) { console.log('the time is: ' + e.detail); } the old-fashioned way the older approach to creating events uses apis inspired by java.
...And 3 more matches
Making content editable - Developer guides
these are object resizing on <img>, <table>, and absolutely-positioned elements; inline table editing to
add or remove rows and columns; and the grabber that allows moving of absolutely-positioned elements.
... see bug 1449564 and firefox-specific html editing ui has been deprecated for
additional details.
...most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like
adding a link) or affect an entire line (indenting).
...And 3 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
additionally, has the same effect as noopener.
... not allowed annotation annotation pingback gives the
address of the pingback server that handles pingbacks to the current document.
... external resource not allowed not allowed tag gives a tag (identified by the given
address) that applies to the current document.
...And 3 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
events in
addition to the usual events supported by html elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed.
... you can use an event listener for the toggle event to detect when the widget changes state: details.
addeventlistener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example this example shows a <details> element with no provided summary.
...here's what your browser does with it: providing a summary this example
adds a summary to the above example by using the <summary> element inside <details>, like this: <details> <summary>system requirements</summary> <p>requires a computer running an operating system.
...And 3 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
.pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in;
add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
...see cors settings attributes for
additional information.
...you can set properties like border/border-radius, p
adding/margin, width, height, etc.
...And 3 more matches
<input type="search"> - HTML: Hypertext Markup Language
additional attributes in
addition to the attributes that operate on all <input> elements regardless of their type, search field inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept ...
...the following screenshot comes from chrome: in
addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain.
... input:invalid ~ span:after { content: '✖'; p
adding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; p
adding-left: 5px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
...And 3 more matches
<input type="submit"> - HTML: Hypertext Markup Language
this label is likely to be something along the lines of "submit" or "submit query." here's an example of a submit button with a default label in your browser: <input type="submit">
additional attributes in
addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the url to which to submit the form's data; overrides the form's action attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod t...
... in
addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form.
...
adding a submit keyboard shortcut keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard.
...And 3 more matches
<table>: The Table element - HTML: Hypertext Markup Language
cellp
adding this attribute defines the space between the content of a cell and its border, displayed or not.
... if the cellp
adding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content.
... to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the p
adding property to the <td> elements.
...And 3 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
permitted parents within the required parent <table> element, the <tbody> element can be
added after a <caption>, <colgroup>, and a <thead> element.
... th, td { border: 1px solid #bbb; p
adding: 2px 8px 0; text-align: left; } then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <td> and <th> cells.
... the cells are given a light gray outline which is a single pixel thick, p
adding is adjusted, and all cells are left-aligned using text-align thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; } finally, header cells contained within the <thead> block are given
additional styling.
...And 3 more matches
X-Forwarded-For - HTTP
the x-forwarded-for (xff) header is a de-facto standard header for identifying the originating ip
address of a client connecting to a web server through an http proxy or a load balancer.
... when traffic is intercepted between clients and servers, server access logs contain the ip
address of the proxy or load balancer only.
... to see the original ip
address of the client, the x-forwarded-for request header is used.
...And 3 more matches
X-Frame-Options - HTTP
the
added security is provided only if the user accessing the document is using a browser that supports x-frame-options.
... configuring apache to configure apache to send the x-frame-options header for all pages,
add this to your site's configuration: header always set x-frame-options "sameorigin" to configure apache to set the x-frame-options deny,
add this to your site's configuration: header set x-frame-options "deny" configuring nginx to configure nginx to send the x-frame-options header,
add this either to your http, server or location configuration:
add_header x-frame-options sameorigin always; ...
... configuring iis to configure iis to send the x-frame-options header,
add this to your site's web.config file: <system.webserver> ...
...And 3 more matches
HTTP Public Key Pinning (HPKP) - HTTP
apache
adding a line similar to the following to your webserver's config will enable hpkp on your apache.
... header always set public-key-pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includesubdomains" nginx
adding the following line and inserting the appropriate pin-sha256="..." values will enable hpkp on your nginx.
...
add_header public-key-pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includesubdomains' always; lighttpd the following line with your relevant key information (pin-sha256="..." fields) will enable hpkp on lighttpd.
...And 3 more matches
JavaScript data types and data structures - JavaScript
special primitive type having
additional usage for its value: if object is not inherited, then null is shown; object : typeof instance === "object".
...in
addition to representing floating-point numbers, the number type has three symbolic values: +infinity, -infinity, and nan ("not a number").
...with the object literal syntax, a limited set of properties are initialized; then properties can be
added and removed.
...And 3 more matches
Functions - JavaScript
for example, the following function definition defines myfunc only if num equals 0: var myfunc; if (num === 0) { myfunc = function(theobject) { theobject.make = 'toyota'; } } in
addition to defining functions as described here, you can also use the function constructor to create functions from a string at runtime, much like eval().
... // the following variables are defined in the global scope var num1 = 20, num2 = 3, name = 'chamahk'; // this function is defined in the global scope function multiply() { return num1 * num2; } multiply(); // returns 60 // a nested function example function getscore() { var num1 = 2, num2 = 3; function
add() { return name + ' scored ' + (num1 + num2); } return
add(); } getscore(); // returns "chamahk scored 5" scope and the function stack recursion a function can refer to and call itself.
... the following example shows nested functions: function
addsquares(a, b) { function square(x) { return x * x; } return square(a) + square(b); } a =
addsquares(2, 3); // returns 13 b =
addsquares(3, 4); // returns 25 c =
addsquares(4, 5); // returns 41 since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function: function outside(x) { function inside(y) { return x +...
...And 3 more matches
JavaScript modules - JavaScript
additionally, these features are imported as live bindings, meaning that they can change in value even if you cannot modify the binding unlike const.
...but what happens if we try to
add a module that deals with drawing another shape, like a circle or triangle?
...in our renaming directory you'll see the same module system as in the previous example, except that we've
added circle.js and triangle.js modules to draw and report on circles and triangles.
...And 3 more matches
Array.prototype.push() - JavaScript
the push() method
adds one or more elements to the end of an array and returns the new length of the array.
... syntax arr.push([element1[, ...[, elementn]]]) parameters elementn the element(s) to
add to the end of the array.
... examples
adding elements to an array the following code creates the sports array containing two elements, then appends two elements to it.
...And 3 more matches
Intl.Locale.prototype.caseFirst - JavaScript
this
additional rule can be expressed in a locale's casefirst property.
...these subtags
add additional data about the locale, and are
added to locale identifiers by using the -u extension key.
... thus, the casefirst value can be
added to the inital locale identifier string that is passed into the locale constructor.
...And 3 more matches
Object.defineProperty() - JavaScript
description this method allows a precise
addition to or modification of a property on an object.
... normal property
addition through assignment creates properties which show up during property enumeration (for...in loop or object.keys method), whose values may be changed, and which may be deleted.
...by default, values
added using object.defineproperty() are immutable and not enumerable.
...And 3 more matches
Lexical grammar - JavaScript
\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.
... \r u+2028 line separator <ls> wikipedia u+2029 paragraph separator <ps> wikipedia comments comments are used to
add hints, notes, suggestions, or warnings to javascript code.
... javascript has two long-standing ways to
add comments to code.
...And 3 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
browsers may
additionally choose to block under other circumstances.
... the autoplay attribute the simplest way to automatically play content is to
add the autoplay attribute to your <audio> or <video> element.
...returning a promise to allow you to determine success or failure of the operation was
added more recently.
...And 3 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
this is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.) in
addition, these days there are so many more technologies to choose from than your humble bmps, jpgs, gifs and pngs.
...in
addition, mobile devices have smaller screen sizes, so it makes sense to reduce visual clutter on a mobile layout.
... css as well as
adding programmatic graphical effects to links (and anywhere else you might want them), css3 also allows you to write declarative animations and transitions.
...And 3 more matches
Mobile first - Progressive web apps (PWAs)
then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before
additional information is loaded on top of that, whenever appropriate.
...</li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" href="#bottom">jump to menu</a> <h1>my article</h1> </header> <div class="main"> <p>lorem ipsum … </p> <a id="bottom" href="#top">back to top</a> </div> </article> <button id="install-btn">install</button> default mobile css for the css, i first
added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout.
...ing would not work: #bottom, #top { font-size: 0.8em; position:absolute; right: 1em; text-decoration: none; } #top { color: white; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.)
adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px.
...And 3 more matches
self - Archive of obsolete content
note that the self object in content scripts is completely different from the self module, which provides an api for an
add-on to access its data files and id.
... options property of self: // main.js const tabs = require("sdk/tabs"); tabs.open({ url: "./page.html", onready: function(tab) { tab.attach({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); // content-script.js alert(self.options.a); port you can use port to receive messages from, and send messages to, the main
add-on code.
... methods the self object has four methods, which enable the content script to send messages to, and receive messages from, the main
add-on code.
...And 2 more matches
Modules - Archive of obsolete content
xulrunner
adds a built-in object, known as components, to the global scope.
...using this new version of loadscript, we can now rewrite our earlier example as follows: // index.js: let a = loadscript("www.foo.com/a.js"); let b = loadscript("www.foo.com/b.js"); a.foo // => 3 b.foo; // => 5 // a.js: foo = 3; // b.js: foo = 5; importing names in
addition to exporting properties from the script being loaded to the loading script, we can also import properties from the loading script to the script being loaded: function loadscript(url, imports) { let global = { imports: imports, exports: {} }; loader.loadsubscript(url, global); return global.exports; } among other things, this allows us to import loadscript to...
...compartments are a fairly recent
addition to spidermonkey, and can be seen as a separate memory space.
...And 2 more matches
places/bookmarks - Archive of obsolete content
usage this module exports: three constructors: bookmark, group, and separator, corresponding to the types of objects, referred to as bookmark items, in the bookmarks database in firefox two
additional functions, save() to create, update, and remove bookmark items, and search() to retrieve the bookmark items that match a particular set of criteria.
...the module does not automatically sync up a bookmark instance with ongoing changes to that item in the database from the same
add-on, other
add-ons, or the user.
...this function takes in any of: a bookmark item (bookmark, group, separator) a duck-typed object (the relative properties for a bookmark item, in
addition to a type property of 'bookmark', 'group', or 'separator') an array of bookmark items.
...And 2 more matches
util/array - Archive of obsolete content
add(array, element) if the given array does not already contain the given element, this function
adds the element to the array and returns true.
... otherwise, this function does not
add the element and returns false.
... let {
add } = require('sdk/util/array'); let a = ['alice', 'bob', 'carol'];
add(a, 'dave'); // true
add(a, 'dave'); // false
add(a, 'alice'); // false console.log(a); // ['alice', 'bob', 'carol', 'dave'] parameters array : array the array to
add the element to.
...And 2 more matches
Displaying annotations - Archive of obsolete content
like the selector, the matcher also listens for the window's unload event and on unload sends a detach message to the main module, so the
add-on can clean it up.
....stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); $(annotationanchor).
addclass('annotated'); $(annotationanchor).attr('annotation', annotation.annotationtext); } save this in data as matcher.js.
... updating main.js first, initialize an array to hold workers associated with the matcher's content scripts: var matchers = []; in the main function,
add the code to create the matcher: var matcher = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('matcher.js')], onattach: function(worker) { if(simplestorage.storage.annotations) { worker.postmessage(simplestorage.storage.annotations); } worker.port.on('show', function(data) { annotation.content = data; annotation.show(); }); worker.port.on('hide', function() { annotation.content = null; annotation.hide(); }); worker.on('detach', function () { detachworker(this, matchers);...
...And 2 more matches
Implementing the widget - Archive of obsolete content
because the widget's click event does not distinguish left and right mouse clicks, we'll use a content script to capture the click events and send the corresponding message back to our
add-on.
... the widget's content script the widget's content script just listens for left- and right- mouse clicks and posts the corresponding message to the
add-on code: this.
addeventlistener('click', function(event) { if(event.button == 0 && event.shiftkey == false) self.port.emit('left-click'); if(event.button == 2 || (event.button == 0 && event.shiftkey == true)) self.port.emit('right-click'); event.preventdefault(); }, true); save this in your data/widget directory as widget.js.
... main.js now in the lib directory open main.js and
add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.co...
...And 2 more matches
Overview - Archive of obsolete content
additionally, we use the notifications module to notify the user when the
add-on's storage quota is full.
...it identifies page elements which are eligible for annotation, highlights them on mouseover, and tells the main
add-on code when the user clicks a highlighted element.
...when the user moves the mouse over an annotated element the matcher tells the main
add-on code, which displays the annotation panel.
...And 2 more matches
Customizing the download progress bar - Archive of obsolete content
first you need to overlay the downloads window so that you can
add a new stylesheet.
... in your jar.mn file,
add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed.
... %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to
add support for linux.
...And 2 more matches
Dialogs and Prompts - Archive of obsolete content
add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below).
... for each of these buttons you can set their label, accesskey and oncommand handler by
adding buttonlabel<buttonname>, buttonaccesskey<buttonname> and ondialog<buttonname> attributes to the dialog element.
... for example, to
add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even get the element object for any of predefined buttons with gdialog.getbutton(dlgtype);, where gdialog is the <dialog> element and dlgtype is one of the six button types listed above.
...And 2 more matches
StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by
adding methods to the object stringview.prototype to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduction as web applications become more and more powerful,
adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times whe...
...ipt/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/
add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
... notes when you include the script stringview.js into a page, no variables other than stringview itself will be
added to the global scope.
...And 2 more matches
Toolbar - Archive of obsolete content
adding a toolbar button there are two tutorials available: an elaborate step by step tutorial for beginners: custom toolbar button a tutorial describing the steps needed to
add a toolbar button assuming you already have a working extension and know the basics of extension development: creating toolbar buttons
adding button by default when you create and deploy your extension and include a toolbar button for it by overlaying the customize toolbarpalette, it is not available by default.
...this should only be done on the first run of your
add-on after installation so that if the user decides to remove your button, it doesn't show up again every time they start the application.
... notes insert your button by default only once, at first run, or when an extension update
adds a new button.
...And 2 more matches
Multiple item extension packaging - Archive of obsolete content
for multiple item packages, all internal
add-ons need to be signed, but the container doesn't need to be signed.
... this means that the contained
add-ons need to be submitted to amo individually for signing.
...
additionally, the container
add-on id must not be the same as the id of any of the contained
add-ons.
...And 2 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
figure 1: role of each technology in firefox in
addition to these technologies, extension development will require you to learn about how to confer privileges to overcome security restrictions on code that you write, and how to embed your code into the firefox ui.
...attributes can also be
added to opening tags, each with a value.
... listing 2: css code sample body { color: black; background-color: white; } p { margin-bottom: 1em; text-indent: 1em; } javascript: the world's most misunderstood language javascript is a scripting language first developed in the 1990s, at which time it was created as a way to
add dynamic features to web pages.
...And 2 more matches
User Notifications and Alerts - Archive of obsolete content
or they will just get rid of your
add-on.
...this means that these notifications make the most sense when they are related to the page currently being displayed, such as a page trying to install an
add-on, or a site you just entered a password on.
...all notifications have an
additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked.
...And 2 more matches
Overlay extensions - Archive of obsolete content
this methodology has largely been superseded by restartless extensions, and the
add-on sdk, which is built on top of them.
... the privileged javascript apis described here can still be used in these newer types of
add-ons.
... xul school xul school is a comprehensive
add-on development tutorial, focusing on firefox extension development but mostly applicable to other gecko-based applications.
...And 2 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
the basics to support seamonkey 2 as a target application, you need to
add it to the list of target applications in the extension's install.rdf file.
...xul chrome://navigator/content/navigator.xul main browser window chrome://browser/content/pageinfo/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog urls
added in 2.1 url in firefox url in seamonkey chrome://browser/content/bookmarks/bookmarkspanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey.
...ead of <hbox id="urlbar-icons"> <button type="menu"> <menupopup> <menuitem label="menuitem"/> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </button> </hbox> technical note: the code that opens the url history popup just looks for any menupopup, so it goes wrong if you
add your own.
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
name description
additional information 389 directory server ldap server uses nss a380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it.
...ar assay data based on xul liaison groupware client for novell’s email and collaboration server previously called mozngw linbox kiosk browser (fr) web browser dedicated browser for french prefecture and town hall litl internet computer for home uses spidermonkey and gecko lizilayers gis application 3liz also creates some gis firefox
add-ons logitech harmony remote software software for remote control device uses gre or xulrunner longman dictionary of contemporary english cd-rom lotus notes / sametime groupware the latest version of ibm lotus notes and sametime can embed xul applications lucidor e-book reader lx-office accounting tool looks like it makes...
...ed for elderly people with dementia but other applications mac os x operating system makes use of some mpl files such as libsecurity_asn1 maemo browser browser for maemo internet tablet development name is microb magooclient business process management tool uses mozilla rhino mantra security tool mccoy secure update tool for
add-ons xulrunner application mediacoder media converter transcoder for video, audio, and even devices such as zen, zune, pocketpcs, ipods, and psps mekhala browser part of the khmeros linux distro midbrowser mobile web browser mockery mockup creation tool built on xulrunner mongodb database project uses spidermonkey ...
...And 2 more matches
Building Firefox with Rust code - Archive of obsolete content
adding rust code we generally target stable rust, but sometimes issues temporarily require a beta or custom toolchain build.
... if you have new rust libraries that code in libxul calls directly, then you should
add the appropriate extern crate lines in toolkit/library/rust/shared/lib.rs, and
add those libraries (crates) as dependencies in toolkit/library/rust/cargo.toml.
... if you want to call code in the "e10s" crate, you would
add: extern crate e10s; to toolkit/library/rust/shared/lib.rs; you would also need to specify the path to that crate in the dependencies section of toolkit/library/rust/shared/cargo.toml: [dependencies] e10s = { path = "../../../../path/from/srcdir/e10s" } the e10s crate must also be checked into the tree at the appropriate path.
...And 2 more matches
Style System Overview - Archive of obsolete content
style context tree: doc: b ↙ ↓ ↘ title: c para: f class="emph" para: d ↓ ↓ quote: a quote: a ↓ span: e class="emph" the rule tree and style data all of the style structs that can be obtained through a style context
add up to around 900 bytes.
...a start struct is a cached struct in the rule tree that we can just copy and
add to.
... style sheet
addition and removal handled in pres shell.
...And 2 more matches
Metro browser chrome tests - Archive of obsolete content
a simple test looks like this: gtests.push({ desc: "test loading about:blank", setup: function () { }, teardown: function () { }, run: function () { yield
addtab("about:blank"); is(tab.browser.currenturi.spec, "about:blank", "about:blank is loaded"); } }); function test() { runtests(); } gtests contains individual tests that make up the library of tests your test file will contain.
...
additional metro specific test helpers can be found in /browser/metro/base/tests/mochitest/head.js.
... you may
add additional common utils and helpers to head.js.
...And 2 more matches
Space Manager High Level Design - Archive of obsolete content
additionally, there is a need to manage impacts to lines caused by changes to floated elements.
...bandrects are a linked list (provided by prcliststr super-class) and also provide some geometry-management methods (splitvertically, splithorizontally) and some methods that query or manipulate the frames associated with the band (isoccupiedby,
addframe, removeframe).
... use case 2: float is
added to the space manager after a space manager is created for a block context's reflow chain, a floated block may be
added to it.
...And 2 more matches
Install script template - Archive of obsolete content
additionally installs to a secondary location on the windows desktop, in this case c:\winnt\system32\myplugin\ 3.
...- if we fail here, cancel the installation // initinstall is quite an overloaded method, but i have invoked it here with three strings // which are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //
addfiles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size+component_size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 =
addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) { lo...
...gcomment("could not
add " + plugin_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } // start installing xpt file if this is a scriptable plugin // install to the plugins directory -- this works well in mozilla 1.0 clients // in mozilla 1.0 clients, the components directory can be avoided for xpt files errblock1 =
addfile (plid, version, component_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not
add " + component_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } } else { logcomment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, which sets up plugins and xpt in another location in
addition to the current browser errblock2 = crea...
...And 2 more matches
Popup Guide - Archive of obsolete content
working with popups the following
additional information is available about manipulating menus and popups.
... using popups in extensions extensions may
add additional menuitems either to a menu on the menu bar or to the context menu.
... in
addition, an extension may
add an entirely new menu.
...And 2 more matches
Bindings - Archive of obsolete content
« previousnext » we can
add more triples to the previous example to show more information.
... for example, a description could be
added to a photo.
... 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.
...And 2 more matches
Multiple Rules - Archive of obsolete content
this involves using
additional rule elements after the first.
... in
addition, conditions may be applied to each rule.
...we can
add multiple where elements if we want to check
additional conditions.
...And 2 more matches
Result Generation - Archive of obsolete content
this allows for a fairly efficient means of updating results when, for instance, a new statement is
added to the rdf graph.
...at each step, new possible results may be
added, or more information pertaining to an existing result may be
added to the network.
...so, to summarize: start out with a one possible result as the seed iterate over the results determined so far and augment them with
additional data
add any new possible results remove any rejected results repeat steps 2 to 4 for each query statement once done, all remaining results become matches each possible result is made up of a set of variable-value pairs.
...And 2 more matches
Sorting Results - Archive of obsolete content
there are two
additional attributes used for sorting, which you may set on a column to specify the initial sort.
...to do this, just
add another key after the first separated by a space, as in the following: sort="?name ?gender" in this example, results will be sorted by name, followed by gender for those with identical names.
... you may
add as many sort keys as desired.
...And 2 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
gloda new in thunderbird 3
addrbook new in thunderbird 3 requires seamonkey 2.0 the user's
address book is searched.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...this can be used to display
additional items that are not autocomplete results.
...And 2 more matches
Content Panels - Archive of obsolete content
« previousnext » in this section, we'll look at how to
add panels that can display html pages or other xul files.
...
adding child panels there may be times when you want to have part of a document loaded from a different page.
...a back button, a forward button and a field for typing is urls has been
added to the only toolbar (we'll learn about toolbar in a later section).
...And 2 more matches
Groupboxes - Archive of obsolete content
more complex captions you can also
add child elements inside the caption element to create a more complex caption.
...the
additional checkbox appears below the textbox because of the vertical orientation of the groupbox.
... we'll
add a groupbox to the find files dialog in the next section.
...And 2 more matches
Splitters - Archive of obsolete content
« previousnext » we'll now look at how to
add splitters to a window.
... if you set the collapse attribute, you should also
add a grippy element inside the splitter which the user can use to collapse the element.
...one possibility would be to
add the results of the search in the dialog.
...And 2 more matches
XPCOM Examples - Archive of obsolete content
« previousnext » this section provides some examples of using xpcom along with some
additional interfaces.
...in the earlier example, we generated the list of windows and
added it to a menu via a template.
...<script> function switchfocus(elem) { var mediator = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); mediator.queryinterface(components.interfaces.nsiwindowdatasource); var resource = elem.getattribute('id'); switchwindow = mediator.getwindowforresource(resource); if (switchwindow){ switchwindow.focus(); } } </script> a command handler was
added to the menu element which calls the function switchfocus() with a parameter of the element that was selected from the menu.
...And 2 more matches
datepicker - Archive of obsolete content
popup - a normal datepicker with three fields, but with an
additional dropdown button to display a popup grid.
...in
addition, the date, month and year properties may be used to retrieve and modify each component of the date separately.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...And 2 more matches
image - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
...tnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes alert-icon class that
adds an alert icon.
... error-icon class that
adds an error icon.
...And 2 more matches
tabs - Archive of obsolete content
nb: you can
add some other elements to tabs such as button, but they will receive an index.
...this feature is used by the tabbrowser to provide the facilities for
adding and closing tabs.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...And 2 more matches
textbox - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... if not specified, this defaults to false the html the spellcheck attribute uses values of true or false (you cannot simply
add the spellcheck attribute to a given element): <!-- spellcheck everything!
...
added from david walsh's article on spell check.
...And 2 more matches
toolbarbutton - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... extra1 an optional
additional button.
...And 2 more matches
Using LDAP XPCOM with XULRunner - Archive of obsolete content
if you want to use ldap components in your xul application, you have two options : compile xulrunner with ldap support enabled, or
add ldap xpcom directly to your xul app (in the components directory).
... in any case, you will have to build ldap xpcom, by
adding --enable-ldap build option.
...when configuring build options, just
add: ac_
add_options --enable-ldap to your .mozconfig file.
...And 2 more matches
2006-10-20 - Archive of obsolete content
adding extension to extensions/ folder originally posted on oct 19th: christopher finke is currently learning how to compile firefox.
...christopher would not like to learn how to create a build of firefox with custom extensions and not have those extensions appear in the
addons window.
... benjamin smedberg mentioned in his post that jan vávra needs to
add the extension files to the packaging manifest, which is used to create the installer.
...And 2 more matches
Tamarin Tracing Build Documentation - Archive of obsolete content
note that
additional command-line arguments are only available in the debug configuration.
...the tamarin codebase has the ability to build
additional code which supports debugging hooks.
...
additionally, you need python 2.4 or later and gnu make 3.81 or later.
...And 2 more matches
Using SSH to connect to CVS - Archive of obsolete content
assuming you use a shell script or batch file to set things up, just
add the commands below to the end of your file.
... posix shell eval `ssh-agent -s` ssh-
add ~/.ssh/id_dsa $shell ssh-agent -k exit x windows in "~/.xinitrc"
add "ssh-
add".
... ms-dos command prompt cygwin for /f "tokens=1,2,3* delims=; " %%a in ('ssh-agent -c') do if "%%a"=="setenv" set %%b=%%c set home=/cygdrive/c/path/to/your/cygwin/home/directory ssh-
add ~/.ssh/id_dsa start /b /wait cmd.exe ssh-agent -k exit essentially both sets of commands do the same thing.
...And 2 more matches
Processing XML with E4X - Archive of obsolete content
first introduced in javascript 1.6, e4x introduces a native xml object to the javascript language, and
adds syntax for embedding literal xml documents in javascript code.
...you can
add an e4x=1 argument to your <script> tag to disable this restriction: <script type="text/javascript;e4x=1"> ...
...variables and expressions can be used to create attribute values by simply wrapping them with braces ({}) and omitting quotation marks that would normally go around an attribute value, as the following example illustrates: var a = 2; var b = <foo bar={a}>"hi"</foo>; upon execution the variable is evaluated and quotes are automatically
added where appropriate.
...And 2 more matches
Array.observe() - Archive of obsolete content
it's equivalent to object.observe() invoked with the accept type list ["
add", "update", "delete", "splice"].
...one of "
add", "update", "delete", or "splice".
...
addedcount: only for the "splice" type.
...And 2 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
standard library
additions to the array object array iteration with for...of (firefox 13) array.from() (firefox 32) array.of() (firefox 25) array.prototype.fill() (firefox 31) array.prototype.find(), array.prototype.findindex() (firefox 25) array.prototype.entries(), array.prototype.keys() (firefox 28), array.prototype.values() array.prototype.copywithin() (firefox 32) get array[@@species] (firefox 48) ...
...r argument: new map(null) (firefox 37) monkey-patched set() in constructor (firefox 37) get map[@@species] (firefox 41) set (firefox 13) set iteration with for...of (firefox 17) set.prototype.foreach() (firefox 25) set.prototype.entries(), set.prototype.keys(), set.prototype.values() (firefox 24) constructor argument: new set(null) (firefox 37) monkey-patched
add() in constructor (firefox 37) get set[@@species] (firefox 41) weakmap (firefox 6) weakmap.clear() (firefox 20) optional iterable argument in weakmap constructor (firefox 36) constructor argument: new weakmap(null) (firefox 37) monkey-patched set() in constructor (firefox 37) weakset (firefox 34) constructor argument: new weakset(null) (firefox 37) monkey-pat...
...ched
add() in constructor (firefox 37) new math functions math.imul() (firefox 20) math.clz32() (firefox 31) math.fround() (firefox 26) math.log10(), math.log2(), math.log1p(), math.expm1(), math.cosh(), math.sinh(), math.tanh(), math.acosh(), math.asinh(), math.atanh(), math.hypot(), math.trunc(), math.sign(), math.cbrt() (firefox 25)
additions to the number object number.isnan() (firefox 16) number.isfinite() (firefox 16) number.isinteger() (firefox 16) number.parseint() (firefox 25) number.parsefloat() (firefox 25) number.epsilon (firefox 25) number.max_safe_integer, number.min_safe_integer (firefox 31) number.issafeinteger() (firefox 32)
additions to the object object object.prototype.__proto__ has been standardized object.is() (firefox 22) object.setprotot...
...And 2 more matches
Building Mozilla XForms - Archive of obsolete content
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.
... an old firefox 3.6 release) use this instead (see bug 601570 for details): ac_
add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a release build might look like that: .
... $topsrcdir/browser/config/mozconfig mk_
add_options moz_co_project=browser mk_
add_options moz_objdir=@topsrcdir@/obj-@config_guess@ #mk_
add_options autoconf=autoconf2.13 # possibly needed #mk_
add_options moz_make_flags=-jn # (optional) replace n with the number of parallel build processes (e.g.
...And 2 more matches
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
a couple of lines have been
added to the dom code asking a plugin to return a scriptable iid and a pointer to a scriptable instance object.
...so the plugin project should be aware of two new
additions to nppvariable enumeration type which are now defined in npapi.h as: nppvpluginscriptableinstance = 10, nppvpluginscriptableiid = 11 and two analogous
additions to nsplugininstancevariable type in nsplugindefs.h as: nsplugininstancevariable_scriptableinstance = 10, nsplugininstancevariable_scriptableiid = 11 what's in the plugin code?
...an interface definition (.idl) file describing the plugin scriptable interface should be
added to the project (see example 1).
...And 2 more matches
Archive of obsolete content
2015 mdn fellowship program
add-ons archived
add-ons documentation.
...
adding preferences to an extension this article takes the creating a dynamic status bar extension sample to the next level,
adding a popup menu that lets you quickly switch between multiple stocks to watch.
... it also
adds a preference dialog that lets you switch to a stock other than one of the ones included in the popup menu.
...And 2 more matches
Game monetization - Game development
if you want to implement iaps try to
add value to the game with something players will enjoy instead of taking it out and then charging for it.
...
add-ons and dlcs
add-ons and downloadable content are a good way to provide extra value to an already released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it.
... advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities related to promoting your game may benefit, but your game has to be
addictive, which isn't as easy as it sounds.
...And 2 more matches
Create the Canvas and draw on it - Game development
using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and
add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { p
adding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we ...
...
add the following below your opening <script> tag.
...
add this below your previous lines of javascript, then load your index.html in a browser to try it out.
...And 2 more matches
The score - Game development
in this article we'll
add a scoring system to our game.
... new variables
add two new variables right after the previously defined ones: // ...
... var scoretext; var score = 0;
adding score text to the game display now
add this line at the end of the create() function: scoretext = game.
add.text(5, 5, 'points: 0', { font: '18px arial', fill: '#0095dd' }); the text() method can take four parameters: the x and y coordinates to draw the text at.
...And 2 more matches
Visual typescript game engine - Game development
find configuration at ./src/lib/client-config.ts /** *
addson * all
addson are ansync loaded scripts.
...*/ private
addson:
addson = [ { name: "cache", enabled: true, scriptpath: "externals/cacheinit.ts", }, { name: "hackertimer", enabled: true, scriptpath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptpath: "externals/drag.ts", }, ]; /** * @description this is main coordinary types of positions * can be "diametric-fullscreen" or "frame".
... */ private aspectratio: number = 1.333; /** * domain is simple url
address, * recommendent to use for local propose lan ip * like : 192.168.0.xxx if you wanna run ant test app with server.
...And 2 more matches
Plug-in Development Overview - Gecko Plugin API Reference
displaying messages on the status line functionally, your plug-in is seamlessly integrated into the browser and operates as an
addition to current browser capabilities.
... building plug-ins once you have
added the special code and
additional files to make your plug-in scriptable as described in the previous section, the build process is quite straightforward.
... in
addition to the dll that goes in the plugins folder, you must also place a type library and an extra header file in the appropriate places in your application directory.
...And 2 more matches
Call stack - MDN Web Docs Glossary: Definitions of Web-related terms
when a script calls a function, the interpreter
adds it to the call stack and then starts carrying out the function.
... any functions that are called by that function are
added to the call stack further up, and run where their calls are reached.
...
add the greeting() function to the call stack list.
...And 2 more matches
Assessment: Accessibility troubleshooting - Learn web development
once you
add paragraph elements, you'll notice the styling looking better.
... the audio player the <audio> player isn't accessible to hearing impaired (deaf) people — can you
add some kind of accessible alternative for these users?
... the forms the <input> element in the search form at the top could do with a label, but we don't want to
add a visible text label that would potentially spoil the design and isn't really needed by sighted users.
...And 2 more matches
CSS and JavaScript accessibility best practices - Learn web development
emphasised text inline markup that confers specific emphasis to the text that it wraps: <p>the water is <em>very hot</em>.</p> <p>water droplets collecting on surfaces is called <strong>condensation</strong>.</p> you might want to
add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however rarely need to style emphasis elements in any significant way.
...in
addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g.
... accept that users can override styles accept that users can override your styles it is possible for users to override your styles with their own custom styles, for example: see sarah m
addox's how to use a custom style sheet (css) with firefox for a useful guide covering how to do this manually in firefox, and how to use a custom style sheet (css) with internet explorer by adrian gordon for the equivalent ie instructions.
...And 2 more matches
Mobile accessibility - Learn web development
follow any
additional on-screen prompts that you are presented with.
... in particular, the most common problems that need to be
addressed for mobile are: suitability of layouts for mobile devices.
...in
addition, many image requirements can be fulfilled using the svg vector images format, which is well-supported across browsers today.
...And 2 more matches
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; p
adding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the ori...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; p
adding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 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 ...
... blend modes css blend modes allow us to
add blend modes to elements that specify a blending effect when two elements overlap — the final color shown for each pixel will be the result of a combination of the original pixel color, and that of the pixel in the layer underneath it.
...And 2 more matches
Cascade and inheritance - Learn web development
we have given the outer <ul> a border, p
adding, and a font color.
...we have then
added a class of special to the second nested list and applied a different color to it.
... things like widths (as mentioned above), margins, p
adding, and borders do not inherit.
...And 2 more matches
Handling different text directions - Learn web development
vertical text is common in graphic design, and can be a way to
add a more interesting look and feel to your web design.
... direction in
addition to writing mode we also have text direction.
... logical margin, border, and p
adding properties in the last two lessons we have learned about the css box model, and css borders.
...And 2 more matches
Test your skills: The Box Model - Learn web development
change the width of the second box by
adding rules to the .alternate class, so that it matches the visual width of the first box.
... the box model two in this task,
add to the box: a 5px, black, dotted border.
... p
adding on all sides of 1em.
...And 2 more matches
Type, class, and ID selectors - Learn web development
try
adding a css rule to select the <h1> element and change its color to blue.
...this means that instead of the default styling
added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily.
... to avoid this confusion we can
add the universal selector to the :first-child selector, so it is obvious what the selector is doing.
...And 2 more matches
Using CSS generated content - Learn web development
this article describes some ways in which you can use css to
add content when a document is displayed.
... you modify your stylesheet to
add text content or images.
...to specify this, make a rule and
add ::before or ::after to the selector.
...And 2 more matches
Learn to style HTML using CSS - Learn web development
for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or
add animations and other decorative features.
...in that module, you will learn about: css, starting with the introduction to css module more advanced html modules javascript, and how to use it to
add dynamic functionality to web pages once you understand the fundamentals of html, we recommend that you learn html and css at the same time, moving back and forth between the two topics.
... css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or
add animations and other decorative features.
...And 2 more matches
What is the difference between webpage, website, web server, and search engine? - Learn web development
you can perform search engine searches directly in the
address bar of firefox, chrome, etc.) or through a web page (e.g.
...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.
... all web pages available on the web are reachable through a unique
address.
...And 2 more matches
Example 3 - Learn web development
: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; p
adding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);...
... } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; p
adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; p
adding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-b...
...ox; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { p
adding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.
add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlis...
...And 2 more matches
Publishing your website - Learn web development
a domain name is the unique
address where people find your website, such as http://www.mozilla.org or http://www.bbc.co.uk.
... in
addition, you will need a file transfer protocol (ftp) program (see how much does it cost: software for more details) to actually transfer the website files over to the server.
...they host your rendered page at a unique web
address.
...And 2 more matches
Use HTML to solve common problems - Learn web development
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to
add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to
add images to a webpage how to
add video content to a webpage scripting & styling html...
... how to use css within a webpage how to use javascript within a webpage embedded content how to embed a webpage within another webpage how to
add flash content within a webpage uncommon or advanced problems beyond the basics, html is very rich and offers advanced features for solving complex problems.
... how to use data attributes advanced text semantics how to take control of html line breaking how to mark changes (
added and removed text) — see the <ins> and <del> elements.
...And 2 more matches
Document and website structure - Learn web development
previous overview: introduction to html next in
addition to defining individual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
... <aside> contains content that is not directly related to the main content but can provide
additional information indirectly related to it (glossary entries, author biography, related links, etc.).
... <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to
add any specific meaning.
...And 2 more matches
Marking up a letter - Learn web development
put the two
addresses inside <
address> elements.
... each line of the
address should sit on a new line, but not be in a new paragraph.
... the first
address and first date in the letter should have a class attribute value of sender-column.
...And 2 more matches
Perceived performance - Learn web development
if you're downloading all the assets in the end, the weight of all your assets hasn't improved -- in fact, you may need to
add some code -- but because the download of non-immediately necessary assets are delayed in a manner that is not perceptible the the user, the user will feel like the download was faster.
...loading
additional assets and resources after initial page load improves perceived performance.
...
additionally, you should optimize the assets you do load.
...And 2 more matches
JavaScript performance - Learn web development
many applications are built with a javascrpit framework, or multiple, with several
additional dependencies.
... often times third party scripts and apis are
added, including a/b testing, tracking pixels, and features like maps and support features.
...some features may not be necessary, and though they may
add some bling, is the cost of the feature in terms of performance worth it?
...And 2 more matches
Accessibility API cross-reference
to do fill out mac api column.(mac os x - carbon accessibility api and accessibility constants) finish aria column -
add explanation of the term 'abstract role' fill out html column create aom column fill out xul column.
... fill out tagged pdf column (relevant documents from pdf association)
add missing aria properties fill out events cross reference table use this info to expand mozilla's accessibility api coverage to include mac, so that we can start to freeze them talk about the fact that msaa uses one interface (iaccessible), wherease gnome accessibility uses a lot of different interfaces depending on the type of object go through the atk info and make sure it's up-to-date accessible roles description & notes msaa role (role_system_*) java accessibility role gnome accessibility role (atk_role_*) mac os x accessibility role aria (role=*) html tagged pdf relevant xul for alerts, in java/gnome for any alert, in msaa if no other role applies.
...aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles where scrolling may cause articles to be
added to or removed from either end of the list.
...And 2 more matches
Accessibility Features in Firefox
we are also optimistic that the the makers of magic and lunar/supernova will
add firefox support in the coming year.
... bookmarks can have a keyword assigned to them which can be typed into the
address bar to bring up the bookmark.
...custom searches can be
added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination.
...And 2 more matches
CSUN Firefox Materials
in
addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software.
... bookmarks can have a keyword assigned to them which can be typed into the
address bar to bring up the bookmark.
...custom searches can be
added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination.
...And 2 more matches
Multiprocess on Windows
in order for the interceptor to be able to work with our interfaces, we must do some
additional work to compensate for typelib's weaknesses.
...if your interface contains two functions with those annotations, then you will need to
add two arraydata entries.
...this is a problem for smart pointers that are not apartment aware; they will try to
addref() and release() on whichever thread they happen to be running.
...And 2 more matches
Debugging Frame Reflow
element width maximum width frame status overflow area getting the log make sure that your build is a debug build (in short you need ac_
add_options --enable-debug in your .mozconfig file).
...this viewport has the
address 00b97c30.
...element size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same
address as the previous one.
...And 2 more matches
Simple SeaMonkey build
install mozillabuild, a package of
additional build tools.
...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_options --enable-application=suite' > .mozconfig # let's build seamonkey...
... echo 'mk_
add_options moz_objdir=/path/to/comm-central/obj-sm-release' >> .mozconfig # specify amount of parallel building.
...And 2 more matches
Creating Custom Events That Can Pass Data
using this technique you can
add extra parameters and query them.
...you'll want to
add an entry to it which looks like this: domci_class({truncated name}) here's the fun part: above i mentioned that you must name your events as nsdom.
... wwatcher->getactivewindow(getter_
addrefs(awindow)); //get the active window.
...And 2 more matches
Obsolete Build Caveats and Tips
this has resulted in many caveats and tips being
added to the mdn documentation for building older versions of the code base or dealing with older build tools.
... gecko 1.9.2 through 11: if you would like to use this sdk,
add ac_
add_options --with-windows-version=600 to your .mozconfig.
... gecko 1.9.2 through 11: if you're building with this sdk, you will need to
add ac_
add_options --with-windows-version=502 to your .mozconfig.
...And 2 more matches
Firefox and the "about" protocol
here is a complete list of urls in the about: pseudo protocol: about: page description about:about provides an overview of all about: pages available for your current firefox version about:
addons
add-ons manager about:buildconfig displays the configuration and platform used to build firefox about:cache displays information about the memory, disk, and appcache about:checkerboard switches to the checkerboarding measurement page, which allows to detect checkerboarding issues about:config provides a way to inspect and change firefox prefer...
... about:crashes lists all crashes, which happened during the runtime of firefox (in case the user enabled the crash reporter) about:credits lists all contributors to the firefox project about:debugging switches to the developer tools debugging page, which allows you to debug
add-ons, tabs and service workers about:devtools summarizes the developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information about:logo firefox logo about:memory p...
...rovides a way to display memory usage, save it as report and run the gc and cc about:mozilla special page showing a message from "the book of mozilla" about:networking displays networking information about:newtab start page when opening a new tab about:performance displays memory and performance information about firefox subprocesses/
add-ons/tabs about:plugins displays information about installed plugins about:policies lists out the firefox for enterprise policies about:preferences firefox settings (also available through firefox menu > options) about:privatebrowsing start page when opening a private window about:profiles display and manage firefox profiles about:protections ...
...And 2 more matches
HTML parser threading
additionally, each nshtml5parser has an associated nshtml5treeopexecutor that turns the output (tree operations; discussed later) of the portable parser core into actions performed on the gecko dom.
...the runnables need to keep the nshtml5streamparser instance alive, so they have to
addref it.
...it acquires mspeculationmutex and while holding it, it creates a new speculation and
adds it to the queue of speculations, flushes the tree ops to the main thread, marks the nshtml5streamparser as being in a speculating state and sets the newly created speculation object as the tree op sink (instead of the tree op stage described earlier) of the tree builder.
...And 2 more matches
Dict.jsm
in
addition, if the dictionary changes during iteration, no guarantees are made as to what will happen.
...in
addition, if the dictionary changes during iteration, no guarantees are made as to what will happen.
...in
addition, if the dictionary changes during iteration, no guarantees are made as to what will happen.
...And 2 more matches
DownloadSummary
method overview promise bindtolist(downloadlist alist); promise
addview(object aview); promise removeview(object aview); properties attribute type description allhavestopped read only boolean indicates whether all the downloads are currently stopped.
...
addview()
adds a view that will be notified of changes to the summary.
... the newly
added view will receive an initial onsummarychanged notification.
...And 2 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.
...when you are done with it, like in shutdown of restartless
add-on, you should close the file so it becomes editable again.
... optionsoptional
additional options for file opening.
...And 2 more matches
Using JavaScript code modules
<alias> must be unique to your
add-on, as the application and other extensions share the same namespace for all aliases.
... using chrome.manifest the easiest way for extensions and xul applications to
add custom aliases is by registering an alias in the chrome manifest using a line like this: resource aliasname uri/to/files/ for example, if the xpi for your foo extension includes a top-level modules/directory containing the bar.js module (that is, the modules/directory is a sibling to chrome.manifest and install.rdf), you could create an alias to that directory via the instruction: resource foo modules/ (don't forget the trailing slash!) you could then import the module into your javascript code via the statement: components.utils.import("resource://foo/bar.js"); programmatically
adding aliases custom aliases to paths that can be represented as an nsilocalfile can be programmatically
added as well.
... packaging notes it's important to note that you should not typically put your javascript code modules in a jar file in your
add-on.
...And 2 more matches
Localizing XLIFF files for iOS
in the <file> tag,
add the target-language attribute with your locale code as the value (e.g., target-language="xx-xx").
...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 2 more matches
Localizing with Mercurial
use the
add_path.exe utility found in c:\mozilla-build\hg to do this.
... ps c:\users\your_id> cd c:\mozilla-build\hg ps c:\mozilla-build\hg> .\
add_path.exe /result .
...if you don't see path among the options, you'll have to click
add and edit it within the
add dialog.
...And 2 more matches
Release phase
add the following lines to your ~/.ssh/config file, replacing user@host.domain with your mozilla ldap account name: host hg.mozilla.org user user@host.domain if you have already cloned the remote repository using the http protocol using this command: $ hg clone http://hg.mozilla.org/releases/l10n-central/x-testing then you will need to edit the .hg/hgrc file (inside the x-testing local clone) to ...
...your .hg/hgrc file shoud look like this (
add the emphasized line): [paths] default = hg.mozilla.org/releases/l10n-central/x-testing default-push = ssh://hg.mozilla.org/releases/l10n-central/x-testing if you haven't already cloned the remote repository, enter this command: hg clone ssh://hg.mozilla.org/releases/l10n-central/x-testing mercurial will let you know that it's cloning the repository: destination directory: x-testing requesting all changes
adding changesets
adding manifests
adding file changes
added 4 changesets with 242 changes to 239 files updating to branch default 239 files updated, 0 files merged, 0 files removed, 0 files unresolved the default push url is the same as the default pull url (i.e., ssh://hg.mozilla.org/releases/l10n-central/...
...here's how that's done: run this command to see recent commits in your local clone: $ hg log -l 3 you should a list of the most recent commits, similar to this one: changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary:
added search bar strings now run the hg outgoing command to compare the local repository on your machine with the remote repository on hg.mozilla.org.
...And 2 more matches
gettext
in the po file, msgctxt looks like this: msgctxt "button label" msgid "log in" msgstr "" msgctxt "dialog title" msgid "log in" msgstr "" you can
add context to your strings by passing an
additional argument to the gettext function call and then having xgettext extract it as the context.
... in php, however, the default gettext functions don't support passing such
additional argument.
...xgettext --language=php \ --
add-comments=l10n \ --keyword=___:1 \ --keyword=___:1,2c \ --keyword=n___:1,2 \ --keyword=n___:1,2,4c \ file.php running xgettext will result in the following messages.po file: # some descriptive title.
...And 2 more matches
BloatView
if they aren't, then you're not using the ns_impl_
addref and ns_impl_release (or ns_impl_isupports which calls them) for xpcom objects, or moz_count_ctor and moz_count_dtor for non-xpcom objects.
...logn > htmlfile this will produce an html file that contains a table similar to the following (but with
added javascript so you can sort the data by column).
... the show objects and show references buttons show the same statistics but counting objects or
addref'd references rather than bytes.
...And 2 more matches
Profiling with Xperf
for 64-bit windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg
add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu.
... the standard symbol path that includes both mozilla's and microsoft's symbol server configuration is as follows: _nt_symcache_path: c:\symbols _nt_symbol_path: srv*c:\symbols*http://msdl.microsoft.com/download/symbols;srv*c:\symbols*http://symbols.mozilla.org/firefox/ to
add symbols from your own builds,
add c:\path\to\objdir\dist\bin to _nt_symbol_path.
...either run these commands from there, or
add the directory to your path.
...And 2 more matches
Profile Manager
additionally, you can manually
add firefox versions by clicking the "manage firefox versions..." button: each firefox version in the list has the following properties: path, version, and default.
... the version of firefox which will be launched is indicated in the "firefox version" dropdown in the launch options box: there are several
additional launch options available for firefox.
... for this reason, if you attempt to launch firefox using profile manager, and it detects that another instance of firefox is already running, it will automatically
add the -no-remote argument for you, regardless of whether this launch option was checked.
...And 2 more matches
NSPR Contributor Guide
new features for purposes of this paper, a "new feature" is defined as some api
addition that goes into the core nspr library, for example: libnspr4.dll nspr is mostly complete.
... new apis are driven mostly by the os vendors as they
add new features.
...these are some guidelines for new apis that you may
add to nspr.
...And 2 more matches
Introduction to NSPR
this, and the fact that threads share an
address space with other threads in the same process, makes it important to remember that threads are not processes .
...it might be viewed as taking the executing thread and
adding it to the end of the ready queue for its appropriate priority, then simply running the scheduling algorithm to find the most appropriate thread.
...in
addition to prlock, nspr provides another mutex type, prmonitor, which is reentrant and can have only one associated condition variable.
...And 2 more matches
PRIOMethods
connect connect to the specified network
address.
... bind associate a network
address with the file descriptor.
... sendto send bytes to specified network
address.
...And 2 more matches
PRMcastRequest
structure used to specify values for the pr_sockopt_
addmember and pr_sockopt_dropmember socket options that define a request to join or leave a multicast group.
... syntax #include <prio.h> struct prmcastrequest { prnet
addr mc
addr; prnet
addr if
addr; }; typedef struct prmcastrequest prmcastrequest; fields the structure has the following fields: mc
addr ip multicast
address of group.
... if
addr local ip
address of interface.
...And 2 more matches
PR_Accept
syntax #include <prio.h> prfiledesc* pr_accept( prfiledesc *fd, prnet
addr *
addr, printervaltime timeout); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing the rendezvous socket on which the caller is willing to accept new connections.
...
addr a pointer to a structure of type prnet
addr.
... on output, this structure contains the
address of the connecting entity.
...And 2 more matches
Certificate functions
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 ...
...t_destroyoidsequence mxr 3.9 and later cert_destroyusernotice mxr 3.10 and later cert_destroyvalidity mxr 3.5 and later cert_dupcertificate mxr 3.2 and later cert_dupcertlist mxr 3.2 and later cert_enableocspchecking mxr 3.2 and later cert_encodealtnameextension mxr 3.7 and later cert_encodeand
addbitstrextension mxr 3.5 and later cert_encodeauthkeyid mxr 3.5 and later cert_encodebasicconstraintvalue mxr 3.5 and later cert_encodecertpoliciesextension mxr 3.12 and later cert_encodecrldistributionpoints mxr 3.5 and later cert_encodegeneralname mxr 3.4 and later cert_encodeinfoaccessextension mxr 3.
... cert_filtercertlistbycanames mxr 3.4 and later cert_filtercertlistbyusage mxr 3.4 and later cert_filtercertlistforusercerts mxr 3.6 and later cert_findcertbydercert mxr 3.2 and later cert_findcertbyissuerandsn mxr 3.2 and later cert_findcertbynickname mxr 3.2 and later cert_findcertbynicknameoremail
addr mxr 3.2 and later cert_findcertbysubjectkeyid mxr 3.7 and later cert_findcertextension mxr 3.4 and later cert_findcertissuer mxr 3.3 and later cert_findkeyusageextension mxr 3.4 and later cert_findsmimeprofile mxr 3.2 and later cert_findsubjectkeyidextension mxr 3.7 and later cert_findusercer...
...And 2 more matches
Encrypt Decrypt MAC Keys As Session Objects
xt[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int p
addinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, i...
...vlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { p
addinglength = blocksize - ptextlen; for ( j=0; j < p
addinglength; j++) { ptext[ptextlen+j] = (unsigned char)p
addinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ...
...secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = p
addinglength; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write pad failure\n"); goto cleanup; } rv = secsuccess; cleanup: if (ctxmac != null) { pk11_destroycontext(ctxmac, pr_true); ...
...And 2 more matches
Encrypt and decrypt MAC using token
xt[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int p
addinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, i...
...vlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { p
addinglength = blocksize - ptextlen; for ( j=0; j < p
addinglength; j++) { ptext[ptextlen+j] = (unsigned char)p
addinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ...
...secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = p
addinglength; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write pad failure\n"); goto cleanup; } rv = secsuccess; cleanup: if (ctxmac != null) { pk11_destroycontext(ctxmac, pr_true); ...
...And 2 more matches
NSS 3.14.2 release notes
on red hat enterprise linux 5.x systems, install the binutils220 package and
add /usr/libexec/binutils220 to the beginning of your path environment variable.
... initial manual pages for some nss command line tools have been
added.
... bug 816853 - when using libpkix for certificate validation, applications may now supply
additional application-defined trust anchors to be used in
addition to those from loaded security tokens, rather than as an alternative to.
...And 2 more matches
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.
... tls client applications may enable this via a call to ssl_optionsetdefault(ssl_enable_ocsp_stapling, pr_true);
added function secitem_reallocitemv2.
... in xconst.h cert_encodenameconstraintsextension - matching function for cert_decodenameconstraintsextension,
added in nss 3.10.
...And 2 more matches
NSS 3.21 release notes
2016-01-07, this page has been updated to include
additional information about the release.
... the sections "security fixes" and "acknowledgements" have been
added.
... new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions
added for use during mid-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string...
...And 2 more matches
NSS 3.47 release notes
notable changes in nss 3.47 bug 1152625 - support aes hw acceleration on armv8 bug 1267894 - allow per-socket run-time ordering of the cipher suites presented in clienthello bug 1570501 -
add cmac to freebl and pkcs #11 libraries bugs fixed in nss 3.47 bug 1459141 - make softoken cbc p
adding removal constant time bug 1589120 - more cbc p
adding tests bug 1465613 -
add ability to distrust certificates issued after a certain date for a specified root cert bug 1588557 - bad debug statement in tls13con.c bug 1579060 - mozilla::pkix tag definitions for issueruniqueid and subjectuni...
...e refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - nss rejects tls 1.2 records with large p
adding with sha384 hmac bug 1577448 - create
additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr changes bug 1267894 - libssl should allow selecting the order of cipher suites in clienthello bug 1581507 - fix unportable grep expression in test scripts bug 1234830 - [cid 1242894][cid 1242852] unused values bug 1580126 - fix build failure on ...
... 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.
...And 2 more matches
NSS 3.55 release notes
pk11_findcertinslot is
added.
... bug 1631573 (cve-2020-12401) - remove unnecessary scalar p
adding.
... bug 1649633 -
add pk11_findcertinslot to search a given slot for a der-encoded certificate.
...And 2 more matches
Encrypt Decrypt_MAC_Using Token
xt[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int p
addinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, i...
...*/ if (ptextlen != blocksize) { p
addinglength = blocksize - ptextlen; for ( j=0; j < p
addinglength; j++) { ptext[ptextlen+j] = (unsigned char)p
addinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv.
...secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = p
addinglength; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write pad failure\n"); goto cleanup; } rv = secsuccess; cleanup: if (ctxmac != null) { pk11_destroycontext(ctxmac, pr_true); ...
...And 2 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
xt[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int p
addinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, i...
...vlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { p
addinglength = blocksize - ptextlen; for ( j=0; j < p
addinglength; j++) { ptext[ptextlen+j] = (unsigned char)p
addinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ...
...secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = p
addinglength; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write pad failure\n"); goto cleanup; } rv = secsuccess; cleanup: if (ctxmac != null) { pk11_destroycontext(ctxmac, pr_true); ...
...And 2 more matches
EncDecMAC using token object - sample 3
ed char *iv, unsigned int ivlen, prbool ascii) { secstatus rv; unsigned char ptext[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int p
addinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ wh...
...ile ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { p
addinglength = blocksize - ptextlen; for ( j=0; j < p
addinglength; j++) { ptext[ptextlen+j] = (unsigned char)p
addinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to intermediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { ...
...pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = p
addinglength; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write pad failure\n"); goto cleanup; } rv = secsuccess; cleanup: if (ctxmac != null) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc != null) { pk11_destroycontext(ctxenc, pr_true); } return rv; } /* * find the key for the given mechanism */ pk11symkey* findkey(pk11slotinfo *slot,...
...And 2 more matches
nss tech note4
he client cert's handle, if client auth happened if ssl server, this will get you the server's cert handle don't forget to clean up the cert handle when you're done with it void cert_destroycertificate(certcertificate *cert); some info is readily available cert->subjectname (char*) cert->issuername (char*) cert->email
addr (char*) or char *cert_getcertificateemail
address(certcertificate *cert); cert->keyusage (unsigned int) to break the issuer and subject names into components pass &(cert->issuer) or &(cert->subject) to the following functions char *cert_getcommonname(certname *name); char *cert_getcertemail
address(certname *name); char *cert_getcoun...
... there is a long list of pre-defined oids, and new ones can be
added dynamically by an application.
... } extensions++; } } an example custom cert extension struct _mycertextdata { secitem version; secitem street
address; secitem phonenum; secitem rfc822name; secitem id; secitem maxusers; }; typedef struct _mycertextdata mycertextdata; /* template used for decoding the extension */ const sec_asn1template mycertexttemplate[] = { { sec_asn1_sequence, 0, null, sizeof( mycertextdata ) }, { ...
...And 2 more matches
Notes on TLS - SSL 3.0 Intolerant Servers
if you find such a server, feel free to
add it to this page.
... if you have questions concerning netscape browsers and problem servers, please contact us using the feedback
address at the top of this page.
...to do so,
add http://toolbar.netcraft.com/site_report?url= to the beginning of the url.
...And 2 more matches
sslerr.html
in
addition to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter.
... ssl_error_bad_block_p
adding -12264 "ssl received a record with bad block p
adding." ssl was using a block cipher, and the last block in an ssl record had incorrect p
adding information in it.
... sec_error_
adding_cert -8168 error
adding certificate to database.
...And 2 more matches
Scripting Java
additionally, a boolean property of the same name can be defined by an isfoo method.
... to
address this need, rhino provides the ability to create new java objects that implement interfaces.
...when calling the function, rhino passes the method's name as the
additional argument.
...And 2 more matches
GCIntegration - SpiderMonkey Redirect 1
in
addition, objects allocated during the incremental gc are marked unconditionally.
...for pointers that are traced using js_call_tracer we will most likely change the api so that the
address of the pointer being traced is passed in, rather than the pointer itself.
...it's likely that js_isabouttobefinalized() will also be changed to take the
address of the pointer.
...And 2 more matches
Exact Stack Rooting
class fooclass = { "fooprototype", /* name */ jsclass_has_private | jsclass_has_reserved_slots(1), /* flags */ js_propertystub, /*
addproperty */ js_propertystub, /* delproperty */ ...
...to that end, we have a special "rooting" mechanism for stack pointers that is very efficiently able to
add and remove gcpointers to the rootedset.
... the downside of this efficiency is that gcpointers must be
added to and removed from this rootedset tracking structure in lifo order.
...And 2 more matches
JSExtendedClass
jsextendedclass is an extended version of jsclass with
additional hooks.
... syntax struct jsextendedclass { jsclass base; jsequalityop equality; jsobjectop outerobject; jsobjectop innerobject; jsiteratorop iteratorobject;//
added in spidermonkey 1.8 jsobjectop wrappedobject; //
added in spidermonkey 1.8 ...and
additional reserved fields.
... iteratorobject jsiteratorop
added in spidermonkey 1.8 optional.
...And 2 more matches
JS_ConvertArguments
syntax bool js_convertarguments(jscontext *cx, const js::callargs &args, const char *format, ...); //
added in spidermonkey 31 bool js_convertarguments(jscontext *cx, unsigned argc, jsval *argv, const char *format, ...); // obsolete since jsapi 30 name type description cx jscontext * the context in which to perform any necessary conversions.
... cx also affects the interpretation of format, if js_
addargumentformatter has been called.
...
added in spidermonkey 31 argc unsigned the number of arguments to convert.
...And 2 more matches
JS_DumpNamedRoots
description each call to js_
addnamedroot creates a record in a table of named roots maintained by the garbage collector.
...in pseudocode: /* pseudocode explanation of what js_dumpnamedroots does */ void js_dumpnamedroots(jsruntime *rt, dumpfn dump, void *data) { for each (root in rt->namedroots) dump(root.name, root.
address, data); } callback syntax dump is a pointer to a function provided by the application.
...this is the pointer that the application passed to js_
addnamedroot.
...And 2 more matches
JS_PreventExtensions
attempts to forbid the
addition of any new properties to an object.
... syntax //
added in spidermonkey 45 bool js_preventextensions(jscontext *cx, js::handleobject obj, js::objectopresult &result); // obsolete since jsapi 39 bool js_preventextensions(jscontext *cx, js::handleobject obj, bool *succeeded); name type description cx jscontext * the context.
...
added in spidermonkey 45 succeeded bool * outparam indicating, on jsapi success, whether the object is now non-extensible.
...And 2 more matches
JS_SetElement
syntax /*
added in spidermonkey 31 */ bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, js::handlevalue v); bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, js::handleobject v); bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, js::handlestring v); bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, int32_t v); bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, uint32_t v); bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, double v); /* obsolete since jsapi 29 */ bool js_setelement(jscontext *cx, js::handleobjec...
...
added in spidermonkey 31 vp js::mutablehandlevalue in/out parameter.
...js_setelement ordinarily leaves *vp unchanged, but a jsclass.
addproperty hook or non-default setter may modify it.
...And 2 more matches
JS_SetProperty
syntax bool js_setproperty(jscontext *cx, js::handleobject obj, const char *name, js::handlevalue v); bool js_setucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlevalue v); bool js_setpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue v); //
added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information.
...ordinarily this function leaves v unchanged, but it is possible for a jsclass.
addproperty hook or a non-default setter to assign to v.
... if the lookup found no property with the given name, or if it found that obj inherits such a property from a non-native object, then a new own property is
added to obj, as described below.
...And 2 more matches
JS_SetThreadStackLimit
syntax void js_setthreadstacklimit(jscontext *cx, jsuword limit
addr) name type description cx jscontext * the context to configure.
... limit
addr jsuword an
address near the top of the c stack.
... this should be a safely writeable
address well short of the actual top of the stack.
...And 2 more matches
SpiderMonkey 38
js::truehandlevalue (bug 959787) jsconstintegerspec (bug 1066020) jsid_is_symbol (bug 645416) jsid_to_symbol (bug 645416) jsprop_define_late (bug 825199) jsprop_ignore_enumerate (bug 1037770) jsprop_ignore_permanent (bug 1037770) jsprop_ignore_readonly (bug 1037770) jsprop_ignore_value (bug 1037770) jsprop_propop_accessors (bug 1088002) jsprop_redefine_nonconfigurable (bug 1101123) js_
addfinalizecallback (bug 996785) js_defineconstintegers (bug 1066020) js_getflatstringcharat (bug 1034627) js_getfunctionscript (bug 1069694) js_getlatin1flatstringchars (bug 1037869) js_getlatin1internedstringchars (bug 1037869) js_getlatin1stringcharsandlength (bug 1032726) js_getstringcharat (bug 1034627) js_gettwobyteexternalstringchars (bug 1034627) js_gettwobyteflatstringchars (bug 103...
... deleted apis js::
addnamedobjectroot (bug 1107639) js::
addnamedscriptroot (bug 1107639) js::
addnamedstringroot (bug 1107639) js::
addnamedvalueroot (bug 1107639) js::
addnamedvaluerootrt (bug 1107639) js::
addobjectroot (bug 1107639) js::
addstringroot (bug 1107639) js::
addvalueroot (bug 1107639) js::removeobjectroot (bug 1107639) js::removeobjectrootrt (bug 1107639) js::removescriptroot (bug 1107639) js::remov...
... this change better aligns with ecmascript's [[preventextensions]] hook, which generally returns true or false to indicate whether subsequent attempts to
add a new property will fail, yet also itself may throw in some cases.
...And 2 more matches
Thread Sanitizer
adjusting the build configuration create the build configuration file .mozconfig with the following content in your mozilla-central directory: mk_
add_options moz_objdir=@topsrcdir@/objdir-ff-tsan mk_
add_options moz_make_flags=-j12 # enable llvm specific code and build workarounds ac_
add_options --enable-thread-sanitizer # if clang is already in your $path, then these can simply be: # export cc=clang # export cxx=clang++ export cc="/path/to/clang" export cxx="/path/to/clang++" # llvm-symbolizer displays much more complete backtraces when ...
...# if it's not already in your $path, then uncomment this next line: #export llvm_symbolizer="/path/to/llvm-symbolizer" #
add tsan to our compiler flags export cflags="-fsanitize=thread -fpic -pie" export cxxflags="-fsanitize=thread -fpic -pie" #
additionally, we need the tsan flag during linking.
... normally, our c/cxxflags would # be used during linking as well but there is at least one place in our build where # our cflags are not
added during linking.
...And 2 more matches
Redis Tips
node.js redis client: https://github.com/mranney/node_redis npm install redis python redis client: https://github.com/andymccurdy/redis-py there are some gotchas with the python api: https://github.com/andymccurdy/redis-py#api-reference select statement not implemented del is 'delete' in python z
add argument order is wrong setex argument order is wrong the default redis port is 6379.
... i'll simulate some logins like so: > r.z
add('last-login', now(), 'lloyd'); > r.z
add('last-login', now(), 'jparsons'); > r.z
add('last-login', now(), 'zarter'); > r.z
add('last-login', now(), 'lloyd'); // he logged in again!
... in
addition to getting elements by their rank in the zset, you can get them by score.
...And 2 more matches
Mork
this value is used to establish which dictionary the aliases are
added to.
...a minus before the table id indicates that all the rows currently stored in the table should be removed before
adding more rows.
...indeed, defining a row in a table is a shortcut for both defining a row and
adding the row to the table.
...And 2 more matches
Detailed XPCOM hashtable guide
items are found,
added, and removed from the hashtable by using the key.
... inserting/removing: o(n):
adding and removing items from a large array can be time-consuming o(1):
adding and removing items from hashtables is a quick operation wasted space: none: arrays are packed structures, so there is no wasted space.
... hashtables are useful for sets of data that need swift random access; with non-integral keys or non-contiguous integral keys; or where items will be frequently
added or removed.
...And 2 more matches
Components.utils.Sandbox
window objects and nsiprincipal carry
additional information such as origin attributes and same-origin privilege changes caused by setting document.domain.
...
addons creating sandboxes whose expected lifetime is tied to that of a content window object will want to use samezoneas instead.
...this property is optional, but very useful for tracking memory usage of
add-ons and other javascript compartments.
...And 2 more matches
mozIAsyncHistory
toolkit/components/places/moziasynchistory.idlscriptable this interface allows you to
add multiple visits to a single url in a batch.
... updateplaces()
adds a set of visits for one or more moziplaceinfo objects, and updates each moziplaceinfo's title or guid.
... note that this lets you
add to history even in private browsing mode; if that's not desired you can first check whether the window is in private browsing mode.
...And 2 more matches
mozIStorageBindingParamsArray
storage/public/mozistoragebindingparamsarray.idlscriptable please
add a summary to this article.
... method overview void
addparams(in mozistoragebindingparams aparameters); mozistoragebindingparams newbindingparams(); attributes attribute type description length unsigned long the number of mozistoragebindingparams objects in the array.
... methods
addparams()
adds the specified set of parameters to the end of the array.
...And 2 more matches
nsICategoryManager
to use this service, use: var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); method overview string
addcategoryentry(in string acategory, in string aentry, in string avalue, in boolean apersist, in boolean areplace); void deletecategory(in string acategory); void deletecategoryentry(in string acategory, in string aentry, in boolean apersist); nsisimpleenumerator enumeratecategories(); nsisimpleenumerator enumeratecategory(in string acategory); string get...
...categoryentry(in string acategory, in string aentry); methods
addcategoryentry() this method sets the value for the given entry on the given category.
... string
addcategoryentry( in string acategory, in string aentry, in string avalue, in boolean apersist, in boolean areplace ); parameters acategory the name of the category being modified.
...And 2 more matches
nsIClipboardDragDropHooks
use this to do things such as prevent a drag from starting,
adding or removing data and flavors, or preventing the drop.
... inherits from: nsisupports last changed in gecko 1.7 embedders who want to have these hooks made available should implement nsiclipboarddragdrophooks and use the command manager to send the appropriate commands with these parameters/settings: command: cmd_clipboarddragdrophook params value type possible values "
addhook" isupports nsiclipboarddragdrophooks as nsisupports "removehook" isupports nsiclipboarddragdrophooks as nsisupports note: overrides/hooks need to be
added to each window (as appropriate).
...
adding them to the first window does not enable them for every window.
...And 2 more matches
nsIContentPrefService2
method overview void
addobserverforname(in astring name, in nsicontentprefobserver observer); void getbydomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); void getbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); nsicontentpref getcachedbydom...
...oid removeobserverforname(in astring name, in nsicontentprefobserver observer); void set(in astring domain, in astring name, in nsivariant value, in nsiloadcontext context, [optional] in nsicontentprefcallback2 callback); void setglobal(in astring name, in nsivariant value, in nsiloadcontext context, [optional] in nsicontentprefcallback2 callback); methods
addobserverforname() registers an observer that will be notified whenever a preference with the given name is set() or removed.
...void
addobserverforname( in astring name, in nsicontentprefobserver observer ); parameters name the name of the preferences to observe.
...And 2 more matches
nsIDOMMozNetworkStatsManager
networkstats is available */ } else { alert("i'm sorry, but networkstats services are not supported."); } method overview nsidomdomrequest getsamples(in nsisupports network, in jsval start, in jsval end, [optional] in jsval options /* networkstatsgetoptions */); nsidomdomrequest
addalarm(in nsisupports network, in long threshold, [optional] in jsval options /* networkstatsalarmoptions */); nsidomdomrequest getallalarms([optional] in nsisupports network); nsidomdomrequest removealarms([optional] in long alarmid); nsidomdomrequest clearstats(in nsisupports network); nsidomdomrequest...
...
addalarm() install an alarm on a network.
... nsidomdomrequest
addalarm(in nsisupports network, in long threshold, [optional] in jsval options /* networkstatsalarmoptions */); parameters network the origin of the data.
...And 2 more matches
nsIDeviceMotion
method overview void
addlistener(in nsidevicemotionlistener alistener); void
addwindowlistener(in nsidomwindow awindow); native code only!
... methods
addlistener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onaccelerationchange() method as appropriate to share updated acceleration data.
... void
addlistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object whose nsidevicemotionlistener.onaccelerationchange() method should be called with updated acceleration data.
...And 2 more matches
nsIEditorSpellCheck
to create an instance, use: var editorspellcheck = components.classes["@mozilla.org/editor/editorspellchecker;1"] .createinstance(components.interfaces.nsieditorspellcheck); method overview void
addwordtodictionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); void getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); ws...
...ary(in wstring word); void replaceword(in wstring misspelledword, in wstring replaceword, in boolean alloccurrences); void savedefaultdictionary(); obsolete since gecko 9.0 void setcurrentdictionary(in astring dictionary); void setfilter(in nsitextservicesfilter filter); void uninitspellchecker(); void updatecurrentdictionary(); methods
addwordtodictionary()
adds the specified word to the current personal dictionary.
... void
addwordtodictionary( in wstring word ); parameters word the word to
add to the current personal dictionary.
...And 2 more matches
nsILoadGroup
inherits from: nsirequest last changed in gecko 1.7 method overview void
addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type description activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set).
...each time a number of requests are
added to a group, the defaultloadrequest may be set to indicate that all of the requests are related to a base request.
... groupobserver nsirequestobserver the group observer is notified when requests are
added to and removed from this load group.
...And 2 more matches
nsIMicrosummaryService
ed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/microsummary/service;1 as a service: var microsummaryservice = components.classes["@mozilla.org/microsummary/service;1"] .getservice(components.interfaces.nsimicrosummaryservice); method overview void
addgenerator(in nsiuri generatoruri); nsimicrosummary createmicrosummary(in nsiuri pageuri, in nsiuri generatoruri); nsisimpleenumerator getbookmarks(); nsimicrosummarygenerator getgenerator(in nsiuri generatoruri); nsimicrosummaryset getmicrosummaries(in nsiuri pageuri, in long long bookmarkid); nsimicrosummary getmicrosummary(in long long bookmarkid); ...
...nsimicrosummarygenerator installgenerator(in nsidomdocument xmldefinition); 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.
... callable by content via nsisidebar.
addmicrosummarygenerator().
...And 2 more matches
nsINavHistoryResult
method overview void
addobserver(in nsinavhistoryresultobserver aobserver, in boolean aownsweak); void removeobserver(in nsinavhistoryresultobserver aobserver); attributes attribute type description root nsinavhistorycontainerresultnode the root of the results.
...while the result waits to be collected it will stay in memory, and continue to update itself, potentially causing unwanted
additional work.
...obsolete since gecko 2.0 methods
addobserver()
adds an observer for changes that occur on the result.
...And 2 more matches
nsIObserverService
xpcom/ds/nsiobserverservice.idlscriptable this interface provides methods to
add, remove, notify, and enumerate observers of various notifications.
... implemented by @mozilla.org/observer-service;1 as a service: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); method overview void
addobserver( in nsiobserver anobserver, in string atopic, in boolean ownsweak); nsisimpleenumerator enumerateobservers( in string atopic ); void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); void removeobserver( in nsiobserver anobserver, in string atopic ); methods
addobserver() registers a given listener for a notifications re...
... void
addobserver( in nsiobserver anobserver, in string atopic, in boolean ownsweak ); parameters anobserver the nsiobserver object which will receive notifications.
...And 2 more matches
nsIPasswordManager
to create an instance, use: var passwordmanager = components.classes["@mozilla.org/passwordmanager;1"] .getservice(components.interfaces.nsipasswordmanager); method overview void
adduser(in autf8string ahost, in astring auser, in astring apassword); void removeuser(in autf8string ahost, in astring auser); void
addreject(in autf8string ahost); void removereject(in autf8string ahost); attributes attribute type description enumerator nsisimpleenumerator readonly: an en...
... methods
adduser() stores a password.
... astring
adduser(in autf8string ahost, in astring auser, in astring apassword); parameters ahost the hostname of the password to store.
...And 2 more matches
nsISocketProvider
to create an instance, use: var socketprovider = components.classes["@mozilla.org/network/socket;2?type="] .createinstance(components.interfaces.nsisocketprovider); method overview void
addtosocket(in long afamily, in string ahost, in long aport, in string aproxyhost, in long aproxyport, in unsigned long aflags, in prfiledescstar afiledesc, out nsisupports asecurityinfo); native code only!
...when set, the hostname parameter passed in this interface will be used instead of the
address structure passed for a later request.
... methods native code only!
addtosocket this function is called to allow the socket provider to layer a prfiledesc (a file descriptor) on top of another prfiledesc.
...And 2 more matches
nsIStyleSheetService
allows extensions or embeddors to
add to the built-in list of user or agent style sheets.
... layout/base/nsistylesheetservice.idlscriptable please
add a summary to this article.
... unsigned long type); void unregistersheet(in nsiuri sheeturi, in unsigned long type); constants constant value description agent_sheet 0 user_sheet 1 author_sheet 2 methods loadandregistersheet() synchronously loads a style sheet from sheeturi and
adds it to the list of user or agent style sheets.
...And 2 more matches
nsITelemetry
[optional] in boolean clear); nsisupports getloadedmodules(); jsval snapshotkeyedhistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in boolean enabled); void asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalar
add(in acstring aname, in jsval avalue); void scalarset(in acstring aname, in jsval avalue); void scalarsetmaximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint32_t adataset, [optional] in boolean aclear); void keyedscalar
add(in acstring aname, in astring akey, in jsval avalue); void keyedscalarset(in acstring aname, in astring akey, i...
... return value the returned jsval object has the following functions:
add(value) -
adds an integer value to the appropriate bucket snapshot() - returns a snapshot of the histogram with the same data fields as in histogramsnapshots.
... return value the returned jsval object has the following functions:
add(key, [optional] value) -
adds an integer value to the appropriate bucket.
...And 2 more matches
nsITransferable
method overview void
adddataflavor( in string adataflavor ); nsisupportsarray flavorstransferablecanexport( ); nsisupportsarray flavorstransferablecanimport( ); void getanytransferdata( out string aflavor, out nsisupports adata, out unsigned long adatalen ); void gettransferdata( in string aflavor, out nsisupports adata, out unsigned long adatalen ); void init(in nsiloadcontex...
... kfilepromisedirectorymime application/x-moz-file-promise-dir a synthetic flavor which is
added to the transferable once the destination directory for a file drag is known.
... methods
adddataflavor()
adds a new data flavor, indicating that this transferable can receive the type of data represented by the specified flavor string.
...And 2 more matches
nsIUpdateItem
1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is obsolete; instead of using the extension manager, you should use the
addon manager.
... note:
add-ons can specify a targetapplication id of toolkit@mozilla.org in their install manifest for compatibility with all apps using a specific release of the toolkit.
...this must be the public part of the key that was used to sign update manifests for this
add-on.
...And 2 more matches
nsIWebBrowserPersist
persist_flags_replace_existing_files 32 replace existing files on the disk (use with due diligence!) persist_flags_no_base_tag_modifications 64 don't modify or
add base tags.
... saveuri() as of firefox 26, this method should no longer be used from
add-on code.
... as of firefox 36, a new parameter areferrerpolicy was
added as the fourth argument, changing the number of parameters from 7 to 8 and shifting the order of the parameters in a backwards incompatible way.
...And 2 more matches
nsIWebProgressListener
this flag is set in
addition to state_is_request.
... */ let mm = window.getgroupmessagemanager("browsers"); mm.loadframescript("chrome://path/to/some/example-framescript.js", true); mm.
addmessagelistener("my
addonmessage", (message) => { let data = message.data; let browser = message.target; let outerwindowid = data.outerwindowid; // browser is now the <xul:browser> that saw the web progress activity // occur.
... "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("my
addonmessage", { name: "onstatechange", flag: aflag, status: astatus, }); }, onlocationchange: function(aprogress, arequest, auri, aflag) { let win = awebprogress.domwindow; let outerwindowid = win.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindowutils) ...
...And 2 more matches
nsIXPCScriptable
js/src/xpconnect/idl/nsixpcscriptable.idlnot scriptable please
add a summary to this article.
...3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void precreate(in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr globalobj, out jsobjectptr parentobj); void create(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool
addproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool delproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool getproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool setproperty(in n...
... constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_
addproperty 1 << 3 want_delproperty 1 << 4 want_getproperty 1 << 5 want_setproperty 1 << 6 want_enumerate 1 << 7 want_newenumerate 1 << 8 indicates that the object wants to have its newenumerate method called.
...And 2 more matches
Troubleshooting XPCOM components registration
if the error appears, you can use nspr logging to see
additional information about the failure by running firefox from a command prompt: rem close all firefox windows!
... registration failure if the module is loading correctly but doesn't register its components, try
adding calls to components.utils.reporterror("debug me!"); in nsgetmodule() and other functions to try and find any errors.
... when
adding a component to a xulrunner application, change the buildid in application.ini.
...And 2 more matches
Filelink Providers
this document explains how to extend thunderbird to support
additional web-based storage services.
...if the provider is being merged into the comm-central code repository (and thus
added to the official thunderbird build), you must also
add the components to the cloudfile/cloudfilecomponents.manifest, cloudfile/jar.mn, and installer/package-manifest.in.
... if the nsimsgcloudfileprovider is being created as part of an
add-on, the
add-on must register the component in chrome.manifest.
...And 2 more matches
Mail composition back end
the caller has the ability to
add or remove listener interfaces to the nsimsgsend object and the interface can support multiple listeners.
...this can be nsnull if you want to do the delivery operation "blind" the
addlistener/removelistener methods let the caller
add and remove listeners to the sending interface.
... ns_imethod
addlistener(nsimsgsendlistener *alistener) = 0; ns_imethod removelistener(nsimsgsendlistener *alistener) = 0; sending listener interfaces the nsimsgsendlistener interface will let a caller keep track of the progress and any status of a send operation.
...And 2 more matches
Main Windows
mailoverlay.xul a really small overlay that only
adds a few “new message” and “new card” commands to the menus, along with their associated javascript.
... osx only: macmenuoverlay.xul a special overlay for osx that
adds a few items to the window menu.
... osx only: macmenuoverlay.xul a special overlay for osx that
adds a few items to the window menu.
...And 2 more matches
Thunderbird Configuration Files
to do
add a new preference, open the context menu (right-click) on any existing preference, go to the new menu, and select the type of preference.
...this folder does not exist by default, so you need to create it before you can start
adding your preferences.
...as with userchrome.css, this folder does not exist by default, so you need to create it before you can start
adding your preferences.
...And 2 more matches
Finding the code for a feature
as an example, i received the following inquiry, and i decided to follow my usual path and document what i do: hello i would like to
add colours and tags to specific emails...by using nsimsgtagservice, can this be done?
...(for debug builds, you can make it appear by default using "ac_
add_options --enable-extensions=default,venkman,inspector" which is part of my standard configuration).
...trying to figure that out from the code, i see that is just a clever way to do the
addkeywordstomessages or removekeywordsfrommessages method call.
...And 2 more matches
Thunderbird extensions
documentation getting started with thunderbird a brave, young developer wants to develop an
add-on for thunderbird.
... also see thunderbird 57-60
add-ons guide for changes introduced in thunderbird 60.
... play with a demo
add-on that exercises some more advanced thunderbird-specific features want to do even more?
...And 2 more matches
Using popup notifications
in
addition, notifications can be dismissed and recalled by clicking anywhere outside the notification, then clicking on the notification icon to bring it back again.
... a popup notification can include a text message, a button action, and zero or more
additional actions provided in a drop-down menu accessed through the notification's button.
...
adding an icon to your notification
adding an icon to a notification is simple.
...And 2 more matches
Plug-in Development Overview - Plugins
displaying messages on the status line functionally, your plug-in is seamlessly integrated into the browser and operates as an
addition to current browser capabilities.
... building plug-ins once you have
added the special code and
additional files to make your plug-in scriptable as described in the previous section, the build process is quite straightforward.
... in
addition to the dll that goes in the plugins folder, you must also place a type library and an extra header file in the appropriate places in your application directory.
...And 2 more matches
Introduction to DOM Inspector - Firefox Developer Tools
note: starting with firefox 3, the dom inspector is not included in firefox by default; instead, you must download and install it from the mozilla
add-ons web site.
...like the browser, the dom inspector includes an
address bar, and some of the same menus.
... in seamonkey
additional global menus will be available.
...And 2 more matches
Network request list - Firefox Developer Tools
y hover over the domain to see the ip
address.
... remote ip: the ip
address of the server answering the request.
... when you refresh the page, that specific url will be blocked and a message will be
added to the item in the list indicating that it has been blocked by the devtools.
...And 2 more matches
Edit CSS filters - Firefox Developer Tools
you can also
add new effects by selecting an effect from the dropdown list at the bottom of the dialog.
... once you have selected the effect you want to
add, click the plus sign (+) to the right of the dropdown list.
... once you have
added an effect, enter the settings you want and then press enter to update the effect.
...And 2 more matches
AbstractRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" f...
...by defining points within the document as offsets within a given node, those positions remain consistent with the content even as nodes are
added to, removed from, or moved around within the dom tree—within reason.
... as it turns out, the dom specification fortunately
addresses this exact issue.
...And 2 more matches
CSSRule - Web APIs
added value namespace_rule.
... working draft
added values keyframes_rule and keyframe_rule.
... working draft
added value font_feature_values_rule.
...And 2 more matches
DOMTokenList - Web APIs
domtokenlist.
add(token1[, token2[, ...tokenn]])
adds the specified token(s) to the list.
... domtokenlist.toggle(token [, force]) removes token from the list if it exists, or
adds token to the list if it doesn't.
... examples in the following simple example, we retrieve the list of classes set on a <p> element as a domtokenlist using element.classlist,
add a class using domtokenlist.
add(), and then update the node.textcontent of the <p> to equal the domtokenlist.
...And 2 more matches
How to create a DOM tree - Web APIs
dynamically creating a dom tree consider the following xml document: <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <
address street="321 south st" city="denver" state="co" country="usa"/> <
address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <
address street="321 north st" city="atlanta" state="ga" country="usa"/> <
address street="123 west st" city="seattle" state="wa" country="usa"/> <
address street="321 south avenue" cit...
...ted by mozilla, can be used to create an in-memory representation of this document like so: var doc = document.implementation.createdocument("", "", null); var peopleelem = doc.createelement("people"); var personelem1 = doc.createelement("person"); personelem1.setattribute("first-name", "eric"); personelem1.setattribute("middle-initial", "h"); personelem1.setattribute("last-name", "jung"); var
addresselem1 = doc.createelement("
address");
addresselem1.setattribute("street", "321 south st");
addresselem1.setattribute("city", "denver");
addresselem1.setattribute("state", "co");
addresselem1.setattribute("country", "usa"); personelem1.appendchild(
addresselem1); var
addresselem2 = doc.createelement("
address");
addresselem2.setattribute("street", "123 main st");
addresselem2.setattribute("city"...
..., "arlington");
addresselem2.setattribute("state", "ma");
addresselem2.setattribute("country", "usa"); personelem1.appendchild(
addresselem2); var personelem2 = doc.createelement("person"); personelem2.setattribute("first-name", "jed"); personelem2.setattribute("last-name", "brown"); var
addresselem3 = doc.createelement("
address");
addresselem3.setattribute("street", "321 north st");
addresselem3.setattribute("city", "atlanta");
addresselem3.setattribute("state", "ga");
addresselem3.setattribute("country", "usa"); personelem2.appendchild(
addresselem3); var
addresselem4 = doc.createelement("
address");
addresselem4.setattribute("street", "123 west st");
addresselem4.setattribute("city", "seattle");
addresselem4.setattribute("state", "wa");
addresselem4.setattribute("country", "usa"); personel...
...And 2 more matches
Element.getBoundingClientRect() - Web APIs
the element's size is equal to its width/height + p
adding + border-width in the case that the standard box model is being used, or width/height only if box-sizing: border-box has been set on it.
... if you need the bounding rectangle relative to the top-left corner of the document, just
add the current scrolling position to the top and left properties (these can be obtained using window.scrollx and window.scrolly) to get a bounding rectangle which is independent from the current scrolling position.
... <div></div> div { width: 400px; height: 200px; p
adding: 20px; margin: 50px auto; background: purple; } let elem = document.queryselector('div'); let rect = elem.getboundingclientrect(); for (var key in rect) { if(typeof rect[key] !== 'function') { let para = document.createelement('p'); para.textcontent = `${ key } : ${ rect[key] }`; document.body.appendchild(para); } } notice how the width/height are equal to the equal to...
...And 2 more matches
Fullscreen API - Web APIs
the fullscreen api
adds methods to present a specific element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.
...instead, it augments several other interfaces to
add the methods, properties, and event handlers needed to provide full-screen functionality.
... methods the fullscreen api
adds methods to the document and element interfaces to allow turning off and on full-screen mode.
...And 2 more matches
HTMLElement: animationcancel event - Web APIs
an event handler for this event can be
added by setting the onanimationcancel property, or using
addeventlistener().
... bubbles yes cancelable no interface animationevent event handler property onanimationcancel examples this code gets an element that's currently being animated and
adds a listener to the animationcancel event.
... const animated = document.queryselector('.animated'); animated.
addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of
addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></d...
...And 2 more matches
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignm...
... htmliframeelement.src is a domstring that reflects the src html attribute, containing the
address of the content to be embedded.
... living standard the following property has been
added: allowfullscreen.
...And 2 more matches
HTMLMediaElement - Web APIs
the htmlmediaelement interface
adds to htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
... htmlmediaelement.
addtexttrack()
adds a text track (such as a track for subtitles) to a media element.
...And 2 more matches
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
... htmlobjectelement.data returns a domstring that reflects the data html attribute, specifying the
address of a resource's data.
... the following properties have been
added: typemustmatch, contentwindow, willvalidate, validity, and validationmessage.
...And 2 more matches
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><pol...
... htmlselectelement.
add()
adds an element to the collection of option elements for this select element.
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
...And 2 more matches
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="midd...
... htmltableelement.cellp
adding is a domstring containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders.
... it reflects the obsolete cellp
adding attribute.
...And 2 more matches
Headers - Web APIs
these actions include retrieving, setting,
adding to, and removing headers from the list of the request's headers.
... you can
add to this using methods like append() (see examples.) in all methods of this interface, header names are matched by case-insensitive byte sequence.
... methods headers.append() appends a new value onto an existing header inside a headers object, or
adds the header if it does not already exist.
...And 2 more matches
MediaDevices.getUserMedia() - Web APIs
while information about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using
additional constraints.
... in
addition, user permission is always required to access the user's audio and video inputs.
... for
additional details on these requirements and rules, how they are reflected in the context in which your code is running, and about how browsers manage user privacy and security issues, read on.
...And 2 more matches
MediaStream - Web APIs
event handlers mediastream.on
addtrack an eventhandler containing the action to perform when an
addtrack event is fired when a new mediastreamtrack object is
added.
... mediastream.
addtrack() stores a copy of the mediastreamtrack given as argument.
... if the track has already been
added to the mediastream object, nothing happens.
...And 2 more matches
MutationObserverInit.childList - Web APIs
the mutationobserverinit dictionary's optional childlist property indicates whether or not to monitor the specified node or nodes for the
addition or removal of new child nodes.
... if childlist is false (the default),
adding or removing new nodes does not trigger mutation callbacks.
... by setting childlist to true, your callback will be invoked any time nodes are
added to or removed from the dom node or nodes being watched.
...And 2 more matches
Online and offline events - Web APIs
additionally, this property should update whenever a browser is no longer capable of connecting to the network.
...
additionally, the events bubble up from document.body, to document, ending at window.
... you can register listeners for these events in a few familiar ways: using
addeventlistener on the window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object.
...And 2 more matches
Payment Request API - Web APIs
credentials management: users can manage their credit cards and shipping
addresses directly in the browser.
... interfaces payment
address an object that contains
address information; used for billing and shipping
addresses, for example.
... dictionaries
addresserrors a dictionary containing strings providing descriptive explanations of any errors in any payment
address entries which have errors.
...And 2 more matches
PerformanceEntry - Web APIs
" + 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.
... navigation timing level 2 working draft navigation timing recommendation
adds the performancenavigationtiming interface and the navigation value for entrytype.
... user timing level 2 working draft user timing recommendation
adds the performancemark and performancemeasure interfaces as well as the mark and measure values for entrytype.
...And 2 more matches
RTCIceCandidate.port - Web APIs
the rtcicecandidate interface's read-only port property contains the port number on the device at the
address given by ip at which the candidate's peer can be reached.
... syntax var port = rtcicecandidate.port; value a 16-bit number indicating the port number on the device at the
address indicated by ip at which the candidate's peer can be reached.
... note: if port is null, passing the candidate to
addicecandidate() will fail, throwing an operationerror exception.
...And 2 more matches
RTCIceCandidate.usernameFragment - Web APIs
to do so, you can compare the value of usernamefragment to the current usernamefragment being used for the connection after receiving the candidate from the signaling server and before caling
addicecandidate() to
add it to the set of possible candidates.
... when the web app receives a message from the signaling server that includes a candidate to be
added to the rtcpeerconnection, you can (and generally should) simply call
addicecandidate().
...the function below, ssnewcandidate(), is called when a message, signalmsg, arrives from the signaling server that contains an ice candidate to be
added to the rtcpeerconnection.
...And 2 more matches
RTCPeerConnection: icecandidate event - Web APIs
an icecandidate event is sent to an rtcpeerconnection when an rtcicecandidate has been identified and
added to the local peer by a call to rtcpeerconnection.setlocaldescription().
... the event handler should transmit the candidate to the remote peer over the signaling channel so the remote peer can
add it to its set of remote candidates.
... rtcpeerconnection.onicecandidate = (event) => { if (event.candidate) { sendcandidatetoremotepeer(event.candidate) } else { /* there are no more candidates coming during this negotiation */ } } the remote peer, upon receiving the candidate, will
add the candidate to its candidate pool by calling
addicecandidate(), passing in the candidate string you have passed along using the signaling server.
...And 2 more matches
RTCPeerConnection: track event - Web APIs
the track event is sent to the ontrack event handler on rtcpeerconnections after a new track has been
added to an rtcrtpreceiver which is part of the connection.
... bubbles yes cancelable no interface rtctrackevent event handler property ontrack by the time this event is delivered, the new track has been fully
added to the peer connection.
... examples this example shows code that creates a new rtcpeerconnection, then
adds a new track event handler.
...And 2 more matches
Range.setStart() - Web APIs
examples highlight part of an element this example uses the range.setstart() and range.setend() methods to
add part of an
address to a range.
... the
address contains nine nodes: five text nodes, and four <br> elements.
... html <p id="
address">wyatt earp<br> 101 e.
...And 2 more matches
ServiceWorkerRegistration - Web APIs
next, it
adds an updatefound listener in which it uses the service worker registration to listen for further changes to the service worker's state.
... if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw.js') .then(function(registration) { registration.
addeventlistener('updatefound', function() { // if updatefound is fired, it means that there's // a new service worker being installed.
... working draft
adds the pushmanager property.
...And 2 more matches
SpeechGrammarList - Web APIs
speechgrammarlist.
addfromuri() takes a grammar present at a specific uri and
adds it to the speechgrammarlist as a new speechgrammar object.
... speechgrammarlist.
addfromstring() takes a grammar present in a specific domstring within the code base (e.g.
... stored in a variable) and
adds it to the speechgrammarlist as a new speechgrammar object.
...And 2 more matches
Storage Access API - Web APIs
in the case of breakage, site owners have often encouraged users to
add their site as an exception or to disable the policy entirely.
... in
addition, sandboxed <iframe>s cannot be granted storage access by default for security reasons.
... the api therefore also
adds the allow-storage-access-by-user-activation sandbox token.
...And 2 more matches
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
...
added the text() constructor.
...
added the assignedslot property.
...And 2 more matches
TrackEvent - Web APIs
the trackevent interface, which is part of the html dom specification, is used for events which represent changes to a set of available tracks on an html media element; these events are
addtrack and removetrack.
... constructor trackevent() creates and initializes a new trackevent object with the event type specified, as well as optional
additional properties.
... example this example sets up a function, handletrackevent(), which is callled for any
addtrack or removetrack event on the first <video> element found in the document.
...And 2 more matches
ValidityState.typeMismatch - Web APIs
the email input type expects one or more valid email
addresses, depending on whether the multiple attribute is present.
... a valid email
address includes an email prefix and a domain, with or without a top level domain.
... if the value of the email input is not an empty string, a single valid e-mail
address, or one or more comma separated email
address if the multiple attribute is present, there is a typemismatch.
...And 2 more matches
WebGLRenderingContext.blendEquation() - Web APIs
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.
... default value: gl.func_
add exception if mode is not one of the three possible values, a gl.invalid_enum error is thrown.
...And 2 more matches
Using WebRTC data channels - Web APIs
in this guide, we'll examine how to
add a data channel to a peer connection, which can then be used to securely exchange arbitrary data; that is, any kind of data we wish, in any format we choose.
... let datachannel = pc.createdatachannel("myapp channel"); datachannel.
addeventlistener("open", (event) => { begintransmission(datachannel); }); manual negotiation to manually negotiate the data channel connection, you need to first create a new rtcdatachannel object using the createdatachannel() method on the rtcpeerconnection, specifying in the options a negotiated property set to true.
... let datachannel = pc.createdatachannel("myapp channel", { negotiated: true }); datachannel.
addeventlistener("open", (event) => { begintransmission(datachannel); }); requestremotechannel(datachannel.id); in this code snippet, the channel is created with negotiated set to true, then a function called requestremotechannel() is used to trigger negotiation, to create a remote channel with the same id as the local channel.
...And 2 more matches
Writing a WebSocket server in C# - Web APIs
tcplistener constructor: tcplistener(system.net.ip
address local
addr, int port) local
addr specifies the ip of the listener, and port specifies the port.
... to create an ip
address object from a string, use the parse static method of ip
address.
... here's a barebones server implementation: using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ip
address.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the stream which is the communication channel.
...And 2 more matches
Window.ondragdrop - Web APIs
syntax window.ondragdrop = funcref; window.
addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered.
... the window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use
addeventlistener.
... see
addeventlistener for details.
...And 2 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
arg1, ..., argn optional
additional arguments which are passed through to the function specified by func once the timer expires.
... note: passing
additional arguments to setinterval() in the first syntax does not work in internet explorer 9 and earlier.
...also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; p
adding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intli...
...And 2 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
arg1, ..., argn optional
additional arguments which are passed through to the function specified by function.
... note: passing
additional parameters to the function in the first syntax does not work in internet explorer 9 and below.
... polyfill if you need to pass one or more arguments to your callback function, but need it to work in browsers which don't support sending
additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html5 standard arguments-passing functionality.
...And 2 more matches
Using the group role - Accessibility
when the role is
added to an element, the browser will send out an accessible group event to assistive technology products which can then notify the user about it.
... possible effects on user agents and assistive technology when the group role is
added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a group role in the operating system's accessibility api.
... 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.
...And 2 more matches
Using the link role - Accessibility
when this role is
added to an element, tab can be used to change focus to the link, and enter used to execute the link.
...native <a> elements also support keyboard and focus requirements by default, without need for
additional customization.
... possible effects on user agents and assistive technology when the link role is
added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a link role in the operating system's accessibility api.
...And 2 more matches
ARIA: cell role - Accessibility
if the rows that are visible are contiguous, and there are no cells with a colspan or rowspan greater than one, this property can be
added to the parent rows instead of all the rows' cells.
... keyboard interactions none required javascript features the first rule of aria use is if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and
adding an aria role, state or property to make it accessible, then do so.
...you can
add aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.
...And 2 more matches
ARIA: feed role - Accessibility
a feed is a dynamic scrollable list of articles in which articles are
added to or removed from either end of the list as the user scrolls.
...</section> description a feed is a page structure for a scrollable list of articles where scrolling may cause articles to be
added to the top or end of the list.
...if the
addition of articles occupies the main browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it back to false when processing ends, or the user may not see the updates.
...And 2 more matches
ARIA: row role - Accessibility
to create an aria row,
add role="row" to the container element.
... the first rule of aria use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and
adding an aria role, state or property to make it accessible, then do so.
...you can
add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.
...And 2 more matches
ARIA: rowgroup role - Accessibility
to create an aria table header, table footer or table body,
add role="rowgroup" to the element.
... the first rule of aria use is if you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and
adding an aria role, state or property to make it accessible, then do so.
...you can
add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.
...And 2 more matches
ARIA: listbox role - Accessibility
when the listbox role is
added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus.
... the first rule of aria use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and
adding an aria role, state or property to make it accessible, then do so.
... 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.
...And 2 more matches
ARIA: textbox role - Accessibility
additionally, either the textbox or a containing element with role combobox has a value for aria-haspopup that matches the role of the element that contains the list of suggested values.
... possible effects on user agents and assistive technology when the textbox role is
added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a textbox role in the operating system's accessibility api.
... 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.
...And 2 more matches
Keyboard - Accessibility
most interactive elements are focusable by default; you can make an element focusable by
adding a tabindex=0 attribute value to it.
... however, you should only
add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.
...you can make it focusable by
adding a tabindex=0 attribute value to it.
...And 2 more matches
::after (:after) - CSS: Cascading Style Sheets
it is often used to
add cosmetic content to an element with the content property.
... /*
add an arrow after links */ a::after { content: "→"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
...we can use these classes to
add pseudo-elements to the end of paragraphs.
...And 2 more matches
Coordinate systems - CSS: Cascading Style Sheets
the origin is inset by the distances specified by p
adding-left and p
adding-top.
...that means that a given point in an element within the document will keep the same coordinates in the page model unless the element moves (either directly by changing its position or indirectly by
adding or resizing other content).
...this means that the position of a given point within a document will change if the containing window is moved, for example, or if the user's screen geometry changes (by changing display resolution or by
adding or removing monitors to their system).
...And 2 more matches
CSS Animations tips and tricks - CSS: Cascading Style Sheets
.runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% { background: yellow } 100% { background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here.
...that's because the only way to play an animation again is to remove the animation effect, let the document recompute styles so that it knows you've done that, then
add the animation effect back to the element.
...this callback
adds the "changing" class back onto the box, so that the repaint will start the animation once again.
...And 2 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
if we need to
add an element we can use something with no semantic meaning.
...in
addition, the reordering will not change tab order.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a href="">one</a></div> <div class="box box2"><a href="">two</a></div> <div class="box box3"><a href="">three</a></div> <div class="box box4"><a href="">four</a></div> ...
...And 2 more matches
Using CSS transitions - CSS: Cascading Style Sheets
javascript examples care should be taken when using a transition immediately after:
adding the element to the dom using .appendchild() removing an element's display: none; property.
... <p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.getelementbyid('foo'); document.
addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort.
... simply
add a transition to the element and any change will happen smoothly: p { p
adding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h261pzo/291/ detecting the start and completion of a transition you can use the transitionend event to detect that an animation has finished running.
...And 2 more matches
Inline formatting context - CSS: Cascading Style Sheets
when an inline box is split, margins, borders, and p
adding have no visual effect where the split occurs.
... margins, borders, and p
adding in the inline direction are respected.
... in the example below you can see how the margin, border, and p
adding on the inline <span> element are
added.
...And 2 more matches
Visual formatting model - CSS: Cascading Style Sheets
much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have
added to this information.
...in
addition, some of the terminologies around the display have been updated and clarified in the years since css2.
... some elements may generate
additional boxes in
addition to the principal box, for example display: list-item generates more than one box (e.g.
...And 2 more matches
background-origin - CSS: Cascading Style Sheets
the background-origin css property sets the background's origin: from the border start, inside the border, or inside the p
adding.
... syntax /* keyword values */ background-origin: border-box; background-origin: p
adding-box; background-origin: content-box; /* global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the keyword values listed below.
... p
adding-box the background is positioned relative to the p
adding box.
...And 2 more matches
background-repeat - CSS: Cascading Style Sheets
round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be
added.
... when the next image is
added, all of the current ones compress to allow room.
... example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be
added.
...And 2 more matches
box-shadow - CSS: Cascading Style Sheets
the box-shadow css property
adds shadow effects around an element's frame.
...if the lists of shadows have different lengths, then the shorter list is p
added at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.
... html <blockquote><q>you may shoot me with your words,<br/> you may cut me with your eyes,<br/> you may kill me with your hatefulness,<br/> but still, like air, i'll rise.</q> <p>— maya angelou</p> </blockquote> css blockquote { p
adding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); } result setting zero for offset and blur when the x-offset, y-offset, and blur are all zero, the box shadow will be a solid-colored outline of equal-size on all sides.
...And 2 more matches
calc() - CSS: Cascading Style Sheets
the expression can be any simple expression combining the following operators, using standard operator precedence rules: +
addition.
...likewise, calc(8px + -50%) is treated as a length followed by an
addition operator and a negative percentage.
... the * and / operators do not require whitespace, but
adding it for consistency is both allowed and recommended.
...And 2 more matches
clear - CSS: Cascading Style Sheets
this is called clearfix, and one way to do it is to
add clear to a replaced ::after pseudo-element on it.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; p
adding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; p
adding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...And 2 more matches
mask-clip - CSS: Cascading Style Sheets
/* <geometry-box> values */ mask-clip: content-box; mask-clip: p
adding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: p
adding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: p
adding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
... p
adding-box the painted content is clipped to the p
adding box.
... p
adding this keyword behaves the same as p
adding-box.
...And 2 more matches
overflow-block - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the p
adding box's block start and block end edges.
... hidden content is clipped if necessary to fit the block dimension in the p
adding box.
... scroll content is clipped if necessary to fit in the block dimension in the p
adding box.
...And 2 more matches
overflow-inline - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the p
adding box's inline start and end edges.
... hidden content is clipped if necessary to fit the inline dimension in the p
adding box.
... scroll content is clipped if necessary to fit in the p
adding box in the inline dimension.
...And 2 more matches
overflow - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the p
adding box.
... hidden content is clipped if necessary to fit the p
adding box.
... clip like for hidden, the content is clipped to the element's p
adding box.
...And 2 more matches
Constraint validation - Developer guides
html5 introduced new mechanisms for forms: it
added new semantic types for the <input> element and constraint validation to ease the work of checking the form content on the client side.
... intrinsic and basic constraints in html5, basic constraints are declared in two ways: by choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail
address.
... typemismatch constraint violation <input type="email"> the value must be a syntactically valid email
address, which generally has the format username@hostname.tld.
...And 2 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
additional attributes in
addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes: attribute description checked boolean; if present, the checkbox is toggled on by default indeterminate a boolean which, if present, indicates that the value of the checkbox is indeterminate rather than true or false ...
... essentially, then, the indeterminate attribute
adds a third possible state to the checkbox: "i don't know." in this state, the browser may draw the checkbox in grey or with a different mark inside the checkbox.
... indeterminate state checkboxes in
addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate.
...And 2 more matches
<input type="image"> - HTML: Hypertext Markup Language
additional attributes in
addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data fo...
... in
addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form.
...p
adding).
...And 2 more matches
<input type="month"> - HTML: Hypertext Markup Language
you can also get and set the date value in javascript using the htmlinputelement.value property, for example: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '1978-06';
additional attributes in
addition to the attributes common to <input> elements, month inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the latest year and month to accept as a valid input min the earliest year and month to accept as a ...
... to help avoid this, you can use min and max to restrict the available dates (see setting maximum and minimum dates), and in
addition use the required attribute to make filling in the date mandatory.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
...And 2 more matches
<input type="text"> - HTML: Hypertext Markup Language
additional attributes in
addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minl...
... div { margin-bottom: 10px; position: relative; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
...use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } this renders like so: if you try to submit the form with no search term entered into it, the browser will show an error message.
...And 2 more matches
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
subtitles may contain
additional content, usually extra background information.
... src
address of the track (.vtt file).
... usage notes track data types the type of data that track
adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata.
...And 2 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
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.
... functional overview the cross-origin resource sharing standard works by
adding new http headers that let servers describe which origins are permitted to read that information from a web browser.
...
additionally, for http request methods that can cause side-effects on server data (in particular, http methods other than get, or post with certain mime types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the http options request method, and then, upon "approval" from the server, sending the actual request.
...And 2 more matches
CSP: report-uri - HTTP
so for compatibility with current browsers while also
adding forward compatibility when browsers get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.com; report-to groupname in browsers that support report-to, the report-uri directive will be ignored.
... content-security-policy: default-src https:; report-uri /csp-violation-report-endpoint/ /csp-violation-report-endpoint/ could for example run a php something like the following that logs the json detailing the violation and, if the violation is the first one
added to the log file, sends an email to an administrator: <?php // start configure $log_file = dirname(__file__) .
... '/csp-violations.log'; $log_file_size_limit = 1000000; // bytes - once exceeded no further entries are
added $email_
address = 'admin@example.com'; $email_subject = 'content-security-policy violation'; // end configuration $current_domain = preg_replace('/www\./i', '', $_server['server_name']); $email_subject = $email_subject .
...And 2 more matches
Protocol upgrade mechanism - HTTP
this means that a typical request that includes upgrade would look something like: get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 other headers may be required depending on the requested protocol; for example, websocket upgrades allow
additional headers to configure details about the websocket connection as well as to offer a degree of security in opening the connection.
... right after sending the 101 status code, the server can begin speaking the new protocol, performing any
additional protocol-specific handshakes as necessary.
...after creating the initial http/1.1 session, you need to request the upgrade by
adding to a standard request the upgrade and connection headers, as follows: connection: upgrade upgrade: websocket websocket-specific headers the following headers are involved in the websocket upgrade process.
...And 2 more matches
Proxy servers and tunneling - HTTP
forward proxies can also be anonymous proxies and allow users to hide their ip
address while browsing the web or using other internet services.
... forwarding client information through proxies proxies can make requests appear as if they originated from the proxy's ip
address.
...the ip
address of the original client is often used for debugging, statistics, or generating location-dependent content.
...And 2 more matches
Redirections in HTTP - HTTP
url redirection, also known as url forwarding, is a technique to give more than one url
address to a page, a form, or a whole web site/application.
...besides the small performance hit of an
additional round-trip, users rarely notice the redirection.
... when possible, use http redirects and don't
add <meta> element redirects.
...And 2 more matches
Introduction - JavaScript
there are also more advanced server side versions of javascript such as node.js, which allow you to
add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers).
...core javascript can be extended for a variety of purposes by supplementing it with
additional objects; for example: client-side javascript extends the core language by supplying objects to control a browser and its document object model (dom).
...inheritance is through the prototype mechanism, and properties and methods can be
added to any object dynamically.
...And 2 more matches
Using Promises - JavaScript
callbacks
added with then(), as above, will be called even after the success or failure of the asynchronous operation.
... multiple callbacks may be
added by calling then() several times.
...when that's the case, any callbacks
added to promise2 get queued behind the promise returned by either successcallback or failurecallback.
...And 2 more matches
Array - JavaScript
common operations create an array let fruits = ['apple', 'banana'] console.log(fruits.length) // 2 access an array item using the index position let first = fruits[0] // apple let last = fruits[fruits.length - 1] // banana loop over an array fruits.foreach(function(item, index, array) { console.log(item, index) }) // apple 0 // banana 1
add an item to the end of an array let newlength = fruits.push('orange') // ["apple", "banana", "orange"] remove an item from the end of an array let last = fruits.pop() // remove orange (from the end) // ["apple", "banana"] remove an item from the beginning of an array let first = fruits.shift() // remove apple from the front // ["banana"]
add an item to the beginning of an array let newle...
...ngth = fruits.unshift('strawberry') //
add to the front // ["strawberry", "banana"] find the index of an item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an item by index position let removeditem = fruits.splice(pos, 1) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let vegetables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(vegetables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removeditems = vegetables.splice(pos, n) // this is how to remove items, n defines the number of items to be removed, // starting at the index position specified by pos and progressing toward the end of array.
... array.prototype.push()
adds one or more elements to the end of an array, and returns the new length of the array.
...And 2 more matches
Set - JavaScript
instance methods set.prototype.
add(value) appends value to the set object.
... examples using the set object let myset = new set() myset.
add(1) // set [ 1 ] myset.
add(5) // set [ 1, 5 ] myset.
add(5) // set [ 1, 5 ] myset.
add('some text') // set [ 1, 5, 'some text' ] let o = {a: 1, b: 2} myset.
add(o) myset.
add({a: 1, b: 2}) // o is referencing a different object, so this is okay myset.has(1) // true myset.has(3) // false, since 3 has not been
added to the set myset.has(5) ...
...og(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} // (key and value are the same here) for (let [key, value] of myset.entries()) console.log(key) // convert set object to an array object, with array.from let myarr = array.from(myset) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] // the following will also work if run in an html document myset.
add(document.body) myset.has(document.queryselector('body')) // true // converting between set and array myset2 = new set([1, 2, 3, 4]) myset2.size // 4 [...myset2] // [1, 2, 3, 4] // intersect can be simulated via let intersection = new set([...set1].filter(x => set2.has(x))) // difference can be simulated via let difference = new set([...set1].filter(x => !s...
...And 2 more matches
new operator - JavaScript
(normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.) you can always
add a property to a previously defined object.
... for example, the statement car1.color = "black"
adds a property color to car1, and assigns it a value of "black".
...to
add the new property to all objects of the same type, you must
add the property to the definition of the car object type.
...And 2 more matches
Codecs used by WebRTC - Web media technologies
while compression is always a necessity when dealing with media on the web, it's of
additional importance when videoconferencing in order to ensure that the participants are able to communicate without lag or interruptions.
... in
addition to the mandatory codecs, some browsers support
additional codecs as well.
... in
addition to the mandatory audio codecs, some browsers support
additional codecs as well.
...And 2 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
jank problems when loading images in the olden days of web development, it was always seen as a good practice to
add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
...this wasn't an attractive thing for your users to see, and could also result in performance issues due to the repainting required after each image loads, hence
adding the attributes being a good idea.
... due to this work, browsers are working on
adding a new mechanism for sizing images before the actual image is loaded.
...And 2 more matches
How to make PWAs installable - Progressive web apps (PWAs)
this makes the web app easier to access;
additionally, you can specify that the app be launched in fullscreen or standalone mode, thus removing the default browser user interface that would otherwise be present, creating an even more seamless and native-like feel.
...
add to home screen "
add to home screen" (or a2hs for short) is a feature implemented by mobile browsers that takes the information found in an app's web manifest and uses them to represent the app on the device's home screen with an icon and name.
... if the user clicks the button, there is a final step showing what the app will look like, and letting the user choose if they definitely want to
add the app.
...And 2 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> in
addition, you can specify the opacity of either the fill or stroke separately in svg.
... stroke in
addition to its color properties, there are a few other attributes available to control the way a stroke is drawn on a line.
... there are
additional stroke and fill properties available, including fill-rule, which specifies how to color in shapes that overlap themselves; stroke-miterlimit, which determines if a stroke should draw miters; and stroke-dashoffset, which specifies where to start a dasharray on a line.
...And 2 more matches
Subresource Integrity - Web security
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.
... subresource integrity enables you to mitigate some risks of attacks such as this, by ensuring that the files your web application or web document fetches (from a cdn or anywhere) have been delivered without a third-party having injected any
additional content into those files — and without any other changes of any kind at all having been made to those files.
...
additionally, the sri hash generator at https://www.srihash.org/ is an online tool you can use to generate sri hashes.
...And 2 more matches
Using custom elements - Web Components
for example, connectedcallback is invoked each time the custom element is appended into a document-connected element, while attributechangedcallback is invoked when one of the custom element's attributes is
added, removed, or changed.
... attributechangedcallback: invoked each time one of the custom element's attributes is
added, removed, or changed.
... element, then attach empty <div> and <style> elements to the shadow root: const shadow = this.attachshadow({mode: 'open'}); const div = document.createelement('div'); const style = document.createelement('style'); shadow.appendchild(style); shadow.appendchild(div); the key function in this example is updatestyle() — this takes an element, gets its shadow root, finds its <style> element, and
adds width, height, and background-color to the style.
...And 2 more matches
Web Components
add child elements, event listeners, etc., to the shadow dom using regular dom methods.
... using shadow dom a guide that looks at shadow dom fundamentals, showing how to attach a shadow dom to an element,
add to the shadow dom tree, style it, and more.
... attributechangedcallback: invoked when one of the custom element's attributes is
added, removed, or changed.
...And 2 more matches
XPath
it uses a non-xml syntax to provide a flexible way of
addressing (pointing to) different parts of an xml document.
... it can also be used to test
addressed nodes within a document to determine whether they match a pattern or not.
... xpath:functions list and description of the core xpath functions and xslt-specific
additions to xpath.
...And 2 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
the above command will have generated hello2.html, which will have much the same content as the template with some glue code
added into load the generated wasm, run it, etc.
... emscripten requires a large variety of javascript "glue" code 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?)).
... now
add html_template/shell_minimal.html into this new directory too, just for convenience (you'd obviously put this in a central place in your real dev environment).
...And 2 more matches
Contributor's Guide - Archive of obsolete content
conversely, an
add-on process was supposed to run all the code associated with a single
add-on.
... neither content or
add-on proceses were ever actually implemented, but by the time they were cancelled, the sdk was already designed with them in mind.
... to understand this article, it's probably best to read it as if content and
add-on processes actually exist.
... getting started learn how to contribute to the
add-on sdk.
Program ID - Archive of obsolete content
the program id is a unique identifier for your
add-on.
... when you package your
add-on for distribution using jpm xpi, it will become the id field in the
add-on's install manifest.
...for example:
addons.mozilla.org uses it to distinguish between new
add-ons and updates to existing
add-ons, and the simple-storage module uses it to figure out which stored data belongs to which
add-on.
... if the package.json does include an id field, and it contains "@", then this is written into the install.rdf as the
add-on id.
SDK API Lifecycle - Archive of obsolete content
deprecation process deprecation in the chosen release, the sdk team will communicate the module's deprecation: update the module's stability index to be "deprecated" include a deprecation notice in the release notes, the
add-ons blog, and the jetpack google group.
...the sdk team will track usage of deprecated modules on
addons.mozilla.org and support developers migrating their code.
... the amo validator will throw errors when deprecated modules are used, and these
add-ons will therefore fail amo review.
...the sdk team will remove the corresponding documentation, and communicate the removal in the usual ways: the release notes, the
add-ons blog, and the jetpack google group.
hotkeys - Archive of obsolete content
assign hotkey combinations to functions in your
add-on.
...for example, this
add-on defines two hotkey combinations, to show and hide a panel: // define keyboard shortcuts for showing and hiding a custom panel.
...it's very easy to use combinations that clash with hotkeys defined for firefox or for other
add-ons.
... no matter what you choose, it's likely to annoy some people, and to clash with some other
add-on, so consider making the combination you choose user-configurable.
tabs - Archive of obsolete content
here's an
add-on that uses a toggle button to attach a stylesheet to the active tab, and detach it again.
... the stylesheet is called "style.css" and is located in the
add-on's "data" directory: var tabs = require("sdk/tabs"); var { attach, detach } = require('sdk/content/mod'); var { style } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private windows if your
add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser windows.
... converting to xul tabs to convert from the high-level tab objects used in this api to the low-level xul tab objects used in the tabs/utils api and by traditional
add-ons, use the viewfor() function exported by the viewfor module.
...if your
add-on does not support private browsing this will have no effect.
windows - Archive of obsolete content
with this module, you can: enumerate the currently opened browser windows open new browser windows listen for common window events such as open and close private windows if your
add-on has not opted into private browsing, then you won't see any private browser windows.
...if your
add-on does not support private browsing this will have no effect.
... var windows = require("sdk/windows").browserwindows; //
add a listener to the 'open' event windows.on('open', function(window) { myopenwindows.push(window); }); //
add a listener to the 'close' event windows.on('close', function(window) { console.log("a window was closed."); }); //
add a listener to the 'activate' event windows.on('activate', function(window) { console.log("a window was activated."); }); //
add a listener to the 'deactivate' even...
...in particular, if the user quits the browser then it's possible that your
add-on will be unloaded before all windows are closed.
core/promise - Archive of obsolete content
in the
add-on sdk we follow commonjs promises/a specification and model a promise as an object with a then method, which can be used to get the eventual return (fulfillment) value or thrown exception (rejection): foo().then(function success(value) { // ...
... // extract sql query then(re
addbasync); // 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 re
addbasync(extractquery(json)).then(function(data) { return writeasync(json.url, data); }); }); in general,...
... nesting is useful for computing values from more than one promise: function eventual
add(a, b) { return a.then(function (a) { return b.then(function (b) { return a + b; }); }); } var c = eventual
add(aasync(), basync()); error handling one sometimes-unintuitive aspect of promises is that if you throw an exception in the value handler, it will not be be caught by the error handler.
...
add-on sdk's promise module provides an api for doing that.
event/target - Archive of obsolete content
this module provides an exemplar eventtarget object, that implements an interface for
adding and removing event listeners of a specific type.
...
adding listeners eventtarget interface defines on method, that can be used to register event listeners on them for the given event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is an event `target` unless // intentionally overridden via `.bind()`.
...eventtarget interface defines convenience method for
adding one shot event listeners via method once.
... chaining emitters can also have their methods chained: target.on('message', handlemessage) .on('data', parsedata) .on('error', handleerror); eventtarget eventtarget is an exemplar for creating an objects that can be used to
add / remove event listeners on them.
remote/child - Archive of obsolete content
each frame then has a content property that's the top-level dom window for the frame, and
addeventlistener/removeeventlistener functions that enable you to listen to dom events dispatched by the frame.
...
addeventlistener
adds an event listener for dom events dispatched to any existing and future frames.
... at this point you can't access frame's content yet, but you can
add event listeners: const { frames } = require("sdk/remote/child"); frames.on("attach", function(frame) { console.log("new frame"); frame.
addeventlistener("domcontentloaded", function(e) { console.log(e.target.location.href); }); }); detach triggered when a frame is removed (for example, the user closed a tab).
... methods
addeventlistener(event, listener, iscapturing)
adds an event listener for dom events dispatched by this content frame.
window/utils - Archive of obsolete content
usage private windows with this module your
add-on will see private browser windows even if it has not explicitly opted into private browsing, so you need to take care not to store any user data derived from private browser windows.
...private windows will not be included in this list if your
add-on has not opted into private browsing.
... in order to see private windows in this list, your
add-on must have opted into private browsing and you must include the includeprivate key in the list of options: var allwindows = window_utils.windows(null, {includeprivate:true}); parameters type : string string identifying the type of window to return.
...the
add-on must also have opted into private windows for this to have an effect.
jpm-mobile - Archive of obsolete content
enables you to run and test
add-ons for firefox mobile (aka fennec).
... command reference there are currently two jpm commands: jpm-mobile run launch an instance of firefox with your
add-on installed.
... jpm-mobile test runs your
add-on's unit tests.
... jpm-mobile run this command runs a new instance of firefox with the
add-on installed: jpm-mobile run jpm-mobile run accepts the following options: --adb /path/to/adb provides the path to adb.
List Open Tabs - Archive of obsolete content
the following
add-on
adds an action button that logs the urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your
add-on's "data" directory as "icon-16.png".
... run the
add-on, load a couple of tabs and click the button.
...this
add-on attaches a script to all open tabs.
... the script
adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Unit Testing - Archive of obsolete content
unfortunately these functions are attached to the window object: since this object is not available in your main
add-on code, atob() and btoa() aren't available either.
...base64 = require("./base64"); var button = require("sdk/ui/button/action").actionbutton({ id: "base64", label: "base64", icon: "./icon-16.png", onclick: function() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your
add-ons "data" directory.
...if we run the
add-on and click the button, we should see the following logging output: info: agvsbg8= info: hello testing the base64 module navigate to the
add-on's test directory and delete the test-index.js file.
... at this point your
add-on ought to look like this: /base64 /data icon-16.png package.json readme.md index.js base64.js /test test-base64.js now execute jpm --verbose test from the
add-on's root directory.
Bookmarks - Archive of obsolete content
asses["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://mozilla.com/", null, null); if (!bmsvc.isbookmarked(uri)) { bmsvc.insertbookmark(bmsvc.toolbarfolder, uri, bmsvc.default_index, "mozilla"); } this example looks to see if the user already has a bookmark for the mozilla web site, and, if not, creates one,
adding it to the user's bookmarks toolbar.
... var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.
addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitem
added: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my
add-on is loaded onload: ...
...function() { bmsvc.
addobserver(myext_bookmarklistener, false); }, // this function is called when my
add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Custom about: URLs - Archive of obsolete content
setup for firefox 4+ this is a simple example of a custom about page for bootstrapped
addons.
...bals 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'; // const aboutpage_uri = 'chrome://myabout
addon/content/index.html'; class aboutpage { static get classid() { return components.id(`{${aboutpage_id}}`); } static get classdescription() { return aboutpage_description; } static get contractid() { return `@mozilla.org/network/protocol/about;1?what=${aboutpage_word}`; } static get queryinterface() { return xpcomutils.generateqi([ci.nsiaboutmodule]); } constructor() { object.free...
...n new this.component(); } register() { cm.registerfactory(this.component.classid, this.component.classdescription, this.component.contractid, this); } unregister() { cm.unregisterfactory(this.component.prototype.classid, this); } } instantiation firefox 4+ now in the startup procedure of your bootstrapped
addon make sure to do register the factory, for example: let factory; function startup(adata, areason) { // ...
...} and then on shutdown of your bootstrapped
addon make sure to destroy the factory: function shutdown(adata, areason) { if (areason == app_shutdown) { return } // ...
Extension Packaging - Archive of obsolete content
in the apache http server, this can be done by
adding the following directive to the configuration file or .htaccess:
addtype application/x-xpinstall .xpi install extension files directly if you know the location of the application (if you are installing an extension as part of the application installer, for example), you can install the extension files directly to <appdir>/extensions/<extensionid>.
... including
add-ons in a customized application a customized application can include
add-ons, including extensions and themes, by placing the unpacked (that is, not the xpi files, but the packages' contents) in the <appdir>/distribution/extensions directory.
... this directory containing the
add-on must be named the same as the id of the
add-on or theme.
...
add-ons packaged in this way will not be visible to the user.
Extension Theming Guidelines - Archive of obsolete content
branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension
adds and for every window that your extension overlays content into be sure to
add a stylesheet from your chrome skin package.
...if you are not then you run a risk of conflicting with content that other extensions
add to the window.
...however these are rarely part of the style of the widgets but more about
adding custom widgets.
... in this case you should
add a stylesheet to your chrome content package and apply the bindings there.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
« previousnext » fixme: we should include a link to the mdc list of snippets fixme: we need to
add a part about 'why and how to create your own component' c++/js this document was authored by hiroshi shimoda of clear code inc.
... listing 2: setting privileges netscape.security.privilegemanager.enableprivilege('universalxpconnect'); note: this is unneeded when the code is part of an extension, and will result in rejection if submitted to
addons.mozilla.org.
... permit by dialog try
adding the contents of listing 2 to test.xul, before the line var ioservice = …, and re-open it in firefox.
...to run the file's scripts without manual confirmation,
add the contents of listing 3 to the prefs.js file in the user profile folder.
Performance best practices in extensions - Archive of obsolete content
the browser window is blocked while your
add-on's load handler runs, so the more it does, the slower firefox will appear to the user.
... see the zombie compartments page, especially the proactive checking of
add-ons section.
... avoid dom mutation event listeners dom mutation event listeners are extremely expensive and, once
added to a document even briefly, significantly harm its performance.
...the listeners should be
added to the most specific element possible, and removed when not immediately necessary.
Creating reusable content with CSS and XBL - Archive of obsolete content
note: xbl cannot be loaded over http, so this technique is only useful for local content accessed using the file:/// scheme, or from
add-on code.
...copy and paste the content from here: /*** xbl demonstration ***/ [anonid="square"] { width: 20em; height: 20em; border: 2px inset gray; } [anonid="button"] { margin-top: 1em; p
adding: .5em 2em; } open the document in your browser and press the button.
...the button is
added by the binding.
... use the dom inspector tool to inspect the document, revealing the
added content.
Creating a status bar extension - Archive of obsolete content
this sample will
add a static text string to the status bar at the bottom of firefox browser windows.
... type the
addon type.
...an overlay lets you
add new content to an existing document.
...the xul overlay the xul overlay file contains the xul description of the user interface we want to
add to firefox.
Enabling Experimental Jetpack Features - Archive of obsolete content
the proposed method for accessing jetpack features that are still in development and may be
added in the future is inspired by python's future module.
... in python, you can call from __future__ import foo which
adds the functionality that foo yields to the script.
... in jetpack, we propse
adding a new function to the base namespace called importfromfuture.
...jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been formally accepted into the core without
additionally changing the script (barring any other changes made during integration).
Enabling - Archive of obsolete content
the proposed method for accessing jetpack features that are still in development and may be
added in the future is inspired by python's future module.
... in python, you can call from __future__ import foo which
adds the functionality that foo yields to the script.
... in jetpack, we propse
adding a new function to the base namespace called importfromfuture.
...jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been formally accepted into the core without
additionally changing the script (barring any other changes made during integration).
Enabling Experimental Jetpack Features - Archive of obsolete content
the proposed method for accessing jetpack features that are still in development and may be
added in the future is inspired by python's future module.
... in python, you can call from __future__ import foo which
adds the functionality that foo yields to the script.
... in jetpack, we propse
adding a new function to the base namespace called importfromfuture.
...jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been formally accepted into the core without
additionally changing the script (barring any other changes made during integration).
Plug-n-Hack Phase1 - Archive of obsolete content
then listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate
addon).
...due to a missing
addon) has been enabled.
... you can see an example of a configuration document in the zap pnh
addon.
...for testing); plug-n-hack requires tool and service manifests to be served from the same origin as the api endpoints but, for testing purposes, ringleader (the firefox
addon implementation of the browser component) allows you to set a preference to relax or disable origin checks.
Priority Content - Archive of obsolete content
if you would like to sign up to do the migration of any of these works, just "edit" this page and
add your name to the "migrators" list for the piece.
... if there is devedge content you think should be migrated that isn't currently on this list, feel free to
add it.
... devedge devedge mirror note: if you're digging around the mirror and see anything there that you think should be migrated to devmo that isn't on this list, feel free to
add it below.
... migrators: nigel mcfarlane and ben karel shorter works mostly completed: bypassing security restrictions and signing code original: bypassing security restrictions and signing code wiki location: bypassing security restrictions and signing code migrators: joel stanley i
added the related links from the original article.
Supporting per-window private browsing - Archive of obsolete content
} catch(e) { components.utils.reporterror(e); return; } } obtaining an nsiloadcontext for privacy-sensitive apis some apis (such as nsitransferable and nsiwebbrowserpersist) take nsiloadcontext arguments that are used to determine whether they should be classed as private or not (for example, whether the uri being persisted by saveuri should be
added to the permanent download history).
...as an example, if an
add-on
adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant window is the one that owns the element being targeted by the context menu (element.ownerdocument.defaultview).
...function pbobserver() { /* clear private data */ } var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.
addobserver(pbobserver, "last-pb-context-exited", false); preventing a private session from ending if there are unfinished transactions involving private data, where the transactions will be terminated by the ending of a private session, an
add-on can vote to prevent the session from ending (prompting the user is recommended).
...var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.
addobserver(function (asubject, atopic, adata) { asubject.queryinterface(components.interfaces.nsisupportsprbool); // if another extension has not already canceled entering the private mode if (!asubject.data) { /* you should display some user interface here */ asubject.data = true; // cancel the operation } }, "last-pb-context-exiting", false); forcing a channel into private mode usually, network channels inherit the privacy status of the document that created them, which means that they work correctly ...
The new nsString class implementation (1999) - Archive of obsolete content
however, it suffers from a few implementation details which need to be
addressed and that are the subject of this document.
...in
addition to the nsstrimpl api shown above, nsstring, nsautostring and nscstring all offer
additional api's (that all degrade to those found in nsstrimpl) for construction, searching and comparison.
...an
additional improvement has been made to nsautostring that allows it to use an arbitrarily sized stack based buffer rather than its own internal buffer.
...here's it's api: class nsimemoryagent : nsisupports { void* new(nsint32 asize)=0; //used for both alloc and realloc void* delete(void* aptr)=0; }; internationalization the new nsstrimpl/nsstring implementation
addresses at least two of the primary concerns of our i18n team.
Venkman Introduction - Archive of obsolete content
if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox
add-ons.
...first, from within the browser you want to host the debugger application, visit the firefox
add-ons page and click on the "install" link for the most recent version.
...the /help command can be used to get
additional information about a specific command.
... in
addition to step in, which will execute a single line of javascript and stop, step over can be used to step over a impending function call, and return control to the debugger when the call returns.
Event Handlers - Archive of obsolete content
mouse and key handlers have certain
additional properties that are supported by xbl.
...
additional attributes can be used to impose a filter on the event handler.
... when a filter is imposed,
additional conditions must be met before the event handler will fire.
... in
addition, mouse events can specify the button and the clickcount.
Example Sticky Notes - Archive of obsolete content
all namespaces above are supported by default and they do not require any
additional downloads or initializations.
...you
add a binding file using -moz-binding style rule and you
address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the target document dom tree).
...--> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be
added automatically around each bound element.
... = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; p
adding: 0.5em 0.5em; border: 2px solid blue; background-color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
Creating XPI Installer Modules - Archive of obsolete content
addons for various toolkit applications, such as firefox or thunderbird, should be packaged in a different way.
...under the chrome/ directory, you'll notice that in
addition to the package subdirectories, there are now also a handful of jar files, or java archives (see figure below).
... in
addition to these jar files, there are also several new rdf files.
...for barley, that installation script should read as follows: // initinstall(name + version, name, version); var err = initinstall("barley v", "barley", ""); logcomment("initinstall: " + err);
addfile("barley grain", // displayname from contents.rdf "barley.jar", // jar source getfolder("chrome"), // target folder ""); // target subdir // registerchrome(type, location, source) registerchrome(package | delayed_chrome, getfolder("chrome","barley.jar"), "content/"); if (err==success) performinstall(); else cancelinstall(err); note...
Methods - Archive of obsolete content
methods
adddirectory unpacks an entire subdirectory.
...
addfile unpacks a single file.
... getfolder returns an object representing a directory, for use with the
addfile method.
... logcomment
add a comment line to the install log.
XUL Events - Archive of obsolete content
the events listeners can be attached using
addeventlistener and removed using removeeventlistener.
... domnodeinserted this event is sent when a node is
added as a child of a element.
...if you capture this event at the document level, you can be notified of document changes warning: it should be noted that the
addition of any mutation event listeners to a document degrades the performance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect.
... window events the following events are dispatched to top-level dom windows and can be listened to using window.
addeventlistener.
Introduction to XUL - Archive of obsolete content
javascript functions may be
added in a fashion similar to html.
...at this time these
additional dom methods are available, though the code is of course the most accurate place to look for this information.
...but xul defines several element types unique to itself, which
add functionality to the window.
...in fact, xul largely uses extant widgets from html, with a few extensions and
additions.
insertItem - Archive of obsolete content
« xul reference home insertitem( id, beforenode, wrapper, beforepermanent ) not in seamonkey 1.x return type: element
add an item with the given id to the toolbar.
... the new item is
added just before the item given by the second argument.
... if the second argument is null, but the beforepermanent argument is true, the item is
added to the beginning of the toolbar before the first permanent item.
... otherwise, if the beforepermanent argument is false, the new item is
added to the end of the toolbar.
Panels - Archive of obsolete content
here is a complete example: <panel id="search-panel" position="after_start"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> <label value="search" popup="search-panel"/> the position attribute has been
added to the panel element with the value 'after_start'.
...for instance, using the search panel example above, we could
add a button which closes the panel when pressed: <script> function dosearch() { document.getelementbyid("search-panel").hidepopup(); } </script> <toolbarbutton label="search" type="panel"> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> </toolbarbutton> in this example, the dosearch() function is call...
...in this example a cancel button has been
added.
...in
addition, the norestorefocus attribute should be set to true in order to prevent the previously focused element from being refocused.
PopupEvents - Archive of obsolete content
this event is most commonly used to
add or adjust items on the popup based on the context.
...<script> function openfilemenu() { var filemenu = document.getelementbyid("file-menu"); filemenu.
addeventlistener("popupshown", filemenuopened, false); filemenu.open = true; } function filemenuopened(event) { if (event.target != document.getelementbyid("file-menupopup")) return; var filemenu = document.getelementbyid("file-menu"); filemenu.removeeventlistener("popupshown", filemenuopened, false); var openmenu = document.getelementbyid("open-menu"); openmenu.open = true; } </s...
...within this function, a popupshown event listener is attached to the 'file' menu using the
addeventlistener method.
...we need to make sure to do this to ensure that the event listener isn't
added multiple times.
Building Trees - Archive of obsolete content
this is much more efficient; creating large numbers of dom nodes
adds a lot of overhead.
...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.
...thus, the value attribute may be useful to associate an
additional value with a row since it will be easier to retrieve.
...alternatively, you could also use static values (in
addition to variables) in the properties attribute.
XML Assignments - Archive of obsolete content
in this case, we use an expression that returns the nodes as in earlier examples, and use some
additional syntax of the query to get the length of the names.
... to do this, we use an
additional element, the assign element.
... this element allows the use of
additional xpath expressions to get more data from the xml data.
...it allows us to declare
additional variables that may be used in the action body.
Toolbars - Archive of obsolete content
documentation xul school:
adding toolbars and toolbar buttons a helpful tutorial to creating toolbars and toolbar buttons.
... creating toolbar buttons how to use overlays to
add toolbar buttons to mozilla applications.
... mailing list newsgroup rss feed #extdev irc channel mozillazine forum about:
addons newsletter mozilla's web-tech blog mozdev project owners planet mozilla other community links...
... tools dom inspector edit the live dom (firefox and thunderbird) mozilla labs
add-on builder extension developer's extension a suite of development tools chrome list view files in chrome:// (firefox, thunderbird) extension wizard a web-based extension skeleton generator (firefox and thunderbird) ...
Tree Widget Changes - Archive of obsolete content
nscomptr<nsiatom> atom; acol->getatom(getter_
addrefs(atom)); if (atom = kmycol) ...
... one feature that has been
added is restorenaturalorder which may be used to restore the original order of the columns before the user moved them around.
...(do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in
addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
... the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has
additional styling capabilities.
Box Model Details - Archive of obsolete content
we've
added them to buttons and textboxes, but we can also
add them to spacers or boxes.
... in
addition, the flex attribute can be applied to any element.
...because all three elements are flexible, but they don't need any more room, the flexibility
adds no extra space.
...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.
Box Objects - Archive of obsolete content
some of these subtypes, such as the stack or listbox are needed for more complex layouts than the basic box, while others such as the button are used only to
add extra mouse and key event handling.
...x, y the x and y coordinates are referenced from the top left corner of the document in the window (that portion which excludes the window border and title bar) and refer to the top left corner of the element, including css p
adding.
... the top left corner of the document is that which is obtained from screen.mozinnerscreenx, screen.mozinnerscreeny screenx, screeny the screenx and screeny coordinates are referenced from the absolute top left corner of the screen (screen.top,screen.left) and refer to the top left corner of the element, including css p
adding and borders.
...width, height the width and height properties are also measured in pixels and return the width and height of the element, including css p
adding and borders.
Persistent Data - Archive of obsolete content
persist attribute to allow the saving of state, you simply
add a persist attribute to the element which holds a value you want to save.
...you could
add additional attributes by
adding a space and another attribute name to the persist attribute.
... you can
add the persist attribute to any element and store any attribute.
...our find files example let's
add the persist attribute to some of the elements in the find files dialog.
Simple Menu Bars - Archive of obsolete content
the most basic way is to
add a menu bar with a row of menus on it like many applications have.
...it accepts some of the same attributes plus some
additional ones: id the unique identifier of the menu title button.
...mozilla will look at the label attribute and
add an underline character to the character specified here.
...mozilla will look at the label attribute and
add an underline character to the character specified here.
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'.
... the currently selected tab element is given an
additional selected attribute which is set to true.
...
adding tabs to our find files dialog let's
add a second panel to the find files dialog.
...we'll
add some options on the second tab.
Tree Selection - Archive of obsolete content
if you
add the seltype attribute to the tree, set to the value single, the user may only select one row at a time.
...the onselect() event handler may be
added to the tree element.
...tree.view.selection.rangedselect(2,7,true); the last argument indicates whether to
add to the current selection or not.
... if true, the range will be
added to the existing selection.
XBL Attribute Inheritance - Archive of obsolete content
it would be useful to
add attributes to the bound elements that modify the inner elements.
...in
addition, changing the value of the attributes on the searchbox with a script will update the textbox and button also.
... you can
add the inherits attribute to as many elements as you wish, to inherit any number of attributes.
...if you need to map an attribute to the text content of the node, use "xbl:text" as the inner attribute, eg: <xul:description xbl:inherits="xbl:text=value"/> in the next section, we look at
adding properties, methods and events to a binding.
Using the standard theme - Archive of obsolete content
applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to
add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
...
adding custom styles in order to provide custom styling for some of your widgets (apart from the standard global skin) you can take two different routes.
... you can either
add multiple <tt>xml-stylesheet</tt> processing instructions to your xul file, or create an <tt>@import</tt> chain.
... multiple <tt>xml-stylesheet</tt> processing instructions simply
add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?x...
XUL Accesskey FAQ and Policies - Archive of obsolete content
how is an accesskey
added to a form control?
... an accesskey can be
added to an html or xul form control or label by using the accesskey attribute.
... for example, here's how we
add an accesskey to a xul button: <button label="apply instantly" accesskey="a" /> apply instantly - or - <button label="apply instantly" accesskey="a" /> apply instantly in mozilla, we use dtd's for one more layer of abstraction, for purposes of internationalization.
... where do accesskeys need to be
added?
XUL Changes for Firefox 1.5 - Archive of obsolete content
<scrollcorner> a <scrollcorner> element is
added which is used to create the small box in the intersection of the horizontal and vertical scrollbars.
... preferences system several elements have been
added which may be used for creating preference windows.
...along with the new preference elements and some
additional attributes for existing elements, they make it easy to set preferences without having to use code.
...this is used typically on gnome systems where possible values are: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print,
add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network.
XUL accessibility tool - Archive of obsolete content
future versions of the extension will be available from
addons.mozilla.org.
...
add usability, i18n, security and other considerations to xul a11y guidelines -- make them more general sprinkle the a11y techniques throughout the turorial and reference.
...improve tool along the way
add checking tool to dom inspector or other popular xul debugging tools.
...
add the tool into the
addons.mozilla.org review process go through the most useful/popular extensions with tool and fix a11y issues
add checker to tinderbox so that bugs are caught at checkin time some or all of this work could be done through grants, and a likely person to oversee the grant deliverables and milestones would be mark finkle.
checkbox - Archive of obsolete content
a label, specified with the label attribute, may be
added beside the check box.
...for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
listcell - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...ign, , 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, getuserdata, hasattribute...
...note that both an image and a label are
added when this style is set.
menu - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...ssupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appenditem( label, value ) return type: element creates a new item and
adds it to the end of the existing list of items.
menuitem - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in
addition to the dialog title.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... more information on
adding checkmarks to menus in the xul tutorial validate type: one of the values below this attribute indicates whether to load the image from the cache or not.
...ign, , 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, getuserdata, hasattribute...
menulist - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...ted(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appenditem( label, value, description ) return type: element creates a new menuitem element and
adds it to the end of the menulist.
notificationbox - Archive of obsolete content
methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...if another notification is already present with a higher priority, the new notification will be
added behind it.
...keep in mind that this is all xul so using html elements for styling might still need
additional css in order to work as you might expect.
...the value is specified when
adding the notification with appendnotification.
radio - Archive of obsolete content
a label, specified with the label attribute may be
added beside the radio button.
...for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
toolbarpalette - Archive of obsolete content
the children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be
added to the toolbar.
... do not
add the various spacing items, as those are
added automatically.
... you can
add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette.
...ign, , 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, getuserdata, hasattribute...
toolbox - Archive of obsolete content
note: gecko 2.0
adds support for external toolbars.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendcustomtoolbar( name, currentset ) firefox only return type: element
adds a custom toolbar to the toolbox with the given name.
... you can supply a comma-separated list of toolbar item ids as the second argument to
add some items by default.
window - Archive of obsolete content
this is used to hide chrome when showing in-browser ui such as the about:
addons page, and causes the toolbars to be hidden, with only the tab strip (and, if currently displayed, the
add-on bar) left showing.
...this is used to prevent the find bar from being displayed when it's not supported by the content (such as in the
add-ons manager tab).
...ign, , 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, getuserdata, hasattribute...
... to
add a favicon to the
address bar and browser tab (ie dialog is not a popup) then use the following code snippet to use the html namespace and link.
Building XULRunner with Python - Archive of obsolete content
or, if you are interested in working with xulrunner with python on linux, see mark lise's post with the python extensions enabled xulrunner provides python script access to the dom and xpcom in
addition to the usual java script.
... 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 c...
... using python in xul applications
add the following to yourprefs.js during development pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used withtype="application/x-python" attribute.
...for example def onload(): btntest = document.getelementbyid("btntest") btntest.
addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.
addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
CommandLine - Archive of obsolete content
this has the advantage to accumulate unhandled arguments until a specific handler is
added.
...od_regself(acompmgr, afilespec, alocation, atype) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.registerfactorylocation(class_id, class_name, contract_id, afilespec, alocation, atype); var catman = components.classes["@mozilla.org/categorymanager;1"] .getservice(nsicategorymanager); catman.
addcategoryentry("command-line-handler", cld_category, contract_id, true, true); }, unregisterself : function mod_unreg(acompmgr, alocation, atype) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.unregisterfactorylocation(class_id, alocation); var catman = components.classes["@mozilla.org/categorymanager;1"] ...
...ta) { var cmdline = asubject.queryinterface(components.interfaces.nsicommandline); var test = cmdline.handleflagwithparam("test", false); alert("test = " + test); }, register: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.
addobserver(this, "commandline-args-changed", false); }, unregister: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "commandline-args-changed"); } } var observer = new commandlineobserver(); // because we haven't ye...
...var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null);
addeventlistener("unload", observer.unregister, false); finally,
add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" ...
calICalendarView - Archive of obsolete content
calendar/base/public/calicalendarview.idlscriptable please
add a summary to this article.
...notice that a calicalendarview does not contain any
additem or refresh methods.
... therefore, it makes sense for an implementation of calicalendarview to
add a caliobserver to the its displaycalendar in order to be notified of
additions, modifications, and deletions of items it may be displaying.
...typically, one more day must be
added to it, in order to make it exclusive.
2006-11-17 - Archive of obsolete content
this user want to
add a filter to his tb, so that it could color the mail that is for a particular recepient, however, the regular expression that he uses doesn't work and want suggestion from others.
... what file format is tb's
address book using?
... tb's
address book uses mork (file format).
... solution is provided by jay lee should there be an
additional options for account configuration that just delete the messages from the server whenever they are deleted in tb?
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
bundle structure toolkit bundles can be used for all
add-ons including extensions, themes and plugins.
... every
add-on must have a unique id.
... the plugin must have a name to identify the plugin to the user in the list of
add-ons.
... providing updates when plugins are packaged in this way they can make use of the built in
add-on update system.
Syndicating content with RSS - Archive of obsolete content
adding a special <link> element to html page(s).
...
adding a special <a> element to html page(s).
...
adding the <link> often the data in an rss feed is also made available on an html web page.
... when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" />
adding the <a> while use of the html <link> element is powerful, it is mostly hidden.
Create Your Own Firefox Background Theme - Archive of obsolete content
creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars,
address bar, search bar and the tab strip.
... firefox may reveal more of the lower portion of the image if another toolbar or other ui element is
added to the top of the window.
... creating a theme footer image in older versions of firefox, or newer versions with certain
add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the
add-on and find bars.
... firefox may reveal more of the upper portion of the image if the find bar is open or if an extension
adds more height to the bottom of the window.
Scratchpad - Archive of obsolete content
for example, if you type document.
addeventlistener, then press ctrl + shift + space, you'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for the symbol.
...any variables you declare outside of a function will be
added to the global object for that tab.
...this is useful if you are working on firefox itself or developing
add-ons.
... to do this check "enable chrome and
add-on debugging" in the developer tool settings.
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
« previousnext » this article shows how to take an existing extension and update it so that it can be used in
additional mozilla applications.
...if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension
adding preferences to an extension localizing an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension.
...this is done by
adding new <targetapplication> tags to the install.rdf file, like this: <!-- describe the thunderbird versions we support --> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> <!-- describe the sunbird versions we support --> <em:targetapplication> <description> <em:id> {718e30fb-e89b-41dd-9da7-e25a45638b28}</em:id> <em:minversion>0.2</em:minversion> <em:maxvers...
...we need to
add lines to the manifest for thunderbird and sunbird, like this: # thunderbird overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul these lines cause the main thunderbird message list window and the main window in sunbird to be the target of the ov...
Object.prototype.__noSuchMethod__ - Archive of obsolete content
s parents function nomethod(name, args) { var parents = this.__parents_; // go through all parents for (var i = 0; i < parents.length; i++) { // if we find a function on the parent, we call it if (typeof parents[i][name] == 'function') { return parents[i][name].apply(this, args); } } // if we get here, the method hasn't been found throw new typeerror; } // used to
add a parent for multiple inheritance function
addparent(obj, parent) { // if the object isn't initialized, initialize it if (!obj.__parents_) { obj.__parents_ = []; obj.__nosuchmethod__ = nomethod; } //
add the parent obj.__parents_.push(parent); } an example of using this idea is shown below.
...inherits from namedthing and agedthing // as well as defining
address function person(name, age,
address){
addparent(this, namedthing.prototype); namedthing.call(this, name);
addparent(this, agedthing.prototype); agedthing.call(this, age); this.
address =
address; } person.prototype = { get
addr: function() { return this.
address; }, set
addr: function(
addr) { this.
address =
addr; } } var bob = new person('bob', 25, 'new york'); console.log('getage...
...'in' : 'not in') + ' bob'); // getname is not in bob console.log("bob's name is: " + bob.getname()); // bob's name is: bob console.log('get
addr is ' + (('get
addr' in bob) ?
... 'in' : 'not in') + ' bob'); // get
addr is in bob console.log("bob's
address is: " + bob.get
addr()); // bob's
address is: new york specifications not part of any standard.
Examples - Archive of obsolete content
a .html extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 1 - xhtml 1.0 strict as text/html</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body { p
adding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} --> </style> </head> <body> <h1>example 1 - xhtml 1.0 strict as text/html</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/html</code>.
...ld have a .xml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 2 - xhtml 1.0 strict as text/xml</title> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <style type="text/css"> <!-- body { p
adding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} --> </style> </head> <body> <h1>example 2 - xhtml 1.0 strict as text/xml</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/xml</code>.
...-> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 3 - xhtml 1.0 strict as application/xhtml+xml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body { p
adding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} --> </style> </head> <body> <h1>example 3 - xhtml 1.0 strict as application/xhtml+xml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
... */ body { p
adding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} ...
Bounce off the walls - Game development
add this to your code, somewhere below the existing variable declarations: var ballradius = 10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first.
...update the last code you
added to this: if(x + dx > canvas.width-ballradius || x + dx < ballradius) { dx = -dx; } if(y + dy > canvas.height-ballradius || y + dy < ballradius) { dy = -dy; } when the distance between the center of the ball and the edge of the wall is exactly the same as the radius of the ball, it will change the movement direction.
... subtracting the radius from one edge's width and
adding it onto the other gives us the impression of the proper collision detection — the ball bounces off the walls as it should do.
...in the fourth chapter we'll look at implementing a controllable p
addle — see p
addle and keyboard controls.
Collision detection - Game development
luckily enough we can use the physics engine to check collisions not only between single objects (like the ball and the p
addle), but also between an object and the group.
... brick/ball collision detection the physics engine makes everything a lot easier — we just need to
add two simple pieces of code.
... first,
add a new line inside your update() function that checks for collision detection between ball and bricks, as shown below: function update() { game.physics.arcade.collide(ball, p
addle); game.physics.arcade.collide(ball, bricks, ballhitbrick); p
addle.x = game.input.x || game.world.width*0.5; } the ball's position is calculated against the positions of all the bricks in the group.
... compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps we can hit the bricks and remove them, which is a nice
addition to the gameplay already.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } lines can be
addressed using their line number.
... lines are also created in the implicit grid when implicit tracks are created to hold content positioned outside of the explicit grid, however these lines cannot be
addressed by a number.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } naming lines the lines created in the explicit grid can be named, by
adding the name in square...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end]; grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end]; } .item { grid-column-start: col1-start; grid-column-end: col3-start; grid-row-start: row1-start; grid-row...
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
javascript // the primitive let foo = 5; // defining a function that should change the primitive value function
addtwo(num) { num += 2; } // another function trying to do the same thing function
addtwo_v2(foo) { foo += 2; } // calling our first function while passing our primitive as an argument
addtwo(foo); // getting the current primitive value console.log(foo); // 5 // trying again with our second function...
...
addtwo_v2(foo); console.log(foo); // 5 did you expect it to be 7 instead of 5?
... if so, read how this code runs: for both the
addtwo and
addtwo_v2 functions calls, javascript looks up the value for the identifier foo.
...these copies, existing only inside the functions' scopes, are accessible via the identifiers we specified in the functions' definitions (num for
addtwo, foo for
addtwo_v2) then, the functions' statements are executed: in the first function, a local num variable had been created.
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes
add prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.
...this has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to
add other browsers' prefixes in order to load popular web sites.
... lately, the trend is to
add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly.
...if an experimental property or method is
added to a standardized interface, then the individual method or property is prefixed.
Overflowing content - Learn web development
then we
add content that exceeds the allocated space.
... instead, perhaps you would like to
add scrollbars when content overflows?
...in
addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content.
...changing the value of overflow to hide content, or to
add scrollbars, is likely to be reserved for a few select use cases.
Test your skills: backgrounds and borders - Learn web development
backgrounds and borders 1 in this task we want you to
add a background, border, and some simple styling to a page header: give the box a 5px black solid border, with rounded corners of 10px.
...
add a background image (use the url balloons.jpg) and size it so that it covers the box.
... backgrounds and borders 2 in this task we want you to
add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
...
add the "learning" tag to your post so we are able to more easily find it.
Normal Flow - Learn web development
in
addition, as normal flow is designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout.
... first of all, individual element boxes are laid out by taking the elements' content, then
adding any p
adding, border and margin around them — it's that box model thing again, which we've looked at earlier.
...our total width and height is our content + p
adding + border width/height.</p> <p>we are separated by our margins.
...overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); p
adding: 10px; margin: 10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.
What is a web server? - Learn web development
an http server is software that understands urls (web
addresses) and http (the protocol your browser uses to view webpages).
... a dedicated web server can have the same ip
address all the time.
... this is known as a dedicated ip
address.
... (not all isps provide a fixed ip
address for home lines) a dedicated web server is typically maintained by a third-party.
Use JavaScript within a webpage - Learn web development
if you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its url: <script src="path/to/my/script.js"></script> writing javascript within html you may also
add javascript code between <script> tags rather than providing an src attribute.
... <script> window.
addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major issue in any software development.
...to make javascript work in your favor, it's worth knowing about certain best practices for
adding javascript: make all content available as (structured) text.
...
additionally, if an animation lasts more than a couple seconds, give the user a way to cancel it.
Structuring a page of content - Learn web development
the zip file contains: the html you need to
add structural markup to.
... project brief for this project, your task is to take the content for the homepage of a bird watching website and
add structural elements to it so it can have a page layout applied to it.
... you need to
add a suitable wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided css to the page by
adding another <link> element just below the existing one provided at the start.
... the provided css is designed so that when the correct structural elements are
added to the markup, they will appear green in the rendered page.
Test your skills: HTML images - Learn web development
you need to:
add the path to the image to an appropriate attribute to embed it on the page.
...
add some alternative text to an appropriate attribute to describe the image, for people that cannot see it.
... html images 2 in this task you already have a full-featured image, but we'd like you to
add a tooltip that appears when the image is moused over.
...what you need to do here is
add elements that will associate the image with the caption.
Assessment: Structuring planet data - Learn web development
add the provided caption to your table.
...
add a row to the table header containing all the column headers.
...
add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for.
...
add a black border just around the column that contains all the planet name row headers.
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.
... we
add a click event listener to it so that when the button is clicked: an alert() message appears.
... an example of an async callback is the second parameter of the
addeventlistener() method (as we saw in action above): btn.
addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-
added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the even...
... it worked :) if this confuses you, then consider the following smaller example: console.log("registering click handler"); button.
addeventlistener('click', () => { console.log("get click"); }); console.log("all done"); this is very similar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button.
Aprender y obtener ayuda - Learn web development
you can share the web
address of the example with them so they can see it.
...his: a nav menu is usually created from a list of links, something like: <ul> <li>first menu item</li> <li>second menu item</li> <li>third menu item</li> <li>etc.</li> </ul> to make all the items sit horizontally on a line, the easiest modern way is to use flexbox: ul { display: flex; } to remove unneeded spacing and bullet points, we can do this: ul { list-style-type: none; p
adding: 0; } etc.
... in
addition, the web has developer tools that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.
... if you are looking for some more specific information, you can
add other keywords as modifiers, for example "<video> element autoplay attribute", or "date.settime parameters".
Multimedia: Images - Learn web development
for the average website, 51% of its bandwidth comes from imagery, followed by video at 25%, so it's safe to say it's important to
address and optimize your multi-media content.
... in the future browsers might
add support for even more advanced formats like high efficiency image file format (heif) or av1 still image file format (avif).
...these also allow you to
add in an animated webp for all other modern browsers.
... secondly, with the adoption of priority hints, you can control the priority further by
adding an importance attribute to your image tags.
Learning area release notes - Learn web development
if you want to give feedback on any of these new
additions, please leave comments in our discourse forum.
... more "test your skills" sections have been
added.
... you can see these on: css layout: flexbox css layout: grids css layout: floats december 2019 we are
adding a new type of assessment article to the learning area — "test your skills" — which will offer several short questions aimed at rapidly testing whether you understood what is going on.
... this is in
addition to the longer assessment articles that you'll find in some of the learning modules already.
Introduction to the server side - Learn web development
after reading this article you'll understand the
additional power available to websites through server-side coding.
... 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.
...log in to your account — what
additional information can you see and modify?
...pick almost any large site that you are interested in (google, amazon, instagram, etc.) and create a new account using your email
address.
Website security - Learn web development
in other high-profile cases, millions of passwords, email
addresses, and credit card details have been leaked into the public domain, exposing website users to both personal embarrassment and financial risk.
... if a user clicks the submit button, an http post request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (
adding associated site cookies to requests is normal browser behavior).
...consider two-factor authentication for your site, so that in
addition to a password the user must enter another authentication code (usually one that is delivered via some physical hardware that only the user will have, such as a code in an sms sent to their phone).
... keep track of the most popular threats (the current owasp list is here) and
address the most common vulnerabilities first.
Routing in Ember - Learn web development
it contains the following contents: import emberrouter from '@ember/routing/router'; import config from './config/environment'; export default class router extends emberrouter { location = config.locationtype; rooturl = config.rooturl; } router.map(function() { this.route('completed'); this.route('active'); }); the highlighted lines were
added when the 2nd and 3rd commands above were run.
... creating the "index" route did not
add a route definition line to router.js, because like with url navigation and javascript module loading, "index" is a special word that indicates the default route to render, load, etc.
...
add the following below the existing getters: get completed() { return this.todos.filter(todo => todo.iscompleted); } models now we need to
add models to our route javascript files to allow us to easily return specific data sets to display in those models.
...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 todo 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 svelt...
Strategies for carrying out testing - Learn web development
you can see that opera is listed as having small but visible usage figures, so we should
add it to our support chart too as grade c.
... but an analytics history can be useful for finding support stats to influence say a new version of a company's site, or new features you are
adding to an existing site.
... when you've got a new
addition to your codebase that needs testing, before you start testing you should write out a list of testing requirements that need to pass to be accepted.
... when running tests, it can also be a good idea to: set up a separate browser profile where possible, with browser extensions and other such things disabled, and run your tests in that profile (see use the profile manager to create and remove firefox profiles and share chrome with others or
add personas, for example).
Mozilla’s UAAG evaluation report
(p1) p the following line can be
added to a user's prefs.js file to control blinking: user_pref("browser.blink_allowed", false); bug 89144 has been filed to expose this pref in the ui.
... zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be
added to prefs.js, if you just want to change the minimum font size for a certain font: user_pref("font.minimum-size.x-western", newfontsizeinpoints); for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw 4.2 configure font family.
... here are all the "hidden prefs" lines that can be
added to the user's prefs.js file, for controlling popup behavior: turn window.open off for particular sites: user_pref("capability.policy.popupsites.sites", "http://www.annoyingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.windowinternal.open", "noaccess"); or turn it off everywhere: user_pref("capability.policy.default.windowinternal...
...(p3) p can turn on and off toolbars under show/hide can customize personal bookmarks toolbar bug 15144 is for the ability to
add/remove toolbar icons bug 47418 is for the ability to rearrange toolbars guideline 12.
Browser chrome tests
asynchronous tests when writing async tests, you can use the
add_task method with promises.
...}); function test() { //
add some test related stuff.
...
adding a new browser chrome test to the tree to
add a new browser chrome test to the tree,
add it to the browser.ini file in the same folder as the test.
...if you are
adding the first tests in a directory, make sure to also include any head.js you
added to support-files, and
additionally, ensure that your browser.ini is referenced by a moz.build file somewhere, such as: browser_chrome_manifests += [ 'test/functional/mochitest/browser.ini' ] support-files once
added to support-file section of browser.ini support files may be referenced as https://example.com/browser/[path_to_file] or chrome://mochitests/content/browser/[path_to_file].
Command line options
adding this option bypasses downgrade protection.
... mail/news -
addressbook start with
address book.
...
add-ons gecko 1.9.2 note -install-global-extension and -install-global-theme have been removed from gecko 1.9.2 and upwards.
... note: since firefox 2.0.0.7, use of the -install-global-extension and -install-global-theme command line arguments have been restricted to only allow installing
add-ons that are on local disks or mapped drives.
Creating a Language Pack
pre-build steps in the .mozconfig, you want to have mk_
add_options moz_objdir=@topsrcdir@/obj-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=[browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code).
... while in that directory, issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir x-testing: browser chrome browser aboutcerterror.dtd //
add and localize this file ...
...
add the preference intl.locale.requested and set it to your language code, in this case, x-testing, or
add it in front of the current setting, seperated with a comma.
...issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir rm -f -rf mergedir macosx_deployment_target= compare-locales -m mergedir /users/your_id/mozilla/vc/mozilla-aurora/browser/locales/l10n.ini /users/your_id/mozilla/vc/l10n-central x-testing x-testing: browser chrome browser aboutcerterror.dtd //
add and localize this file ...
Creating Sandboxed HTTP Connections
the
addobserver method is used to
add an observer for a certain topic and takes in three agruments: an object than implements nsiobserver the topic to listen for.
...var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.
addobserver(listener, "http-on-modify-request", false); observerservice.
addobserver(listener, "http-on-examine-response", false); the final piece is to manipulate the cookies.
... http referrer if the http request needs to have a referrer set, two
additional steps are needed after the nsichannel is created, but before it is opened.
...like before, the nsiioservice is used: var referreruri = ioservice.newuri(referrerurl, null, null); next, the nsichannel is qied to nsihttpchannel and the referrer property is set to the generated nsiuri: var httpchannel = channel.queryinterface(components.interfaces.nsihttpchannel); httpchannel.referrer = referreruri; creating http posts to create an http post, a few
additional steps are required after the nsichannel is created.
Debugging JavaScript
to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and
add-on debugging" option in the developer tool settings.
... 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.
...in about:config (
add new pref, it doesn't exist per default).
... under microsoft windows you
additionally need to start firefox via the following command to have a native console : firefox.exe -console using normal javascript object inspection, you can write a function that dumps a whole object, similar to this ddumpobject().
Makefile - variables
variable name description
add_to_def_file cpp_sources cpp_unit_tests a list of source files to compile as unit tests.
... defines
additional preprocessor defines for c++ expand_mozlibname exports a list of exported header files and sources to install for external use.
... module_optimize_flags
additional flags for enabling or overriding compiler optimizations(-o2).
... todo: xpcom/xpinstall variables: https://developer.mozilla.org/en/
adding_xpcom_components_to_mozilla_build_system ...
Error codes returned by Mozilla APIs
in
addition, this error may occur when a relative path is supplied to a method that expects an absolute path and vice versa.
..._error_dom_not_function_err (0x805303ef) ns_error_dom_too_few_parameters_err (0x805303f0) ns_error_dom_bad_document_domain (0x805303f1) ns_error_dom_prop_access_denied (0x805303f2) ns_error_dom_xpconnect_access_denied (0x805303f3) ns_error_dom_bad_uri (0x805303f4) ns_error_dom_retval_undefined (0x805303f5) ns_error_dom_quota_reached (0x805303f6) an attempt was made to
add data into the local or global storage for a given domain that would exceed the amount allowed for that domain.
... ns_binding_retargeted (0x804b0004) the asynchronous request has been "retargeted" to a different "handler." this error code is used with load groups to notify the load group observer when a request in the load group is removed from the load group and
added to a different load group.
..._manager_veto (0x80570027) ns_error_xpc_interface_not_scriptable (0x80570028) ns_error_xpc_interface_not_from_nsisupports (0x80570029) ns_error_xpc_cant_get_jsobject_of_dom_object (0x8057002a) ns_error_xpc_cant_set_read_only_constant (0x8057002b) ns_error_xpc_cant_set_read_only_attribute (0x8057002c) ns_error_xpc_cant_set_read_only_method (0x8057002d) ns_error_xpc_cant_
add_prop_to_wrapped_native (0x8057002e) ns_error_xpc_call_to_scriptable_failed (0x8057002f) ns_error_xpc_jsobject_has_no_function_named (0x80570030) ns_error_xpc_bad_id_string (0x80570031) ns_error_xpc_bad_initializer_name (0x80570032) ns_error_xpc_has_been_shutdown (0x80570033) ns_error_xpc_cant_modify_prop_on_wn (0x80570034) ns_error_xpc_bad_convert_js_zero_isnot_null (0...
Message manager overview
ccess to content into separate scripts, which are called "frame scripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the
add-on sdk uses "content script" to refer to a similar but different kind of script.
... communicate with frame scripts using
addmessagelistener() and broadcastasyncmessage() or sendasyncmessage() functions.
...this is the recommended way to load a script that executes just once per child process, which is something you might want to do if you are interacting with some global service (for example,
adding listeners to observer notifications or registering components).
... this can be useful for
addons to register categories, observers and components in child processes.
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.
... see also using web workers using workers in javascript code modules worker sharedworker web workers specification workerglobalscope github :: chromeworker - a fully working demo
addon using js-ctypes from a chrome worker.
How to get a stacktrace for a bug report
if you have any
additional information about the crash, such as
additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box.
... the "details" button gives
additional data about the incident, however this is not useful in a bug report.
... to access all of your submitted reports type "about:crashes" into the firefox
address bar and press enter.
... if breakpad successfully sends the crash report to the reporting server then, by default, the files
added to the 'pending' subdirectory for the crash are removed, and a .txt file is placed in the 'submitted' directory containing the crash id created by the reporting server.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
many of the european languages use the basic latin alphabet with
additional accented characters for writing but they were not able to use them in domain names.
... how idn works when a browser sees a host name such as http://developer.mozilla.org, it passes a request to the dns resolver service (usually built into an os), which in turn sends a request to a nearest domain name server to return an ip
address that corresponds to the host name.
... this ip
address is then used to connect to the web server in question.
...this makes it possible for netscape 7.1/mozilla 1.4 users to access japanese host names under .jp top domain without any
additional setup using just the built-in idn functionality.
TypeListener
typelisteners can be registered with
addtypelistener() and will then receive notification as
addontype are registered and unregistered.
... method overview void ontype
added(in
addontype type) void ontyperemoved(in
addontype type) methods ontype
added() called when an
add-on type has been
added.
... void ontype
added( in
addontype type ) parameters type the
addontype that is being
added needsrestart true if an application restart is necessary for the change to take effect ontyperemoved() called when an
add-on type has been removed.
... void ontyperemoved( in
addontype type, ) parameters type the
addontype that has been removed ...
Downloads.jsm
downloads
added to the downloads.public and downloads.private lists are reflected in the downloads.all list, and downloads
added to the downloads.all list are also
added to either the downloads.public or the downloads.private list based on their properties.
... components.utils.import("resource://gre/modules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { let list = yield downloads.getlist(downloads.all); let view = { ondownload
added: download => console.log("
added", download), ondownloadchanged: download => console.log("changed", download), ondownloadremoved: download => console.log("removed", download) }; yield list.
addview(view); try { let download = yield downloads.createdownload({ source: "http://www.mozilla.org/", target: os.path.join(os.constants.path.tmpdir, "example-download.html"), ...
... }); list.
add(download); try { download.start(); alert("now monitoring all downloads.
... using it in a xul app in a xul standalone application (running with xulrunner or firefox --app), you have to do
additionnal things in order to use the new download manager.
Fonts for Mozilla 2.0's MathML engine
quick instructions try this test page to quickly determine whether you need to install
additional fonts and to follow the instructions below.
... on android, firefox os and other platforms where the instructions above do not work: install the mathml-fonts
add-on.
...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.
Mozilla Web Developer FAQ
the almost standards mode is like the standards mode except it
addresses the issue of the next question by rendering table cells with images in the traditional way.
... application/xhtml+xml was
added to the accept header in order to enable the serving of mathml to both mozilla and ie with apache without scripting back when the mathplayer plug-in for ie did not handle application/xhtml+xml.
... there is a fad of serving text/html to ie but serving the same markup with no
added value as application/xhtml+xml to gecko.
... comp.infosystems.www.authoring.html web authoring faq comp.infosystems.www.authoring.stylesheets faq ciwas stylesheet authoring faq comp.lang.javascript faq original document information author(s): henri sivonen (please, no authoring questions to this
address.) last updated date: may 12, 2007 copyright information: henri sivonen ...
Memory reporting
but it's a good idea to
add a comment indicating this decision not to measure, and the names of the unmeasured fields.
...for example: void foobar::
addsizeofexcludingthis(nsmallocsizeoffun amallocsizeof, size_t *afoosizeout, size_t* abarsizeout) const { *afoosizeout += ...; *abarsizeout += ...; } alternatively, you could create a struct: struct foobarsizes { size_t mfoo; size_t mbar; foobarsizes() { mozilla::podzero(this); } } void foobar::
addsizeofexcludingthis(nsmallocsizeoffun amallocsi...
...zeof, foobarsizes* asizes) const { asizes->mfoo += ...; asizes->mbar += ...; } note the
add prefix that makes this incrementing behaviour clear.
...this is ok, but it's worth
adding a comment explaining this to the method.
Patches and pushes
upload your plugins icon image to data kitchen to obtain its uri id and
add to the xml file within the image tag.
... in list.txt,
add the search plugin's xml filename (without extensions) on a new line and save.
... create a patch of the searchplugins directory by entering the following command in your command-line tool, where mypatch.diff is where you give your patch a name: $ hg
add mozilla/browser/searchplugins/ $ hg diff mozilla/browser/searchplugins/ > mypatch.diff attach your patch file to the bug by clicking the "
add an attachment" link.
... review, commit, & land
address any review comments made by the reviewers and update the patch until it receives an r+ rating.
L20n HTML Bindings
in
addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well.
... when all dom nodes are localized, the document element will fire a documentlocalized event, which you can listen to: document.
addeventlistener('documentlocalized', function() { // the dom has been localized and the user sees it in their language yourapp.init(); }); exposing context data you can expose important bits of data to the localization context in form of context data.
...we plan to
add support for a language pack service in the future that can tap into this scenario on the client side.
... <script type="application/l20n" src="../locales/strings.l20n"></script> note that you currently cannot use the manifest file and manually
add resources via script tags at the same time (bug 923670).
Midas
in
addition to the built-in commands, advanced editing can be done by manipulating the selection and range objects.
... decreasefontsize this command will
add a <small> tag around selection or at insertion point.
... formatblock h1, h2, h3, h4, h5, h6, p, div,
address, blockquote (more?) the selection surrounded by the given block element.
... increasefontsize this command will
add a <big> tag around selection or at insertion point.
Optimizing Applications For NSPR
this has disastrous implications on the generally accepted programming practice of taking the
address of a stack variable and giving that
address to another thread.
...for complete cross platform portability, do not take the
address of a stack variable and make that
address available to another thread.
... for more details, see the memo on automatic
addresses.
... functions called in an application by a shared library require an
additional function prolog.
I/O Functions
functions that operate on pathnames functions that act on file descriptors directory i/o functions socket manipulation functions converting between host and network
addresses memory-mapped i/o functions anonymous pipe function polling functions pollable events manipulating layers functions that operate on pathnames a file or directory in a file system is specified by its pathname.
... pr_open pr_delete pr_getfileinfo pr_getfileinfo64 pr_rename pr_access type praccesshow functions that act on file descriptors pr_close pr_read pr_write pr_writev pr_getopenfileinfo pr_getopenfileinfo64 pr_seek pr_seek64 pr_available pr_available64 pr_sync pr_getdesctype pr_getspecialfd pr_createpipe directory i/o functions pr_opendir pr_re
addir pr_closedir pr_mkdir pr_rmdir socket manipulation functions the network programming interface presented here is a socket api modeled after the popular berkeley sockets.
... list of functions: pr_openudpsocket pr_newudpsocket pr_opentcpsocket pr_newtcpsocket pr_importtcpsocket pr_connect pr_connectcontinue pr_accept pr_bind pr_listen pr_shutdown pr_recv pr_send pr_recvfrom pr_sendto pr_transmitfile pr_acceptread pr_getsockname pr_getpeername pr_getsocketoption pr_setsocketoption converting between host and network
addresses pr_ntohs pr_ntohl pr_htons pr_htonl pr_familyinet memory-mapped i/o functions the memory-mapped i/o functions allow sections of a file to be mapped to memory regions, allowing read-write accesses to the file to be accomplished by normal memory accesses.
...pollable events are implemented using a pipe or a pair of tcp sockets connected via the loopback
address, therefore setting and/or waiting for pollable events are expensive operating system calls.
PRSockOption
syntax #include <prio.h> typedef enum prsockoption { pr_sockopt_nonblocking, pr_sockopt_linger, pr_sockopt_reuse
addr, pr_sockopt_keepalive, pr_sockopt_recvbuffersize, pr_sockopt_sendbuffersize, pr_sockopt_iptimetolive, pr_sockopt_iptypeofservice, pr_sockopt_
addmember, pr_sockopt_dropmember, pr_sockopt_mcastinterface, pr_sockopt_mcasttimetolive, pr_sockopt_mcastloopback, pr_sockopt_nodelay, pr_sockopt_maxsegment, pr_sockopt_last } prsockoption; enumerators the enumeration has the following enumerators: pr_sockopt_nonblocking nonblocking i/o.
... pr_sockopt_reuse
addr allow local
address reuse.
... pr_sockopt_
addmember join an ip multicast group.
... pr_sockopt_mcastinterface ip multicast interface
address.
PRSocketOptionData
syntax #include <prio.h> typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_ttl; pruintn mcast_ttl; pruintn tos; prbool non_blocking; prbool reuse_
addr; prbool keep_alive; prbool mcast_loopback; prbool no_delay; prsize max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest
add_member; prmcastrequest drop_member; prnet
addr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live.
... reuse_
addr allow local
address reuse.
...
add_member join an ip multicast group.
... mcast_if ip multicast interface
address.
PR_CEnterMonitor
syntax #include <prcmon.h> prmonitor* pr_centermonitor(void *
address); parameter the function has the following parameter:
address a reference to the data that is to be protected by the monitor.
... returns the function returns one of the following values: if successful, the function returns a pointer to the prmonitor associated with the value specified in the
address parameter.
... description pr_centermonitor uses the value specified in the
address parameter to find a monitor in the monitor cache, then enters the lock associated with the monitor.
... if no match is found, an available monitor is associated with the
address and the monitor's entry count is incremented (so it has a value of one).
PR_CNotify
syntax #include <prcmon.h> prstatus pr_cnotify(void *
address); parameter the function has the following parameter:
address the
address of the monitored object.
... the calling thread must be in the monitor defined by the value of the
address.
... returns pr_success indicates that the calling thread is the holder of the mutex for the monitor referred to by the
address parameter.
... description using the value specified in the
address parameter to find a monitor in the monitor cache, pr_cnotify notifies single a thread waiting for the monitor's state to change.
PR_Connect
syntax #include <prio.h> prstatus pr_connect( prfiledesc *fd, const prnet
addr *
addr, printervaltime timeout); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket.
...
addr a pointer to the
address of the peer to which the socket is to be connected.
...if the socket is not bound, it will be bound to an arbitrary local
address.
...if pr_connect is invoked on a udp socket, it has an overloaded meaning: pr_connect merely saves the specified
address as the default peer
address for the socket, so that subsequently one can send and receive datagrams from the socket using pr_send and pr_recv instead of the usual pr_sendto and pr_recvfrom.
PR_PushIOLayer
adds a layer onto the stack.
... id a prdescidentity object for the layer on the stack above which the new layer is to be
added.
... layer a pointer to a prfiledesc object representing the new layer to be
added to the stack.
...use pr_geterror to get
additional information regarding the reason for the failure.
NSS_3.12.2_release_notes.html
new in nss 3.12.2 new functions in the nss shared library: sec_pkcs12
addcertorchainandkey (see p12.h) new pkcs11 errors (see secerr.h) sec_error_pkcs11_general_error sec_error_pkcs11_function_failed sec_error_pkcs11_device_error bugs fixed the following bugs have been fixed in nss 3.12.2.
... bug 200704: pkcs11: invalid session handle 0 bug 205434: fully implement new libpkix cert verification api from bug 294531 bug 302670: use the installed libz.so where available bug 305693: shlibsign generates pqg for every run bug 311483: exposing includecertchain as a parameter to sec_pkcs12
addcertandkey bug 390527: get rid of pkixerrormsg variable in pkix_error bug 391560: libpkix does not consistently return pkix_validatenode tree that truly represent failure reasons bug 408260: certutil usage doesn't give enough information about trust arguments bug 412311: replace pr_interval_no_wait with pr_interval_no_timeout in client initialization calls bug 423839:
add multiple pkcs#11 token password command line option to nss tools.
... bug 444974: crash upon reinsertion of e-identity smartcard bug 447563: modutil -
add prints no error explanation on failure bug 448431: pk11_createmergelog() declaration causes gcc warning when compiling with -wstrict-prototypes bug 449334: pk12util has duplicate options letters bug 449725: signver is still using static libraries.
... bug 450427:
add comodo ecc certification authority certificate to nss bug 450536: remove obsolete xp_mac code bug 451024: certutil.exe crashes with segmentation fault inside pr_cleanup bug 451927: security/coreconf/winnt6.0.mk has invalid defines bug 452751: slot leak in pk11_findslotsbynames bug 452865: remove obsolete linker flags needed when libnss3 was linked with libsoftokn3 bug 454961: fix the implementation and use of pr_fgets in signtool bug 455348: change hyphens to underscores in debug_$(shell whoami).
NSS 3.12.6 release notes
bug 275744: support for tls compression rfc 3749 bug 494603: update nss's copy of sqlite3 to 3.6.22 to get numerous bug fixes bug 496993:
add accessor functions for ssl_implementedciphers bug 515279: cert_pkixverifycert considers a certificate revoked if cert_processocspresponse fails for any reason bug 515870: gcc compiler warnings in nss 3.12.4 bug 518255: the input buffer for sgn_update should be declared const bug 519550: allow the specification of an alternate library for sqlite bug 524...
... bug 527759:
add multiple roots to nss (single patch) bug 528741: pkix_hash throws a null-argument exception on empty strings bug 530907: the peerid argument to ssl_setsockpeerid should be declared const bug 531188: decompression failure with https://livechat.merlin.pl/ bug 532417: build problem with spaces in path names bug 534943: clean up the makefiles in lib/ckfw/builtins bug 534945: lib/dev does not need to include headers from lib/ckfw bug 535669: move common makefile code in if and else to the out...
...side bug 536023: der_utctimetotime and der_generalizedtimetotime ignore all bytes after an embedded null bug 536474:
add support for logging pre-master secrets bug 537356: implement new safe ssl3 & tls renegotiation bug 537795: nss_initcontext does not work with nss_registershutdown bug 537829: allow nss to build for android bug 540304: implement ssl_handshakenegotiatedextension bug 541228: remove an obsolete nspr version check in lib/util/secport.c bug 541231: nssinit.c doesn't need to include ssl.h and sslproto.h.
... 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.1 release notes
the ability to create signed ocsp responses has been
added in nss 3.14.1.
... bug 357025 - nss 3.14
added support for tokens that make use of cka_always_authenticate.
... bug 802429 - in previous versions of nss, the "cipherorder" slot configuration flag was not respected, causing the most recently
added slot that supported the requested pkcs#11 mechanism to be used instead.
...in previous versions of nss, these algorithms would be handled by the most recently
added pkcs#11 token that supported them.
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.
...
added the tls p
adding extension.
...nss automatically
adds the p
adding extension to clienthello when necessary.
...
added a new macro cert_list_tail, defined in certt.h, for getting the tail of a certcertlist.
NSS 3.22 release notes
enforce an external policy on nss from a config file (bug 1009429) you can now
add a config= line to pkcs11.txt (assuming you are using sql databases), which will force nss to restrict the application to certain cryptographic algorithms and protocols.
... the mechanism type ckm_rsa_pkcs_pss is now supported for rsa in
addition to ckm_rsa_pkcs.
... in ssl.h ssl_peersignedcerttimestamps - get signed_certificate_timestamp tls extension data ssl_setsignedcerttimestamps - set signed_certificate_timestamp tls extension data new types in secoidt.h the following are
added to secoidtag: sec_oid_aes_128_gcm sec_oid_aes_192_gcm sec_oid_aes_256_gcm sec_oid_idea_cbc sec_oid_rc2_40_cbc sec_oid_des_40_cbc sec_oid_rc4_40 sec_oid_rc4_56 sec_oid_null_cipher sec_oid_hmac_md5 sec_oid_tls_rsa sec_oid_tls_dhe_rsa sec_oid_tls_dhe_dss sec_oid_tls_dh_rsa sec_oid_tls_dh_dss sec_oid_tls_dh_anon sec_oid_tls_ecdhe_ecdsa sec_oid_tls_ecdhe_rsa sec...
..._oid_tls_ecdh_ecdsa sec_oid_tls_ecdh_rsa sec_oid_tls_ecdh_anon sec_oid_tls_rsa_export sec_oid_tls_dhe_rsa_export sec_oid_tls_dhe_dss_export sec_oid_tls_dh_rsa_export sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is
added to sslextensiontype.
NSS 3.25 release notes
added support for chacha with tls 1.3.
...
added support for tls 1.2 ciphersuites that use sha384 as the prf.
... several functions have been
added to the public api of the nss cryptoki framework.
... the following ca certificate was removed cn = sonera class1 ca sha-256 fingerprint: cd:80:82:84:cf:74:6f:f2:fd:6e:b5:8a:a1:d5:9c:4a:d4:b3:ca:56:fd:c6:27:4a:89:26:a7:83:5f:32:31:3d the following ca certificates were
added cn = hellenic academic and research institutions rootca 2015 sha-256 fingerprint: a0:40:92:9a:02:ce:53:b4:ac:f4:f2:ff:c6:98:1c:e4:49:6f:75:5e:6d:45:fe:0b:2a:69:2b:cd:52:52:3f:36 cn = hellenic academic and research institutions ecc rootca 2015 sha-256 fingerprint: 44:b5:45:aa:8a:25:e6:5a:73:ca:15:dc:27:fc:36:d2:4c:1c:b9:95:3a:06:65:39:b1:15:82:dc:48:7b:48:33...
NSS 3.45 release notes
notable changes in nss 3.45 bug 1540403 - implement delegated credentials (draft-ietf-tls-subcerts) this
adds a new experimental function: ssl_delegatecredential note: in 3.45, selfserv does not yet support delegated credentials.
... bug 1550579 - replace arm32 curve25519 implementation with one from fiat-crypto bug 1551129 - support static linking on windows bug 1552262 - expose a function pk11_findrawcertswithsubject for finding certificates with a given subject on a given slot bug 1546229 -
add ipsec ike support to softoken bug 1554616 -
add support for the elbrus lcc compiler (<=1.23) bug 1543874 - expose an external clock for ssl this
adds new experimental functions: ssl_settimefunc, ssl_createantireplaycontext, ssl_setantireplaycontext, and ssl_releaseantireplaycontext.
...only relevant for clients that might have copied the unit test code verbatim bug 1550022 - ensure nssutil3 gets built on android bug 1528174 - chacha20poly1305 should no longer modify output length on failure bug 1549382 - don't leak in pkcs#11 modules if c_getslotinfo() returns error bug 1551041 - fix builds using gcc < 4.3 on big-endian architectures bug 1554659 -
add versioning to openbsd builds to fix link time errors using nss bug 1553443 - send session ticket only after handshake is marked as finished bug 1550708 - fix gyp scripts on solaris sparc so that libfreebl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_master_key_derive instead of vendor specific mechanism bug 1558126 - tls_aes_256...
..._gcm_sha384 should be marked as fips compatible bug 1555207 - helloretryrequestcallback return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_setwrapkey bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 -
add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.45 compatibility nss 3.45 shared libraries are backward compatible with all older nss 3.x shared libraries.
nss tech note1
if kind is an asn.1 sequence tag (sec_asn1_sequence), then you must specify
additional templates in a null-terminated array to define the content of the of the asn.1 sequence.
... if kind is the sec_asn1_choice modifier, you must also specify
additional templates in a null terminated array to list the various possible types that this component can have.
... in all other cases, only the first template structure passed to the decoder will be considered, even if
additonal templates are passed in an array.
...this feature will most likely never be
added, as this decoder gets most of its extra speed from not making a copy of the input data, which would be required when streaming.
PKCS11 FAQ
there are a number of bugs against softoken's non-compliance, but these bugs have lower priority than fixing nss's non-complient uses of pkcs #11 or
adding new features to nss.
... an email
address must be included in the attribute of the subject dn or the mail attribute of the subject dn.
... if the subject dn does not include an email
address, the certificate extension subjectaltname must include an email
address.
...is it picked up from the token when securing, or does nss expect it to be
added in its private key database to use it?
PKCS #11 Module Specs
in
additions applications/libraries should be able to ignore
additional name value pairs which are used to specify configuration for other applications.
... moduledb - this library includes nss specific functions to supply
additional module specs for loading.
... moduledbonly - this library has no pkcs #11 functions and is only used for loading
additional modules.
...typically 'tokens' would not be specified unless
additional databases are to be opened as
additional tokens.
PKCS11 Implement
table 1.2 summarizes the pkcs #11 functions (in
addition to the other functions described in this document) that nss expects each type of token to support.
...in
addition to c_sign and c_generatekeypair, signing and decryption tokens should also support c_decrypt and, optionally, c_unwrapkey.
... in the cryptographic modules frame, click
add.
... in the create a new security module dialog box,
add the security module name for your module and the full pathname for the security module file.
gtstd.html
the security module database tool allows you to
add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips-140-1 compliance, and assign default providers for cryptographic operations.
... >certutil -c -d ca_db -c "myco's root ca" -a -i server_db/server.req -o server_db/server.crt -2 -6 enter password or pin for "communicator certificate db": import (
add) the new server certificate to the server's certificate database in the server_db directory with the appropriate nickname.
... >certutil -c -d ca_db -c "myco's root ca" -a -i client_db/client.req -o client_db/client.crt -2 -6 enter password or pin for "communicator certificate db":
add the new client certificate to the client's certificate database in the client_db directory with the appropriate nickname.
...in
addition, you must use the following compiler flags: solaris flags: -c -o -kpic -dsvr4 -dsysv -d__svr4 -d__svr4__ -dsolaris -d_reentrant -dsolaris2_5 -d_svid_gettod -dxp_unix -udebug -dndebug windows nt flags: -c -o2 -md -w3 -nologo -d_x86_ -gt -dwinnt -dxp_pc -udebug -u_debug -dndebug -dwin32 -d_windows ...
S/MIME functions
nss_cmsencoder_start mxr 3.2 and later nss_cmsencoder_update mxr 3.2 and later nss_cmsencrypteddata_create mxr 3.2 and later nss_cmsencrypteddata_destroy mxr 3.2 and later nss_cmsencrypteddata_getcontentinfo mxr 3.2 and later nss_cmsenvelopeddata_
addrecipient mxr 3.2 and later nss_cmsenvelopeddata_create mxr 3.2 and later nss_cmsenvelopeddata_destroy mxr 3.2 and later nss_cmsenvelopeddata_getcontentinfo mxr 3.2 and later nss_cmsmessage_contentlevel mxr 3.2 and later nss_cmsmessage_contentlevelcount ...
...ientinfo_destroy mxr 3.2 and later nss_cmsrecipientinfo_encode mxr 3.8 and later nss_cmsrecipientinfo_getcertandkey mxr 3.8 and later nss_cmsrecipientinfo_unwrapbulkkey mxr 3.7.2 and later nss_cmsrecipientinfo_wrapbulkkey mxr 3.7.2 and later nss_cmssigneddata_
addcertchain mxr 3.2 and later nss_cmssigneddata_
addcertlist mxr 3.2 and later nss_cmssigneddata_
addcertificate mxr 3.2 and later nss_cmssigneddata_
adddigest mxr 3.2 and later nss_cmssigneddata_
addsignerinfo mxr 3.2 and later nss_cmssigneddata_create mxr ...
...data_setdigests mxr 3.2 and later nss_cmssigneddata_setdigestvalue mxr 3.4 and later nss_cmssigneddata_signerinfocount mxr 3.2 and later nss_cmssigneddata_verifycertsonly mxr 3.2 and later nss_cmssigneddata_verifysignerinfo mxr 3.2 and later nss_cmssignerinfo_
addmssmimeenckeyprefs mxr 3.6 and later nss_cmssignerinfo_
addsmimecaps mxr 3.2 and later nss_cmssignerinfo_
addsmimeenckeyprefs mxr 3.2 and later nss_cmssignerinfo_
addsigningtime mxr 3.2 and later nss_cmssignerinfo_create mxr 3.2 and later nss_cmssignerinfo_create...
...withsubjkeyid mxr 3.6 and later nss_cmssignerinfo_destroy mxr 3.2 and later nss_cmssignerinfo_getcertlist mxr 3.2 and later nss_cmssignerinfo_getsignercommonname mxr 3.2 and later nss_cmssignerinfo_getsigneremail
address mxr 3.2 and later nss_cmssignerinfo_getsigningcertificate mxr 3.2 and later nss_cmssignerinfo_getsigningtime mxr 3.2 and later nss_cmssignerinfo_getverificationstatus mxr 3.2 and later nss_cmssignerinfo_getversion mxr 3.2 and later nss_cmssignerinfo_includecerts mxr 3.2 and later nss_cmsutil_verificati...
Rhino shell
predefined properties scripts executing in the shell have access to some
additional properties of the top-level object.
... the following properties of the option object are processed: args - provides an array of
additional command arguments env - explicit environment object.
... seal(object) seal the specified object so any attempt to
add, delete or modify its properties would throw an exception.
... js> runcommand("bad_command", "--bad-arg", opt) js: "<stdin>", line 18: uncaught javascript exception: java.io.ioexception: bad_command: not found js> // passing explicit environment to the system shell js> runcommand("sh", "-c", "echo $env1 $env2", { env: {env1: 100, env2: 200}}) 100 200 0 js> // use args option to provide
additional command arguments js> var arg_array = [1, 2, 3, 4]; js> runcommand("echo", { args: arg_array}) 1 2 3 4 0 examples for windows are similar: js> // invoke shell command js> runcommand("cmd", "/c", "date /t") 27.08.2005 0 js> // run sort collectiong the output js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js>...
Creating JavaScript tests
only
add tests to these suites which test jit correctness or functionality.
... if you are writing a jstests,
additional testing functionality is provided for you in shell.js files.
... do not
add performance tests to the test suite.
...there is basically no cost to
adding a new test, so
add as many feature tests as needed to cover each feature orthogonally.
GC Rooting Guide
all js::mutablehandle<t>s are created through an explicit "&" -
address of operator - on a js::rooted<t> instance.
... js::mutablehandle<t> is exactly like a js::handle<t> except that it
adds a .set(t &t) method and must be created from a js::rooted<t> explicitly.
...the only exception to this is if they are
added as roots with the js::persistentrooted class, but don't do this unless it's really necessary.
... use an explicit
address-of-operator on js::rooted<t> to get a js::mutablehandle<t>.
How to embed the JavaScript engine
return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, global); js_initstandardclasses(cx, global); const char *script = "'hello'+'world, it is '+new date()"; const char *filename = "noname"; int lineno = 1; bool ok = js_evaluatescript(cx, global, script, strlen(script), filename, lineno, rval.
address()); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt); js_shutdown(); return 0; } spidermonkey 31 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the gl...
...here are sample mac and linux command lines (where <objdir> is the directory where spidermonkey was built): # if you're using debug build of spidermonkey, you need -ddebug in
addition to the command below.
...
add two arguments as integer.
...// js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.
address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): jsobject *target, *event; js::autovaluearray<1> argv(cx); /* * find event target and make event object to represent this click.
Statistics API
json api
addons can obtain the complete data in json format via an observer.
... the following
adds an observer using the jetpack framework.
... 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.
...
additionally, an incremental gc is divided into a series of slices (the division into slices is completely separate from the division into phases; neither one is a refinment of the other).
SpiderMonkey Internals
in
addition to the interpreter, spidermonkey contains a just-in-time (jit) compiler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 262-5.1 §15 with various extensions, and a few public apis.
...there is an
additional public api for javascript debuggers, jsdbgapi, but js/jsd/jsdebug.h might be a better api for debuggers.
...it is not nested in .h files, as other prerequisite .h files generally are, since it is also a direct dependency of most .cpp files and would be over-included if nested in
addition to being directly included.
...jsdhash uses open
addressing.
JSProtoKey
ch for jsproto_uint8clampedarray jsproto_proxy proxy mxr search for jsproto_proxy jsproto_weakmap weakmap mxr search for jsproto_weakmap jsproto_map map mxr search for jsproto_map jsproto_set set mxr search for jsproto_set jsproto_dataview dataview mxr search for jsproto_dataview jsproto_symbol symbol
added in spidermonkey 38 mxr search for jsproto_symbol jsproto_sharedarraybuffer sharedarraybuffer (nightly only) mxr search for jsproto_sharedarraybuffer jsproto_intl intl mxr search for jsproto_intl jsproto_typedobject typedobject (nightly only) mxr search for jsproto_typedobject jsproto_generatorfunction generatorfunction
added in...
... spidermonkey 31 mxr search for jsproto_generatorfunction jsproto_simd simd (nightly only) mxr search for jsproto_simd jsproto_weakset weakset
added in spidermonkey 38 mxr search for jsproto_weakset jsproto_sharedint8array sharedint8array (nightly only) mxr search for jsproto_sharedint8array jsproto_shareduint8array shareduint8array (nightly only) mxr search for jsproto_shareduint8array jsproto_sharedint16array sharedint16array (nightly only) mxr search for jsproto_sharedint16array jsproto_shareduint16array shareduint16array (nightly only) mxr search for jsproto_shareduint16array jsproto_sharedint32array sharedint32array (nightly only) mxr search for jsproto_sharedint32a...
...sharedfloat32array sharedfloat32array (nightly only) mxr search for jsproto_sharedfloat32array jsproto_sharedfloat64array sharedfloat64array (nightly only) mxr search for jsproto_sharedfloat64array jsproto_shareduint8clampedarray shareduint8clampedarray (nightly only) mxr search for jsproto_shareduint8clampedarray jsproto_typedarray typedarray
added in spidermonkey 38 mxr search for jsproto_typedarray jsproto_atomics atomics (nightly only) mxr search for jsproto_atomics description each of these types corresponds to standard objects in javascript.
... see also bug 789635 bug 645416 -
added jsproto_symbol bug 769872 -
added jsproto_intl bug 792439 -
added jsproto_weakset bug 896116 -
added jsproto_typedarray bug 904701 -
added jsproto_generatorfunction bug 914220 -
added jsproto_typedobject bug 933001 -
added jsproto_sharedarraybuffer bug 946042 -
added jsproto_simd bug 1054882 -
added jsproto_shared*arrays ...
JS_DefineProperty
const char16_t *name, size_t namelen, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); // ----
added in spidermonkey 45 ---- bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc, js::objectopresult &result); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc); bool js_defineucproperty(jscontext...
... *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handle<jspropertydescriptor> desc); // ----
added in spidermonkey 1.8.1 ---- bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlestring value, unsigned attrs, jsnative getter = nullptr, ...
...it differs from js_setproperty in that: it does not behave like ordinary property assignment in the javascript language; it allows the application to specify
additional details (getter, setter, and attrs) governing the new property's behavior; it never calls a setter; it can call the jsclass.
addproperty callback when js_setproperty would not, because it can replace an existing property.
... see also mxr id search for js_defineproperty mxr id search for js_defineucproperty mxr id search for js_definepropertybyid js_defineelement bug 461163 bug 1113369 --
added desc and result parameters ...
JS_NewExternalString
added in spidermonkey 17 type int (js_newexternalstringwithclosure only) indicates which string finalizer callback the javascript engine should use (later) to free the string buffer chars.
... this must be an id number previously returned by a successful call to js_
addexternalstringfinalizer.
...if you use this as a pointer, you should clean it up in the external string finalizer that was previously set up using js_
addexternalstringfinalizer.
... js_newexternalstringwithclosure works similarly, except it accepts an
additional parameter, closure, which is saved in the string's internal data structure.
JS_NewObjectForConstructor
syntax jsobject * js_newobjectforconstructor(jscontext *cx, const jsclass *clasp, const js::callargs& args); //
added in jsapi 32 jsobject * js_newobjectforconstructor(jscontext *cx, jsclass *clasp, const jsval *vp); //
added in jsapi 14, obsolete since jsapi 32 jsobject * js_newobjectforconstructor(jscontext *cx, const jsval *vp); // obsolete since jsapi 14 name type description cx jscontext * the context in which to create the new object.
...
added in spidermonkey 17 vp jsval * pointer to a constructor.
...
added in spidermonkey 38 description js_newobjectforconstructor creates a new object exactly as the given constructor would if invoked with new.
... see also mxr id search for js_newobjectforconstructor js_newobject object_to_jsval bug 581263 -
added bug 738075 -
added clasp parameter bug 959787 -
added args parameter ...
JS_PSGS
//
added in spidermonkey 31 #define js_self_hosted_getset(name, gettername, settername, flags) ...
... //
added in spidermonkey 31 #define js_ps_end ...
... see also mxr id search for js_psg mxr id search for js_psgs mxr id search for js_self_hosted_get mxr id search for js_self_hosted_getset jspropertyspec js_defineproperties js_initclass bug 684526 -
added.
... bug 938728 -
added js_self_hosted_get and js_self_hosted_getset.
SpiderMonkey 24
e4x, an extension to ecmascript
adding xml support, has been removed.
... js_getprototype, takes context as first argument js_encodestringtobuffer takes
add context as first argument, js_newruntime
adds a js_[use|no]_helper_threads flag delete property in jsclass definitions now use js_deletepropertystub garbage collection functions now take runtime argument most garbage collection functions now take a runtime argument instead of a context.
... javascript shell changes detail
added/removed methods here...
... don't
add anything here -- this is for after the release notes are completed.
TPS Bookmark Lists
the properties for this object include the uri, title, loadinsidebar, description, tags, keyword properties above, plus two
additional properties: location: the full path of the folder that the bookmark should be moved to position: the title of the existing bookmark item, in the current folder, where this bookmark should be moved to (i.e., this bookmark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { uri: "http://w...
...the properties for this object include the livemark, siteuri, feeduri properties above, plus two
additional properties: location: the full path of the folder that the livemark should be moved to position: the title of the existing bookmark item, in the current folder, where this livemark should be moved to (i.e., this livemark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { livemark: "liv...
...the properties for this object include the folder, description properties above, plus two
additional properties: location: the full path of the folder that this folder should be moved to position: the title of the existing bookmark item, in the current folder, where this folder should be moved to (i.e., this folder would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below this folder) example: { folder: "folderb", ch...
... bookmark item, in the current folder, where this separator should be moved to (i.e., this separator would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below this separator) example: { separator: true } bookmark lists and phase actions following are the functions you can use in phase actions related to bookmarks: bookmarks.
add - the bookmark items in the list are
added to the end of their parent folder in the specified order.
Manipulating bookmarks using Places
asses["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://mozilla.com/", null, null); if (!bmsvc.isbookmarked(uri)) { bmsvc.insertbookmark(bmsvc.toolbarfolder, uri, bmsvc.default_index, "mozilla"); } this example looks to see if the user already has a bookmark for the mozilla web site, and, if not, creates one,
adding it to the user's bookmarks toolbar.
... var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.
addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitem
added: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my
add-on is loaded onload: ...
...function() { bmsvc.
addobserver(myext_bookmarklistener, false); }, // this function is called when my
add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
How to build an XPCOM component in JavaScript
if you are looking for
add-on sdk solution for xpcom javascript components then check out platform/xpcom module first.
... for a new component in firefox/thunderbird/b2g if you are
adding a new feature to applications in the mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib.
... _xpcom_categories: [{ // each object in the array specifies the parameters to pass to // nsicategorymanager.
addcategoryentry().
...when set to true, and only if 'value' is not // specified, the concatenation of the string "service," and the object's contractid // is passed as avalue parameter of
addcategoryentry.
XPCOM changes in Gecko 2.0
to
add a category entry, you must insert the following line to your chrome.manifest: category profile-after-change mycomponent @foobar/mycomponent;1 important: formerly, the contract id of the category entry was prefixed with "service," if the component was implemented as a service.
...previously, whenever gecko detected that the application version had changed, or one or more extensions was
added, removed, enabled, or disabled, it was necessary to throw away all existing component registrations, then restart the application (what we call the "extension manager restart") during its startup process.
...if your
add-on depends upon xbl bindings attached to content objects—for example, the ability to call functions or get and set properties created by the xbl binding—you will need to use the xpcnativewrapper property wrappedjsobject to access wrapped objects.
...this may be the case if, for example, you've written an extension that
adds a delete button to a web mail service, and the service defines a window.delete() function that you need to call.
Packaging WebLock
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.
...once triggered (see the weblock trigger script), the installation script: downloads the weblock component and places it in the components directory copies the weblock subdirectory in the mozilla chrome application subdirectory registers both the component and the ui the xpinstall api provides such essential methods[essential-methods] as initinstall, registerchrome,
addfile, and others.
... weblock installation script // initialize the installation var err = initinstall("weblock", "weblock", 1.0); var componentsdir = getfolder("components"); var cf = getfolder("chrome"); //
add the dll and say where it'll go
addfile("weblock.dll", 1.0, "weblock.dll", componentsdir, ""); //
add the typelib also
addfile("weblock.xpt", "1.0", "weblock.xpt", componentsdir, ""); //
add the weblock subdirectory of the xpi and specify that // it be installed in the chrome application directory err =
adddirectory("weblock", "1.0", "", chromedir, ""); // ?
XPCOM hashtable guide
items are found,
added, and removed from the hashtable by using the key.
... inserting/removing: o(n):
adding and removing items from a large array can be time-consuming o(1):
adding and removing items from hashtables is a quick operation wasted space: none: arrays are packed structures, so there is no wasted space.
... hashtables are useful for sets of data that need swift random access; with non-integral keys or non-contiguous integral keys; or where items will be frequently
added or removed.
... the hashtables that hold references to pointers (nsrefptrhashtable and nsinterfacehashtable) also have getweak methods that return non-
addrefed pointers.
Components.utils.evalInWindow
this is useful for privileged code, such as
add-on code, to access variables and apis defined in web content.
...example suppose a page script defines a variable: // page-script.js var somelocalvariable = { name: "selection1", node: document.documentelement }; an
add-on script or other privileged script can access the variable using evalinwindow(): //
add-on-script.js var result = components.utils.evalinwindow("somelocalvariable", contentwindow); console.log(result); // {"name":"selection1","node":{}} the
add-on code can modify the variable as well, of course: //
add-on-script.js components.utils.evalinwindow("somelocalvariable.newprop = 42", contentwindow)...
...; // page-script.js console.log(window.somelocalvariable.newprop); // 42 but note that the
add-on script must trust that the page script has not redefined the setter on somelocalvariable: unlike xraywrappers, evalinwindow() does not provide x-ray vision.
... if the returned object contains a function, calls to evalinwindow() will throw an error: // page-script.js function bar() { } var somelocalvariablecontainingafunction = {name: "selection1", foo : bar}; //
add-on-script.js components.utils.evalinwindow("somelocalvariablecontainingafunction", contentwindow); // error, function can't be cloned ...
IAccessibleTable2
if any of the cells in the selected column span
additional columns, the cells in those columns are also selected.
...if any of the cells in the selected row span
additional rows, the cells in those rows are also selected.
...if any of the cells in the selected column span
additional columns, the cells in those columns are also unselected.
...if any of the cells in the selected row span
additional rows, the cells in those rows are also unselected.
imgIContainer
as a service: var imgicontainer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.imgicontainer); method overview void
addrestoredata([array, size_is(acount), const] in char data, in unsigned long acount); native code only!
... obsolete since gecko 2.0 methods native code only!
addrestoredata obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
...void
addrestoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing description native code only!appendframe obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
...
adds to the end of the list of frames.
mozISpellCheckingEngine
implement this interface to
add support for a new spell checking engine.
...method overview void
adddirectory(in nsifile dir); boolean check(in wstring word); void getdictionarylist([array, size_is(count)] out wstring dictionaries, out pruint32 count); void removedirectory(in nsifile dir); void suggest(in wstring word,[array, size_is(count)] out wstring suggestions, out pruint32 count); attributes attribute type description copyright wstring ...
... methods
adddirectory()
adds all the dictionaries in the specified directory to the spell checker.
... void
adddirectory( nsifile dir ); parameters dir an nsifile object indicating the directory from which to
add dictionaries.
mozIStorageAggregateFunction
it allows consumers to
add aggregate functions that are available to sql queries and triggers.
... storage/public/mozistorageaggregatefunction.idlscriptable please
add a summary to this article.
...a[i] - mean; data[i] = value * value; } total = 0; for (pruint32 i = 0; i < data.length(); i++) total += data[i]; nscomptr<nsiwritablevariant> result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasdouble(sqrt(double(total) / double(data.length()))); ns_ensure_success(rv, rv); ns_
addref(*_result = result); return ns_ok; } private: nstarray<print32> mnumbers; }; // now, register our function with the database connection.
...nscomptr<mozistoragestatement> stmt; rv = dbconn->createstatement(ns_literal_cstring( "select stddev(value) from some_table"), getter_
addrefs(stmt) ); ns_ensure_success(rv, rv); prbool hasmore; while (ns_succeeded(stmt->executestep(&hasmore)) && hasmore) { // handle the results } ...
mozIStorageFunction
it allows consumers to
add functions that are available to sql queries and triggers.
... storage/public/mozistoragefunction.idlscriptable please
add a summary to this article.
...rray *aarguments, nsivariant **_result) { print32 value; nsresult rv = aarguments->getint32(&value); ns_ensure_success(rv, rv); nscomptr<nsiwritablevariant> result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasint64(value * value); ns_ensure_success(rv, rv); ns_
addref(*_result = result); return ns_ok; } }; // now, register our function with the database connection.
...nscomptr<mozistoragestatement> stmt; rv = dbconn->createstatement(ns_literal_cstring( "select square(value) from some_table"), getter_
addrefs(stmt) ); ns_ensure_success(rv, rv); prbool hasmore; while (ns_succeeded(stmt->executestep(&hasmore)) && hasmore) { // handle the results } see also storage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database.
nsIAppShell
resumenative() resumes the use of
additional platform-specific methods to run() gecko events on the main application thread.
...suspendnative() suspends the use of
additional platform-specific methods (besides the nsiappshell->run() event loop) to run gecko events on the main application thread.
... under some circumstances these "
additional methods" can cause gecko event handlers to be re-entered, sometimes leading to hangs and crashes.
...on some platforms (those that do not use any "
additional methods") this will be a no-op.
nsIBlocklistPrompt
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void prompt([array, size_is(acount)] in nsivariant a
addons, [optional] in pruint32 acount); methods prompt() prompt the user about newly blocked
addons.
... the prompt is then responsible for soft-blocking any
addons that need to be afterwards.
... void prompt( [array, size_is(acount)] in nsivariant a
addons, in pruint32 acount optional ); parameters a
addons an array of
addons and plugins that are blocked.
... these are javascript objects with properties: name - the plugin or extension name version - the version of the extension or plugin icon - the plugin or extension icon disable - can be used by the nsiblocklistprompt to allows users to decide whether a soft-blocked
add-on should be disabled blocked - true if the item is hard-blocked, false otherwise item - the nsiplugintag or
addon object acount optional the number of
addons.
nsIClipboardDragDropHookList
it provides basic operations such as
adding, removing and enumerating clipboard hooks for the nsiclipboarddragdrophooks interface.
...method overview void
addclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); nsisimpleenumerator gethookenumerator(); void removeclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); methods
addclipboarddragdrophooks() this method
adds a hook to the list.
... void
addclipboarddragdrophooks( in nsiclipboarddragdrophooks ahooks ); parameters ahooks implementation of hooks.
... gethookenumerator() this method retrieves an enumerator for all hooks which have been
added.
nsICrashReporter
methods annotatecrashreport()
add some extra data to be submitted with a crash report.
... void annotatecrashreport( in acstring key, in acstring data ); parameters key name of the data to be
added.
... data data to be
added.
...void appendappnotestocrashreport( in acstring data ); parameters data data to be
added.
nsIDNSService
resolve_disable_ipv6 (1 << 5) if this flag is set, only ipv4
addresses will be returned by asyncresolve() and resolve().
...nsicancelable asyncresolve( in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget ); parameters ahostname the host name or ip-
address-literal to resolve.
...nsidnsrecord resolve( in autf8string ahostname, in unsigned long aflags ); parameters ahostname the host name or ip-
address-literal to resolve.
...teinstance(components.interfaces.nsidnsservice); let thread = components.classes["@mozilla.org/thread-manager;1"] .getservice(components.interfaces.nsithreadmanager).currentthread; let host = "www.mozilla.org"; let listener = { onlookupcomplete: function(request, record, status) { if (!components.issuccesscode(status)) { // handle error here return; } let
address = record.getnext
addrasstring(); console.log(host + " = " +
address); } }; dnsservice.asyncresolve(host, 0, listener, thread); ...
nsIHttpChannelInternal
local
address autf8string the local ip
address to which the channel is bound, in the same format produced by pr_net
addrtostring().
... this may be either an ipv4 or ipv6
address.
... note: if network
address translation (nat) is in effect, this may not be the same
address the remote host thinks it is talking to.
... obsolete since gecko 1.9 remote
address autf8string the ip
address of the remote host to which this channel is bound, in the same format produced by pr_net
addrtostring().
nsIMIMEInputStream
to create an instance, use: var mimeinputstream = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); method overview void
addheader(in string name, in string value); void setdata(in nsiinputstream stream); attributes attribute type description
addcontentlength boolean when true a "content-length" header is automatically
added to the stream.
... methods
addheader()
adds an
additional header to the stream on the form "name: value".
...void
addheader( in string name, in string value ); parameters name name of the header.
... example var postdata = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); postdata.
addheader("content-type", "application/x-www-form-urlencoded"); postdata.
addcontentlength = true; postdata.setdata(stringstream); ...
nsIMicrosummary
1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void
addobserver(in nsimicrosummaryobserver observer); boolean equals(in nsimicrosummary aother); void removeobserver(in nsimicrosummaryobserver observer); void update(); attributes attribute type description content astring the content of the microsummary.
... methods
addobserver()
add a microsummary observer to this microsummary.
... void
addobserver( in nsimicrosummaryobserver observer ); parameters observer the microsummary observer to
add.
...if you want know when a microsummary finishes updating,
add an observer before calling this method.
nsIMsgAccountManagerExtension
the nsimsgaccountmanagerextension interface is used to
add a new panel to thunderbird's account manager.
...simply
add a new entry with the contact id of the component to the "mailnews-accountmanager-extensions" category.
... //github.com/realityripple/uxp/blob/master/mailnews/base/public/nsimsgaccountmanager.idlscriptable please
add a summary to this article.
...this is usually guid of the id of the
addons which
adds the new panel.
nsIMsgDBView
d reloadmessagewithallparts(); void selectmsgbykey(in nsmsgkey key); void selectfoldermsgbykey(in nsimsgfolder afolder, in nsmsgkey akey); void ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfromkey(in nsmsgkey amsgkey, in boolean aexpand); void expandandselectthreadbyindex(in nsmsgviewindex aindex, in boolean aaugment); void
addcolumnhandler(in astring acolumn, in nsimsgcustomcolumnhandler ahandler); void removecolumnhandler(in astring acolumn); nsimsgcustomcolumnhandler getcolumnhandler(in astring acolumn); attributes attribute type description viewtype nsmsgviewtypevalue readonly: type of view.
... aaugment if true then
add to current selection.
...
addcolumnhandler() attaches a nsimsgcustomcolumnhandler to a specific column (can be a new column or a built in).+ void
addcolumnhandler(in astring acolumn, in nsimsgcustomcolumnhandler ahandler); parameters acolumn the name of the column to
add the handler for.
... ahandler the nsimsgcustomcolumnhandler to
add.
nsIMsgMessageService
nsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); void search(in nsimsgsearchsession asearchsession, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string a
additionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsiurllistener aurllistener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the messag...
...it will also tack a
additionalheader onto the url (e.g., header=filter).
... nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string a
additionalheader); parameters amessageuri uri of message to stream aconsumer generally, a stream listener listening to the message.
... a
additionalheader header
added to the uri.
nsINavHistoryResultViewer
method overview void containerclosed(in nsinavhistorycontainerresultnode acontainernode); void containeropened(in nsinavhistorycontainerresultnode acontainernode); void invalidatecontainer(in nsinavhistorycontainerresultnode acontainernode); void nodeannotationchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedate
addedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodelast
addedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeiconchanged(in nsinavhistoryresultnode anode); void nodekeywordchanged(in nsin...
... nodedate
addedchanged() called right after the date
added property of a node has changed.
... anewvalue the new value for the node's date
added property.
...when an item is moved between containers, a new node is created for the item, and the itemremoved/item
added methods are used.
nsIScriptError
void init( in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category ); parameters message the text of the message to
add to the log.
... 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 ); parameters message the text of the message to
add to the log.
... examples logging a message with
additional information in this example nsiscripterror, which implements nsiconsolemessage, is used to log information to the console including information about the source file and line number of the error.
...as
addon author i would recommend using "chrome javascript" for logging exceptions caused by
addon code.
nsIWebContentHandlerRegistrar
typically they will prompt the user to confirm
adding an entry to the local list.
... examples register a webmail service as mailto handler the following code aims to
add "outlook.com live mail" to list of webservice handlers.
...must have a content window to pass to registerprotocolhandler as it prompts the user for permission'); } nsiwchr.registerprotocolhandler("mailto", registeruri, "outlook.com live mail", htmlcontentwindow); in this example the services.wm.getenumerator was used to find a window that had the same host name (contentwindow.location.hostname) as the uri (uri.host) we are trying to
add.
... permission denied to
add http://mail.live.com/secure/start?action=compose&to=%s as a content or protocol handler'permission denied to
add http://mail.live.com/secure/start?action=compose&to=%s as a content or protocol handler' when calling method: [nsiwebcontenthandlerregistrar::registerprotocolhandler] if the host names do match then a confirmation like this will be seen: this domain check can be bypassed by setting the preference of gecko.handlerservice.allowregisterfromdifferenthost to true as in this code here: var {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/services.jsm"); var nsiw...
nsIWindowWatcher
it will automatically be
added to our list.
... registernotification() clients of this service can register themselves to be notified when a window is opened or closed (
added to or removed from this service).
... this method
adds an nsiobserver to the list of objects to be notified.
... unregisternotification() clients of this service can register themselves to be notified when a window is opened or closed (
added to or removed from this service).
nsIXULWindow
xpfe/appshell/nsixulwindow.idlscriptable please
add a summary to this article.
... method overview void
addchildwindow(in nsixulwindow achild); void applychromeflags(); native code only!
... highestz 9 methods
addchildwindow() tell this window that it has picked up a child xul window.note that xul windows do not currently track child xul windows.
... void
addchildwindow( in nsixulwindow achild ); parameters achild the child window being
added.
nsIAbCard/Thunderbird3
the nsiabcard interface is used to represent and manipulate cards in the
address book.
... properties currently supported on the card: names: firstname, lastname phoneticfirstname, phoneticlastname displayname, nickname spousename, familyname primaryemail, secondemail home contact: home
address, home
address2, homecity, homestate, homezipcode, homecountry homephone, homephonetype work contact.
...an implementation may impose
additional semantic constraints for certain properties.
...in particular, calling equals on cards from different
address books may return inaccurate results.
Mozilla technologies
accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format,
adding support for animated images.
...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 fr...
...amework (xtf) allows
adding support for new namespaces using xpcom components to mozilla (written in javascript or c++).
... for example, the mozilla xforms project uses xtf to
add support for the xforms namespace.
Testing Mozilla code
asan nightly projectthe asan nightly project involves building a firefox nightly browser with the popular
addresssanitizer tool and enhancing it with remote crash reporting capabilities for any errors detected.clang static analysisthis document is split in two parts.
... the first part will focus on the modern and robust way of static-analysis and the second part will present the build-time static-analysis.debugging mozilla with valgrindthis page describes how to use valgrind (specifically, its memcheck tool) to find memory errors.firefox and
address sanitizer
address sanitizer (asan) is a fast memory error detector that detects use-after-free and out-of-bound bugs in c/c++ programs.
...in
addition, the runtime part replaces the malloc and free functions to check dynamically allocated memory.
... more information on how asan works can be found on the
address sanitizer wiki.
MailNews Filters
the search is executed locally, not on the server, so that criteria like "in
address book" still work.
... how to
add a filter action
add your new action to nsimsgfilteraction
add code to file out the new action here
add new action to the rulesactiontable
add string for the new action to the filter editor dtd file
add new action to the filter editor js code
add new action to the xbl widget in the filter editor if your action has a parameter,
add code to initialize the ui editing an existing filter here and to save to the filter here
add your action to filter.properties so it will show up in the filter log.
... finally,
add protocol-specific code to apply your filter action in the various applyfilterhit methods imap pop3 news and "after the fact" since seamonkey and thunderbird share the filter code, you will also need to update the seamonkey .dtd and .property files.
...it would be really nice if we had a mechanism for extensions to
add their own filter actions.
Mailnews and Mail code review requirements
all patches that affect user experience or interfaces on thunderbird should have ui-review on those patches in
addition to the reviews required below.
... if a reviewer feels that the patch would benefit from
additional reviews, they should request a second review from an appropriate person.
... the patch has identified a likely problem and fixes it; no commenting out tests/changing what a test tests/
adding huge timeouts.
... the patch only
adds/modifies logging statements, although the logs can be conditional.
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 ispnotifyso...
...if this code were used in a production
add-on, then to avoid firefox locking up, run this code from a chromeworker.
...} ]); // advanced structures let clsid = guid; let iid = guid; // super advanced structures let refiid = iid.ptr; let refclsid = clsid.ptr; // vtables let ispvoicevtbl = ctypes.structtype('ispvoicevtbl'); let ispvoice = ctypes.structtype('ispvoice', [{ 'lpvtbl': ispvoicevtbl.ptr }]); ispvoicevtbl.define([ // start inherit from iunknown { 'queryinterface': ctypes.voidptr_t }, { '
addref': ctypes.voidptr_t }, { 'release': ctypes.functiontype(callback_abi, ulong, // return [ ispvoice.ptr ]).ptr }, // end inherit from iunknown // start inherit from ispnotifysource // can set to ctypes.voidptr_t if arent going to use it { 'setnotifysink': ctypes.voidptr_t }, { 'setnotifywindowmessage': ctypes.voidptr_t }, ...
... primative_hr = coinitializeex(null, coinit_apartmentthreaded); checkhresult(primative_hr, "coinitializeex"); spvoiceptr = ispvoice.ptr(); primative_hr = cocreateinstance(clsid_spvoice.
address(), null, clsctx_all, iid_ispvoice.
address(), spvoiceptr.
address()); checkhresult(primative_hr, "cocreateinstance"); spvoice = spvoiceptr.contents.lpvtbl.contents; let atext = 'hello firefox!'; let aflags = spf_default; primative_hr = spvoice.speak(spvoiceptr, atext, aflags,...
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.
... methods available on all cdata objects
address() returns a cdata object of the pointer type ctypes.pointertype(dataobject.constructor) whose value points to the c object referred to by the object.
... cdata
address() parameters none.
...ar fromcharcode = [] for (var i=0; i<ptrasarr.length; i++) { //if known_len is correct, then will not hit null terminator so like in example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" if you pass length of 77, then null term will not get hit by this loop as null term is at pos 77 and we go till `< known_len` var thisunsignedcharcode = ptrasarr.
addressofelement(i).contents; if (thisunsignedcharcode == 0) { // reached null terminator, break console.log('reached null terminator, at pos: ', i); break; } charcode.push(thisunsignedcharcode); fromcharcode.push(string.fromcharcode(thisunsignedcharcode)); } console.info('charcode:', charc...
Plug-in Basics - Plugins
with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls
add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
...in general, if you want a plug-in to generate
additional threads to handle processing at any stage in its lifespan, you should be careful to isolate these from plug-in api calls.
...though the object element has no hidden attribute, you can create css rules to override the sizing attributes of the object element object { visibility: visible; } object.hiddenobject { visibility: hidden !important; width: 0px !important; height: 0px !important; margin: 0px !important; p
adding: 0px !important; border-style: none !important; border-width: 0px !important; max-width: 0px !important; max-height: 0px !important; } in this case, the object element that picks up these special style definitions would have a class of hidden.
...value="#eeeeee"> <param name="salign" value="tl"> <param name="menu" value="0"> <embed src="foo.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" type="application/x-shockwave-flash" width="749" height="68" bgcolor="#eeeeee" salign="tl" menu="0"> </embed> </object> using custom embed attributes in
addition to these standard attributes, you can create private, plug-in-specific attributes and use them in the embed attribute to pass extra information between the html page and the plug-in code.
URLs - Plugins
in
addition, gecko may support urls not listed on this table.
... mailto (electronic mail
address) locates the internet mailing
address of an individual or service.
...both request the creation of a new stream with the contents of the specified url, and, in
addition, npn_geturlnotify notifies the plug-in of the successful or unsuccessful completion of the request.
...if no custom headers are required, simply
add a blank line ('\n') to the beginning of the file or buffer.
Break on DOM mutation - Firefox Developer Tools
that means, the script execution is stopped whenever a child node or descendant node deeper in the dom structure is
added to or removed from the element the option is set on.
... that means, the script execution is stopped whenever an attribute is
added to or removed from the element the option is set on or the value of one of its attributes is changed.
... examples for when this breakpoint is triggered are calling element.setattribute(), element.removeattribute(), and element.classlist.
add(), or setting element.id.
...in the following example, the selected node (the unordered list) is modified by
adding a new child node.
Debugger.Object - Firefox Developer Tools
(this function behaves like object.defineproperty, except that the target object is implicit, and in a different compartment from the function and descriptor.) defineproperties(properties)
add the properties given byproperties to the referent.
... seal() prevent properties from being
added to or deleted from the referent.
...(this function behaves like the standard object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being
added to or deleted from the referent, and mark each property as non-writable.
...(this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preventextensions() prevent properties from being
added to the referent.
Tutorial: Set a breakpoint - Firefox Developer Tools
to do this, open the firefox developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and
add-on debugging toolboxes” and “enable remote debugging” are checked.
...
adddebuggertoglobal(this); // create a 'debugger' instance.
...var windowdo = dbg.
adddebuggee(tabs[0].content); // get a debugger.object referring to the window's `report` // function.
...re-running the code in the scratchpad creates a fresh debugger instance,
adds the same web page as its debuggee, and then sets a new breakpoint.
AudioNode - Web APIs
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
...in
addition, there are processing nodes which have inputs and outputs.
...after a design review in october 2013, it was decided to
add constructors because they have numerous benefits over factory methods.
... the constructors were
added to the spec from august to october 2016.
BasicCardRequest - Web APIs
owing example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as items bought and shipping options), and an optional object that describes what data is needed to fullfil the payment (e.g., a shipping
address).
... { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); //
add event listeners here.
...this has to conform to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
... billing
address is a payment
address object } } specifications specification status comment basic card paymentthe definition of 'basiccardrequest' in that specification.
CacheStorage - Web APIs
this consists of calling cachestorage.open to create a new cache, then using cache.
addall to
add a series of assets to it.
... if not, fetch the request from the network, then also open the cache created in the first block and
add a clone of the request to it using cache.put (cache.put(event.request, response.clone()).) if this fails (e.g.
... self.
addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.
addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); self.
addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always r...
...t cachename = `myapp-${ cacheversion }`; const url = 'https://jsonplaceholder.typicode.com/todos/1'; let cacheddata = await getcacheddata( cachename, url ); if ( cacheddata ) { console.log( 'retrieved cached data' ); return cacheddata; } console.log( 'fetching fresh data' ); const cachestorage = await caches.open( cachename ); await cachestorage.
add( url ); cacheddata = await getcacheddata( cachename, url ); await deleteoldcaches( cachename ); return cacheddata; } // get data from the cache.
CanvasRenderingContext2D.lineCap - Web APIs
"square" the ends of lines are squared off by
adding a box with an equal width and half the height of the line's thickness.
...two guides to see the exact differences between the three are
added.
...this
adds a semicircle to the end that has a radius half the width of the line.
...this
adds a box with an equal width and half the height of the line thickness.
CanvasRenderingContext2D.lineJoin - Web APIs
this property has no effect wherever two connected segments have the same direction, because no joining area will be
added in this case.
... "round" rounds off the corners of a shape by filling an
additional sector of disc centered at the common endpoint of connected segments.
... "bevel" fills an
additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
... "miter" connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an
additional lozenge-shaped area.
Drawing shapes with canvas - Web APIs
closepath()
adds a straight line to the path, going to the start of the current sub-path.
...x.beginpath(); ctx.moveto(75, 40); ctx.beziercurveto(75, 37, 70, 25, 50, 25); ctx.beziercurveto(20, 25, 20, 62.5, 20, 62.5); ctx.beziercurveto(20, 80, 40, 102, 75, 120); ctx.beziercurveto(110, 102, 130, 80, 130, 62.5); ctx.beziercurveto(130, 62.5, 130, 25, 100, 25); ctx.beziercurveto(85, 25, 75, 37, 75, 40); ctx.fill(); } } screenshotlive sample rectangles in
addition to the three methods we saw in drawing rectangles, which draw rectangular shapes directly to the canvas, there's also the rect() method, which
adds a rectangular path to a currently open path.
... the path2d api also
adds a way to combine paths using the
addpath method.
... path2d.
addpath(path [, transform])
adds a path to the current path with an optional transformation matrix.
Hit regions and accessibility - Web APIs
canvasrenderingcontext2d.
addhitregion()
adds a hit region to the canvas.
... you can
add a hit region to your path and check for the mouseevent.region property to test if your mouse is hitting your region, for example.
... <canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.
addhitregion({id: 'circle'}); canvas.
addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the
addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.
addhitregion({control: element}); this can be useful for routing to <input> elements, for example.
...
additionally, the scrollpathintoview() method can be used to make an element visible on the screen if focused, for example.
Using channel messaging - Web APIs
use cases channel messaging is mainly useful in cases where you've got a social site that embeds capabilities from other sites into its main interface via iframes, such as games,
address book, or an audio player with personalized music choices.
...for example, what if you wanted to
add a contact to the
address book from the main site,
add high scores from your game into your main profile, or
add new background music choices from the audio player onto the game?
... var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.
addeventlistener("load", onload); function onload() { // listen for button clicks button.
addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); por...
... receiving the port and message in the iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.
addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem = document.createelement('li'); listitem.textcontent = e.data; list.appendchild(listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the i...
ContentIndex - Web APIs
methods contentindex.
add registers an item with the content index.
... // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; }
adding to the content index here we're declaring an item in the correct format and creating an asynchronous function which uses the
add() method to register it with the content index.
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to
add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.
add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retriev...
...they are accessible from the workerglobalscope.self property: // service worker script self.registration.index.
add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.getall(); specifications specification status comment unknownthe definition of 'contentindex' in that specification.
DOMTokenList.toggle() - Web APIs
if token doesn't exist it's
added and the function returns true.
...if set to false, then token will only be removed, but not
added.
... if set to true, then token will only be
added, but not removed.
... first, the html: <span class="a b">classlist is 'a b'</span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.
addeventlistener('click', function() { let result = classes.toggle("c"); if (result) { span.textcontent = `'c'
added; classlist is now "${classes}".`; } else { span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the output looks like this: specifications specification status comment domthe definition of 'toggle()' in that specifica...
DataTransfer.setData() - Web APIs
if data for the given type does not exist, it is
added at the end of the drag data store, such that the last item in the types list will be the new type.
... syntax void datatransfer.setdata(format, data); arguments format a domstring representing the type of the drag data to
add to the drag object.
... data a domstring representing the data to
add to the drag object.
... <!doctype html> <html lang=en> <title>examples of datatransfer's setdata(), getdata() and cleardata()</title> <meta content="width=device-width"> <style> div { margin: 0em; p
adding: 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.
DataTransfer - Web APIs
if data for the type does not exist, it is
added at the end, such that the last item in the types list will be the new format.
... datatransfer.
addelement() sets the drag source to the given element.
...mozsetdataat() may only be called with an index argument less than mozitemcount in which case an existing item is modified, or equal to mozitemcount in which case a new item is
added, and the mozitemcount is incremented by one.
... living standard mozcursor, mozitemcount, mozsourcenode, mozusercancelled,
addelement(), mozcleardataat(), mozgetdataat(), mozsetdataat() and moztypesat are gecko specific.
DataTransferItem.webkitGetAsEntry() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; p
adding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is
added below, and so forth.
...first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.
addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.
addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
...if that's successful, we call scanfiles() to process the item—either by
adding it to the list if it's just a file or by
adding it and walking down into it if it's a directory.
Detecting device orientation - Web APIs
the second event is the devicemotionevent, which is sent when a change in acceleration was
added.
... window.
addeventlistener("deviceorientation", handleorientation, true); after registering your event listener (in this case, a javascript function called handleorientation()), your listener function periodically gets called with updated orientation data.
...nstrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of the ball // it center the positioning point to the center of the ball ball.style.top = (maxy*y/180 - 10) + "px"; ball.style.left = (maxx*x/180 - 10) + "px"; } window.
addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers.
... processing motion events motion events are handled the same way as the orientation events except that they have their own event's name: devicemotion window.
addeventlistener("devicemotion", handlemotion, true); what's really changed are the information provided within the devicemotionevent object passed as a parameter of the handlemotion function.
Document: DOMContentLoaded event - Web APIs
examples basic usage document.
addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.
addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the domcontentloaded event is goi...
...</script> checking whether loading is already complete domcontentloaded may fire before your script has a chance to run, so it is wise to check before
adding a listener.
... function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.
addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload...
... { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.
addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.
addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.
addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.
addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'domcontentloaded' in that spec...
Document - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
... document.documenturiobject (mozilla
add-ons only!) returns the nsiuri object representing the uri of the document.
... working draft
adds getselection(), onselectstart and onselectionchange.
Element.clientTop - Web APIs
this is because the offsettop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, (client area includes p
adding.) therefore, the clienttop value will always equal the integer portion of the .getcomputedstyle() value for "border-top-width".
...have no significance regarding the client area.) the clienttop value is the distance from where the margin (yellow) area ends and the p
adding and content areas (white) begin.
... p
adding-top lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... p
adding-bottom left top right bottom margin-top margin-bottom border-top border-bottom notes clienttop was first introduced in the ms ie dhtml object model.
Element.getClientRects() - Web APIs
firefox 3.5 note firefox 3.5
adds width and height properties to the textrectangle object.
... function
addclientrectsoverlay(elt) { /* absolutely position a div over each client rect so that its border width is the same as the rectangle's width.
...+) { var rect = rects[i]; var tablerectdiv = document.createelement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1px solid red'; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft; tablerectdiv.style.margin = tablerectdiv.style.p
adding = '0'; tablerectdiv.style.top = (rect.top + scrolltop) + 'px'; tablerectdiv.style.left = (rect.left + scrollleft) + 'px'; // we want rect.width to be the border width, so content width is 2px less.
... tablerectdiv.style.width = (rect.width - 2) + 'px'; tablerectdiv.style.height = (rect.height - 2) + 'px'; document.body.appendchild(tablerectdiv); } } (function() { /* call function
addclientrectsoverlay(elt) for all elements with assigned class "withclientrectsoverlay" */ var elt = document.getelementsbyclassname('withclientrectsoverlay'); for (var i = 0; i < elt.length; i++) {
addclientrectsoverlay(elt[i]); } })(); result specifications specification status comment css object model (cssom) view modulethe definition of 'element.getclientrects()' in that specification.
Element.innerHTML - Web APIs
for example, if you use innerhtml in a browser extension and submit the extension to
addons.mozilla.org, it will not pass the automated review process.
... we
add a second method that logs information about mouseevent based events (such as mousedown, click, and mouseenter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = do...
...cument.queryselector(".box"); boxelem.
addeventlistener("mousedown", logevent); boxelem.
addeventlistener("mouseup", logevent); boxelem.
addeventlistener("click", logevent); boxelem.
addeventlistener("mouseenter", logevent); boxelem.
addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
... .box { width: 600px; height: 300px; border: 1px solid black; p
adding: 2px 4px; overflow-y: scroll; overflow-x: auto; } .log { margin-top: 8px; font-family: monospace; } result the resulting content looks like this.
Element.scrollHeight - Web APIs
the height is measured in the same way as clientheight: it includes the element's p
adding, but not its border, margin or horizontal scrollbar (if present).
... example p
adding-top lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... p
adding-bottom left top right bottom margin-top margin-bottom border-top border-bottom problems and solutions determine if an element has been totally scrolled the following equivalence returns true if an element is at the end of its scroll, false if it isn't.
... </textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; p
adding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; p
adding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.getelementbyid("nextstep").disabl...
EventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" fon...
... methods eventtarget.
addeventlistener() registers an event handler of a specific event type on the eventtarget.
...
additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties.
... void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example simple implementation of eventtarget var eventtarget = function() { this.listeners = {}; }; eventtarget.prototype.listeners = null; eventtarget.prototype.
addeventlistener = function(type, callback) { if (!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; eventtarget.prototype.removeeventlistener = function(type, callback) { if (!(type in this.listeners)) { return; } var stack = this.listeners[type]; for (var i = 0, l = stack.length; i < l; i++) { if (stack[i] === callback){ stack.splice(i, 1); return; } } }; eventtarget.prototype.dispatchevent = fun...
ExtendableEvent - Web APIs
if waituntil() is called outside of the extendableevent handler, the browser should throw an invalidstateerror; note also that multiple calls will stack up, and the resulting promises will be
added to the list of extend lifetime promises.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 8...
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.
addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
... resources to pre-fetch:', urlstoprefetch); event.waituntil( caches.open(current_caches['prefetch']).then(function(cache) { return cache.
addall(urlstoprefetch.map(function(urltoprefetch) { return new request(urltoprefetch, {mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); important: when fetching resources, it's very important to use {mode: 'no-cors'} if there is any chance that the resources are served off of a server that doesn't support cors.
FileSystemDirectoryReader.readEntries() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; p
adding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is
added below, and so forth.
...first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.
addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.
addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
...if that's successful, we call scanfiles() to process the item—either by
adding it to the list if it's just a file or by
adding it and walking down into it if it's a directory.
GamepadEvent - Web APIs
the gamepadevent interface of the gamepad api contains references to gamepads connected to the system, which is what the gamepad events window.gamepadconnected and window.gamep
addisconnected are fired in response to.
... window.
addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); and on a window.gamep
addisconnected event.
... window.
addeventlistener("gamep
addisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); specifications specification status comment gamepadthe definition of 'gamepadevent' in that specification.
GlobalEventHandlers.onerror - Web APIs
error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at window and window.onerror() is invoked (as well as handlers attached by window.
addeventlistener (not only capturing)).
...these error events do not bubble up to window, but (at least in firefox) can be handled with a window.
addeventlistener configured with usecapture set to true.
... syntax for historical reasons, different arguments are passed to window.onerror and element.onerror handlers (as well as on error-type window.
addeventlistener handlers).
... window.
addeventlistener('error') window.
addeventlistener('error', function(event) { ...
GlobalEventHandlers - Web APIs
each of these interfaces can, of course,
add more event handlers in
addition to the ones listed below.
... working draft
adds onselectionchange.
... candidate recommendation
adds onpointerlockchange and onpointerlockerror on document.
...
added onsort since the html5 snapshot.
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
... recommendation the following attribute has been
added: menu.
... the following attributes have been
added: autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate.
... the following methods have been
added: checkvalidity(), setcustomvalidity().
HTMLElement: animationiteration event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationiteration examples this code uses animationiteration to keep track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.
addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount...
... html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; p
adding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); ...
...const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.
addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.
addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.
addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.
addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textco...
...ntent}'animation canceled'`; }); applyanimation.
addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLEmbedElement - Web APIs
it does not
address earlier, non-standardized version of the interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
... htmlembedelement.src is a domstring that reflects the src html attribute, containing the
address of the resource.
... living standard
adds two obsolete properties, name and align, to help with compatibility with old web sites.
HTMLImageElement.alt - Web APIs
examples beyond that, there are
additional guidelines for using alt appropriately which vary depending on what the image is being used for.
... body { margin: 0; p
adding: 0; } p { margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; } .container { width: 100vh; height: 95vh; font: 16px arial,helvetica,sans-serif; } .left-margin { background-color: rgb(241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; p
adding-right: 1em; display: flex; align-items: center; justify-conten...
...t: center; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; p
adding-top: 1em; p
adding-left: 2em; p
adding-right: 1em; } result images used as buttons when using an image as a button (by using it as the only visible child of an <a> element representing a hyperlink), the alt attribute must be used to convey the purpose of the button.
... .container { max-width: 500px; } .pageinfo-badge { width: 9em; p
adding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; } result other images images simply showing objects or scenes should ha...
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface: input fires when the value of an <input>, <select>, or <textarea> element has been changed.
... the following properties have been
added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate.
... the following methods have been
added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown().
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas...
... living standard
adds the following properties: crossorigin, referrerpolicy, and as.
... the following properties have been
added: rellist, and sizes.
... obsolete
added a second inheritence, the linkstyle interface.
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
... the following attributes have been
added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate.
... the following methods have been
added: checkvalidity(), setcustomvalidity(), and setselectionrange().
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alig...
... htmltrackelement.src is a domstring that reflects the src html attribute, indicating the
address of the text track data.
...further cues might still be
added to the track by the parser.
... events the following events may be fired on a <track> element, in
addition to any that may be fired at its parent, htmlelement.
Headers.append() - Web APIs
the append() method of the headers interface appends a new value onto an existing header inside a headers object, or
adds the header if it does not already exist.
... syntax myheaders.append(name, value); parameters name the name of the http header you want to
add to the headers object.
... value the value of the http header you want to
add.
... example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could
add a header to this using append(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' if the specified header already exists, append() will change its value to the specified value.
IDBDatabase: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to
add a record, listening for the error event for the
add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will cont...
...', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.
addeventlistener('error', () => { console.log(`error
adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.
add(newitem); }; the same example, using the onerror property inst...
...ead of
addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, d...
...ay: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.onerror = () => { console.log(`error
adding new item: ${newitem.tasktitle}`); }; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.
add(newitem); }; ...
IDBRequest: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to
add a record, listening for the error event for the
add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.
addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data...
... items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.
addeventlistener('success', event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.
add(newitem); o...
...bjectstorerequest.
addeventlistener('error', () => { console.log(`error
adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of
addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: ...
...false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.
add(newitem); objectstorerequest.onerror = () => { console.log(`error
adding new item: ${newitem.tasktitle}`); }; }; ...
IDBTransaction: abort event - Web APIs
bubbles yes cancelable no interface event event handler property onabort this can happen for any of the following reasons: bad requests, (for example, trying to
add the same key twice, or put the same index key when the key has a uniqueness constraint), an explicit abort() call an uncaught exception in the request's success/error handler, an i/o error (an actual failure to write to disk, for example disk detached, or other os/hardware failure) quota exceeded.
... examples this example opens a database (creating the database if it does not exist), then opens a transaction,
adds a listener to the abort event, then aborts the transaction to trigger the event.
...{ unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); //
add a listener for `abort` transaction.
addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb...
...{ unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); //
add a listener for `abort` transaction.onabort = (event) => { console.log('transaction was aborted'); }; // abort the transaction transaction.abort(); }; ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using
addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectst...
...ore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); //
add a listener for `complete` transaction.
addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.
add(newitem); }; using the oncomplete property: // open the databas...
...{ unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); //
add a listener for `complete` transaction.oncomplete = event => { console.log('transaction was competed'); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = ob...
...jectstore.
add(newitem); }; ...
IDBTransaction: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to
add a record, listening for the error event for the
add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will ...
...unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.
addeventlistener('error', () => { console.log(`error
adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = object...
...store.
add(newitem); }; the same example, using the onerror property instead of
addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event...
...) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.onerror = () => { console.log(`error
adding new item: ${newitem.tasktitle}`); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.
add(newitem); }; ...
IDBTransaction.objectStore() - Web APIs
the objectstore() method of the idbtransaction interface returns an object store that has already been
added to the scope of this transaction.
... example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification speci...
KeyboardEvent.code - Web APIs
examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.
addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.
... html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; p
adding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using.
... function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the
addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.
... window.
addeventlistener("keydown", function(event) { if (event.defaultprevented) { return; // do nothing if event already handled } switch(event.code) { case "keys": case "arrowdown": // handle "back" updateposition(-moverate); break; case "keyw": case "arrowup": // handle "forward" updateposition(moverate); break; case "keya": case "arrowleft": // handle "turn left" angle -= turnrate; break; case "keyd": case "arrowright": // handle "turn right" angle += turnrate; break; } refresh(); // consume the event so it doesn't get handled twice event.preventdefault(); }, true); try it out to ensure that keystrokes go to the sample code, click inside the black game play fiel...
KeyboardEvent.key - Web APIs
html <div class="fx"> <div> <textarea rows="5" name="test-target" id="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { p
adding-left: 20px; p
adding-right: 20px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmes...
...sage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.
addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.
addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.
addeventlistener('input', (e) => { logmessage(`key "${e.data}" input [event: input]`); }); textarea.
addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.
addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; }...
... example this example uses eventtarget.
addeventlistener() to listen for keydown events.
... window.
addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // do nothing if the event was already processed } switch (event.key) { case "down": // ie/edge specific value case "arrowdown": // do something for "down arrow" key press.
MediaQueryList - Web APIs
addlistener()
adds to the mediaquerylist a callback which is invoked whenever the media query status—whether or not the document matches the media queries in the list—changes.
... this method exists primarily for backward compatibility; if possible, you should instead use
addeventlistener() to watch for the change event.
...this method has been kept for backward compatibility; if possible, you should generally use removeeventlistener() to remove change notification callbacks (which should have previously been
added using
addeventlistener()).
... { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = '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).
MediaStreamTrackEvent - Web APIs
the mediastreamtrackevent interface represents events which indicate that a mediastream has had tracks
added to or removed from the stream through calls to media stream api methods.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" strok...
..."><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are
addtrack and removetrack properties also inherits properties from its parent interface, event.
... track read only a mediastreamtrack object representing the track which was
added to the stream.
MutationObserver.MutationObserver() - Web APIs
example this example simply creates a new mutationobserver configured to watch a node and all of its children for
additions and removals of elements to the tree, as well as any changes to attributes on any of the elements in the tree.
... the callback function function callback(mutationlist, observer) { mutationlist.foreach( (mutation) => { switch(mutation.type) { case 'childlist': /* one or more children have been
added to and/or removed from the tree.
... (see mutation.
addednodes and mutation.removednodes.) */ break; case 'attributes': /* an attribute value changed on the element in mutation.target.
... from this point until disconnect() is called, callback() will be called each time an element is
added to or removed from the dom tree rooted at targetnode, or any of those elements' attributes are changed.
MutationRecord - Web APIs
mutationrecord.
addednodes nodelist return the nodes
added.
... will be an empty nodelist if no nodes were
added.
... mutationrecord.previoussibling node return the previous sibling of the
added or removed nodes, or null.
... mutationrecord.nextsibling node return the next sibling of the
added or removed nodes, or null.
Navigator.sendBeacon() - Web APIs
historically, this was
addressed with some of the following workarounds to delay the page unload long enough to send data to some url: submitting the data with a blocking synchronous xmlhttprequest call in unload or beforeunload event handlers.
... window.
addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces.
...this solves all of the problems with submission of analytics data: the data is sent reliably it's sent asynchronously it doesn't impact the loading of the next page in
addition, the code is simpler to write than any of the older techniques!
... window.
addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the beacon sends an http request via the post method, with all relevant cookies available when called.
PayerErrors.email - Web APIs
if the payer's email
address passed validation, this property is not included in the payererrors object.
... syntax payeremail = payererrors.email; value if validation of the payer's email
address (paymentresponse.payeremail) found problems, this property should be set to a domstring that explains the validation problem and how to correct it.
... if the email
address is valid, this property should be omitted from the payererrors object.
... example function validatepayment(response) { const correctionpromises let paymenterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email
address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the form ###-###-####." } // check everything else too...
PaymentRequest.onshippingoptionchange - Web APIs
syntax paymentrequest.
addeventlistener('shippingoptionchange', shippingoptionchangeevent => { ...
...to make sure an updated option is included when sending payment information to the server, you should
add event listeners for a paymentrequest object after instantiation, but before the call to show().
...var request = new paymentrequest(supportedinstruments, details, options); // when user selects a shipping
address request.
addeventlistener('shipping
addresschange', e => { e.updatewith(((details,
addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (
addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (
addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'in...
...ternational shipping'; shippingoption.amount.value = '10.00'; details.total.amount.value = '65.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the
address details.shippingoptions = []; return promise.resolve(details); console.log(details.error); } // hardcode for simplicity if (details.displayitems.length === 2) { details.displayitems[2] = shippingoption; } else { details.displayitems.push(shippingoption); } details.shippingoptions = [shippingoption]; return promise.resolve(details); })(details, request.shipping
address)); }); specifications specification status comment payment request apithe definition of 'onshippingoptionchange' in that...
PaymentRequest: paymentmethodchange event - Web APIs
this code creates a new paymentrequest,
adds a handler for the paymentmethodchange event by calling the request's
addeventlistener(), then calls show() to present the payment interface to the user.
... const options = { requestshipping: true }; const paymentrequest = new paymentrequest(paymentmethods, detailsforshipping("ground"), options); paymentrequest.
addeventlistener("paymentmethodchange", handlepaymentchange, false); paymentrequest.show() .then(response => response.complete("success")) .catch(err => console.log("error handling payment request: " + err)); the event handler function itself, handlepaymentchange(), looks like this: handlepaymentchange = event => { const detailsupdate = {}; if (event.methodname === "https://apple.com/apple-p...
...t indicates that the user is trying to use apple pay, we pass the methoddetails into a function called calculateservicefee(), which we might create to take the information about the transaction, such as the underlying credit card being used to service the apple pay request, and compute and return an paymentdetailsupdate object that specifies changes to be applied to the paymentrequest in order to
add any service fees that the payment method might require.
... related events merchantvalidation, shipping
addresschange, shippingoptionchange, and payerdetailchange specifications specification status comment payment request apithe definition of 'paymentmethodchange' in that specification.
PaymentRequest - Web APIs
paymentrequest.shipping
address read only secure context if requested via payment options, returns the shipping
address chosen by the user for the purposes of calculating shipping.
...
additionally, in some browsers, the parts of the
address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "pay").
... shipping
addresschange secure context dispatched whenever the user changes their shipping
address.
... also available using the onshipping
addresschange event handler property.
PaymentResponse.retry() - Web APIs
this lets your app gracefully deal with situations such as invalid shipping
addresses or declined credit cards.
... shipping
address optional an
addresserrors object which contains error messages for any of the fields in the shipping
address that failed validation.
...async function recursivevalidate(request, response) { const promisestofixthings = []; const errors = await validate(request, response); if (!errors) { return; } if (errors.shipping
address) { // "shipping
addresschange" fired at request object const promise = fixfield(request, "shipping
addresschange", shippingvalidator); promisestofixthings.push(promise); } if (errors.payer) { // "payerdetailchange" fired at response object const promise = fixfield(response, "payerdetailchange", payervalidator); promisestofixthings.push(promise); } await promise.a...
... requestorresponse.
addeventlistener(event, async function listener(ev) { const promisetovalidate = validator(requestorresponse); ev.updatewith(promisetovalidate); const errors = await promisetovalidate; if (!errors) { // yay!
PaymentResponse - Web APIs
paymentresponse.payeremail read only secure context returns the email
address supplied by the user.
... paymentresponse.shipping
address read only secure context returns the shipping
address supplied by the user.
... events listen to this event using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...allows the developer to revalidate any requested user data (e.g., the phone number or the email
address) if it changes.
Using the Permissions API - Web APIs
more features will be
added as time progresses.
... accessing the permissions api the navigator.permissions property has been
added to the browser to allow access to the global permissions object.
...some apis have more complex permissiondescriptors containing
additional information, which inherit from the default permissiondescriptor.
... however, future
additions to browser functionality should provide the request() method, which will allow us to programatically request permissions, any time we like.
RTCIceCandidatePairStats - Web APIs
in
addition, it
adds the following new properties: availableincomingbitrate optional provides an informative value representing the available inbound capacity of the network by reporting the total number of bits per second available for all of the candidate pair's incoming rtp streams.
... bytesreceieved optional the total number of payload bytes received (that is, the total number of bytes received minus any headers, p
adding, or other administrative overhead) on this candidate pair so far.
... bytessent optional the total number of payload bytes sent (that is, the total number of bytes sent minus any headers, p
adding, or other administrative overhead) so far on this candidate pair.
... 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.candidateType - Web APIs
syntax candidatetype = rtcicecandidatestats.candidatetype; value a domstring whose value is one of the strings found in the rtcicecandidatetype enumerated type:host the candidate is a host candidate, whose ip
address as specified in the rtcicecandidate.ip property is in fact the true
address of the remote peer.
... srflx the candidate is a server reflexive candidate; the ip indicates an intermediary
address assigned by the stun server to represent the candidate's peer anonymously.
... prflx the candidate is a peer reflexive candidate; the ip is an intermediary
address assigned by the stun server to represent the candidate's peer anonymously.
...the relay candidate's ip
address is an
address the turn server uses to forward the media between the two peers.
RTCIceCandidateStats - Web APIs
properties rtcicecandidatestats is based upon the rtcstats dictionary, so it includes those properties in
addition to the ones below.
...
address optional a string containing the
address of the candidate.
... this value may be an ipv4
address, an ipv6
address, or a fully-qualified domain name.
... this property was previously named ip and only accepted ip
addresses.
RTCIceCandidateType - Web APIs
host the candidate is a host candidate, whose ip
address as specified in the rtcicecandidate.ip property is in fact the true
address of the remote peer.
... srflx the candidate is a server reflexive candidate; the ip indicates an intermediary
address assigned by the stun server to represent the candidate's peer anonymously.
... prflx the candidate is a peer reflexive candidate; the ip is an intermediary
address assigned by the stun server to represent the candidate's peer anonymously.
...the relay candidate's ip
address is an
address the turn server uses to forward the media between the two peers.
Range - Web APIs
added the methods ispointinrange(), comparepoint(), and intersectsnode().
...
added the constructor range().
... working draft
added the method createcontextualfragment().
... working draft
added the methods getclientrects() and getboundingclientrect().
ResizeObserver - Web APIs
note: the content box is the box in which content can be placed, meaning the border box minus the p
adding and border width.
... the border box encompasses the content, p
adding, and border.
... the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px'; slider.
addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const 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.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.
addeventlistener('change', () => { if (checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'resizeobserver' in that specification.
Screen Capture API - Web APIs
the screen capture api introduces
additions to the existing media capture and streams api to let the user select a screen or portion of a screen (such as a window) to capture as a media stream.
...
additions to existing interfaces the screen capture api doesn't have any interfaces of its own; instead, it
adds one method to the existing mediadevices interface.
... mediadevices interface mediadevices.getdisplaymedia() the getdisplaymedia() method is
added to the mediadevices interface.
...
additions to existing dictionaries the screen capture api
adds properties to the following dictionaries defined by other specifications.
ScriptProcessorNode - Web APIs
events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface: audioprocess fired when an input buffer of a scriptprocessornode is ready to be processed.
... examples the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it,
adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and
add a small amount of white noise, before setting that result to be the output sample in each case.
...(var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(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); scrip...
Selection - Web APIs
methods selection.
addrange() a range object that will be
added to the selection.
... selection.selectallchildren()
adds all the children of the specified node to the selection.
... the above behavior applies to selections made using the following methods: selection.collapse() selection.collapsetostart() selection.collapsetoend() selection.extend() selection.selectallchildren() selection.
addrange() selection.setbaseandextent() and when the range is modified using the following methods: range.setstart() range.setend() range.setstartbefore() range.setstartafter() range.setendbefore() range.setendafter() range.collapse() range.selectnode() range.selectnodecontents() glossary other key terms used in this section.
...range objects can also be created via the dom and programmatically
added or removed from a selection.
Sensor APIs - Web APIs
additionally you can put object instantiation inside a try...catch block.
... let accelerometer = null; try { accelerometer = new accelerometer({ referenceframe: 'device' }); accelerometer.
addeventlistener('error', event => { // handle runtime errors.
... } else if (event.error.name === 'notreadableerror' ) { console.log('cannot connect to the sensor.'); } }); accelerometer.
addeventlistener('reading', () => reloadonshake(accelerometer)); accelerometer.start(); } catch (error) { // handle construction errors.
... let magsensor = new magnetometer({frequency: 60}); magsensor.
addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }) magsensor.
addeventlistener('error', event => { console.log(event.error.name, event.error.message); }) magsensor.start(); interfaces absoluteorientationsensorsecure...
SubtleCrypto.exportKey() - Web APIs
*/ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.
addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.
addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo export this example exports an rsa public encryption key as a pem-encoded subjectpublickeyinfo object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-oaep", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["encrypt", "decrypt"] ).then((keypair) => { const exportbutton = document.queryselector(".spki"); exportbutton.
addeventlistener("click", () => { exportcryptokey(keypair.publickey); }); }); json web key import this code exports an ecdsa private signing key as a json web key object.
...*/ window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".jwk"); exportbutton.
addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.exportkey()' in that specification.
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.
add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signaturevalue.classlist.
add(result ?
...ync function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signaturevalue.classlist.
add(result ?
...*/ async function verifymessage(key) { const signaturevalue = document.queryselector(".hmac .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "hmac", key, signature, encoded ); signaturevalue.classlist.
add(result ?
TouchEvent - Web APIs
the event can describe one or more points of contact with the screen and includes support for detecting movement,
addition and removal of contact points, and so forth.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">ev...
... using with
addeventlistener() and preventdefault() it's important to note that in many cases, both touch and mouse events get sent (in order to let non-touch-specific code still interact with the user).
... draft
added ontouchstart, ontouchend, ontouchmove, ontouchend global attribute handlers touch eventsthe definition of 'touchevent' in that specification.
Touch events - Web APIs
function startup() { var el = document.getelementbyid("canvas"); el.
addeventlistener("touchstart", handlestart, false); el.
addeventlistener("touchend", handleend, false); el.
addeventlistener("touchcancel", handlecancel, false); el.
addeventlistener("touchmove", handlemove, false); } document.
addeventlistener("domcontentloaded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.
... and a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { console.log("can't figure out which touch to end"); } } } this is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call array.splice(), we simply remove the old entry from the ongoing touch list, without
adding in the updated information.
... jsfiddle example
additional tips this section provides
additional tips on how to handle touch events in your web application.
... draft
added radiusx, radiusy, rotationangle, force properties touch eventsthe definition of 'touch' in that specification.
Detect WebGL - Web APIs
<p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it.
... window.
addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); //
adding click event handler to button.
... button.
addeventlistener("click", detectwebglcontext, false); function detectwebglcontext () { // create canvas element.
... the canvas is not
added to the // document itself, so it is never displayed in the // browser window.
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id...
...="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use 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 = gl.createprogram(); ...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").
addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); ...
...}, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.
addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); p...
Raining rectangles - Web APIs
in
addition, the example demonstrates how to integrate the webgl function calls within a game loop.
... you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } ;(function(){ "use strict" window.
addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if ...
...(!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .
addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation.
...// in
addition we need to remember that vertical position in // webgl increases from bottom to top, unlike in the browser // window.
Simple color animation - Web APIs
a click event handler
additionally enables the basic user interaction of starting and stopping the animation.
.../p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; p
adding : 0.6em; } window.
addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.
addeventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second.
... drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.
addeventlistener("click", startanimation, false); verb.innerhtml="start"; // stop animation by clearing the timer.
Creating 3D objects using WebGL - Web APIs
« previousnext » let's take our square plane into three dimensions by
adding five more faces to create a cube.
...// top face -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, // bottom face -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // right face 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, // left face -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, ]; since we've
added a z-component to our vertices, we need to update the numcomponents of our vertexposition attribute to 3.
... drawing the cube next we need to
add code to our drawscene() function to draw using the cube's index buffer,
adding new gl.bindbuffer() and gl.drawelements() calls: // tell webgl which indices to use to index the vertices gl.bindbuffer(gl.element_array_buffer, buffers.indices); ...
... finally, let's replace our variable squarerotation by cuberotation and
add a second rotation around the x axis: mat4.rotate(modelviewmatrix, modelviewmatrix, cuberotation * .7, [0, 1, 0]); at this point, we now have an animated cube rotating, its six faces rather vividly colored.
Using shaders to apply color in WebGL - Web APIs
« previousnext » having created a square plane in the previous demonstration, the next obvious step is to
add a splash of color to it.
...we'll do that by
adding the following code to our initbuffers() function: function initbuffers(){ ...
... drawing using the colors next, it's necessary to
add code to look up the attribute location for the colors and setup that attribute for the shader program: const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexcolor: gl.getattriblocation(shaderprogram, 'avertexcolor'), }, ...
... then, drawscene() can have the following
added to it so it actually uses these colors when drawing the square: // tell webgl how to pull out the colors from the color buffer // into the vertexcolor attribute.
WebGL best practices - Web APIs
general topics
address and eliminate webgl errors your application should run without generating any webgl errors (as returned by geterror).
...(the simplest case being
adding a uniform vector to the texture coordinates attribute vector) if visually acceptable, one can transform the texture coordinates in the vertex shader rather than in the fragment shader, to get better performance.
...
additionally, querying compile status is a synchronous call, which breaks pipelining.
...it also
adds
additional compression that makes basis universal compressed texture files much smaller than regular compressed textures over-the-wire, more comparable to jpeg.
A simple RTCDataChannel sample - Web APIs
function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.
addeventlistener('click', connectpeers, false); disconnectbutton.
addeventlistener('click', disconnectpeers, false); sendbutton.
addeventlistener('click', sendmessage, false); } this is quite straightforward.
... note: in a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, udp, udp with a relay, tcp, etc.) by calling rtcpeerconnection.
addicecandidate(), and they go back and forth until agreement is reached.
... localconnection.onicecandidate = e => !e.candidate || remoteconnection.
addicecandidate(e.candidate) .catch(handle
addcandidateerror); remoteconnection.onicecandidate = e => !e.candidate || localconnection.
addicecandidate(e.candidate) .catch(handle
addcandidateerror); we configure each rtcpeerconnection to have an event handler for the icecandidate event.
...these handlers can do whatever's needed, but in this example, all we need to do is update the user interface: function handlelocal
addcandidatesuccess() { connectbutton.disabled = true; } function handleremote
addcandidatesuccess() { disconnectbutton.disabled = false; } the only thing we do here is disable the "connect" button when the local peer is connected and enable the "disconnect" button when the remote peer connects.
Taking still photos with WebRTC - Web APIs
the startup() function the startup() function is run when the page has finished loading, courtesy of window.
addeventlistener().
...to avoid blocking until that happens, we
add an event listener to video for the canplay event, which is delivered when the video playback actually begins.
... video.
addeventlistener('canplay', function(ev){ if (!streaming) { height = video.videoheight / (video.videowidth/width); video.setattribute('width', width); video.setattribute('height', height); canvas.setattribute('width', width); canvas.setattribute('height', height); streaming = true; } }, false); this callback does nothing unless it's the first time it's been called; this is tested by looking at the value of our streaming variable, which is false the first time this method is run.
... handle clicks on the button to capture a still photo each time the user clicks the startbutton, we need to
add an event listener to the button, to be called when the click event is issued: startbutton.
addeventlistener('click', function(ev){ takepicture(); ev.preventdefault(); }, false); this method is simple enough: it just calls our takepicture() function, defined below in the section capturing a frame from the stream, then calls event.preventdefault() on the received event to preve...
Using the Web Animations API - Web APIs
safari supports web animations in its technology preview version and there is also a handy polyfill that tests for feature support and
adds it where necessary.
... nommingcake.play(); } when a user holds their mouse down or presses their finger on the cake on a touch screen, we can now call growalice to make all the animations play: cake.
addeventlistener("mousedown", growalice, false); cake.
addeventlistener("touchstart", growalice, false); other useful methods in
addition to pausing and playing, we can use the following animation methods: animation.finish() skips to the end of the animation.
...this is because the bottle changes her animation’s playbackrate from 1 to -1: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } bottle.
addeventlistener("mousedown", shrinkalice, false); bottle.
addeventlistener("touchstart", shrinkalice, false); in through the looking-glass, alice travels to a world where she must run to stay in place — and run twice as fast to move forward!
... // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * .9); } }, 3000); but urging them on by clicking or tapping causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * 1.1); } document.
addeventlistener("click", gofaster); document.
addeventlistener("touchstart", gofaster); the background elements also have playbackrates that are impacted when you click or tap.
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.
...beside obvious distortion effects, it is often used to
add a warm feeling to the signal.
... audio spatialization these interfaces allow you to
add audio spatialization panning effects to your audio sources.
... audioworklet the audioworklet interface is available through the audiocontext object's audioworklet, and lets you
add modules to the audio worklet to be executed off the main thread.
Using the Web Storage API - Web APIs
the landing page provides controls that can be used to customize the color, font, and decorative image: when you choose different options, the page is instantly updated; in
addition, your choices are stored in localstorage, so that when you leave the page and load it again, later on, your choices are remembered.
...ated to start with, in main.js, we test whether the storage object has already been populated (i.e., the page was previously accessed): if(!localstorage.getitem('bgcolor')) { populatestorage(); } else { setstyles(); } the storage.getitem() method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populatestorage() to
add the existing customization values to the storage.
... on the events page (see events.js) the only javascript is as follows: window.
addeventlistener('storage', function(e) { document.queryselector('.my-key').textcontent = e.key; document.queryselector('.my-old').textcontent = e.oldvalue; document.queryselector('.my-new').textcontent = e.newvalue; document.queryselector('.my-url').textcontent = e.url; document.queryselector('.my-storage').textcontent = json.stringify(e.storagearea); }); here we
add an event listener to ...
...we don't use these in our demo, but they are very simple to
add to your project: storage.removeitem() takes a single argument — the key of the data item you want to remove — and removes it from the storage object for that domain.
Window.devicePixelRatio - Web APIs
use window.devicepixelratio to determine how much extra pixel density should be
added to allow for a sharper image.
... let pixelratiobox = document.queryselector(".pixel-ratio"); let mqstring = `(resolution: ${window.devicepixelratio}dppx)`; const updatepixelratio = () => { let pr = window.devicepixelratio; let prstring = (pr * 100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).
addlistener(updatepixelratio); the string mqstring is set up to be the media query itself.
... then the updatepixelratio() function is called once to display the starting value, after which the media query is created using matchmedia() and
addeventlistener() is called to set up updatepixelratio() as a handler for the change event.
... try it and watch what happens!</p> </div> <div class="pixel-ratio"></div> </div> css body { font: 22px arial, sans-serif; } .container { top: 2em; width: 22em; height: 14em; border: 2px solid #22d; margin: 0 auto; p
adding: 0; background-color: #a9f; } .inner-container { p
adding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status comment css object model (cssom) view modulethe definition...
Window.openDialog() - Web APIs
the optional parameters, if present, are bundled up in a javascript array object and
added to the newly created window as a property named window.arguments.
... passing extra parameters to the dialog to pass extra parameters into the dialog, you can simply supply them after the windowfeatures parameter: opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); the extra parameters will then get packed into a property named arguments of type array, and this property gets
added to the newly opened dialog window.
... var retvals = {
address: null, delivery: null }; opendialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retvals); if you set the properties of the retvals object in the dialog code as described below, you can now access them via the retvals array after the opendialog() call returns.
... inside the dialog code, you can set the properties as follows: var retvals = window.arguments[2]; retvals.
address = entered
address; retvals.delivery = "immediate"; specification this is not part of any specification.
Window: popstate event - Web APIs
it changes the current history entry to that of the last page the user visited or, if history.pushstate() has been used to
add a history entry to the history stack, that history entry is used instead.
... these methods and their corresponding events can be used to
add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same document.
...the entry is now said to have "persisted user state." this information the browser might
add to the history session entry may include, for instance, the document's scroll position, the values of form inputs, and other such data.
... examples a page at http://example.com/example.html running the following code will generate logs as indicated: window.
addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.bac...
window.postMessage() - Web APIs
the dispatched event otherwindow can listen for dispatched messages by executing the following javascript: window.
addeventlistener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:8080") return; // ...
... security concerns if you do not expect to receive messages from other sites, do not
add any event listeners for message events.
... the secret response is: rheeeeet!" } window.
addeventlistener("message", receivemessage, false); /* * in the popup's scripts, running on <http://example.com>: */ // called sometime after postmessage is called function receivemessage(event) { // do we trust the sender of this message?
... the secret response " + "is: rheeeeet!", event.origin); } window.
addeventlistener("message", receivemessage, false); notes any window may access this method on any other window, at any time, regardless of the location of the document in the window, to send it a message.
XRSystem: requestSession() - Web APIs
the environmentblendmode is expected to be opaque if possible, but might be
additive if the hardware requires it.
... navigator.xr.requestsession("immersive-vr") .then((xrsession) => { xrsession.
addeventlistener('end', onxrsessionended); // do necessary session setup here.
...
adding controls is a necessary step because entering xr requires a user action.
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.
addeventlistener('click', onbuttonclicked); immersivebutton.innerhtml = 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
ARIA Screen Reader Implementors Guide - Accessibility
optionally, create a second,
additional queue if the user configures a second hardware channel: if there are two channels for presentation (e.g.
... busy regions: any changes in a region marked with aria-busy="true" should not be
added to the queue until that attribute is cleared.
... politeness (aria-live or from role) takes first precedence,: items should be
added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g.
...as a new event for an atomic region is
added to the queue remove an earlier event for the same region.
Using the aria-relevant attribute - Accessibility
values a space-delimited list of one or more of the following values:
additions element nodes
added to the accessibility tree within the live region; should be considered relevant.
... all is equivalent to
additions removals text.
... aria-relevant="
additions text" is the default value on a live region.
...
additional resources wai-aria specification for aria-relevant ...
Using the status role - Accessibility
when the role is
added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it.
... possible effects on user agents and assistive technology when the status role is
added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a status role in the operating system's accessibility api.
... 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 role="status">your changes were automatically saved.</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: figure role - Accessibility
you can
add a caption or label to your figure in a number of ways.
... you could
add an id to an element containing content that describes the figure, and then reference that id inside an appropriate attribute on the figure to associate the figure with the label: <div role="figure" aria-labelledby="figure-1"> ...
... aria-label if there is no element containing text that could serve as a label, you can
add the label directly as a value on the aria-label on the element with the figure role or on the <figure> element.
...if you don't have control over the html semantics, you can improve the accessibility of html by
adding these roles and properties with javascript.
ARIA: grid role - Accessibility
eek 40</th> <td role="gridcell" tabindex="-1"> 30 </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { p
adding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0...
...data-row="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').
addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.ro...
... <td role="gridcell" tabindex="-1"> 3 </td> <td role="gridcell" tabindex="-1"> 4 </td> <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- …
additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { p
adding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; o...
...data-row="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').
addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.ro...
ARIA: switch role - Accessibility
possible effects on user agents and assistive technology when the switch role is
added to an element, the user agent handles it like this: the element is exposed to the system's accessibility infrastructure as having the switch role.
...
adding the switch role in aria this simple example just creates a widget and assigns the aria switch role to it.
... document.queryselectorall(".switch").foreach(function(theswitch) { theswitch.
addeventlistener("click", handleclickevent, false); }); function handleclickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm.
... button.switch { margin: 0; p
adding: 0; width: 70px; height: 26px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line-height: 20px; vertical-align: middle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch span { p
adding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262; color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line-height: 20px; user-select: none; vertical-align: middle; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none;...
ARIA: checkbox role - Accessibility
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and
adding aria.
... html <span role="checkbox" id="chkpref" aria-checked="false" onclick="changecheckbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label" onclick="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label> css [role="checkbox"] { p
adding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(event) { let item = document.getelementbyid('chkpref'); switch(item.getattribute('aria-checked')) { case "true": item.setattribute('aria-checked', "false"); break; case "false": ite...
...m.setattribute('aria-checked', "true"); break; } } accessibility concerns when the checkbox role is
added to an element, the user agent should do the following: expose the element as having a checkbox role in the operating system's accessibility api.
... best practices the first rule of aria is: if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and
adding an aria role, state or property to make it accessible.
ARIA: dialog role - Accessibility
however,
adding role="dialog" alone is not sufficient to make a dialog accessible.
...
additionally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met.
...
additionally, if the dialog contains
additional descriptive text besides the dialog title, this text can be associated with the dialog using the aria-describedby attribute.
...in
addition to the needed control, dialogs can contain any number of focusable elements, even entire forms or other container widgets like tabs.
ARIA: heading role - Accessibility
in
addition, the level tells assistive technologies which part of the page structure this heading represents.
...in that case, the newly-
added headings need aria-level attributes whose values are consistent with the rest of the document structure.
...
added benefits none.
...the aria-level attribute, in
addition, determines what level of heading is being exposed.
WAI-ARIA Roles - Accessibility
screen readers will instantly start reading out the updated content when the role is
added.
...
adding role="button" will make an element appear as a button control to a screen reader.
... document rolegenerally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are
added to or removed from either end of the list as the user scrolls.
... please claim the role you want to work on by
adding your name after the role's name: (old pages are linked from https://developer.mozilla.org/docs/web/accessibility/aria/aria_techniques).
Basic form hints - Accessibility
ked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <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> describing with aria form controls sometimes have a description associated with them, in
addition to the label.
... <button aria-describedby="descriptionrevert">revert</button> <div id="descriptionrevert">reverting will undo any changes that have been made since the last save.</div> note: the aria-describedby attribute is used for other purposes, in
addition to form controls.
...on lines 4 and 12, the aria-required attributes are set to true (in
addition to the asterisks next to the labels), indicating that the name and email fields are required.
... the second part of the example, a snippet of javascript validates the email format, and sets the aria-invalid attribute of the email field (line 12 of the html) according to the result (in
addition to changing the presentation of the element).
ARIA - Accessibility
these are specified by
adding attributes to the element.
... along with placing them directly in the markup, aria attributes can be
added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom.
...in
addition, the version of the operating system, browser, and assistive technology are contributing factors.
...learn how to improve accessibility of html forms using
additional aria attributes.
Web accessibility for seizures and physical reactions - Accessibility
"a pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation" in
addition to stripes, checkered patterns have also been known to cause photosensitive seizures, according to cedars-sinai.
...only a few types of epilepsies are photosensitive though, and the vast majority of epilepsies are not." in
addition to seizures brought about by photosensitivity, listening to certain pieces of music can also trigger what are called musicogenic seizures, although these types of seizures seem to be much more rare.
...
additional concerns exist for individuals with motor-skills problems.
...in other words, eric's techniques
address the refresh-rate problem.
:valid - CSS: Cascading Style Sheets
to
add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid.
... note: we've used ::before to
add these labels, as we were already using ::after for the "required" labels.
...the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email
address.
...people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an
additional indicator that does not rely on color to convey meaning.
pad - CSS: Cascading Style Sheets
if the minimum length is not reached, the representation will be p
added with the specified <symbol>.
... description if a marker representation is smaller than the specified pad length, then the marker will be p
added with the specified pad symbol.
...pad descriptor takes the minimum marker length as an integer and a symbol to be used for p
adding as the second parameter.
...<number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples p
adding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification status comment css counter styles level 3the definition of 'pad...
Attribute selectors - CSS: Cascading Style Sheets
r: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { p
adding: 2px; } syntax [attr] represents elements with an attribute name of attr.
... [attr operator value i]
adding an i (or i) before the closing bracket causes the value to be compared case-insensitively (for characters within the ascii range).
... [attr operator value s]
adding an s (or s) before the closing bracket causes the value to be compared case-sensitively (for characters within the ascii range).
... working draft
adds modifier for ascii case-sensitive and case-insensitive attribute value selection.
CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their p
adding and margin—that are generated for elements and laid out according to the visual formatting model.
... reference properties properties controlling the flow of content in a box overflow overflow-x overflow-y properties controlling the size of a box height width max-height max-width min-height min-width properties controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the p
addings of a box p
adding p
adding-bottom p
adding-left p
adding-right p
adding-top other properties visibility guides introduction to the css box model explains one of the fundamental concept of css: the box model.
... this model defines how css lays out elements, including their content, p
adding, border, and margin areas.
... specifications specification status comment css basic box model working draft
added margin-trim css level 2 (revision 1) recommendation css level 1 recommendation initial definition.
Basic concepts of flexbox - CSS: Cascading Style Sheets
try editing the items or
adding
additional items in order to test the initial behavior of flexbox.
... changing flex-direction
adding the flex-direction property to the flex container allows us to change the direction in which our flex items display.
... to cause wrapping behaviour
add the property flex-wrap with a value of wrap.
... the flex-shrink property where the flex-grow property deals with
adding space in the main axis, the flex-shrink property controls how it is taken away.
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
if you want to cause them to wrap once they become too wide you must
add the flex-wrap property with a value of wrap, or use the shorthand flex-flow with values of row wrap or column wrap.
...if you assign percentage widths to flex items — either as flex-basis or by
adding a width to the item itself leaving the value of flex-basis as auto — you can get the impression of a two dimensional layout.
...in most cases however,
adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component.
...if you
add more content to the second item, it changes row once it gets long enough.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
horizontal margins, borders, and p
adding are respected between these boxes.
...we see this with a very simple layout of two paragraphs, to which i have
added a border.
... the default browser stylesheet
adds spacing between the paragraphs by way of
adding a margin to the top and bottom.
... the display property and flow layout in
addition to the rules existing in css2.1, new levels of css further describe the behaviour of block and inline boxes.
Introduction to formatting contexts - CSS: Cascading Style Sheets
elements participating in a bfc use the rules outlined by the css box model, which defines how an element's margins, borders, and p
adding interact with other blocks in the same context.
...in
addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose.
...in a horizontal writing mode line, horizontal p
adding, borders and margin will be applied to the element and push the text away left and right.
...vertical p
adding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by p
adding and borders.
Subgrid - CSS: Cascading Style Sheets
introduction to subgrid when you
add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created.
... no implicit grid in a subgridded dimension if you need to autoplace items, and do not know how many items you will have, take care when creating a subgrid, as it will prevent
additional rows being created to hold those items.
...this is achieved by
adding a list of line names enclosed in square brackets after the subgrid keyword.
... if you have four lines in your subgrid, to name them all you could use the syntax grid-template-columns: subgrid [line1] [line2] [line3] [line4] lines specified on the subgrid are
added to any lines specified on the parent so you can use either or both.
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.
... selectors level 3 recommendation
added the ~ general sibling combinator and tree-structural pseudo-classes.
...
additional attribute selectors css level 2 (revision 1) recommendation
added the > child and + adjacent sibling combinators.
...
added the universal and attribute selectors.
Overview of CSS Shapes - CSS: Cascading Style Sheets
the specification defines four <basic-shape> values, which are: inset() circle() ellipse() polygon() using the value inset() wraps text around a rectangular shape however you are able to
add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.
... shapes from the box value shapes can also be created around the box value, therefore you could create your shape on the: border-box p
adding-box content-box margin-box in the example below you can change the value border-box to any of the other allowed values to see how the shape moves closer or further away from the box.
... the shape-margin property the shape-margin property
adds a margin to shape-outside.
... in the example below we have
added a shape-margin to a basic shape.
Card - CSS: Cascading Style Sheets
when
added to a collection of cards, the cards should line up in two dimensions.
...this means it will take up any
additional space.
...therefore this will fit the content
added to it.
...this would be a reasonable way to lay out the card, although i have a slight preference for being able to control the tracks from the container rather than needing to
add rules to the items.
Testing media queries programmatically - CSS: Cascading Style Sheets
to do this, call the
addlistener() method on the mediaquerylist object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from true to false): // create the query list.
...handleorientationchange(mediaquerylist); //
add the callback function as a listener to the query list.
... mediaquerylist.
addlistener(handleorientationchange); this code creates the orientation-testing media query list, then
adds an event listener to it.
... after
adding the listener, we also call the listener directly.
Shorthand properties - CSS: Cascading Style Sheets
handling of these cases are grouped in several categories: shorthands handling properties related to edges of a box, like border-style, margin or p
adding, always use a consistent 1-to-4-value syntax representing those edges: the 1-value syntax: border-width: 1em — the unique value represents all edges the 2-value syntax: border-width: 1em 2em — the first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
...can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some
additional properties.) see background for more detailed information, including css3 properties.
...can be simplified as: border: 1px solid #000; margin and p
adding properties shorthand versions of margin and p
adding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values.
... shorthand properties: animation, background, border, border-bottom, border-color, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, offset, outline, overflow, p
adding, place-content, place-items, place-self, text-decoration, transition ...
Value definition syntax - CSS: Cascading Style Sheets
in
addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).
... note that multipliers cannot be
added and have all precedence over combinators.
... candidate recommendation
adds the hash mark multiplier.
... recommendation
adds the double ampersand combinator.
aspect-ratio - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has
added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaspect-ratio experimentalchrome partial support 79notes partial support 79notes notes chrome 79
adds internal support only for mapped valuesedge partial support 79notes partial support 79notes notes edge 79
adds internal support only for mapped valuesfirefox partial support 71notes partial support 71notes notes firefox 71
adds internal support only for mapped values no support...
... 69 — 71notes disabled notes firefox 69
adds internal support only for mapped valuesdisabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support nowebview android partial support 79notes partial support 79notes notes webview 79
adds internal support only for mapped valueschrome android partial support 79notes partial support 79notes notes chrome 79
adds internal support only for mapped valuesfirefox android no support noopera android no support nosafari ios no support ...
border-spacing - CSS: Cascading Style Sheets
the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) p
adding on the table.
... examples spacing and p
adding table cells this example applies a spacing of .5em vertically and 1em horizontally between a table's cells.
... note how, along its outside edges, the table's p
adding values are
added to its border-spacing values.
... html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; p
adding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'border-spacing' in that specification.
box-decoration-break - CSS: Cascading Style Sheets
the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin p
adding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
... clone each box fragment is rendered independently with the specified border, p
adding, and margin wrapping each fragment.
...initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; p
adding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ...
...results in:
adding box-decoration-break: clone to the above styles: -webkit-box-decoration-break: clone; box-decoration-break: clone; ...
env() - CSS: Cascading Style Sheets
to tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to
add a new viewport meta value: <meta name="viewport" content="viewport-fit=cover" /> body { p
adding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); } in
addition, unlike custom properties, which cannot be used outside of declarations, the env() function can be used in place of any part of a proper...
... <p> if the <code>env()</code> function is supported in your browser, this paragraph’s text will have 50px of p
adding between it and the left border — but not the top, right and bottom.
... this is because the accompanying css is the equivalent of <code>p
adding: 0 0 0 50px</code>, because, unlike other css properties, user agent property names are case-sensitive.
... </p> p { width: 300px; border: 2px solid red; p
adding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(safe-area-inset-bottom, 50px) env(safe-area-inset-left, 50px); } example values p
adding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */ p
adding: env(safe-area-inset-bottom, 50px); /* 50px because ua properties are case sensitive */ p
adding: env(x, 50px 20px); /* as if p
adding: '50px 20px' were set because x is not a valid environment variable */ p
adding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid p
adding value and x is not a valid environment variable */ the syntax of the fallback, like that of custom properties, allows commas.
font-stretch - CSS: Cascading Style Sheets
tween keyword values and numeric percentages: keyword percentage ultra-condensed 50% extra-condensed 62.5% condensed 75% semi-condensed 87.5% normal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% description some font families offer
additional faces in which the characters are narrower than the normal face (condensed faces) or wider than the normal face (expanded faces).
...of supplying various different percentage values of font-stretch on two different fonts: 50% 62.5% 75% 87.5% 100% 112.5% 125% 150% 200% helvetica neue league mono variable helvetica neue, which is installed by default on macos, has a single condensed face in
addition to the normal face.
...erfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; p
adding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; } result specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
... working draft
adds the <percentage> syntax for variable fonts.
font-style - CSS: Cascading Style Sheets
oblique <angle> selects a font classified as oblique, and
additionally specifies an angle for the slant of the text.
... html <header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, w
addling like an elephantine lizard up holborn hill.</p> </div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; fon...
... > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.
addeventlistener('input', update); update(); accessibility concerns large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as dyslexia to read.
... working draft
adds the ability to specify an angle after oblique css fonts module level 3the definition of 'font-style' in that specification.
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with
added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
... 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.
...while this can and should be done by including a background-color on every background image, the css image() function allows
adding allows only including background colors should an image fail to load, which means you can
add a fall back color should a transparent png/gif/webp not load.
...
additionally, the entire container would have had the same background color.
<length> - CSS: Cascading Style Sheets
lengths can be used in numerous css properties, such as width, height, margin, p
adding, border-width, font-size, and text-shadow.
...gin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.
addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status ...
... editor's draft
adds the vi, vb, ic, lh, and rlh units.
... candidate recommendation
adds the ch, rem, vw, vh, vmin, vmax, and q units.
mask-composite - CSS: Cascading Style Sheets
/* keyword values */ mask-composite:
add; mask-composite: subtract; mask-composite: intersect; mask-composite: exclude; /* global values */ mask-composite: inherit; mask-composite: initial; mask-composite: unset; syntax one or more of the keyword values listed below, separated by commas.
...
add the source is placed over the destination.
... formal definition initial value
addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> =
add | subtract | intersect | exclude examples compositing mask layers with
addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.o...
...rg/files/12676/star.svg); mask-size: 100% 100%; mask-composite:
add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="
add">
add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.
addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-composite' in that specification.
mask-repeat - CSS: Cascading Style Sheets
round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be
added.
... when the next image is
added, all of the current ones compress to allow room.
... example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be
added.
...d"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.
addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repe...
min() - CSS: Cascading Style Sheets
the expressions are full math expressions, so you can use direct
addition, subtraction, multiplication and division without using the calc() function itself.
... the expression can be values combining the
addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules.
... let's look at some css: input, label { p
adding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px solid black; p
adding: 4px; } here, the form itself, along with the margin, border, and p
adding, will be 100% of its parent's width.
... we declare the input and label to be the lesser of 40% of the form width up to the p
adding or 400px wide, whichever is smaller.
outline-style - CSS: Cascading Style Sheets
html <div> <p class="auto">outline demo</p> </div> css .auto { outline-style: auto; /* same result as "outline: auto" */ } /* to make the demo clearer */ * { outline-width: 10px; p
adding: 15px; } result setting outline style to dashed and dotted html <div> <div class="dotted"> <p class="dashed">outline demo</p> </div> </div> css .dotted { outline-style: dotted; /* same result as "outline: dotted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * { outline-width: 10px; p
adding: 15px; } result setting outline style to solid and ...
...double html <div> <div class="solid"> <p class="double">outline demo</p> </div> </div> css .solid { outline-style: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10px; p
adding: 15px; } result setting outline style to groove and ridge html <div> <div class="groove"> <p class="ridge">outline demo</p> </div> </div> css .groove { outline-style: groove; } .ridge { outline-style: ridge; } /* to make the demo clearer */ * { outline-width: 10px; p
adding: 15px; } result setting outline style to inset and outset html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { ...
...outline-width: 10px; p
adding: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-style' in that specification.
... recommendation
added auto value.
<transform-function> - CSS: Cascading Style Sheets
the translation vector (tx, ty) must be expressed separately, as two
additional parameters.
...latex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; p
adding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; fon...
...rm: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.
addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status comment css transforms level 2the ...
... editor's draft
added 3d transform functions.
DOM onevent handlers - Developer guides
two common approaches are
addeventlistener() and the specific onevent handlers.
... you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways:
adding an html attribute named on<eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(event) { … }.
...in order to allow multiple handlers to be installed for the same event on a given object, you can call its
addeventlistener() method, which manages a list of handlers for the given event on the object.
... when discussing the various methods of listening to events: event listener refers to a function or object registered via eventtarget.
addeventlistener() event handler refers to a function registered via on… attributes or properties specifications specification status comment html living standardthe definition of 'event handlers' in that specification.
Overview of events and handlers - Developer guides
events and event handling become central to web programming with the
addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering.
...browsers use as the registration method for the function which will handle those data structures a method called
addeventlistener which expects as arguments a string event type name and the handler function.
..."eventprototype" : "objectprototype"; alert("we got a click event at " + ev.timestamp + " with an argument object derived from: " + objkind ); }; and second register our function with the the button object, either on the scripting side using the dom (document object model) representation of the html page: var buttondomelement = document.queryselector('#buttonone'); buttondomelement.
addeventlistener('click', example_click_handler); or within the html page by
adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages.
...for example, code might be attached as: var funcinit = function(){ // user code goes here and can safely
address all the html elements from the page // since the document has successfully been 'loaded' } document.
addeventlistener('domcontentloaded', funcinit); so that this code will only be executed after the document object emits the 'domcontentloaded' event because the html has been parsed and javasript objects created representing each of the nodes of the html document.
Rich-Text Editing in Mozilla - Developer guides
most commands affect the document's selection (bold, italics, etc), while others insert new elements (
adding a link) or affect an entire line (indenting).
... figure 2 : first example html: <body contenteditable="true" onload="load()"> javascript: function load(){ window.document.designmode = "on"; } example 2 the second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be
added and the color of text changed.
...ument.open(); oprntwin.document.write("<!doctype 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; p
adding: 12px; overflow: scroll; } #textbox #sourcetext { p
adding: 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="too...
...le="quote" onclick="formatdoc('formatblock','blockquote');" src="data:image/gif;base64,r0lgodlhfgawaiqxac1nqjfrjkbgmt9nqujnsk9xrfj7u2r9qmkbt1igzhmorm6sz4oxw3odz4cl2zsnw6kxyqo306k63bg70btb0rdi3bvi4p///////////////////////////////////yh5baekab8alaaaaaawabyaaavp4ceozgmeakqubes2cekkervei1zzuogyflakecezfi0ggtgkebatfmjavxwevookeqgabb9iqdcmrlpjetrqqlhhjinrtq/b7/i8fp8paqa7" /> <img class="intlink" title="
add indentation" onclick="formatdoc('outdent');" src="data:image/gif;base64,r0lgodlhfgawamihaaaaadljwlie35gjuaezxtdv3nha7p///yh5baeaaacalaaaaaawabyaaam2elrc/jdkcqg9f2i7u8agqgyk1z2eibil+twqemxhmczsyvj3e4ahk+sfnagtxsqdqww6n5ceads=" /> <img class="intlink" title="delete indentation" onclick="formatdoc('indent');" src="data:image/gif;base64,r0lgodlhfgawaomiaaaaadljwl9vj1ie35gjuaezxtdv3nha7p//////////////...
Using HTML sections and outlines - Developer guides
new semantic elements were
added to html5 to improve and clarify the sectioning of websites into meaningful areas of content.
...this is often useful if you want to
add css selectors to the class property of the element to style the document.
...you can
add a specific script to allow this, as seen below: <!--[if lt ie 9]> <script> document.createelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> as a last precaution, you could ...
...also
add an explicit <noscript> element inside the <head> element to warn any users that have javascript disabled that your page relies on javascript: <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> this leads to the following code to allow the support of the html5 sections and headings elements in non-html5 browsers, even for internet explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting: <!--[if lt ie 9]> <script> document.createelement("article"); docum...
User input and controls - Developer guides
for example if you want to
add controls when any key gets pressed, you need to
add an event listener on the window object: window.
addeventlistener("keydown", handlekeydown, true); window.
addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
... if you want to use touch events, you need to
add event listeners and specify handler functions, which will be called when the event gets fired: element.
addeventlistener("touchstart", handlestart, false);
element.
addeventlistener("touchcancel", handlecancel, false);
element.
addeventlistener("touchend", handleend, false);
element.
addeventlistener("touchmove", handlemove, false); where element is the dom element you want to register the...
...need to fork your code something like this: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } else if (elem.msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } note: to find more out about
adding fullscreen functionality your application, read our documentation about using fullscreen mode.
...
</div> in which we: set the draggable attribute to true on the element that you wish to make draggable
add a listener for the dragstart event and set the drag data within this listener note: you can find more information in the mdn drag & drop documentation.
<button>: The Button element - HTML: Hypertext Markup Language
you can
add inner html content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering.
... example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></svg>
add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology.
... hand tremors and the giant-button-problem - axess lab firefox firefox will
add a small dotted border on a focused button.
... this border is declared through css in the browser stylesheet, but you can override it to
add your own focused style using button::-moz-focus-inner { }.
<input type="date"> - HTML: Hypertext Markup Language
additional attributes along with the attributes common to all <input> elements, date inputs have the following attributes: attribute description max the latest acceptable date min the earliest acceptable date step the stepping interval, when clicking up and down spinner buttons and validating the date max the latest date to accept.
...we make use of the :valid and :invalid pseudo-elements to
add an icon next to the input, based on whether or not the current value is valid.
... label { display: flex; align-items: center; } span::after { p
adding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid+span::after { content: '✓'; } important: client-side form validation is no substitute for validating on the server.
...l for="year">year:</label> <select id="year" name="year"> </select> </span> </div> </form> the months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.) span { p
adding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } javascript the other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="date">.
<input type="week"> - HTML: Hypertext Markup Language
you can also get and set the value in javascript using the input element's value property, for example: var weekcontrol = document.queryselector('input[type="week"]'); weekcontrol.value = '2017-w45';
additional attributes in
addition to the attributes common to <input> elements, week inputs offer the following attributes: attribute description max the latest year and week to accept as valid input min the earliest year and week to accept as valid input readonly a boolean which, if present, indicates that the user cannot edit the field's content...
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers.
... making week values required in
addition you can use the required attribute to make filling in the week mandatory.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } the other part of the code that may be of interest is the feature detection code.
itemscope - HTML: Hypertext Markup Language
i like to
add a dash of nutmeg.</span> <br> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <span itemprop="ratingvalue">4.0</span> stars based on <span itemprop="reviewcount">35</span> reviews </span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> tota...
...use
additional sugar for tart apples.
...i like to
add a dash of nutmeg.
...use
additional sugar for tart apples .
Microdata - HTML: Hypertext Markup Language
to
add a property to an item, the itemprop attribute is used on one of the item's descendants.
...due to the implementation of
additional marking parameters of schema's vocabulary, the indexation of information in russian-language web-pages became considerably more successful.
... itemprop – used to
add properties to an item.
...itemref provides a list of element ids (not itemids) with
additional properties elsewhere in the document.
Choosing between www and non-www URLs - HTTP
example: a server receives a request for http://www.example.org/wh
addup (when the canonical domain is example.org) the server answers with a code 301 with the header location: http://example.org/wh
addup.
... using <link rel="canonical"> it is possible to
add a special html <link> element to a page to indicate what the canonical
address of a page is.
... when
adding such a tag, you serve the same content for both domains, telling search engines which url is canonical.
... in the previous example, http://www.example.org/wh
addup would serve the same content as http://example.org/wh
addup, but with an
additional <link> element in the head: <link href="http://example.org/wh
addup" rel="canonical"> unlike the previous case, browser history will consider non-www and www urls as independent entries.
Identifying resources on the Web - HTTP
urls and urns urls the most common form of uri is the uniform resource locator (url), which is known as the web
address.
... https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's
address bar to tell it to load the associated page (resource).
...common schemes are: scheme description data data uris file host-specific file names ftp file transfer protocol http/https hyper text transfer protocol (secure) javascript url-embedded javascript code mailto electronic mail
address ssh secure shell tel telephone urn uniform resource names view-source source code of the resource ws/wss (encrypted) websocket connections authority www.example.com is the domain name or authority that governs the namespace.
...alternatively, it is possible to directly use an ip
address, but because it is less convenient, it is not often used on the web.
MIME types (IANA media types) - HTTP
an optional parameter can be
added to provide
additional details: type/subtype;parameter=value for example, for any mime type whose main type is text, the optional charset parameter can be used to specify the character set used for the characters in the data.
....pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in;
add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
...the optional codecs parameter can be
added to the mime type to further specify which codecs to use and what options were used to encode the media, such as codec profile, level, or other such information.
...nt accept-ranges: bytes content-type: multipart/byteranges; boundary=3d6b6a416f9b5 content-length: 385 --3d6b6a416f9b5 content-type: text/html content-range: 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; p
adding: 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.
Reason: CORS header 'Access-Control-Allow-Origin' missing - HTTP
if the server is under your control,
add the origin of the requesting site to the set of domains permitted access by
adding it to the access-control-allow-origin header's value.
...in
addition, the wildcard only works for requests made with the crossorigin attribute set to anonymous, and it prevents sending credentials like cookies in requests.
...in apache,
add a line such as the following to the server's configuration (within the appropriate <directory>, <location>, <files>, or <virtualhost> section).
... header set access-control-allow-origin 'origin-list' for nginx, the command to set up this header is:
add_header 'access-control-allow-origin' 'origin-list' ...
Content Security Policy (CSP) - HTTP
content security policy (csp) is an
added layer of security that helps to detect and mitigate certain types of attacks, including cross site scripting (xss) and data injection attacks.
... mitigating packet sniffing attacks in
addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using https.
... using csp configuring content security policy involves
adding the content-security-policy http header to a web page and giving it values to control what resources the user agent is allowed to load for that page.
...
additionally, a report-only header can be used to test a future revision to a policy without actually deploying it.
Equality comparisons and sameness - JavaScript
the second is that floating point includes the concept of a not-a-number value, nan, to represent the solution to certain ill-defined mathematical problems: negative infinity
added to positive infinity, for example.
... same-value equality same-value equality
addresses a final use case: determining whether two values are functionally identical in all contexts.
... (this use case demonstrates an instance of the liskov substitution principle.) one instance occurs when an attempt is made to mutate an immutable property: //
add an immutable negative_zero property to the number constructor.
...(alternatively, someone might say that double equals is the baseline, and triple equals is an enhanced version, because it requires the two operands to be the same type, so it
adds an extra constraint.
Concurrency model and the event loop - JavaScript
adding messages in web browsers, messages are
added anytime an event occurs and there is an event listener attached to it.
...so a click on an element with a click event handler will
add a message—likewise with any other event.
... the function settimeout is called with 2 arguments: a message to
add to the queue, and a time value (optional; defaults to 0).
...this method
adds a message to the other runtime if the latter listens to message events.
Loops and iteration - JavaScript
ion>opera</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.
addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
... example 1 the following while loop iterates as long as n is less than 3: let n = 0; let x = 0; while (n < 3) { n++; x += n; } with each iteration, the loop increments n and
adds that value to x.
...for (let i in obj) { result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; } result += '<hr>'; return result; } for an object car with properties make and model, result would be: car.make = ford car.model = mustang arrays although it may be tempting to use this as a way to iterate over array elements, the for...in statement will return the name of your user-defined properties in
addition to the numeric indexes.
... therefore, it is better to use a traditional for loop with a numeric index when iterating over arrays, because the for...in statement iterates over user-defined properties in
addition to the array elements, if you modify the array object (such as
adding custom properties or methods).
Public class fields - JavaScript
they are
added to the class constructor at the time of class evaluation using object.defineproperty().
... public instance fields are
added with object.defineproperty() either at construction time in the base class (before the constructor body runs), or just after super() returns in a subclass.
... class classwithstaticmethod { static staticmethod() { return 'static method has been called.'; } } console.log(classwithstaticmethod.staticmethod()); // expected output: "static method has been called." the static methods are
added to the class constructor with object.defineproperty() at class evaluation time.
... class classwithpublicinstancemethod { publicmethod() { return 'hello world' } } const instance = new classwithpublicinstancemethod() console.log(instance.publicmethod()) // expected output: "hello world" public instance methods are
added to the class prototype at the time of class evaluation using object.defineproperty().
Array.prototype.flatMap() - JavaScript
, 2, 3, 4]; arr.flatmap(x => [x, x * 2]); // is equivalent to arr.reduce((acc, x) => acc.concat([x, x * 2]), []); // [1, 2, 2, 4, 3, 6, 4, 8] note, however, that this is inefficient and should be avoided for large arrays: in each iteration, it creates a new temporary array that must be garbage-collected, and it copies elements from the current accumulator array into a new array instead of just
adding the new elements to the existing array.
... please do not
add polyfills on this article.
... for
adding and removing items during a map() flatmap can be used as a way to
add and remove items (modify the number of items) during a map.
...simply return a 1-element array to keep the item, a multiple-element array to
add items, or a 0-element array to remove the item.
Function.prototype.bind() - JavaScript
(this could be
added if the implementation supports object.defineproperty, or partially implemented [without throw-on-delete behavior] if the implementation supports the __definegetter__ and __definesetter__ extensions.) the partial implementation creates functions that have a prototype property.
... function list() { return array.prototype.slice.call(arguments); } function
addarguments(arg1, arg2) { return arg1 + arg2 } const list1 = list(1, 2, 3); // [1, 2, 3] const result1 =
addarguments(1, 2); // 3 // create a function with a preset leading argument const leadingthirtysevenlist = list.bind(null, 37); // create a function with a preset first argument.
... const
addthirtyseven =
addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const result2 =
addthirtyseven(5); // 37 + 5 = 42 const result3 =
addthirtyseven(5, 10); // 37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or global) object.
...this means that
additional apply() calls can be eliminated: // same as "slice" in the previous example const unboundslice = array.prototype.slice; const slice = function.prototype.apply.bind(unboundslice); // ...
Intl.Locale.prototype.numberingSystem - JavaScript
these subtags
add additional data about the locale, and are
added to locale identifiers by first
adding the -u key.
... to set the numberingsystem value via the string argument to the locale constructor, first
add the -u extension key.
... next,
add the -nu extension key to indicate that you are
adding a value for numberingsystem.
... finally,
add the numberingsystem value to the string.
Map.prototype.set() - JavaScript
the set() method
adds or updates an element with a specified key and a value to a map object.
... syntax mymap.set(key, value) parameters key the key of the element to
add to the map object.
... value the value of the element to
add to the map object.
... examples using set() let mymap = new map() //
add new elements to the map mymap.set('bar', 'foo') mymap.set(1, 'foobar') // update an element in the map mymap.set('bar', 'baz') using the set() with chaining since the set() method returns back the same map object, you can chain the method call like below: //
add new elements to the map with chaining.
WeakMap.prototype.set() - JavaScript
the set() method
adds a new element with a specified key and value to a weakmap object.
...the key of the element to
add to the weakmap object.
...the value of the element to
add to the weakmap object.
... examples using the set method var wm = new weakmap(); var obj = {}; //
add new elements to the weakmap wm.set(obj, 'foo').set(window, 'bar'); // chainable // update an element in the weakmap wm.set(obj, 'baz'); specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.set' in that specification.
WeakSet - JavaScript
weaksets are ideal for this purpose: // execute a callback on everything stored inside an object function execrecursively(fn, subject, _refs = null){ if(!_refs) _refs = new weakset(); // avoid infinite recursion if(_refs.has(subject)) return; fn(subject); if("object" === typeof subject){ _refs.
add(subject); for(let key in subject) execrecursively(fn, subject[key], _refs); } } const foo = { foo: "foo", bar: { bar: "bar" } }; foo.bar.baz = foo; // circular reference!
... instance methods weakset.prototype.
add(value) appends value to the weakset object.
... examples using the weakset object const ws = new weakset(); const foo = {}; const bar = {}; ws.
add(foo); ws.
add(bar); ws.has(foo); // true ws.has(bar); // true ws.delete(foo); // removes foo from the set ws.has(foo); // false, foo has been removed ws.has(bar); // true, bar is retained note that foo !== bar.
...and so they are both
added to the set.
eval() - JavaScript
additionally, modern javascript interpreters convert javascript to machine code.
...
additonally, new things can be introduced to that variable through eval() such as changing the type of that variable, forcing the browser to re-evaluate all of the generated machine code to compensate.
... console.log(function('"use strict";return(function(a){return a(5)})')()(function(a){ return"monday tuesday wednesday thursday friday saturday sunday".split(" ")[a%7||0]})); there are also
additional safer (and faster!) alternatives to eval() or function() for common use-cases.
...}, 1000); // instead of elt.setattribute("onclick", "...") use: elt.
addeventlistener('click', function() { ...
this - JavaScript
all non-static methods within the class are
added to the prototype of this: class example { constructor() { const proto = object.getprototypeof(this); console.log(object.getownpropertynames(proto)); } first(){} second(){} static third(){} } new example(); // ['constructor', 'first', 'second'] note: static methods are not properties of this.
...ction whatsthis() { return this.a; // the value of this is dependent on how the function is called } whatsthis(); // 'global' as this in the function isn't set, so it defaults to the global/window object whatsthis.call(obj); // 'custom' as this in the function is set to obj whatsthis.apply(obj); // 'custom' as this in the function is set to obj this and object conversion function
add(c, d) { return this.a + this.b + c + d; } var o = {a: 1, b: 3}; // the first parameter is the object to use as // 'this', subsequent parameters are passed as // arguments in the function call
add.call(o, 5, 7); // 16 // the first parameter is the object to use as // 'this', the second is an array whose // members are used as the arguments in the function call
add.apply(o, [10, 20]); // 34 ...
...it's not exactly dead because it gets executed, but it can be eliminated with no outside effects.) as a dom event handler when a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners
added dynamically with methods other than
addeventlistener()).
... // when called as a listener, turns the related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); //
add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].
addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="alert(this.tagname.tolowercase());"> show this </button> th...
for...in - JavaScript
deleted,
added, or modified properties a for...in loop iterates over the properties of an object in an arbitrary order (see the delete operator for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-browser setting).
...properties
added to the object over which iteration is occurring may either be visited or omitted from iteration.
... in general, it is best not to
add, modify, or remove properties from the object during iteration, other than the property currently being visited.
... there is no guarantee whether an
added property will be visited, whether a modified property (other than the current one) will be visited before or after it is modified, or whether a deleted property will be visited before it is deleted.
<mstyle> - MathML
it accepts all attributes of all mathml presentation elements with some exceptions and
additional attributes listed below.
...in
addition, the scriptlevel attribute can never reduce the font size below scriptminsize in order to avoid unreadable small font sizes and depends on the multiplier specified in scriptsizemultiplier.
... the <mstyle> element accepts all attributes of all presentation elements with the following exceptions: height, depth or width do not apply to <mglyph>, <mp
added> or <mtable>.
... lspace or voffset do not apply to <mp
added>.
MathML documentation index - MathML
in
addition you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it.
... 14 <mfenced> deprecated, mathml, mathml reference, mathml:element, mathml:general layout schemata the deprecated mathml <mfenced> element used to provide the possibility to
add custom opening and closing parentheses (such as brackets) and separators (such as commas or semicolons) to an expression.
...use the following syntax: <mover> base overscript </mover> 23 <mp
added> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mp
added> element is used to
add extra p
adding and to set the general adjustment of position and size of enclosed contents.
...it accepts all attributes of all mathml presentation elements with some exceptions and
additional attributes listed below.
Web Performance
it is important to minimize the loading and response times and
add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.
... web performance basics in
addition to the front end components of html, css, javascript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster.
...
additional tips like removing audio tracks from background videos can improve performance even further.
...some of these formats can take your highly optimized media-rich pages even further by offering
additional reductions in file size.
Introduction to progressive web apps - Progressive web apps (PWAs)
in
addition, there are tools to measure how complete (as a percentage) a web app is, such as lighthouse.
...this is very different from apps in app stores, which may have a number of similarly-named apps, some of which may even be based on your own site, which only
adds to the confusion.
... other features such as web app manifest, push notifications, and
add to home screen functionality have wide support too.
... currently, safari has limited support for web app manifest and
add to home screen and no support for web push notifications.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.
addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... to receive push messages, we can listen to the push event in the service worker file: self.
addeventlistener('push', function(e) { /* ...
... ttl: req.body.ttl }; settimeout(function() { webpush.sendnotification(subscription, payload, options) .then(function() { res.sendstatus(201); }) .catch(function(error) { console.log(error); res.sendstatus(500); }); }, req.body.delay * 1000); }); }; service-worker.js the last file we will look at is the service worker: self.
addeventlistener('push', function(event) { const payload = event.data ?
... event.data.text() : 'no payload'; event.waituntil( self.registration.shownotification('serviceworker cookbook', { body: payload, }) ); }); all it does is
add a listener for the push event, create the payload variable consisting of the text taken from the data (or create a string to use if data is empty), and then wait until the notification is shown to the user.
Media - Progressive web apps (PWAs)
example these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-color:#cec; color:#black; border:2px outset #cec; p
adding: 5px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button active">click me</button></td> </tr> <tr style...
...copy and paste the content from here: /*** print sample ***/ /* defaults for screen */ #print-head, #print-foot { display: none; } /* print only */ @media print { h1 { page-break-before: always; p
adding-top: 2em; } h1:first-child { page-break-before: avoid; counter-reset: page; } #print-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: center; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: ...
...the stylesheet places each section on a separate page, and it
adds a header and footer to each page.
... if your browser supports counters, it
adds a page number in the footer.
Progressive web apps (PWAs)
documentation <-- the temporary automatic list below will be replaced soon -->
add to home screen
add to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie.
...
add a shortcut to their home screen representing their favorite web app (or site) so they can subsequently access it with a single tap.
... this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it.how to make pwas installablein this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "
add to home screen" feature of their browser.how to make pwas re-engageable using notifications and pushhaving the ability to cache the contents of an app to work offline is a great feature.
...
add to home screen guide — learn how your apps can take advantage of
add to home screen (a2hs).
Content type - SVG: Scalable Vector Graphics
in
addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment.
...the three-digit rgb notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by
adding zeros.
...for example, an svg file called somedrawing.svg located at http://example.com might have the following iri: http://example.com/somedrawing.svg an iri can also
address a particular element within an xml document by including an iri fragment identifier as part of the iri.
... a url is a sequence of unicode characters, building an
address to an internal or external resource.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug 1280425)
added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path comm...
...ands implementation status unknown z and z path commands to
add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and related methods removed from svgpathelement implementation status unknown d attribute as css property implementation status unknown basic shapes change notes pathlength attribute for all basic shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown auto behavior for rx and ry in <ellipse> implementation status unknown text change ...
...glyphitem> and <glyphref> removed <altglyph>, <altglyphdef> and <altglyphitem> removed (bug 1260032), <glyphref> never really implemented (bug 1302693) svgtextcontentelement.selectsubstring() deprecated implementation status unknown getcomputedtextlength() not including dx and dy values implementation status unknown text in non-rendered elements not included in
addressable characters implementation status unknown unknown elements in text render as unpositioned spans implementation status unknown offset 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 ...
...plementation status unknown unspecified svg view fragment parameters don't cause corresponding attributes to be reset to initial values implementation status unknown viewtarget attribute of <view> and corresponding svg view fragment parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown
additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents.onload removed implementation status unknown fonts change notes <font>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face>, <font-face-src>, <font-face-uri>, <font-...
Scripting - SVG: Scalable Vector Graphics
one can override default browser behaviors with the evt.preventdefault( ) method,
add eventlisteners to objects with the syntax element.
addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
... using eventlisteners with objects the methods
addeventlistener() and removeeventlistener() are very useful when writing interactive svg.
... function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.
addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a window property called svgdocument that points to the svg document.
... the best way to get access to the document representing an svg document is to look at htmliframeelement.contentdocument (if the document is presented in an <iframe>) or htmlobjectelement.contentdocument (if the document is presented in an <object> element), like this: var svgdoc = document.getelementbyid("iframe_element").contentdocument; in
addition, the <iframe>, <embed>, and <object> elements offer a method, getsvgdocument(), which returns the xmldocument representing the element's embedded svg or null if the element doesn't represent an svg document.
Compiling from Rust to WebAssembly - WebAssembly
this is
added automatically, but you must restart your terminal for it to take effect.
... wasm-pack to build the package, we need an
additional tool, wasm-pack.
... whenever you want to call javascript functions, you can
add them to this file, and wasm-bindgen takes care of setting everything up for you.
... the big part to
add is the stuff at the bottom.
Builder - Archive of obsolete content
the
add-on builder tool was retired on april 1, 2014.
... the
add-on builder was a web-based development environment that allowed developers to create
add-ons using the sdk apis, but without needing to use the jpm command line tool.
... it was retired on april 1, 2014, and the "builder.
addons.mozilla.org" domain now redirects to this page.
system - Archive of obsolete content
query the
add-on's environment and access arguments passed to it.
... usage querying your environment using the system module you can access environment variables (such as path), find out which operating system your
add-on is running on and get information about the host application (for example, firefox or fennec), such as its version.
...this function exposes that functionality to
add-on authors.
content/symbiont - Archive of obsolete content
usage a symbiont loads the specified contenturl and content scripts into a frame, and sets up an asynchronous channel between the content scripts and the
add-on code, enabling them to exchange messages using the port or postmessage apis.
...it inherits functions to load and configure content scripts from the loader, and functions to exchange messages between content scripts and the main
add-on code from the worker.
... symbiont symbiont is composed from the worker trait, therefore instances of symbiont and their descendants expose all the public properties exposed by worker along with
additional public properties that are listed below: properties contentscriptfile the local file urls of content scripts to load.
core/heritage - Archive of obsolete content
reading or writing such code requires sharp eye and lot's of discipline, mainly due to code fragmentation and lots of machinery being exposed: // defining a simple class function dog(name) { // classes are for creating instances, calling them without `new` changes // behavior, which in majority cases you need to handle, so you end up // with
additional boilerplate.
...to do that we need to freeze constructor's prototype chain to make sure functions are frozen: object.freeze(dog.prototype); object.freeze(pet.prototype); note: also, this is not quite enough as object.prototype stays mutable & in fact we do little bit more in sdk to
address that, but it's not in the scope of this documentation.
...also, idiomatic sdk code does not uses optional new keywords, but you're free to use it in your
add-on code: var fluffy = dog('fluffy'); // instatiation fluffy instanceof dog // => true fluffy instanceof class // => true as you could notice from example above classes created via class function by default inherits from a class itself.
io/file - Archive of obsolete content
if your
add-on uses literal windows-style path specifications with this api, your
add-on likely won't work when users run it on unix-like systems.
... likewise, if your
add-on uses literal unix-style path specifications, it won't work for users on windows.
... to ensure your
add-on works for everyone, generate paths using the join function.
places/history - Archive of obsolete content
", to: lastweek }, // second query searches all entries after last week with 'javascript' { query: "javascript", from: lastweek }], // we want to order chronologically by visit date { sort: "date" } ).on("end", function (results) { // results is an array of objects containing visit data, // sorted by visit date, with all entries from more than a week ago // that contain 'ruby', *in
addition to* entries from this last week // that contain 'javascript' }); globals functions search(queries, options) queries can be performed on history entries by passing in one or more query options.
...for
additional queries within the query, passing more query options in will or the total results.
...possible options are 'title', 'date', 'url', 'visitcount', 'keyword', 'date
added' and 'lastmodified'.
remote/parent - Archive of obsolete content
enables you to load modules, and privileged parts of your
add-on in general, into child processes.
... by default,
add-ons run in the chrome process and can't directly access web content.
... // remote.js const { frames } = require("sdk/remote/child"); frames.
addeventlistener("pageshow", function() { // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.c...
stylesheet/utils - Archive of obsolete content
globals functions loadsheet(window, uri, type) synchronously loads a style sheet from uri and
adds it to the list of
additional style sheets of the document.
... the sheets
added takes effect immediately, and only on the document of the window given.
... removesheet(window, uri, type) remove the document style sheet at sheeturi from the list of
additional style sheets of the document.
util/list - Archive of obsolete content
: object|string|number functions
addlistitem(list, item) function
adds a item to a list.
... examples: var { list } = require("sdk/util/list"); var mylist = list.compose({
add: function
add(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._
add.bind(this)); }, remove: function remove(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._remove.bind(this)); } }); mylist('foo', 'bar', 'baz').length == 3; // true new mylist('new', 'keyword').length == 2; // true mylist.apply(null, [1, 2, 3]).length == 3; // true...
... let list = mylist(); list.length == 0; // true list.
add(1, 2, 3) == 3; // true properties length number of elements in this list.
util/match-pattern - Archive of obsolete content
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.
Annotator - Archive of obsolete content
in this tutorial we'll build an
add-on that uses many of the sdk's high-level apis.
... the
add-on is an annotator: it enables the user to select elements of web pages and enter notes (annotations) associated with them.
... if you want to refer to the complete
add-on you can find it under the examples directory in the sdk.
Listen for Page Load - Archive of obsolete content
the following
add-on listens to the tab's built-in ready event and just logs the url of each tab as the user loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the browser console, not the web console.
...this
add-on attaches a script to all open tabs.
... the script
adds a red border to the tab's document: require("sdk/tabs").on("ready", runscript); function runscript(tab) { tab.attach({ contentscript: "if (document.body) document.body.style.border = '5px solid red';" }); } (this example is only to show the idea: to implement something like this, you should instead use page-mod, and specify "*" as the match-pattern.) learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Boxes - Archive of obsolete content
however, you can easily
add this capability with a style change.
...bel value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably
add align="start" attribute to the box.
... this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="p
adding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="p
adding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="p
adding:5px"/> </box> </window> ...
HTML to DOM - Archive of obsolete content
d(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.
addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ ...
... here is some xul code you can
add to your browser overlay .xul file.
...ser"); if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.
addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
JavaScript Debugger Service - Archive of obsolete content
next, we
add code to the various hooks.
...(jsdifilter.flag_enabled | jsdifilter.flag_pass) : jsdifilter.flag_enabled, urlpattern: pattern, startline: 0, endline: 0 }; return filter; }, we then
add the filters we want.
...g tracked jsd.appendfilter(createfilter("*/firefox/components/*")); jsd.appendfilter(createfilter("*/firefox/modules/*")); jsd.appendfilter(createfilter("xstringbundle")); jsd.appendfilter(createfilter("chrome://*")); jsd.appendfilter(createfilter("x-jsd:ppbuffer*")); jsd.appendfilter(createfilter("xpcsafejsobjectwrapper.cpp")); jsd.appendfilter(createfilter("file://*")); note that appendfilter
adds the filter to the end of the list.
Windows - Archive of obsolete content
example var startpos = null; function mousedown(event) { startpos = [event.clientx, event.clienty]; } function mousemove(event) { if (startpos) { var newx = event.screenx - startpos[0]; var newy = event.screeny - startpos[1]; window.moveto(newx, newy); } } function mouseup(event) { startpos = null; } window.
addeventlistener("mousedown", mousedown, false); window.
addeventlistener("mouseup", mouseup, false); window.
addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar result without extra javascript code.
...
additionally, if the window is in the background, it may not be brought to the front.
...for example, the following code will
add a horizontal rule.
xml:base support in old browsers - Archive of obsolete content
heme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function getxmlbaselink (xlink, thisitem) { var xmlbase = ''; if (!xlink.match(scheme)) { // only check for xml base if there is no protocol // tests for 'scheme' per http://www.ietf.org/rfc/rfc2396.txt' xmlbase = getxmlbase (thisitem); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base,
add one in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var l...
...3 : 2; // if the file protocol has an extra slashe, prepare to also skip it in the separator search var att2 = att.indexof('/', protocolpos+skipfile); // find first path separator ('/') after protocol if (att2 !== -1) { att = att.substring(0, att2 - 1); // don't want any trailing slash, as the absolute path to be
added already has one } } else if (!att.match(/\/$/)) { // if no trailing slash,
add one, since it is being attached to a relative path att += '/'; } xmlbase = att + xmlbase; // if previous path was not absolute, resolve against the full uri here' break; } else if (att.indexof('/') === 0) { // if absolute (/), need to prepare for next time to strip out after slash ...
... xmlbase = att + xmlbase; abs = true; // once the protocol is found on the next round, make sure any extra path is ignored } else { // if relative, just
add it xmlbase = att + xmlbase; } } thisitem = thisitem.parentnode; } //return (xmlbase === '') ?
Communication between HTML and your extension - Archive of obsolete content
i wasn't sure about the difference between the capture or bubbling flag that you pass to
addeventlistener but every time i would catch the event in the extension, the element from the ajax request wasn't fully updated into the html page.
...after the html component was update with the result of the ajax request, i created and dispatched the event like this: var event = document.createevent("events"); event.initevent("my-custom-event", true, true); document.body.dispatchevent(event); in the code of the extension that catches the loading of a new page i
added this code: var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
... if (doc && doc.
addeventlistener) doc.
addeventlistener("my-custom-event", myextension.customreceived, false); since the event is dispatched after the element in the html is updated by the statuschanged function, the element that extension is looking for is there to find.
XUL School Tutorial - Archive of obsolete content
xul school is a comprehensive
add-on development tutorial, focusing on firefox extension development.
... introduction introduction getting started with firefox extensions the essentials of an extension setting up a development environment javascript object management basic functionality
adding menus and submenus
adding toolbars and toolbar buttons
adding events and commands
adding windows and dialogs
adding sidebars user notifications and alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documen...
...tation roadmap useful mozilla community sites appendices appendix a:
add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in
add-ons appendix d: loading scripts appendix e: dom building and html insertion appendix f: monitoring dom changes the xul school project was developed by appcoast (formerly glaxstar).
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
but
adding a third column to the mix created too many width variables for some browsers to dynamically calculate a total.
... as many times as i heard the message that design of content should be
addressable separately from the content itself, i don't think i realized the full benefits of doing so until we actually went through the process of separating them.
...and if we need to make a template change, or
add in a piece of content, our data is now structured in a way that surprises our developers in how easy it is to make a change.
XML data - Archive of obsolete content
in the document's stylesheet, you specify how info elements are to be displayed: info { display: block; margin: 1em 0; } the most common values for the display property are: block displayed like html's div (for headings, paragraphs) inline displayed like html's span (for emphasis within text)
add your own style rules that specify the font, spacing and other details in the same way as for html.
...other technologies can modify the structure of the display—for example, xbl can
add content, and javascript can modify the dom.
...copy and paste the content from here, making sure that you scroll to get all of it: /*** xml demonstration ***/ planet:before { display: block; width: 8em; font-weight: bold; font-size: 200%; content: "oceans"; margin: -.75em 0px .25em -.25em; p
adding: .1em .25em; background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; p
adding: 0px 1em; background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million k...
XUL user interfaces - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: /*** xul demonstration ***/ window { -moz-box-align: start; background-color: -moz-dialog; font: -moz-dialog; p
adding: 2em; } .head-1 { font-weight: bold; font-size: 200%; p
adding-left: 5px; } /* the group box */ .demo-group { p
adding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .
...day[disabled] { color: #777; } .day:first-child { margin-left: 4px; } /* the left column labels */ .text-prompt { p
adding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; p
adding: 0px 4px; } #status { p
adding: 4px; } #status[warning] { color: red; } make a new text file, script7.js.
... using this knowledge,
add a rule to the stylesheet that makes the background of the date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).
Creating a dynamic status bar extension - Archive of obsolete content
write the xul file we need a slightly more complicated xul file this time, in order to
add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockw...
...we use the window.
addeventlistener() dom function to tell firefox to call the stockwatcher.startup() function when a new browser window is opened: window.
addeventlistener("load", function(e) { stockwatcher.startup(); }, false); our new extension has two primary functions: startup() and refreshinformation().
...it's called whenever the user clicks on the status bar panel, when our extension is first
added to a browser window, and by the interval handler to periodically update the display.
Notes on HTML Reflow - Archive of obsolete content
most of the constraints in the new reflow state are computed when the state is created; for example, the available space in the new reflow state is computed by subtracting the container frame's border and p
adding from the parent reflow state's available space.
... a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g.,
addition or removal of a style sheet, a change to the shell's default font.
...multiple reflow commands with the same type and target frame are coalesced : the presentation shell simply refuses to
add subsequent commands of the same type for the same frame to the queue.
Finding the code to modify - Archive of obsolete content
this is where we are going to
add our tinderbox status ui.
... inspectorwidget the inspectorwidget extension
adds a toolbar button and context menus for invoking the dom inspector (domi) for either chrome or content elements.thus this makes it possible to save all the above dom inspector user interface diggings.
... as a side note it would be good if the inspectorwidget
additions were integrated directly in domi, that would help everyone.
Creating a Mozilla Extension - Archive of obsolete content
a mozilla extension is an installable enhancement to the mozilla browser that provides
additional functionality (for example linky, which
adds an item to the context menu for opening multiple links in a document or selection).
... 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.
... contents prerequisites tinderbox making a mozilla installation modifiable finding the file to modify finding the code to modify
adding the structure specifying the appearance enabling the behavior - retrieving tinderbox status enabling the behavior - updating the status bar panel enabling the behavior - updating the status periodically making it into a static overlay making it into a dynamic overlay and packaging it up for distribution conclusion next » original document information author(s): myk melez la...
Download Manager preferences - Archive of obsolete content
browser.download.manager.
addtorecentdocs a boolean value that indicates whether or not new downloads should be
added to the recent documents list.
... browser.download.usedownlo
addir a boolean value that indicates whether or not the user's preference is to automatically save files into the download directory.
... on other oses the default value is true if a preference is not set when the download manager looks it up, the download manager assumes the default value but doesn't necessarily
add the missing preference.
Documentation for BiDi Mozilla - Archive of obsolete content
we have also tested behaviour of all controls with dir=rtl and
added support where necessary.
... some support
added for alignment in tables and lists, and fixes for problems with different combinations of dir and align.
...ion symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidiframes.cpp subclass of nsframe with
additional method setoffsets, to adjust mcontentoffset and mcontentlength during bidi processing nsdirectionalframe layout/generic/nsbidiframes.cpp subclass of nsframethis is a special frame which represents a bidi control.
Syncing custom preferences - Archive of obsolete content
for example, if your
add-on had a pref called extension.frobnaz.foobar, to have it synced, create a bool preference called services.sync.prefs.sync.extension.frobnaz.foobar and set it to true.
... the most convenient place for this would be your
add-on's default preferences, though if you want to give the user a choice to opt-in, you can also do it programmatically.
... see
adding_preferences_to_an_extension.
Introducing the Audio API extension - Archive of obsolete content
id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.
addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples.
...fferlength; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; raw.innerhtml = text; } var raw = document.getelementbyid('raw'); var audio = document.getelementbyid('audio-element'); audio.
addeventlistener('mozaudioavailable', audioavailable, false); audio.
addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute).
... a2.mozsetup(a1.mozchannels, a1.mozsamplerate); } function audioavailable(event) { // write the current framebuffer var framebuffer = event.framebuffer; writeaudio(framebuffer); } a1.
addeventlistener('mozaudioavailable', audioavailable, false); a1.
addeventlistener('loadedmetadata', loadedmetadata, false); function writeaudio(audio) { buffers.push(audio); // if there's buffered data, write that while(buffers.length > 0) { var buffer = buffers.shift(); var written = a2.mozwriteaudio(buffer); // // if all data wasn't written, keep it in the buffers: if(writte...
Simple Storage - Archive of obsolete content
we'll
add a notes menu with// a submenu, which lists all the notes.
... if there's// a selection,
add a note menuitem that makes a new note.
...:(jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.
add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } });};// initialize the jetpack menu with the current notes.updatejetpackmenu(); see also settings jep 11 ...
Simple Storage - Archive of obsolete content
we'll
add a notes menu with // a submenu, which lists all the notes.
... if there's // a selection,
add a note menuitem that makes a new note.
...:( jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.
add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } }); }; // initialize the jetpack menu with the current notes.
Microsummary topics - Archive of obsolete content
getservice(components.interfaces.nsimicrosummaryservice); var generator = microsummaryservice.installgenerator(generatordoc); the service installs the generator by serializing its xml to a file in the user's profile directory and
adding the generator to the service's in-memory generator cache.
...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.
...differentiating between user-initiated and microsummary-related requests when firefox updates a microsummary generated by a microsummary generator
add-on, it automatically downloads the html content of the page being summarized.
New Security Model for Web Services - Archive of obsolete content
signed scripts a certain degree of
additional trust may be lent to a script by having the author digitally sign it.
... using a soap header for verification soap messages have a distinct processing model allowing a header to be
added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request.
... unfortunately, this does not prevent soap messages from being sent to non-soap
addresses, which is a big enough problem that the verification cannot stand alone to guarantee that untrusted service requests are always properly rejected by services that should be firewall-protected.
Prism - Archive of obsolete content
in
addition to the browser engine included in xulrunner, it consists of: web app bundle management: code for creating new web app bundles and loading existing bundles.
...refractor
adds a new menu item to call up the shortcut creation dialog for inside firefox.
...prism supports a simple styling system that allows the user to
add css files to the webapp bundle.
Frequently Asked Questions - Archive of obsolete content
it's also useful to know that you can check whether mozilla has recognised your plug-ins by typing 'about:plugins' into your
address bar (linking to that doesn't work for security reasons).
...note that this capability was
added to support legacy content.
...alternatively you can email any of us directly of course (see the preceeding question for our email
addresses).
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.
...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.
... changes in gecko 1.9 a key security change in gecko 1.9 is the
addition of the new security.fileuri.strict_origin_policy preference.
Static Analysis for Windows Code under Linux - Archive of obsolete content
you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_
add_options --enable-application=browser ac_
add_options --host=i686-linux ac_
add_options --target=i686-mingw32 ac_
add_options --enable-default-toolkit=cairo-windows mk_
add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on windows, so we should disable some components to make it buildable with mingw32.
... ac_
add_options --enable-debug ac_
add_options --disable-optimize ac_
add_options --disable-tests ac_
add_options --disable-embedding-tests ac_
add_options --disable-installer ac_
add_options --disable-accessibility ac_
add_options --disable-vista-sdk-requirements ac_
add_options --disable-updater #change this to where your libidl-config file locate.
... host_libidl_config=/usr/bin/libidl-config #config your moztools position glib_prefix=$home/moztools libidl_prefix=$home/moztools #disable xpcom stdcall calling convention because of gcc 4.3.0 bug cppflags="-dmoz_disable_xpcom_stdcall" #specify the cxx and static analysis #point cxx to the cross compile g++ with plugin support cxx=$home/mingw-install/bin/i686-mingw32-g++ ac_
add_options --with-static-checking=$home/dehydra/dehydra-gcc/gcc_dehydra.so then, you can start building your mozilla.
Table Layout Strategy - Archive of obsolete content
min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + p
adding #define des_con 1 // desired width of the content + p
adding #define fix 2 // fixed width either from the content or cell, col, etc.
... + p
adding #define min_adj 3 // minimum width + p
adding due to col spans #define des_adj 4 // desired width + p
adding due to col spans #define fix_adj 5 // fixed width + p
adding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fix_adj max(des_con, des_adj), but use min_pro if present for a fixed width table, the column may get more space if the sum of the col allocatio...
...you can help by editing this page and
adding screenshots or links to example pages.
Tamarin Acceptance Test Template - Archive of obsolete content
this is the test template for tamarin acceptance tests (placed in test/acceptance/feature_name): /* -*- mode: js; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 4 -*- */ /* vi: set ts=4 sw=4 expandtab: (
add to ~/.vimrc: set modeline modelines=5) */ /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license.
... * * ***** end license block ***** */ var section = "test"; // provide a document reference (ie, actionscript section) var version = "as3"; // version of ecmascript or actionscript var title = "test"; // provide ecma section title or a description var bugnumber = ""; starttest(); // leave this alone /** * calls to
addtestcase here.
...
addtestcase is a function that is defined * in shell.as and takes three arguments: * - a string representation of what is being tested * - the expected result * - the actual result * * for example, a test might look like this: * * var helloworld = "hello world"; * *
addtestcase( * "var helloworld = 'hello world'", // description of the test * "hello world", // expected result * helloworld ); // actual result * */ //
add your tests here var helloworld = "hello world";
addtestcase( "var helloworld = 'hello world'", "hello world", helloworld ); test(); // leave this alone.
Tamarin Build System Documentation - Archive of obsolete content
create a user repository, instructions are https://developer.mozilla.org/en/publishing_mercurial_clones go to the request a sandbox build page http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm enter the repository url, revision number, email
address, and description.
... to provide quick and accurate results of building and testing tamarin on supported platforms and configurations to represent the build results in a clear and concise manor please give use feedback if you have any comments or suggestions to improve the build system how to
add tests to the smokes?
...test/run-smokes.txt, assume the start directory is test format is cd testdir; command to run test above the test should be a # comment describing why the test in the smokes, when test failed, possibly a bugzilla bug the tests can be run by following the above instructions for running buildbot scripts locally and executing the all/run-smoke-tests.sh as a rule any test failure should be immediately
added to the top of the smoke test list so the list is prioritized how to exclude tests from acceptance or mark them as known failures?
Using cross commit - Archive of obsolete content
--trunk makes cross-commit land the patch on head in
addition to any other branches specified.
... --moz18 makes cross-commit land the patch on mozilla_1_8_branch in
addition to any other branches specified.
... --branch=branch-tag
adds a branch to the list of branches to land the patch on.
Using gdb on wimpy computers - Archive of obsolete content
(gdb) r starting program: /home/blizzard/src/mozilla/mozilla/dist/bin/./mozilla-bin breakpoint 1, main (argc=1, argv=0xbffff894) at nsapprunner.cpp:811 811 installunixsignalhandlers(argv[0]); (gdb) set auto-solib-
add 0 (gdb) c continuing.
...you can
add this function to the .gdbinit file in your home directory: def prun tbreak main run set auto-solib-
add 0 end how do i load shared libraries?
...versions of gdb earlier than 5 use a very slow algorithm for walking the list of already loaded symbols as it
adds symbols to its symbol table.
XML in Mozilla - Archive of obsolete content
in
addition to using fixptr in links, it is possible to use it from scripts.
...
add this line: pref("layout.selectanchor", true); dom load and save methods document.load() is a part of an old version of the w3c dom level 3 load & save module.
...outside supported xml w3c recommendations specification or technology documentation mozilla project xslt w3c recommendation xslt xpath w3c recommendation xslt xmlhttprequest w3c recommendation xml extras request api (no longer supported) mozilla
add-on sdk domparser and xmlserializer mozilla xml extras sax sax soap (no longer supported) w3c note web services xml-rpc (no longer supported) userland software xml-rpc rdf w3c recommendations rdf svg w3c recommendation ...
createKey - Archive of obsolete content
createkey
adds a key to the registry.
...description the createkey method
adds a key to the registry.
... you must
add a key to the registry before you can
add a value for that key.
buttons - Archive of obsolete content
extra1: an optional
additional button.
... extra2: a second optional
additional button.
...the cancel button might be shown as an
additional possibility to close the dialog in this situation (windows and linux) or might be hidden, too (mac os).
Dynamically modifying XUL-based user interface - Archive of obsolete content
you may also have used other calls, such as element.setattribute(), or, if you wrote an extension, the
addeventlistener() method.
...var element = document.getelementbyid("someelement"); while(element.haschildnodes()){ element.removechild(element.firstchild); } inserting menu items to a menu this example
adds two new menu items to a <menupopup>: to the start and to the end of it.
...for example you could move the item labeled "first item" to the end of popup by
adding this statement as a last line to the snippet above: popup.appendchild(first); this statement would remove the node from its current position in the document and re-insert it at the end of the popup.
PopupKeys - Archive of obsolete content
thus, a key listener
added to a <menupopup> will not receive any key events.
... instead, you must
add a capturing key listener to the document or window if you want to listen for keys pressed within a menu.
... note that the last argument here is true to listen for events during the capturing phase of event propagation: window.
addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself.
Tooltips - Archive of obsolete content
this is a useful means of providing
additional details about a user interface without cluttering up the main interface.
... <toolbarbutton label="back" tooltiptext="go back one page"/> in this example, a back button on a toolbar is given
additional text to appear on a tooltip.
...it conveys no
additional information to the user, so it shouldn't be used as in this example.
Actions - Archive of obsolete content
additional content the previous example generated only a set of buttons, but the action body may contain
additional content.
... for instance, you might want to
add a label to each item.
... <action> <hbox uri="?relateditem"> <label value="related item:"/> <button label="?relateditem"/> </hbox> </action> in this example, the hbox will be generated for each result, assigned an id of the value of the ?relateditem, and the label and button will be
added inside it.
Building Hierarchical Trees - Archive of obsolete content
as the rows are not containers, the tree builder does not recurse to find
additional data.
...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.
...here is an example for the streets datasource: <tree flex="1" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="
address" primary="true" label="
address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/
address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> ...
Introduction - Archive of obsolete content
you can get this composite datasource in a script by using an element's 'database' property if you want to
add or remove datasources from it.
...for instance, you might use the built-in bookmarks datasource which holds the user's browser bookmarks and use your own datasource to
add custom data about those bookmarks.
... <vbox datasources="rdf:bookmarks http://www.xulplanet.com/ds/sample.rdf"> in
addition, when using the rdf type for chrome xul (such as in extensions), the datasource rdf:local-store is always included in the composite.
Multiple Rule Example - Archive of obsolete content
ents/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-p
added"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <memb...
...er container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-p
added"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
...ges/t/palace.jpg, ?phototitle = palace from above) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?phototitle = canal) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?phototitle = obelisk) the first result matches the first rule and contains variables for the two
additional predicates that were examined in the conditions.
RDF Query Syntax - Archive of obsolete content
the content tag doesn't do anything else at this point, meaning it doesn't
add anything else to the network of potential results, so processing continues on to the next statement, the triple, which looks like this: <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> the triple statement is used to follow arcs or arrows in the rdf graph.
...this is new data, so the builder
adds it to the graph.
...this is because the builder copies the existing data for each new potential result and
adds the new data.
Creating a Wizard - Archive of obsolete content
the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide
additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio value="small" label="small"/> <radio value="large" label="large"/> </radiogroup> <radiogroup> <caption label="gender"/> <radio value="male" label="male"/> <radio value="female" label="female"/> </radiogroup> </wizardpage> </wizard> this wizard has ...
...in
addition, on the last page, the finish button will appear.
... <wizardpage pageadvanced='return funcname()'></wizardpage> in the next section, we'll see some
additional features of wizards.
Input Controls - Archive of obsolete content
our find files example let's
add a search entry field to the find file dialog.
... <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/>
add these lines before the buttons we created in the last section.
... checkboxes and radio buttons two
additional elements are used for creating check boxes and radio buttons.
Property Files - Archive of obsolete content
in
addition, you may wish to display a message which is generated from a script, if, for example, you do not know the exact text to be displayed.
...in
addition, each occurrence of formatting code (e.g.
... « previousnext » see also how to localize html pages, xul files, and js/jsm files from bootstrapped
add-ons: bootstrapped extensions :: localization (l10n) ...
RDF Datasources - Archive of obsolete content
« previousnext » here, we'll look at
additional datasources and how to use your own rdf files as datasources.
... resources
added date http://home.netscape.com/nc-rdf#bookmark
adddate date the bookmark was
added description http://home.netscape.com/nc-rdf#description bookmark description last modified http://home.netscape.com/web-rdf#lastmodifieddate date of last modification last visited http://home.netscape.com/web-rdf#lastvisitdate...
...there are several others for mail,
address books and searching and so on.
Scroll Bars - Archive of obsolete content
« previousnext » now, let's find out to
add scroll bars to a window.
...
adding scroll bars a scroll bar is typically used so that a user can move around in a large document.
...some elements, such as text boxes, will also
add scroll bars as necessary when the content inside is too large.
Tree Box Objects - Archive of obsolete content
it is used to indicate that one or more rows have been
added to the tree or removed from the tree.
...
additional scroll methods include the scrollbylines(), scrollbypages() and ensurerowisvisible() functions.
...the getcoordsforcellitem() function returns the x and y coordinates in
addition to the width and height, all as out parameters.
Updating Commands - Archive of obsolete content
for other commands, you will need to use a couple of
additional lines of code.
...in
addition, you will need to do this when creating your own menu commands, for instance to implement the edit menu commands in your own application.
...in
addition, you will need to consider when the state could change and when the commands should be updated.
XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window
adding buttons
adding labels and images input controls numeric controls list controls progress meters
adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes
adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts
adding event h...
... 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 xbl example specialized window types features of a window ...
... creating dialogs open and save dialogs creating a wizard more wizards overlays cross package overlays installation creating an installer install scripts
additional install features this xul tutorial was originally created by neil deakin.
Using nsIXULAppInfo - Archive of obsolete content
you'll need to have
additional code for those older versions.
... obtaining platform version information is done like this: var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); var platformver = appinfo.platformversion; var platformbuildid = appinfo.platformbuildid; getting nsixulappinfo in xpcshell tests in firefox 21, a testing module was
added that provides access to app info during the execution of xpcshell tests.
...you'll have to write
additional code if you choose to support those versions.
Using spell checking in XUL - Archive of obsolete content
this document describes how to use the mozispellcheckingengine component to
add spell checking capabilities to your firefox extension.
... see controlling spell checking in html forms for details on
adding spell check support to html forms for your website.
..."@mozilla.org/spellchecker/engine;1" in components.classes) spellclass = "@mozilla.org/spellchecker/engine;1"; gspellcheckengine = components.classes[spellclass].getservice(components.interfaces.mozispellcheckingengine); gspellcheckengine.dictionary = 'en-us'; if (gspellcheckengine.check("kat")) { // it's spelled correctly } else { // it's spelled incorrectly but check if the user has
added "kat" as a correct word..
XUL element attributes - Archive of obsolete content
if you plan on
adding a datasource to an element but don't want one to be
added right away, set this attribute to 'rdf:null'.
...otherwise, you cannot
add one later.
...extensions may provide support for
additional datasources.
command - Archive of obsolete content
in
addition, disabling the command will automatically disable the menu items and keyboard shortcuts.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...ign, , 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, getuserdata, hasattribute...
description - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
iframe - Archive of obsolete content
warning: when used in chrome-privileged documents (either html or xul) such as firefox
addons, the contents of the frame may have the same permissions as firefox itself.
...this boundary has a number of special effects, such as making window.top == window (unless the browser is
added to a chrome document), and preventing documents from inheriting the principal of the parent document.
... 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...
key - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...ign, , 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, getuserdata, hasattribute...
...for example: <!-- this element handles all key events --> <key/> <!-- these elements don't handle any key events --> <key key="" modifiers="control"/> <key keycode="" modifiers="control"/> modifying attributes in case you want to change one of the <key>'s attributes, such as the modifiers attribute, the keyset element has to be re-
added to its parent node; otherwise the new attributes won't be applied.
listitem - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } current type: boolean this attribute will be set to true if the listitem is the current item.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
menuseparator - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
radiogroup - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
...supported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appenditem( label, value ) return type: element creates a new item and
adds it to the end of the existing list of items.
<statusbarpanel> - Archive of obsolete content
refer to the
add-on bar.
...for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
...ign, , 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, getuserdata, hasattribute...
tab - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
timepicker - Archive of obsolete content
in
addition, the hour, minute and second properties may be used to retrieve and modify each component of the time separately.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
tooltip - Archive of obsolete content
for text-only tooltips, this element doesn't need to be used; instead you may just
add a tooltiptext attribute to an element.
...for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window.
... methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
tree - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...the onselect event will be sent for each item
added to or removed from the selection.
... 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...
treecol - Archive of obsolete content
</treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be
added to the stylesheet (see treecol.type).
...for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column.
...ign, , 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, getuserdata, hasattribute...
XULRunner Hall of Fame - Archive of obsolete content
ieditweb users can
add pages, images, forms, ecommerce many special effects and much more using the xulrunner based client.
...latest release: june 2010 - build instructions utilities / prototypes ajax toolkit framework (atf) a part of the eclipse web tools platform (wtp) aliwal geocoder geocode
addresses onto a map benjamin's xulrunner examples "mybrowser is a very simple example browser", xulmine.
...you can
add tasks to a pool, turn them on and off, and it will tick off seconds.
MacFAQ - Archive of obsolete content
in your .mozconfig for custom builds of xulrunner,
add --enable-libxul.
...the toolkit will automatically enable this behavior if you
add class="chromeclass-toolbar" to your <toolbar> element.
...uments[0] .queryinterface(components.interfaces.nsicommandline); for (var i = 0; i < cmdline.length; ++i) { debug(cmdline.getargument(i)) } } catch(ex) { debug(window.arguments[0]) // do something with window.arguments[0] //nspreferences.setunicharpref("myxul.cmdlinevalue", window.arguments[0]) } window.
addeventlistener("load", checkotherwindows , false); } ]]></script> </window> ...
Windows and menus in XULRunner - Archive of obsolete content
this time i want to
add some of the things common to a desktop application user interface: windows and dialogs menus and toolbars os common dialogs controls or widgets windows each window or dialog should be created in its own xul file.
...you can
add a <commandset> and <command> elements like this: <commandset> <command id="cmd_open" label="&file.open;" oncommand="dofileopen();"/> <command id="cmd_save" label="&file.save;" oncommand="dofilesave();"/> </commandset> ...
... we can
add images to the toolbar buttons through the css file.
nsIContentPolicy - Archive of obsolete content
type_xbl 9 indicates an xbl binding request, triggered either by -moz-binding css property or the document.
addbinding() method.
...mozilla callers will handle this like reject_request; third-party implementors may, for example, use this to direct their own callers to consult the extra parameter for
additional details.
... char* previous = nsnull; nscomptr<nsicategorymanager> catman; servman->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), getter_
addrefs(catman)); rv = catman->
addcategoryentry("content-policy", component_classname, component_contractid, pr_true, pr_true, &previous); javascript developers can also implement an xpcom component that extends nsicontentpolicy.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 28-nov 10, 2006 announcements acm transactions on accessible computing "transactions on accessible computing (taccess) is a quarterly journal that publishes refereed articles
addressing issues of computing as it impacts the lives of people with disabilities." read more...
...the article goes into the history of accessibility in firefox, details ibm's involvement and
addresses some ajax accessibility concerns.
...ideas include:
adding standardized shortcuts clc-4-tts and/or other screenreader integration screenreader integration via an accessibility api discussion on the use of the <tab> key.
2006-10-20 - Archive of obsolete content
to contribute visit the wiki discussions i wanna make an
addon for firefox a commonly asked question in many newsgroups.
... how to create firefox extension (chrome) to
add images next to urls ?
...
adding support for new uri scheme question regarding creating a new uri scheme for firefox on windows.
2006-10-27 - Archive of obsolete content
these were the following choices stated: search the filesystem for unneeded files delete or archive them,
add a hard disk, move all or part of the concerned filesystem there move that tinderbox to a different machine with more empty disk space on october 23rd: nick responded to gavin and tony's posting.
... nick stated that the build engineers knew that there was a problem with the tinderbox and that they would be solving the problem by
adding a hard disk, and moving all or part of the concerned filesystem there.
...the solution that masaki suggested was to
add "-l/usr/sfw/lib" into moz_cairo_libs of config/autoconf.mk.
Monitoring plugins - Archive of obsolete content
register for runtime notifications with the observer service you must create a class with an observe method which receives 3 parameters (subject, topic and data) as well as a register method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice (components.interfaces.nsiobserverservice); observerservice.
addobserver(this, "experimental-notify-plugin-call", false); observing as discussed above, to specify what you want done when a notification arrives your class must have an observe method, receiving 3 parameters (subject, topic and data).
... var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.
addobserver(this, "experimental-notify-plugin-call", false); this.registered = true; } }, //unregisters from the observer services unregister: function() { if (this.registered == true) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observ...
...erservice.removeobserver(this, "experimental-notify-plugin-call"); this.registered = false; } } }
additional resources more information on the observer service: nsiobserverservice nsiobserver ...
Adobe Flash - Archive of obsolete content
on mac os x, there is an
additional caveat: netscape gecko browsers such as camino (formerly chimera), the latest mozilla browsers, and future versions of netscape which are built using the mach-o binary format won't be able to use flash's scriptability features.
...when information about when this problem on mac os x will be
addressed becomes available, the constant can be updated to reflect something less arbitrary.
...as part of mozilla's effort to improve the user experience, a feature was
added in firefox 49 that automatically blocks certain flash modules that have little or no user-noticeable impact from being used.
Digital Signatures - Archive of obsolete content
encryption and decryption
address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this document.
... but encryption and decryption, by themselves, do not
address another problem: tampering.
... this section describes how public-key cryptography
addresses the problem of tampering.
Making sure your theme works with RTL locales - Archive of obsolete content
all you have to do is
add css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have.
...as a result, you almost never want to use left/right rules for p
addings, borders, and margins.
... instead, you should use the following start/end rules instead to ensure rtl compatibility: -moz-p
adding-start -moz-p
adding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8px; -moz-margin-start: -4px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale.
Theme changes in Firefox 3 - Archive of obsolete content
instead a '-moz-margin-start' property must be
added to .tab-drop-indicator-bar, with a value that is half of the width of the indicator image.
...the rule that's needed to show and hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to
add add the following images: chrome://global/skin/icons/information-16.png used when presenting information notices.
... mac os x mac os x themes for firefox 3 should
add these two rules to the end of chrome://global/skin/wizard.css: .wizard-buttons-btm { p
adding:xpx; } .wizard-label-box { display: none; } the numeric value ofx, the number of pixels of p
adding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2.
Using Web Standards in your Web Pages - Archive of obsolete content
the first 2 sections
address exclusively validation issues, benefits of validation, deprecated elements, deprecated attributes.
... how to upgrade a webpage markup code to pass validation and how to implement css are
addressed by providing recommendations, tutorials and references.
... the other sections
address dom and dhtml coding practices which are at odds with the w3c web standards and suggest replacements.
Using workers in extensions - Archive of obsolete content
if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension
adding preferences to an extension localizing an extension updating an extension to support multiple mozilla applications download the sample you may download the complete example: download the example.
...let's take a look: startup: function() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("stockwatcher2."); this.prefs.queryinterface(components.interfaces.nsiprefbranch2); this.prefs.
addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker = new worker("chrome://stockwatcher2/content/ticker_worker.js"); // small little dance to get 'this' to refer to stockwatcher, not the // worker, when a message is received.
... a note about chromeworkers requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) gecko 2.0
added the new chromeworker object, which provides a special chrome-only worker that can be used by applications and extensions.
Expression closures - Archive of obsolete content
description this
addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical lambda notation.
...there is no
added benefit to writing code in this manner, other than having it be syntactically shorter.
... examples a shorthand for binding event listeners: document.
addeventlistener('click', function() false, true); using this notation with some of the array functions from javascript 1.6: elems.some(function(elem) elem.type == 'text'); ...
New in JavaScript 1.1 - Archive of obsolete content
the old netscape documentation references this as "features
added after version 1".
... constructor and prototype properties on objects
added.
... tostring():
added radix parameter, which specifies the base to use for representing numeric values.
New in JavaScript 1.3 - Archive of obsolete content
additional features of version 1.2, at the time not specified by ecma-262 were kept in the javascript language (see below for a list of differences).
... changed functionality in javascript 1.3 changes to date to conform with ecma-262 new constructor date(year, month, day, [,hours [, minutes [, seconds [, milliseconds ]]]])
additional method parameters: setmonth(month[, date]) sethours(hours[, min[, sec[, ms]]]) setminutes(min[, sec[, ms]]) setseconds(sec[, ms]) the length of an array (property length) is now an unsigned, 32-bit integer.
... array.prototype.push(): in javascript 1.2, the push method returned the last element
added to an array.
ECMAScript 5 support in Mozilla - Archive of obsolete content
supported features
added in javascript 1.8.5 (gecko 2, firefox 4 and later) firefox 4 has full ecmascript 5 support including the object.* methods and strict mode.
...
added in javascript 1.8.1 (gecko 1.9.1, firefox 3.5) native json support object.getprototypeof() method.
...
added in javascript 1.6 (gecko 1.8, firefox 1.5) new array methods offering several improved methods for manipulating arrays -- have been part of javascript since javascript 1.6.
Object.observe() - Archive of obsolete content
one of "
add", "update", or "delete".
...if omitted, the array ["
add", "update", "delete", "reconfigure", "setprototype", "preventextensions"] will be used.
... examples logging all six different types var obj = { foo: 0, bar: 1 }; object.observe(obj, function(changes) { console.log(changes); }); obj.baz = 2; // [{name: 'baz', object: <obj>, type: '
add'}] obj.foo = 'hello'; // [{name: 'foo', object: <obj>, type: 'update', oldvalue: 0}] delete obj.baz; // [{name: 'baz', object: <obj>, type: 'delete', oldvalue: 2}] object.defineproperty(obj, 'foo', {writable: false}); // [{name: 'foo', object: <obj>, type: 'reconfigure'}] object.setprototypeof(obj, {}); // [{name: '__proto__', object: <obj>, type: 'setprototype', oldvalue: <prototype>}] object.seal(obj); // [ //...
RFE to the Custom Controls - Archive of obsolete content
therefore the control set may need to be more extensive to
address the wider spectrum of requirements that a xul application will have on its controls.
... output should show data in current locale format the bug 331585
address the issue.
... probably this feature should be implemented by
adding a new custom control.
Requests For Enhancement - Archive of obsolete content
an
additional way to attract the xforms team's attention to an enhancement request you are promoting is to vote for the bug that is related with the feature request (if there is no bug yet then please feel free to file it).
...therefore the control set may need to be more extensive to
address the wider spectrum of requirements that a xul application will have on its controls.
... enhancements of xforms elements if you find that none of the elements proposed by the xforms spec
address your requirements, please post your usecase here.
XForms - Archive of obsolete content
drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to
address some of the limitations of the current html forms model.
... xforms support can be
added to firefox and seamonkey by installing the mozilla xforms extension.
...the last official release has been done for firefox 3.6 and is available for download on
addons.mozilla.org.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
in
addition to predictability, standard processes improve understanding and streamline costs.
... following open standards has an
added benefit.
...as users become more sophisticated, and as
additional devices become more affordable, they will be accessing the same information across a variety of devices – and expect them to look and act the same – regardless of whether they are accessing a web site from their desktop, phone, or handheld.
Using the Right Markup to Invoke Plugins - Archive of obsolete content
additional param elements (which are "children" of the above object element) specify configuration parameters for the flash plugin.
...in fact, the above usage will also work for ie, which understands mime type invocations for certain mime types such as flashin
addition to activex-style classid invocations.
...
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.
Bounding volume collision detection with THREE.js - Game development
we need to provide the sphere's center and radius, which can be
added to the boundingsphere property available in geometry.
...we also need to
add the newly created object to the three.js scene in order to render it.
... var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new three.meshnormalmaterial({}) ); var knotboxhelper = new three.boxhelper(knot, 0x00ff00); scene.
add(knotboxhelper); in order to also have our actual box3 bounding box, we create a new box3 object and make it assume the boxhelper's shape and position.
Implementing controls using the Gamepad API - Game development
implementation there are two important events to use along with the gamepad api — gamepadconnected and gamep
addisconnected.
...next, we set up two event listeners to get the data: window.
addeventlistener("gamepadconnected", gamepadapi.connect); window.
addeventlistener("gamep
addisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire.
... events there were more events available in the spec than just gamepadconnected and gamep
addisconnected available, but they were removed from the specification as they were thought to not be very useful.
Bounce off the walls - Game development
add this line right after the existing game.physics.enable() method call: ball.body.collideworldbounds = true; now the ball will stop at the edge of the screen instead of disappearing, but it doesn't bounce.
...
add the following line below the previous one: ball.body.bounce.set(1); try reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area.
... compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps this is starting to look more like a game now, but we can't control it in any way — it's high time we introduced the player p
addle and controls.
Move the ball - Game development
add the following new lines of the code inside update(), as shown: function update() { ball.x += 1; ball.y += 1; } the code above
adds 1 to the x and y properties representing the the ball coordinates on the canvas, on each frame.
... compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps the next step is to
add some basic collision detection, so our ball can bounce off the walls.
... this would take several lines of code — a significantly more complex step than we have seen so far, especially if we want to
add p
addle and brick collisions too — but fortunately phaser allows us to do this much more easily than if we wanted to use pure javascript.
Gecko FAQ - Gecko Redirect 1
certain browser components are not provided as part of gecko, such as bookmarks, history,
address book, etc.
..., abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to
add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is expected and has already been built into gecko, including support for css2 positioni...
...
additionally, on the windows platform, gecko's xpcom interfaces are wrapped in an activex control that vb developers can utilize (activex wrappers are not available on other platforms because activex is a windows-only technology).
DNS - MDN Web Docs Glossary: Definitions of Web-related terms
dns maintains a list of domain names along with the resources, such as ip
addresses, that are associated with them.
... the most prominent function of dns is the translation of human-friendly domain names (such as mozilla.org) to a numeric ip
address (such as 151.106.5.172); this process of mapping a domain name to the appropriate ip
address is known as a dns lookup.
... by contrast, a reverse dns lookup (rdns) is used to determine the domain name associated with an ip
address.
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's
address bar, page tabs and bookmarks menu.
... note, however, that most modern browsers replaced the favicon from the
address bar by an image indicating whether or not the website is using https.
...when a familiar icon is seen in the browser's
address bar, for example, it helps users know they are in the right place.
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
if you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create
additional row or column tracks to hold grid items, then extra tracks will be created in the implicit grid.
... the implicit grid is the grid created automatically due to content being
added outside of the tracks defined.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; p
adding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> <div>eight</div> </div> ...
Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
some web applications include a prediction feature completing search text and
address bar urls based on browsing history and related searches.
... for example, as the user types in the
address bar, the browser might send the current text in the
address bar to the search engine before the user submits the request.
... although browser page prediction and prediction services enable faster page loads, they consume
additional bandwidth.
TLD - MDN Web Docs Glossary: Definitions of Web-related terms
consider an example internet
address: https://developer.mozilla.org here org is the tld; mozilla.org is the second-level domain name; and developer is a subdomain name.
... all together, these constitute a fully-qualified domain name; the
addition of https:// makes this a complete url.
... infrastructure top-level domain this group consists of one domain, the
address and routing parameter area (arpa).
Test your skills: Selectors - Learn web development
selectors three in this example, try making the following changes without
adding to the html.
... remove the bullets and
add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.
... selectors five in this final task
add css using attribute selectors to do the following: target the <a> element with a title attribute and make the border pink (border-color: pink).
CSS first steps - Learn web development
css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or
add animations and other decorative features.
... this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to
add styling to html.
... using your new knowledge with the things you have learned in the last few lessons you should find that you can format simple text documents using css, to
add your own style to them.
Web fonts - Learn web development
you can use the font stack to specify preferable fonts, followed by web-safe alternatives, followed by the default system font, but this
adds overhead in terms of testing to make sure that your designs look ok with each font, etc.
... you should use the web-font-start.html and web-font-start.css files as a starting point to
add your code to (see the live example).
... each of the url() functions points to a font file that we want to import into our css — we need to make sure the paths to the files are correct, so
add fonts/ to the start of each path (adjust as necessary).
What text editors are available? - Learn web development
do i want to
add extra features to my text editor?
...cuments, based on regular expressions or other patterns as needed quickly jump to a given line view two parts of a large document separately view html as it will look in the browser select text in multiple places at once view your project's files and directories format your code automatically with code beautifier check spelling auto-indent code based on indentation settings do i want to
add extra features to my text editor?
...sometimes the software comes in a compressed archive like .zip, .7z, or .rar, and in that case you'll need to install an
additional program to extract the content from the archive.
How do you make sure your website works properly? - Learn web development
frequent errors the most frequent errors that we find are these: typos in the
address we wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”: the
address cannot be found.
... javascript errors someone (possibly you)
added a script to the page and made a mistake.
...resources like webpagetest.org or browser
add-ons like yslow can tell you a few interesting things: grades go from a to f.
How much does it cost to do something on the Web? - Learn web development
those programs are relatively limited, you'll soon want a more robust editor to
add layers, effects, and grouping.
... services associated with the domain name: some registrars provide spam protection by hiding your postal
address and email
address behind their own
addresses: the postal
address can be provided in care of the registrar, and your email
address can be obscured via your registrar's alias.
... free hosting providers may
add advertising to your content, beyond your control.
How do I use GitHub Pages? - Learn web development
the command should look something like this: git remote
add origin https://github.com/chrisdavidmills/my-repository.git next, type the following two commands, pressing enter after each one.
... git
add --all git commit -m '
adding my files to my repository' finally, push the code up to github by going to the github web page you're on and entering into the terminal the second of the two commands we saw the …or push an existing repository from the command line section: git push -u origin master now you need to turn github pages on for your repository.
...then, you need to enter the following commands (pressing enter after each one) to push those changes to github: git
add --all git commit -m 'another commit' git push you can replace another commit with a more suitable message to describe what change you just made.
How do you set up a local testing server? - Learn web development
if the web
address path starts with file:// followed by the path to the file on your local hard drive, a local file is being used.
... in contrast, if you view one of our examples hosted on github (or an example on some other remote server), the web
address will start with http:// or https://, to show that the file has been received via http.
... on the first installer page, make sure you check the "
add python 3.xxx to path" checkbox.
Example 2 - Learn web development
: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; p
adding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);...
... } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; p
adding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; p
adding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-b...
...ox; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { p
adding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.
addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.
add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> ...
Sending form data - Learn web development
<label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the browser
address bar when you submit the form.
...after the url web
address has ended, we include a question mark (?) followed by the name/value pairs, each one separated by an ampersand (&).
...in
addition, many servers limit the length of urls they accept.
Test your skills: Advanced styling - Learn web development
first of all, try giving the search box a consistent width, height, p
adding, and border color across browsers.
... once you've removed the native styling, you'll need to
add back one of the features it was providing, to keep same look and feel we originally had.
...can you
add some kind of styling back in so that users can tell when the search box is being hovered or focused?
Web forms — Working with user data - Learn web development
introductory guides your first form the first article in our series provides your very first experience of creating a web form, including designing a simple form, implementing it using the right html elements,
adding some very simple styling via css, and how data is sent to a server.
... the html5 input types here we continue our deep dive into the <input> element, looking at the
additional input types provided when html5 was released, and the various ui controls and data collection enhancements they provide.
...
additionally, we look at the <output> element.
What will your website look like? - Learn web development
ux designers have a somewhat more abstract role in
addressing how users will experience and interact with the website.
...alternatively, copy the image's web
address from your browser's
address bar for later use.
... click the "plus" (
add to) icon next to the font you want.
Responsive images - Learn web development
prerequisites: you should already know the basics of html and how to
add static images to a web page.
... in
addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen.
...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.
Multimedia and Embedding - Learn web development
video and audio content next, we'll look at how to use the html5 <video> and <audio> elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers,
adding captions and subtitles, and how to
add fallbacks for older browsers.
...
adding vector graphics to the web vector graphics can be very useful in certain situations.
... assessments the following assessments will test your understanding of the html basics covered in the guides above: mozilla splash page in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to
add some images and video to a funky splash page all about mozilla!
General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we
add a click event listener to a button so that when clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then
adds a paragraph to the dom: const btn = document.queryselector('button'); btn.
addeventlistener('click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log...
...(mydate); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-
added paragraph.'; document.body.appendchild(pelem); }); when running the example, open your javascript console then click the button — you'll notice that the paragraph does not appear until after the dates have finished being calculated and the console message has been logged.
... function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.
addeventlistener('click', expensiveoperation); alertbtn.
addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered.
Image gallery - Learn web development
adding an onclick handler to each thumbnail image in each loop iteration, you need to
add an onclick handler to the current newimage — this handler should find the value of the src attribute of the current image.
... alternatively, you can
add one event listener to the thumb bar.
...you need to
add an onclick handler that: checks the current class name set on the <button> — you can again achieve this by using getattribute().
Function return values - Learn web development
let's
add some useful functions to this <script> element.
... below the two existing lines of javascript,
add the following function definitions: function squared(num) { return num * num; } function cubed(num) { return num * num * num; } function factorial(num) { if (num < 0) return undefined; if (num == 0) return 1; let x = num - 1; while (x > 1) { num *= x; x--; } return num; } the squared() and cubed() functions are fairly obvious — they return the square or cube of the number that was given as a parameter.
... at this point, we'd like you to have a go at writing out a couple of functions of your own and
adding them to the library.
Handling text — strings in JavaScript - Learn web development
joining together strings in javascript uses the plus (+) operator, the same one we use to
add numbers together, but in this context it does something different.
...strings so what happens when we try to
add (or concatenate) a string and a number?
...however, if you want to
add this number to something, you'll need it to be a number, so you could pass it through number() to handle this.
Test your skills: Arrays - Learn web development
then
add a new item to the beginning of the array.
...
add two new names to the end of the array.
... go over each item in the array and
add its index number after the name inside parentheses, for example ryu (0).
Test your skills: Strings - Learn web development
you already have half of a famous quote inside a variable called quotestart; we would like you to: look up the other half of the quote, and
add it to the example inside a variable called quoteend.
... there is one more small fix to do —
add a full stop onto the end of the quote, and save the final version in a variable called finalquote.
... strings 4 in the final string task, we have given you the name of a theorem, two numeric values, and an incomplete string (the bits that need
adding are marked with asterisks (*)).
JavaScript object basics - Learn web development
we could get those values like this: let mydataname = nameinput.value; let mydatavalue = namevalue.value; we could then
add this new member name and value to the person object like this: person[mydataname] = mydatavalue; to test this, try
adding the following lines into your code, just below the closing curly brace of the person object: let mydataname = 'height'; let mydatavalue = '1.75m'; person[mydataname] = mydatavalue; now try saving and refreshing, and entering the following into your text input: person.heig...
...ht
adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.
... overview: objects next in this module object basics object-oriented javascript for beginners object prototypes inheritance in javascript working with json data object building practice
adding features to our bouncing balls demo ...
Introducing JavaScript objects - Learn web development
in this article, we explore that difference, explain how prototype chains work, and look at how the prototype property can be used to
add methods to existing constructors.
...in
addition, we present some advice on when and where you might use oojs.
... assessments
adding features to our bouncing balls demo in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and
add some new and interesting features to it.
CSS performance optimization - Learn web development
to optimize the cssom construction, remove unnecessary styles, minify, compress and cache it, and split css not required at page load into
additional files to reduce css render blocking.
...to create a non-blocking css link, move the not-immediately used styles, such as print styles, into separate file,
add a <link> to the html mark up, and
add a media query, in this case stating it's a print stylesheet.
...tell the browser when the style sheet should be applied by
adding a media attribute with the media query.
What is web performance? - Learn web development
it is important to minimize the loading and response times, and
add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.
...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.
...extensive dom manipulation after the pages has loaded (e.g.,
adding, deleting, or moving of nodes) can affect performance, so it is worth understanding how to dom works, and how such issues can be mitigated.
Ember resources and troubleshooting - Learn web development
for framework-specific things, there is the ember-inspector
add-on, which allows inspection of: routes & controllers components services promises data (i.e: from a remote api — from ember-data, by default) deprecation information render performance for general javascript debugging, check out our guides on javascript debugging as well as interacting with the browser's other debugging tools.
... there have been a coupleof new ideas put together into the form of
addons that use the public apis, ember-set-helper and ember-box.
...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 todo 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 svelt...
React resources - Learn web development
it
adds a new panel to your browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application.
...when this merge happens, react router will be the surviving project (with the
addition of the focus management features of reach).
...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 todo 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 svelt...
Understanding client-side web development tools - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to
add your own command line interface (cli) tools.
...deploying our app in the final article in our series, we take the example toolchain we built up in the previous article and
add to it so that we can deploy our sample app.
... we push the code to github, deploy it using netlify, and even show you how to
add a simple test into the process.
Learn web development
the content in the learning area is being
added to regularly.
... css — styling the web css is the language that we can use to style and layout our web content, as well as
adding behavior like animation.
... javascript — dynamic client-side scripting javascript is the scripting language used to
add dynamic functionality to web pages.
Accessibility information for UI designers and developers
for example,
add text labels or texture in
addition to color differences.
... for example, in this chart, it helps to
add labels besides the colored chart lines:people who cannot see the difference between the colors, can use the labels instead.
... see also: understanding success criterion 2.3.3: animation from interactions content on hover or focus if content is revealed on hover or focus, for example in tooltips, there are some things to keep in mind: if the extra content obscures existing content, there should be a way to close it without moving focus if the extra content is opened on hover, hovering the
additional content itself should not cause it to disappear consistent navigation navigation should be consistent across different pages on your site.
Lightweight themes
lightweight themes are sometimes referred to as "background themes" or, (on
addons.mozilla.org) as just "themes".
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars,
address bar, search bar and the tab strip.
... firefox may reveal more of the lower portion of the image if another toolbar or other ui element is
added to the top of the window.
A bird's-eye view of the Mozilla framework
[scriptable, uuid(00000000-0000-0000-c000-000000000046)] interface nsisupports { void queryinterface(in nsiidref uuid, iid_is(uuid),retval] out nsqiresult result); [noscript, notxpcom] nsrefcnt
addref(); [noscript, notxpcom] nsrefcnt release(); }; the uuid parameter to queryinterface() is the iid uniqely identifying the interface.
... the xpcom component keeps track of all interface pointers currently held by its clients using an internal reference count it increments via client calls to
addref().
... javascript handles its own garbage collection, so it doesn’t need to call
addref() and release().
Debugging Table Reflow
amage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and
address and then the computed width and height from the htmlreflowstate.
...cols attribute assigns 1* e0proportionconstraint = 4 // 0*, means to force to min width after this follows the width information for each column: widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 the table code knows ten different width's: #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + p
adding #define des_con 1 // desired width of the content + p
adding #define fix 2 // fixed width either from the content or cell, col, etc.
... + p
adding #define min_adj 3 // minimum width + p
adding due to col spans #define des_adj 4 // desired width + p
adding due to col spans #define fix_adj 5 // fixed width + p
adding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet none of these width's has been set.
HTTP logging
so we have
added a 'rotate:size_in_mb' option to moz_log (we use it in the examples above).
... using the rotate module automatically
adds timestamps to the log, so it’s always easy to recognize which file keeps the most recent data.
... however, if you are seeing your browser crash (or hang) you should
add ",sync" to the list of logging modules in your moz_log environment variable.
Building Firefox with Debug Symbols
ac_
add_options --enable-debug-symbols this can optionally take an argument for the type of symbols that need to be produced (like "-g3").
... breakpad symbol files after the build is complete, run the following command to generate an archive of breakpad symbol files: mach buildsymbols the tinderbox uses an
additional uploadsymbols target to upload symbols to a socorro server.
...if you want to keep the symbols in the patches, you need to
add this to your mozconfig: ac_
add_options --disable-install-strip ...
Updating NSPR or NSS in mozilla-central
c 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/nsprpub/patches/ for patches that need to be applied to nspr, and directory mozilla/security/patches/ for patches that need to be applied to nss.
... check for new or removed files $ hg
addremove -n review the output to make sure it looks correct update the minimum required system nss version in old-configure.in.
...if your update fails linking because of missing nss or nspr symbols,
add the missing symbols to config/external/nss/nspr-dummy.def or config/external/nss/nss.def, whichever is relevant.
Inner and outer windows
then
add to that the concept of frames, whereby a document in a window can itself contain other documents, which in turn can contain more documents.
...consider this view of a window and the browser history: as the user navigates, documents are
added to the backward-forward cache (often referred to as the bfcache).
...this hierarchy can continue on, if frames contain
additional frames.
Commenting IDL for better documentation
following the rules below will ensure that our tools are able to produce the best possible results, and will have the
added bonus of making your comments easier to read!
... also, you should
add the * "interfaces" tag to your article, as well as "interfaces:scriptable" if the * interface is scriptable.
...this is where you would * provide
additional information about the interface as necessary.
SVG Guidelines
basics two spaces indenting no useless whitespaces or line breaks (see below for more details)
adding a license header use double quotes whitespace and line breaks whitespace in
addition to trailing whitespace at the end of lines, there are a few more cases more specific to svgs: trailing whitespaces in attribute values (usually seen in path definitions) excessive whitespace in path or polygon points definition examples this path: <path d=" m5,5 l1,1z "> can be cut down to t...
... unused tags and attributes editor metadata vector editors (inkscape, adobe illustrator, sketch) usually
add a bunch of metadata in svg files while saving them.
... metadata can mean many things, including: the typical "created with editor" comments non-standard editor specific tags and attributes (sketch:foo, illustrator:foo, sopodi:foo, …) the xml namespace definition that comes with the latter (xmlns:sketch, xmlns:sopodi, …) other metadata in
addition to non-standard editor metadata, standard compliant metadata also exists.
Frame script environment
addeventlistener() listen to events from content.
...
addmessagelistener() listen to messages from chrome.
... events besides the regular dom events being captured/bubbling up from content the current content object the following
additional events get fired in a frame script environment: unload fires when the frame script environment is shut down, i.e.
Frame script environment
addeventlistener() listen to events from content.
...
addmessagelistener() listen to messages from chrome.
... events besides the regular dom events being captured/bubbling up from content the current content object the following
additional events get fired in a frame script environment: unload bubbles no fires when the frame script environment is shut down, i.e.
Firefox
here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox
add-ons, using the developer tools in firefox, and other topics.
... learn how to create
add-ons for firefox, how to develop and build firefox itself, and how the internals of firefox and its subprojects work.
... linux compatibility matrixthe following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.multiple firefox profilesa profile in firefox is the collection of settings, customizations,
add-ons, and other personalizations that a user has made or installed into their copy of firefox.
mozbrowsermetachange
the mozbrowsermetachange event is fired when a <meta> element related to web applications is
added, removed or changed.
...this can be
added, changed, removed, or undefined.
... example var browser = document.queryselector("iframe"); browser.
addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ".
HTMLIframeElement.removeNextPaintListener()
the removenextpaintlistener() method of the htmliframeelement interface is used to remove a handler previously set with the
addnextpaintlistener method.
... parameters listener a function handler previously set with
addnextpaintlistener.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.
addnextpaintlistener(onnextpaint); browser.removenextpaintlistener(onnextpaint); specification not part of any specification.
overflow-clip-box-block
/* keyword values */ overflow-clip-box-block: p
adding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, p
adding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... syntax values p
adding-box this keyword makes the clipping be related to the p
adding box.
... examples p
adding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll p
adding-box"> <div class="scroll p
adding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; p
adding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .p
adding-box { overflow-clip-box-block: p
adding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.
addeventlistener("load", scrollsomeelements, false)...
overflow-clip-box-inline
/* keyword values */ overflow-clip-box-inline: p
adding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, p
adding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... syntax values p
adding-box this keyword makes the clipping be related to the p
adding box.
... examples p
adding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll p
adding-box"> <div class="scroll p
adding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; p
adding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .p
adding-box { overflow-clip-box-inline: p
adding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.
addeventlistener("load", scrollsomeelements, false...
overflow-clip-box
/* keyword values */ overflow-clip-box: p
adding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: p
adding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, p
adding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... initial valuep
adding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values p
adding-box this keyword makes the clipping be related to the p
adding box.
... formal syntax p
adding-box | content-box examples p
adding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll p
adding-box"> <div class="scroll p
adding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; p
adding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .p
adding-box { overflow-clip-box: p
adding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.
addeventlistener("load", scrollsomeelements, false); result ...
Script security
gecko has an
additional problem, though: while its core is written in c++, the front-end code is written in javascript.
...the
add-on sdk runs content scripts in sandboxes, which are initialized with an expanded principal, giving them elevated privileges with respect to the web content they operate on, but reduced privileges with respect to chrome.
...for example, expanded principals are used in the
add-on sdk to give content scripts cross-domain privileges for a predefined set of domains, and to protect content scripts from access by untrusted web content, without having to give content scripts system privileges.
Getting Started with Chat
when
addressing someone directly, try to use name: message format.
...this is useful when creating interfaces for
add-on development.
... /invite firebot #channel
adds firebot to the specified channel.
Creating a New Protocol
this is a quick-start on details of how to
add a new ipdl protocol to the build.
...to hook up the file to the build, you need to
add your ipdl file to ipdl_sources in the nearest moz.build file.
...it may be possible to test protocols unrelated to a particular window using the xpcshell testing framework, which has
additional primitives in electrolysis for launching and running js commands in a content process.
API-provided widgets
overflows whether widget can overflow when in an overflowable toolbar (optional, default: true) defaultarea default area to
add the widget to (optional, default: none; required if non-removable) shortcutid id of an element that has a shortcut for this widget (optional, default: null).
...if you're in an
add-on, you should not set this property, and should instead include the shortcut as part of the tooltiptext you pass in yourself.
...from bootstrapped
add-ons).
Following the Android Toasts Tutorial from a JNI Perspective
this article is a work in progress and is based on githubgist :: _ff-
addon-tutorial-jniandroidtoast.js this article will follow the android developers :: api guides - toasts tutorial.
...let's declare these methods in the third argument of loadclass we
add a key-value pair, with the key being static_methods and methods and the value being an array.
...we will
add this to our sig object in slash notation: geckoappshell: 'lorg/mozilla/gecko/geckoappshell;' we then instantiate the geckoappshell class in jni and declare the getcontext method; dxr showed that this method accepted no arguments and returns a context, and we already had the sig for context in our sig object.
Log.jsm
log.
addappender(new log.consoleappender(new log.basicformatter())); // a dump appender logs to stdout.
... log.
addappender(new log.dumpappender(new log.basicformatter())); // log some messages log.error("oh noes!!
... doappend(); reset(); formatter(); length: 0 keys of prototype: format(); logmessage(); length: 4 keys of prototype: leveldesc logger(); length: 2 keys of prototype:
addappender(); level logstructured(); name parent removeappender(); updateappenders(); and the methods mentioned below: logger methods loggerrepository(); length: 0 keys of prototype: getlogger(); ...
PerfMeasurement.jsm
note: the perfmeasurement.jsm javascript code module can only be used from chrome -- that is, from within the application itself or an
add-on.
...note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to
add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems.
...for each enabled counter, the number of measured events of that type that occurred are
added to the appropriate visible variable.
PopupNotifications.jsm
show()
adds a new popup notification, displaying it to the user.
... return value returns the notification object corresponding to the
added notification.
... dismissed a boolean value indicating whether or not the notification should be
added as a dismissed notification.
Promise.jsm
romise 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 also includes helper functions that are specific to the
add-on sdk.
... while you may still import this module from the above paths, the recommended way for loading it is through the
add-on sdk loader.
... introduction for an introduction to promises, you may start from the
add-on sdk documentation, keeping in mind that only the core subset is implemented in this module.
SourceMap.jsm
sourcemapgenerator.prototype.
addmapping(mapping)
add a single mapping from original source line and column to the generated source's line and column for this source map being created.
...is immediately passed to sourcenode.prototype.
add, see below.
... sourcenode.prototype.
add(chunk)
add a chunk of generated js to this source node.
JavaScript code modules
standard code modules
addonmanager.jsm an interface to install, manage, and uninstall
add-ons.
...
addonrepository.jsm provides a search of
add-ons in the repository.
... webrequest.jsm provides an api to
add event listeners for the various stages of making an http request.
Creating localizable web content
e.g.: a new page is announced with only 100 words but it is actually content
added to an existing page in english.
... 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).
... if there are alternatives, use them by
adding the $lang; parameter in the urls evaluate the impact of new pages on all our web properties, especially links to community sites and redirects.
Extras
="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mp
added width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </ra...
... attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mp
added> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" ...
...> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).
addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlistener("denum"); } window.
addeventlistener("load", init); ...
Mozilla Port Blocking
modifying mozilla's port blocking at run time users can modify the default port blocking through the
addition of preferences containing comma delimited lists of port numbers to the user.js file (for single users with the user_pref(…) command) in the user's profile directory.
...
additionaly administrators can edit the all.js file (for multi-user systems with pref(…) ) in the defaults/pref/ sub-directory in the installation directory.
...currently you need to
add preferences to either user.js or all.js.
Mozilla Development Strategies
make sure documentation gets updated if the bug you're fixing is likely to require an update to developer documentation once it's fixed, be sure to
add the dev-doc-needed keyword to the bug (or ask someone to do it, if you don't have editbugs privileges on bugzilla).
... test your code qa's job is to assure quality, not to
add quality.
... for c++, use #define, #ifdef, #else and #endif for xul / js, and you're doing something major,
add your new files to the tree and then have it be a simple jar.mn patch to enable it.
Leak Gauge
results of processing log leak2.log : leaked outer window 2c6e410 at
address 2c6e410.
... leaked outer window 2c6ead0 at
address 2c6ead0.
... leaked inner window 2c6ec80 (outer 2c6ead0) at
address 2c6ec80.
Building NSS
use_asan 0 do not create an
addresssanitizer build.
... 1 create an
addresssanitizer build.
... if you don't have a domain suffix you can
add an entry to /etc/hosts (on windows, c:\windows\system32\drivers\etc\hosts) as follows: 127.0.0.1 localhost.localdomain validate this opening a command shell and typing: ping localhost.localdomain.
JSS Provider Notes
cipher supported algorithms notes aes des desede (des3 ) rc2 rc4 rsa the following modes and p
adding schemes are supported: algorithm mode p
adding des ecb nop
adding cbc nop
adding pkcs5 p
adding desede des3 ...
... ecb nop
adding cbc nop
adding pkcs5 p
adding aes ecb nop
adding cbc nop
adding pkcs5 p
adding rc4 none none rc2 cbc nop
adding pkcs5p
adding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness.
...these fields were
added in jdk 1.4.
Mozilla-JSS JCA Provider notes
dsakpg.initialize(1024); keypair dsapair = dsakpg.generatekeypair(); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature cipher supported algorithms notes aes des desede (des3) rc2 rc4 rsa the following modes and p
adding schemes are supported: algorithm mode p
adding des ecb nop
adding cbc nop
adding pkcs5 p
adding desede des3 ecb nop
adding cbc nop
adding pkcs5 p
adding aes ecb...
... nop
adding cbc nop
adding pkcs5 p
adding rc4 none none rc2 cbc nop
adding pkcs5p
adding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness.
...these fields were
added in jdk 1.4.
NSS_3.11.10_release_notes.html
bug 387892:
add entrust root ca certificate(s) to nss bug 396999: pk11_authenticate bug 397478: lock from ssl_initsymwrapkeyslock not freed on selfserv shutdown.
...tion botch in ssl3_registerserverhelloextensionsender doing second handshake with ssl_forcehandshake bug 403240: threads hanging in nss_initlock bug 403888: memory leak in trustdomain.c bug 416067: certutil -l -h token doesn't report token authentication failure bug 417637: tstclnt crashes if -p option is not specified bug 421634: don't send an sni client hello extension bearing an ipv6
address bug 422918:
add verisign class 3 public primary ca - g5 to nss bug 424152:
add thawte primary root ca to nss bug 424169:
add geotrust primary certification authority root to nss bug 425469:
add multiple new roots: geotrust bug 426568:
add comodo certification authority certificate to nss bug 431381:
add network solutions certificate authority root to nss bug 431621:
add diginota...
...r 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.4 release notes
currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/documents/140-1/140inprocess.pdf
added crl distribution point support (see cert.h).
... bug 321755: implement crldistributionpoint extension in libpkix bug 391434: avoid multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 405297: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 427135:
add super-h (sh3,4) architecture support bug 431958: improve des and sha512 for x86_64 platform bug 433791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 453735: when using cert9 (sqlite3) db, set or change master password fails bug 463544: warning: passing enum* for an int* argument in pkix_validate.c bug 469588: coverity errors reported ...
... rsa/dsa powerupself tests to be compliant for 2011 bug 494087: passing null as the value of cert_pi_trustanchors causes a crash in cert_pkixsetparam bug 494107: during nss_nodb_init(), softoken tries but fails to load libsqlite3.so crash [@ @0x0 ] bug 495097: sdb_mapsqlerror returns signed int bug 495103: nss_initreadwrite(sql:<dbdir>) causes nss to look for sql:<dbdir>/libnssckbi.so bug 495365:
add const to the 'nickname' parameter of sec_certnicknameconflict bug 495656: nss_initreadwrite(sql:<configdir>) leaves behind a pkcs11.txu file if libnssckbi.so is in <configdir>.
NSS 3.12.5 release_notes
additional documentation in pk11pub.h: the caller of pk11_derencodepublickey should free the returned secitem with a secitem_freeitem(..., pr_true) call.
... bug 510435: remove unused make variable dso_ldflags bug 510436:
add macros for build numbers (4th component of version number) to nssutil.h bug 511227: firefox 3.0.13 fails to compile on freebsd/powerpc bug 511312: nss fails to load softoken, looking for sqlite3.dll bug 511781:
add new tls 1.2 cipher suites implemented in windows 7 to ssltap bug 516101: if pk11_importcert fails, it leaves the certificate undiscoverable by cert_pkixverifycert bug 518443: pk11...
..._importandreturnprivatekey leaks an arena bug 518446: pk11_derencodepublickey leaks a certsubjectpublickeyinfo bug 518457: seckey_encodedersubjectpublickeyinfo and pk11_derencodepublickey are duplicate bug 522510:
add deprecated comments to key.h and pk11func.h bug 522580: nss uses port_memcmp for comparing secret data.
NSS 3.15.4 release notes
added the --empty-password command-line option to certutil, to be used with -n: use an empty password when creating a new database.
...
added the -w command-line option to pp: don't wrap long output lines.
...in
addition to enabling the ssl_enable_false_start option, an application must now register a callback using the ssl_setcanfalsestartcallback function.
NSS 3.16.2 release notes
new functions in cert.h cert_
addextensionbyoid -
adds an extension to a certificate.
... it is the same as cert_
addextension except that the oid is represented by a secitem instead of a secoidtag.
... the certutil commands supports
additionals types of subject alt name extensions: --extsan type:name[,type:name]...
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.
...this function was already
added in nss 3.16.2, however, it wasn't declared in a public header file.
... sha1 fingerprint: e5:df:74:3c:b6:01:c4:9b:98:43:dc:ab:8c:e8:6a:81:10:9f:e4:8e ou = valicert class 2 policy validation authority sha1 fingerprint: 31:7a:2a:d0:7f:2b:33:5e:f5:a1:c3:4e:4b:57:e8:b7:d8:f1:fc:a6 ou = valicert class 3 policy validation authority sha1 fingerprint: 69:bd:8c:f4:9c:d3:00:fb:59:2e:17:93:ca:55:6a:f3:ec:aa:35:fb
additionally, the following ca certificate was removed as requested by the ca ou = tdc internet root ca sha1 fingerprint: 21:fc:bd:8e:7f:6c:af:05:1b:d1:b3:43:ec:a8:e7:61:47:f2:0f:8a the following ca certificates were
added cn = certification authority of wosign sha1 fingerprint: b9:42:94:bf:91:ea:8f:b6:4b:e6:10:97:c7:fb:00:13:59:b6:76:cb cn =...
NSS 3.20 release notes
support for the following ciphersuites has been
added: tls_dhe_dss_with_aes_128_gcm_sha256 tls_dhe_dss_with_aes_128_cbc_sha256 tls_dhe_dss_with_aes_256_cbc_sha256 by default, the server side tls implementation will use dhe parameters with a size of 2048 bits when using dhe ciphersuites.
... a new api ssl_dhegroupprefset has been
added to nss, which allows a server application to select one or multiple of the embedded dhe parameters as the preferred parameters.
...please refer to the comments in the header file that declares the ssl_enableweakdheprimegroup api for
additional details.
NSS 3.28 release notes
ssl_send
additionalkeyshares configures a tls 1.3 client so that it generates
additional key shares when sending a clienthello.
... notable changes in nss 3.28 nss can no longer be compiled with support for
additional elliptic curves (the nss_ecc_more_than_suite_b option, bug 1253912).
... nss will now detect the presence of tokens that support
additional elliptic curves and enable those curves for use in tls (bug 1303648).
NSS 3.33 release notes
new functions in cert.h cert_findcertbyissuerandsncx - a variation of existing function cert_findcertbyissuerandsn that accepts an
additional password context parameter.
... cert_findcertbynicknameoremail
addrcx - a variation of existing function cert_findcertbynicknameoremail
addr that accepts an
additional password context parameter.
... cert_findcertbynicknameoremail
addrforusagecx - a variation of existing function cert_findcertbynicknameoremail
addrforusage that accepts an
additional password context parameter.
NSS 3.46 release notes
bugs fixed in nss 3.46 bug 1572164 - don't unnecessarily free session in nsc_wrapkey bug 1574220 - improve controls after errors in tstcln, selfserv and vfyserv cmds bug 1550636 - upgrade sqlite in nss to a 2019 version bug 1572593 - reset advertised extensions in ssl_constructextensions bug 1415118 - nss build with ./build.sh --enable-libpkix fails bug 1539788 -
add length checks for cryptographic primitives (cve-2019-17006) bug 1542077 - mp_set_ulong and mp_set_int should return errors on bad values bug 1572791 - read out-of-bounds in der_decodetimechoice_util from sslexp_delegatecredential bug 1560593 - cleanup.sh script does not set error exit code for tests that "failed with core" bug 1566601 -
add wycheproof test vectors for aes-kw bug 1571316 - cu...
...hangs on windows x64 when building nss since changeset 9162c654d06915f0f15948fbf67d4103a229226f bug 1564875 - improve rebuilding with build.sh bug 1565243 - support tc_owner without email
address in nss taskgraph bug 1563778 - increase maxruntime on mac taskcluster tools, ssl tests bug 1561591 - remove -wmaybe-uninitialized warning in tstclnt.c bug 1561587 - remove -wmaybe-uninitialized warning in lgattr.c bug 1561558 - remove -wmaybe-uninitialized warning in httpserv.c bug 1561556 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1561332 - ec.c:28 warning: comparison of...
...ng gpg key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance using pmull2 bug 1528666 - correct resumption validation checks bug 1568803 - more tests for client certificate authentication bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line formats bug 1575968 -
add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs fixed in nss 3.46: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46 compatibility nss 3.46 shared libraries are back...
NSS 3.48 release notes
certificate authority changes the following ca certificates were
added: bug 1591178 - entrust root certification authority - g4 cert sha-256 fingerprint: db3517d1f6732a2d5ab97c533ec70779ee3270a62fb4ac4238372460e6f01e88 upcoming changes in nss 3.49 the legacy dbm database, libnssdbm, will no longer be built by default.
... bugs fixed in nss 3.48 bug 1600775 - require nspr 4.24 for nss 3.48 bug 1593401 - fix race condition in self-encrypt functions bug 1599545 - fix assertion and
add test for early key update bug 1597799 - fix a crash in nssckfwobject_getattributesize bug 1591178 -
add entrust root certification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 -
added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 -
add `notbefore` or similar "beginning-of-val...
...for legacy key3.db storage bug 1590972 - use -std=c99 rather than -std=gnu99 bug 1590676 - fix build if arm doesn't support neon bug 1575411 - enable tls extended master secret by default bug 1590970 - ssl_settimefunc has incomplete coverage bug 1590678 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1588244 - nss changes for delegated credential key strength checks bug 1459141 -
add more cbc p
adding tests that missed nss 3.47 bug 1590339 - fix a memory leak in btoa.c bug 1589810 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milest...
NSS 3.56 release notes
bug 1654142 -
add cpu feature detection for intel sha extension.
... bug 1648822 -
add stricter validation of dh keys in fips mode.
... bug 1652729 -
add build flag to disable rc2 and relocate to lib/freebl/deprecated.
nss tech note3
the oid for this extension is { 2 16 840 1 113730 1 1 } encoded in hex as 0x60, 0x86, 0x48, 0x01, 0x86, 0xf8, 0x42, 0x01, 0x01 in
addition to netscape's own cert type extension, nss recognizes various x.509 extensions.
... a cert with the extended key usage extension and the netscape cert type extension that has the cert type ssl_client and also has an email
address in the subject is also given the cert type email.
... this allows all ssl client authentication certs with email
addresses to also be used as email certs (provded they have adequate key usage).
FC_GetTokenInfo
on return, the ck_token_info structure that pinfo points to has the following information: label: the label of the token, assigned during token initialization, p
added with spaces to 32 bytes and not null-terminated.
... manufacturerid: id of the device manufacturer, "mozilla foundation", p
added with spaces to 32 characters and not null-terminated.
... model: model of the device, "nss 3", p
added with spaces to 16 characters and not null-terminated.
NSS tools : pk12util
code error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version 7 to version 5 error o 22 - cert and key dbs patch error o 23 - get default cert db error o 24 - find cert by nickname error o 25 - create export context error o 26 - pkcs12
add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12
add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
...for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set
added to the ~/.bashrc file to make the change permanent.
... 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
c0: 08 48 61 72 64 63 6f 72 65 31 27 30 25 06 03 55 | .hardcore1'0%..u d0: 04 03 13 1e 48 61 72 64 63 6f 72 65 20 43 65 72 | ....hardcore cer e0: 74 69 66 69 63 61 74 65 20 53 65 72 76 65 72 20 | tificate server f0: 49 49 30 1e 17 0d 39 38 30 35 31 36 30 31 30 33 | ii0...9805160103 <
additional data lines> ] <
additional records in same format> server socket closed.
...sa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 } session-id = { } challenge = { 0x0355 0xe6e4 0x9979 0xc7d7 0x2c86 0x7896 0x5db 0xcfe9 } } ] <
additional records in same formats> server socket closed.
...
additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS tools : ssltap
c0: 08 48 61 72 64 63 6f 72 65 31 27 30 25 06 03 55 | .hardcore1'0%..u d0: 04 03 13 1e 48 61 72 64 63 6f 72 65 20 43 65 72 | ....hardcore cer e0: 74 69 66 69 63 61 74 65 20 53 65 72 76 65 72 20 | tificate server f0: 49 49 30 1e 17 0d 39 38 30 35 31 36 30 31 30 33 | ii0...9805160103 <
additional data lines> ] <
additional records in same format> server socket closed.
...sa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 } session-id = { } challenge = { 0x0355 0xe6e4 0x9979 0xc7d7 0x2c86 0x7896 0x5db 0xcfe9 } } ] <
additional records in same formats> server socket closed.
...
additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
NSS Tools
add modules and modify the properties of existing modules (such as whether a module is the default provider of some crypto service).
...for
additional information about this tool, see object signing.
...for
additional information about this tool, see form signing ...
NSS tools : pk12util
r o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version 7 to version 5 error o 22 - cert and key dbs patch error o 23 - get default cert db error o 24 - find cert by nickname error o 25 - create export context error o 26 - pkcs12
add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12
add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for...
...for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb to set the shared database type as the default type for the tools, set the nss_default_db_type environment variable to sql: export nss_default_db_type="sql" this line can be set
added to the ~/.bashrc file to make the change permanent.
... 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 : ssltap
c0: 08 48 61 72 64 63 6f 72 65 31 27 30 25 06 03 55 | .hardcore1'0%..u d0: 04 03 13 1e 48 61 72 64 63 6f 72 65 20 43 65 72 | ....hardcore cer e0: 74 69 66 69 63 61 74 65 20 53 65 72 76 65 72 20 | tificate server f0: 49 49 30 1e 17 0d 39 38 30 35 31 36 30 31 30 33 | ii0...9805160103 <
additional data lines> ] <
additional records in same format> server socket closed.
...fe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 } session-id = { } challenge = { 0x0355 0xe6e4 0x9979 0xc7d7 0x2c86 0x7896 0x5db 0xcfe9 } } ] <
additional records in same formats> server socket closed.
...
additional resources nss is maintained in conjunction with pki and security-related projects through mozilla dn fedora.
Rhino serialization
it is also possible to
add names of objects to a list in the scriptableoutputstream object.
...use the
addexcludedname method of scriptableoutputstream to
add new names.
...if you are using rhino serialization in an environment where you always define, say, a constructor foo, you should
add the following code before calling writeobject: out.
addexcludedname("foo"); out.
addexcludedname("foo.prototype"); this code will prevent foo and foo.prototype from being serialized and will cause references to foo or foo.prototype to be resolved to the objects in the new scope upon deserialization.
JSAPI Cookbook
/* *
add this to your jscontext setup code.
...jsapi code can override this by creating the error object directly and passing
additional arguments to the constructor: // javascript throw new error(message, filename, lineno); /* jsapi */ bool throwerror(jscontext *cx, jsobject *global, const char *message, const char *filename, int32 lineno) { jsstring *messagestr; jsstring *filenamestr; js::value args[3]; js::value exc; messagestr = js_newstringcopyz(cx, message); if (!messagestr)...
...if (!js_getproperty(cx, string, "prototype", &val)) return false; if (jsval_is_primitive(val)) return throwerror(cx, global, "string.prototype is not an object", __file__, __line__); string_prototype = jsval_to_object(val); // ...and now we can
add some new functionality to all strings.
JS::CompileOptions
constructor js::readonlycompileoptions(); //
added in spidermonkey 31 js::owningcompileoptions(jscontext *cx); //
added in spidermonkey 31 js::compileoptions(jscontext *cx, jsversion version = jsversion_unknown); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... in
addition to above, the following are used in browser: "worker" - code loaded by calling the web worker constructor—the worker's main script.
...it does its own
addrefs/copies/tracing/etc.
JS::Handle
method description const t *
address() const returns a pointer to ptr.
... if you want to
add additional methods to js::handle for a specific specialization, define a js::handlebase<t> specialization containing them.
... there are typedefs available for the main types: namespace js { typedef handle<jsfunction*> handlefunction; typedef handle<jsid> handleid; typedef handle<jsobject*> handleobject; typedef handle<jsscript*> handlescript; typedef handle<jsstring*> handlestring; typedef handle<js::symbol*> handlesymbol; //
added in spidermonkey 38 typedef handle<value> handlevalue; } see also mxr id search for js::handle mxr id search for js::handlefunction mxr id search for js::handleid mxr id search for js::handleobject mxr id search for js::handlescript mxr id search for js::handlestring mxr id search for js::handlesymbol mxr id search for js::handlevalue js::rooted js::mutablehandle gc rooting guide bug 714647 bug 761391 -
added js::handlescript bug 645416 -
added js::h...
JS::MutableHandle
operator const t&() const t operator->() const t *
address() returns ptr.
... if you want to
add additional methods to js::mutablehandle for a specific specialization, define a js::mutablehandlebase<t> specialization containing them.
...r id search for js::mutablehandle mxr id search for js::mutablehandlefunction mxr id search for js::mutablehandleid mxr id search for js::mutablehandleobject mxr id search for js::mutablehandlescript mxr id search for js::mutablehandlestring mxr id search for js::mutablehandlesymbol mxr id search for js::mutablehandlevalue js::rooted js::handle gc rooting guide bug 770759 bug 761391 -
added js::mutablehandlescript bug 645416 -
added js::mutablehandlesymbol ...
JS::SetLargeAllocationFailureCallback
added in spidermonkey 38 callback syntax typedef void (* js::largeallocationfailurecallback)(void *data); name type description data void * data parameter passed to js::setlargeallocationfailurecallback.
...
added in spidermonkey 38 description if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure callback, if set, to allow the embedding to flush caches, possibly perform shrinking gcs, etc.
... see also mxr id search for js::setlargeallocationfailurecallback mxr id search for js::largeallocationfailurecallback bug 936236 bug 987995 -
added data parameter ...
JS::SetOutOfMemoryCallback
added in spidermonkey 38 callback syntax typedef void (* outofmemorycallback)(jscontext *cx, void *data); name type description data void * data parameter passed to js::setoutofmemorycallback.
...
added in spidermonkey 38 description unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called immediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed.
... see also mxr id search for js::setoutofmemorycallback mxr id search for js::outofmemorycallback bug 969415 bug 987995 -
added data parameter ...
JSClass.flags
mxr id search for jsclass_private_is_nsisupports jsclass_is_domjsclass
added in spidermonkey 17 objects are dom.
... mxr id search for jsclass_is_domjsclass jsclass_emulates_undefined
added in spidermonkey 24 causes objects which have this class to emulate undefined in certain circumstances.
... see also bug 527805 - removed jsclass_share_all_properties bug 571789 - removed jsclass_is_extended bug 638291 - removed jsclass_mark_is_trace bug 641025 -
added jsclass_implements_barriers bug 702507 - removed jsclass_construct_prototype bug 758913 - removed jsclass_new_resolve_gets_start bug 766447 -
added jsclass_is_domjsclass bug 792108 -
added jsclass_emulates_undefined bug 993026 - removed jsclass_new_resolve bug 1097267 - removed jsclass_new_enumerate ...
JSNative
full documentation of how to define a jsnative (or a jsfastnative, the equivalent typedef which preceded it) is available in the api header "js/callargs.h"
added in spidermonkey 24.
... the behavior of a jsnative is implemented using a js::callargs structure
added in spidermonkey 17.
... (this structure is now provided in "js/callargs.h"
added in spidermonkey 24 as well as through "jsapi.h".) this structure encapsulates access to the callee function, this, the function call's arguments, and the eventual return value.
JS_DefineFunction
s); jsfunction * js_defineucfunction(jscontext *cx, js::handle<jsobject*> obj, const char16_t *name, size_t namelen, jsnative call, unsigned nargs, unsigned attrs); jsfunction * js_definefunctionbyid(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsid> id, jsnative call, unsigned nargs, unsigned attrs); //
added in spidermonkey 17 name type description cx jscontext * the context in which to define the function.
...
added in spidermonkey 17 call jsnative the native c/c++ function to be wrapped by the new function.
...see also mxr id search for js_definefunction mxr id search for js_defineucfunction mxr id search for js_definefunctionbyid js_callfunctionname js_callfunctionvalue js_compilefunction js_definefunctions js_defineobject js_defineproperties js_defineproperty js_getfunctionobject js_newfunction bug 607695 -
added js_definefunctionbyid ...
JS_DefineFunctions
add native methods to an object.
...
added in spidermonkey 38 enum propertydefinitionbehavior { defineallproperties, onlydefinelateproperties, dontdefinelateproperties }; name description defineallproperties define all properties regardless of their flags.
... see also mxr id search for js_definefunctions js_callfunctionname js_defineobject js_defineproperties js_newfunction bug 959787 - make fs type to const bug 825199 -
added propertydefinitionbehavior ...
JS_GC
syntax void js_gc(jscontext *cx); //
added in spidermonkey 52 void js_gc(jsruntime *rt); // obsolete since jsapi 50 void js_gc(jscontext *cx); // obsolete since jsapi 14 name type description cx jscontext * the context to for which to perform garbage collection.
...
added in spidermonkey 52 rt jsruntime * the runtime to for which to perform garbage collection.
... use js_setgccallback to
add hooks that are called during garbage collection.
JS_GetInstancePrivate
syntax void * js_getinstanceprivate(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, js::callargs *args); //
added in jsapi 32 void * js_getinstanceprivate(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, jsval *argv); // obsolete since jsapi 32 name type description cx jscontext * a context.
...
added in spidermonkey 32 argv jsval * optional argument vector, used for error reporting.
...see also mxr id search for js_getinstanceprivate jsclass_has_private jsval_to_private js_getprivate js_initclass js_instanceof js_reporterror js_setprivate bug 959787 --
added args parameter ...
JS_GetSecurityCallbacks
syntax /*
added in spidermonkey 17 */ void js_setsecuritycallbacks(jsruntime *rt, const jssecuritycallbacks *callbacks); const jssecuritycallbacks * js_getsecuritycallbacks(jsruntime *rt); /* obsolete since jsapi 13 */ jssecuritycallbacks * js_setcontextsecuritycallbacks(jscontext *cx, jssecuritycallbacks *callbacks); jssecuritycallbacks * js_getruntimesecuritycallbacks(jsruntime *rt); jssecuritycallbacks * js_setruntimesecuritycallbacks(jsruntime *rt, jssecuritycallbacks *callbacks); name type description rt jsruntime * a runtime to get/set the security callbacks.
... callback structure struct jssecuritycallbacks { jscspevalchecker contentsecuritypolicyallows; //
added in spidermonkey 1.8.5 jssubsumesop subsumes; //
added in spidermonkey 31 jscheckaccessop checkobjectaccess; // obsolete since jsapi 29 jsprincipalstranscoder principalstranscoder; // obsolete since jsapi 13 jsobjectprincipalsfinder findobjectprincipals; // obsolete since jsapi 13 }; name type description contentsecuritypolicyallows jscspevalchecker a pointer to the function which checks if a csp instance wants to disable eval() and friends.
...if the callbacks are default value, it returns null see also mxr id search for js_getsecuritycallbacks mxr id search for js_setsecuritycallbacks jsprincipals jscspevalchecker jssubsumesop bug 957688 - removed checkobjectaccess bug 924905 -
added subsumes bug 728250 -
added -js_getsecuritycallbacks and js_setsecuritycallbacks, removed js_setcontextsecuritycallbacks, js_getruntimesecuritycallbacks, and js_setruntimesecuritycallbacks ...
JS_New
syntax jsobject * js_new(jscontext *cx, js::handleobject ctor, const js::handlevaluearray& args); //
added in jsapi 32 jsobject * js_new(jscontext *cx, jsobject *ctor, unsigned argc, jsval *argv); // obsolete since jsapi 32 name type description cx jscontext * the context in which to create the new object.
...
added in spidermonkey 38 argc unsigned the number of arguments to pass to the constructor.
... see also mxr id search for js_new bug 480850 -
added bug 959787 -
added args parameter ...
JS_NewFunction
syntax //
added in spidermonkey 45 jsfunction * js_newfunction(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, const char *name); // obsolete since jsapi 44 jsfunction * js_newfunctionbyid(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsid> id); // obsolete since jsapi 39 jsfunction * js_newfunction(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsobject*> parent, const char *name); jsfunction * js_newfunctionbyid(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsobject*> parent, js::handle<jsid> id); //
added in spidermonkey 17 name t...
...
added in spidermonkey 17 description js_newfunction creates a new javascript function implemented in c/c++.
... see also mxr id search for js_newfunction mxr id search for js_newfunctionbyid js_callfunction js_callfunctionname js_callfunctionvalue js_compilefunction js_compileucfunction js_definefunction js_definefunctions js_getfunctionname js_getfunctionobject bug 607695 -
added js_newfunctionbyid bug 1140573 - removed parent parameter bug 1054756 - removed js_newfunctionbyid ...
JS_NewGlobalObject
hookoption js::onnewglobalhookoption see debugger api hook
added in spidermonkey 31 options const js::compartmentoptions & the option for new compartment (passed to jscompartment constructor).
...
added in spidermonkey 31 description js_newglobalobject creates a new global object based on the specified class.
... if callers have no
additional state on the global to set up, they may pass fireonnewglobalhook to js_newglobalobject, which causes that function to fire the hook as its final act before returning.
JS_NewObject
syntax //
added in spidermonkey 45 jsobject * js_newobject(jscontext *cx, const jsclass *clasp); bool js_newobjectwithgivenproto(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto); // obsolete since spidermonkey 38 jsobject * js_newobject(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); jsobject * js_newobjectwithgivenproto(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); //
added in spidermonkey 1.8 name type description cx jscontext * the context in which to create the new object.
...
added in spidermonkey 1.8.1 clasp->flags must not have the jsclass_global_flags bits set (use js_newglobalobject instead).
...
added in spidermonkey 1.8 js_newobjectwithgivenproto creates a new object with the specified prototype.
JS_NewRuntime
added in spidermonkey 38 parentruntime jsruntime * the topmost parent or nullptr .
...
added in spidermonkey 31 description js_newruntime initializes the javascript runtime environment.
... see also mxr id search for js_newruntime js_init js_destroyruntime js_shutdown bug 714050 -
added usehelperthreads parameter bug 964059 -
added parentruntime parameter bug 941805 - removed usehelperthreads parameter bug 1034621 -
added maxnurserybytes parameter bug 1286795 - js_newruntime is renamed to js_newcontext ...
JS_PropertyStub
syntax bool js_propertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp, js::objectopresult &result); //
added in spidermonkey 45 bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // obsolete since jsapi 39 bool js_resolvestub(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // obsolete since jsapi 37 bool js_deletepropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool *succe...
...it can be used in jsclass.
addproperty, and jsclass.getproperty.
... see also mxr id search for js_propertystub mxr id search for js_strictpropertystub jspropertyop jsstrictpropertyop bug 1103152 - removed js_deletepropertystub, js_enumeratestub, js_resolvestub, and js_convertstub bug 736978 - removed js_finalizestub bug 1113369 --
added result parameter ...
JS_RemoveRootRT
rp void *
address of the pointer to no longer protect.
... this must have been passed to one of js_
addroot, js_
addnamedroot, or js_
addnamedrootrt earlier.
...see also mxr id search for js_removeroot jsval_is_gcthing js_
addroot js_
addnamedroot js_
addnamedrootrt js_dumpnamedroots, js_removeroot ...
JS_ReportErrorNumber
rrorflagsandnumberuc(jscontext *cx, unsigned flags, jserrorcallback errorcallback, void *userref, const unsigned errornumber, ...); void js_reporterrornumberucarray(jscontext *cx, jserrorcallback errorcallback, void *userref, const unsigned errornumber, const char16_t **args); //
added in spidermonkey 19 name type description cx jscontext * the context in which to report the error.
.../ const char16_t **
additional arguments for the error message.
... the number of
additional arguments required depends on the error message, which is determined by the errorcallback.
JS_SetGCZeal
description js_setgczeal sets the level of
additional garbage collection to perform for a runtime, for the purpose of finding or reproducing bugs.
... the default: no
additional collections are performed.
... 1 collect when roots are
added or removed.
Profiling SpiderMonkey
here's a sample mozconfig: mk_
add_options moz_objdir=@topsrcdir@/ff-opt-libxul mk_
add_options moz_make_flags=-j3 ac_
add_options --enable-optimize ac_
add_options --enable-libxul ac_
add_options --enable-shark ac_
add_options --enable-debugger-info-modules ac_
add_options --enable-application=browser 2.) you'll want to run shark on both the browser and [xpcshell], since the host environments differ.
...we're working to
add support for other profilers, such as oprofile, intel vtune, and callgrind.
... when we have js scriptable profiling options available for all tier 1 platforms, we'll look at
adding global start/stop profiling functions.
SpiderMonkey 45
wnpropertybyid (bug 1211607) js_hasownproperty (bug 1211607) js_deleteucproperty (bug 1211607) js::newfunctionfromspec (bug 1054756) js::compilefornonsyntacticscope (bug 1165486) js_checkforinterrupt (bug 1058695) js::mapdelete (bug 1159469) js::mapforeach (bug 1159469) js::newsetobject (bug 1159469) js::setsize (bug 1159469) js::sethas (bug 1159469) js::setdelete (bug 1159469) js::set
add (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) ...
...ng (bug 1181175) js::resetperformancemonitoring (bug 1181175) js::disposeperformancemonitoring (bug 1208747) js::setstopwatchismonitoringcpow (bug 1156264) js::getstopwatchismonitoringcpow (bug 1156264) js::setstopwatchismonitoringjank (bug 1156264) js::getstopwatchismonitoringjank (bug 1156264) js::isstopwatchactive (bug 674779) js::getperfmonitoringtestcpurescheduling (bug 1181175) js::
addcpowperformancedelta (bug 1181175) js::setstopwatchstartcallback (bug 1208747) js::setstopwatchcommitcallback (bug 1208747) js::setgetperformancegroupscallback (bug 1208747) js_stringhasbeeninterned renamed to js_stringhasbeenpinned (bug 1178581) js_internjsstring renamed to js_atomizeandpinjsstring (bug 1178581) js_internstringn renamed to js_atomizeandpinstringn (bug 1178581) js_internstr...
...deletepropertybyid2 js_deleteucproperty2 js_deleteelement2 js_newfunctionbyid js_bindcallable js_decompilefunctionbody js_getlatin1internedstringchars js_gettwobyteinternedstringchars js_newdateobjectmsec js_cleardatecaches changed apis js_init has moved from jsapi.h to js/initialization.h js_shutdown has moved from jsapi.h to js/initialization.h js_initreflect is now implicit js_
addweakpointercallback is replaced with js_
addweakpointerzonegroupcallback and js_
addweakpointercompartmentcallback js_removeweakpointercallback is replaced with js_removeweakpointerzonegroupcallback and js_removeweakpointercompartmentcallback api changes javascript shell changes detail
added/removed methods here...
Mozilla Projects
mccoy is an application that allows
add-on authors to provide secure updates to their users.
... applications periodically look for and install updates to their
add-ons.
... it's important that the update information retrieved has not been tampered with since being written by the
add-on author.
Secure Development Guidelines
r (eip) points to register being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call or jump instructions attacks usually rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return
addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always perform input validation could save you without knowing it examples: if it do...
... memory leaks example: void *p; size_t new_size; p = realloc(p, new_size); if (p == null) { /* handle error */ } memory leaks: prevention tools like valgrind can help detect memory leaks writing secure code: object management reference counting issues real-life example (bug 440230) void
addref() { ++mrefcnt; ns_log_
addref(this, mrefcnt, "nscssvalue::array", sizeof(*this)); } void release() { --mrefcnt; ns_log_release(this, mrefcnt, "nscssvalue::array"); if (mrefcnt == 0) delete this; } reference counting issues: prevention use the largest data type available on your platform for your reference counter use a hard limit constructor/destruc...
...sastring common read-only methods length() isempty() equals() common methods for modifying the string assign() append() insert() truncate() checking return values often causes problems return value not handled certain cases not handled or interpreted incorrectly double meaning malloc() can return a pointer or null, but null by itself is a valid
address checking return values int main() { int fds[2]; pipe(fds); write(fds[0], "data", 4); } the pipe() return value is not checked if pipe() fails, fds is not initialized write to un-initialized file descriptor checking return values check all return values—no matter how unlikely the api failure for example: close() can fail and leak file descriptor se...
Signing Mozilla apps for Mac OS X
the codesign tool apple provides a tool called codesign; this command-line application is used to
add a signature to an application bundle.
... --requirement 'designated requirement'
adds
additional requirements for verifying the signature and application metadata.
...the folder will fail to validate if any of these cases occur (there may be other cases not listed here): if any files that were included in the signature have been removed or modified if any files have been
added to a folder that should have all files signed the coderesources file this file is located in your application's bundle at contents/_codesignature/coderesources.
AT APIs Support
gecko is the core architecture that we are
adding accessibility to, in order to support basic accessibility in all applications that are based on it.
... k-meleon - light, ultra-fast and more advanced (fully configurable) gecko-based web browser available on the windows platform on linux/unix platform yelp help viewer - the help viewer in gnome evolution email - provides integrated mail,
addressbook and calendaring functionality to users of the gnome desktop.
...developing a xul window is not that different from developing a web page, but the elements available to
add widgets are more powerful and designed to be similar to desktop widgets.
Component Internals
as a component in the xpcom framework illustrates, in
addition to the nsgetmodule entry point, there are nsimodule and nsifactory interfaces that control the actual creation of the component, and also the string and xpcom glue parts, which we'll discuss in some detail in the next section (see xpcom glue).
...
additionally, it relates the components to the type libraries in which the binary representations of the interfaces they support are defined.
...sometimes, applications use the nsicomponentregistrar interface and create their own code for watching a particular directory and registering new components that are
added there, which is what's often referred to as autoregistration.
Creating XPCOM components
add-ons should try to use the new
add-on sdk as much as possible; however, there may be cases when it's unavoidable.
...mplementing weblock declaration macros representing return values in xpcom xpidl code generation getting the weblock service from a client implementing the iweblock interface the directory service modifying paths with nsifile manipulating files with nsifile using nsilocalfile for reading 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 overview 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...
XPCOM guide
these articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox
add-ons and the like.
...this document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript patterns that cause leaks.creating xpcom componentsthis guide is about gecko, and about creating xpcom components for gecko-based applications.how to build an xpcom component in javascriptif you are looking for
add-on sdk solution for xpcom javascript components then check out platform/xpcom module first.inheriting from implementation classesgiven that idl interfaces map to abstract classes in c++, a common problem when dealing with idl is when you have an idl inheritance hierarchy, and a corresponding c++ implementation hierarchy, you run into multiple inheritance.
...items are found,
added, and removed from the hashtable by using the key.
Language bindings
this is useful for privileged code, such as
add-on code, to access variables and apis defined in web content.components.utils.exportfunctionthis function provides a safe way to expose a function from a privileged scope to a less-privileged scope.components.utils.forcegccomponents.utils.forcegc lets scripts force a garbage collection cycle.
...this can be particularly handy with restartless (boostrapped) extensions, so that you can unload an old version of a code module when a new version of your
add-on is installed.components.utils.unwaivexraysundo a previous call to components.utils.waivexrays(), restoring xray vision for the caller.components.utils.waivexrayswaives xray vision for an object, giving the caller a transparent wrapper to the underlying object.javaxpcomjavaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can...
...you can find
additional information using the resource links below.xpconnectxpconnect is a bridge between javascript and xpcom.
nsAutoRefTraits
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.
...
addref(t*) is necessary for nscountedref<t> but not for nsautoref<t>.
... for example: ns_specialize_template class nsautoreftraits<prfiledesc> : public nspointerreftraits<prfiledesc> { public: static void release(prfiledesc *ptr) { pr_close(ptr); } }; or ns_specialize_template class nsautoreftraits<fcpattern> : public nspointerreftraits<fcpattern> { public: static void release(fcpattern *ptr) { fcpatterndestroy(ptr); } static void
addref(fcpattern *ptr) { fcpatternreference(ptr); } }; nsautoreftraits is described in xpcom/base/nsautoref.h.
nsAutoString
class declaration nstautostring_chart subclass of nststring_chart that
adds support for stack-based string allocation.
... the caller must not modify the characters at the returned
address.
... the caller may modify the characters at the returned
address (up to but not exceeding the length of the string).
nsCAutoString
class declaration nstautostring_chart subclass of nststring_chart that
adds support for stack-based string allocation.
... the caller must not modify the characters at the returned
address.
... the caller may modify the characters at the returned
address (up to but not exceeding the length of the string).
RefPtr
this is done using the functions
addref() and release(), which respectively modify a variable of type nsautorefcnt, which basically is a wrapper around a count of the number of references refering to the class.
... so for xpcom interfaces: nscomptr<nsisupports> a; nscomptr<nsifoo> foo; and for concrete classes: refptr<nsfoo> foo; // class that implements nsifoo; refptr<bar> bar; // some random class that i want ref-counted but has nothing to do with xpcom: // just implement
addref() and release() and it will work with refptr it is important that nscomptr is not used to hold a pointer to a concrete class since this can cause compile time errors or runtime errors.
...if the concrete class has its own xpcom iid (not true by default, but one can be
added), you can also qi from an xpcom pointer to a concrete type: bar = do_queryobject(foo); if (bar) { ...
IAccessible2
other-licenses/ia2/accessible2.idlnot scriptable please
add a summary to this article.
...the iaccessible2 states are in
addition to the msaa states and are defined in the ia2states enum.
...the at could cache the uniqueids in
addition to other data being cached.
IAccessibleText
method overview hresult
addselection([in] long startoffset, [in] long endoffset ); [propget] hresult attributes([in] long offset, [out] long startoffset, [out] long endoffset, [out] bstr textattributes ); [propget] hresult caretoffset([out] long offset ); [propget] hresult characterextents([in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); [pro...
...[out] long startoffset, [out] long endoffset, [out] bstr text ); [propget] hresult textatoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [propget] hresult textbeforeoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); methods
addselection()
adds a text() selection().
... hresult
addselection( [in] long startoffset, [in] long endoffset ); parameters startoffset starting offset ( 0 based).
IJSDebugger
method overview [implicit_jscontext] void
addclass(); methods
addclass() defines the global debugger constructor.
... on return, the debugger object has been
added to the global context.
... [implicit_jscontext] void
addclass(); parameters none.
inIDOMUtils
inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void
addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long l...
...
addpseudoclasslock() makes the element take on style properties that would apply if the element had the given pseudo-classes.
... void
addpseudoclasslock( in nsidomelement aelement, in domstring apseudoclass ); parameters aelement the element to set the pseudo-class lock on.
mozITXTToHTMLConv
netwerk/streamconv/public/mozitxttohtmlconv.idlscriptable please
add a summary to this article.
... kurls unsigned long enables automatic
addition of hyperlinks for urls in the text.
... scanhtml() scans the specified user-edited html,
adding
additional formatting that the user may not have known to do.
nsIAccessible
}; accessible/public/nsiaccessible.idlscriptable please
add a summary to this article.
...descriptions nsiaccessible.description and nsiaccessible.help provides
additional text information about accessible.
... setselected this method
adds or remove this accessible to the current selection.
nsIAccessibleSelectable
inherits from: nsisupports last changed in gecko 1.7 method overview void
addchildtoselection(in long index); void clearselection(); nsiarray getselectedchildren(); boolean ischildselected(in long index); nsiaccessible refselection(in long index); void removechildfromselection(in long index); boolean selectallselection(); attributes attribute type description selectioncount long the number of accessible children currently selected.
... constants constant value description eselection_
add 0 eselection_remove 1 eselection_getstate 2 methods
addchildtoselection()
adds the specified accessible child of the object to the object's selection.
...void
addchildtoselection( in long index ); parameters index the zero-based accessible child index.
nsIAccessibleText
accessible/public/nsiaccessibletext.idlscriptable please
add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void
addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coordtype); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffse...
... constant value description coord_type_screen 0 coord_type_window 1 methods
addselection() void
addselection( in long startoffset, in long endoffset ); parameters startoffset endoffset getattributerange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) get the accessible and start/end offsets around the given offset.
nsIAppShellService
nsixulwindow createtoplevelwindow( in nsixulwindow aparent, in nsiuri aurl, in boolean ashowwindow, in boolean alo
addefaultpage, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell ); parameters aparent the parent window.
... alo
addefaultpage obsolete since gecko 1.8 controls whether the window should try to load a default content page on its own.
...docshell.createaboutblankcontentviewer(systemprincipal); var contentwindow = docshell.contentviewer.domdocument.defaultview; // when you are done with it, destroy it if (webnav.close) { webnav.close() }; // only available in firefox 46+, and is needed for good measure webnav = null; // in firefox <= 45 setting to null will cause it to get gc'ed which will destroy it registertoplevelwindow()
add a window to the application's registry of windows.
nsIApplicationUpdateService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void
adddownloadlistener(in nsirequestobserver listener); astring downloadupdate(in nsiupdate update, in boolean background); void pausedownload(); void removedownloadlistener(in nsirequestobserver listener); nsiupdate selectupdate([array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); attributes attribute type description backgroundchecker nsiupdatechecker the ...
... methods
adddownloadlistener()
adds a listener that receives progress and state information about the update that is currently being downloaded.
...void
adddownloadlistener( in nsirequestobserver listener ); parameters listener an object implementing nsirequestobserver and optionally nsiprogresseventsink that will be notified of state and progress information as the update is downloaded.
nsIAutoCompleteInput
searchparam astring an
additional parameter used for configuring searches.
... showcommentcolumn boolean if true, a column is
added to the popup, showing the comment for each autocomplete result.
... showimagecolumn boolean if true, a column is
added to the popup, showing an
additional image for each autocomplete result.
nsIBinaryInputStream
ead32(); pruint64 read64(); unsigned long readarraybuffer(in pruint32 alength, in jsval aarraybuffer); prbool readboolean(); void readbytearray(in pruint32 alength, [array, size_is(alength), retval] out pruint8 abytes); void readbytes(in pruint32 alength, [size_is(alength), retval] out string astring); acstring readcstring(); double re
addouble(); float readfloat(); astring readstring(); void setinputstream(in nsiinputstream ainputstream); methods read8() reads from the stream.
... re
addouble() reads from the stream.
... double re
addouble(); parameters none.
nsICookiePermission
the nsicookiepermission interface is used to test for cookie permissions netwerk/cookie/nsicookiepermission.idlscriptable please
add a summary to this article.
...ie2 acookie, inout boolean aissession, inout print64 aexpiry); nsiuri getoriginatinguri(in nsichannel achannel); void setaccess(in nsiuri auri, in nscookieaccess aaccess); constants constant value description access_default 0 nscookieaccess's access default value access_allow 1 nscookieaccess's access allow value access_deny 2 nscookieaccess's access deny value access_session 8
additional values for nscookieaccess, which are not directly used by any methods on this interface, but are nevertheless convenient to define here.
...acookie the cookie being
added to the cookie database.
nsICycleCollectorListener
method overview void begin(); void begindescriptions(); void describegcedobject(in unsigned long long a
address, in boolean amarked); void describerefcountedobject(in unsigned long long a
address, in unsigned long aknownedges, in unsigned long atotaledges); void end(); void noteedge(in unsigned long long afrom
address, in unsigned long long ato
address, in string aedgename); void noteobject(in unsigned long long a
address, in string aobjectdescription); methods begin() void begin(); parameters ...
...describegcedobject() void describegcedobject( in unsigned long long a
address, in boolean amarked ); parameters a
address amarked describerefcountedobject() void describerefcountedobject( in unsigned long long a
address, in unsigned long aknownedges, in unsigned long atotaledges ); parameters a
address aknownedges atotaledges end() void end(); parameters none.
... noteedge() void noteedge( in unsigned long long afrom
address, in unsigned long long ato
address, in string aedgename ); parameters afrom
address ato
address aedgename noteobject() void noteobject( in unsigned long long a
address, in string aobjectdescription ); parameters a
address aobjectdescription ...
nsIDownloadHistory
docshell/base/nsidownloadhistory.idlscriptable this interface can be used to
add a download to history.
... 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.
...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.
nsIEventListenerInfo
content/events/public/nsieventlistenerservice.idlscriptable an instance of this interface describes how an event listener was
added to an event target; these are returned by nsieventlistenerservice.getlistenerinfofor, which provides a list of all the listeners to a given event target.
... type astring the type of the event for which the listener was
added.
...this approach is necessary because event listeners
added with
addeventlistener won't necessarily be nsieventlisteners; the dom code will fix up ordinary javascript functions to act as listeners.
nsIEventListenerService
ional] out unsigned long acount, [retval, array, size_is(acount)] out nsidomeventtarget aoutarray); void getlistenerinfofor(in nsidomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsieventlistenerinfo aoutarray); boolean haslistenersfor(in nsidomeventtarget aeventtarget, in domstring atype); void
addsystemeventlistener(in nsidomeventtarget target, in domstring type, in nsidomeventlistener listener, in boolean usecapture); void removesystemeventlistener(in nsidomeventtarget target, in domstring type, in nsidomeventlistener listener, in boolean usecapture); attributes attribute type description systemeventgroup nsidomev...
...
addsystemeventlistener()
add a system-group eventlistener to a event target.
...void
addsystemeventlistener( in nsidomeventtarget target, in domstring type, in nsidomeventlistener listener, in boolean usecapture ); parameters target the nsidomeventtarget for the event target to listen an event.
nsIFormHistory2
method overview void
addentry(in astring name, in astring value); boolean entryexists(in astring name, in astring value); boolean nameexists(in astring name); void removeallentries(); void removeentriesbytimeframe(in long long abegintime, in long long aendtime); void removeentriesforname(in astring name); void removeentry(in astring name, in astring value); attributes attribute type description dbcon...
... methods
addentry()
adds a name and value pair to the form history.
... void
addentry( in astring name, in astring value ); parameters name value entryexists() gets whether a name and value pair exists in the form history.
nsIFrameMessageManager
method overview void
addmessagelistener(in astring amessage, in nsiframemessagelistener alistener, [optional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in nsiframemessagelistener alistener); void sendasyncmessage(in astring amessage, in astring json); methods
addmessagelistener()
adds a message listener to the local frame.
... void
addmessagelistener( in astring amessage, in nsiframemessagelistener alistener [optional in boolean listenwhenclosed ); parameters amessage the name of the message for which to
add a listener.
... removemessagelistener() removes a message listener previously
added by calling
addmessagelistener().
nsIGlobalHistory
66 introduced gecko 1.0 deprecated gecko 2.0 obsolete gecko 15.0 inherits from: nsisupports last changed in gecko 1.7 method overview void
addpage(in string aurl); boolean isvisited(in string aurl); methods
addpage()
add a page to the history.
... void
addpage( in string aurl ); parameters aurl the url to the page.
... return value true if a page has been passed into
addpage().
nsIGlobalHistory2
inherits from: nsisupports last changed in gecko 1.7 this interface replaces and deprecates nsiglobalhistory method overview void
adduri(in nsiuri auri, in boolean aredirect, in boolean atoplevel, in nsiuri areferrer); boolean isvisited(in nsiuri auri); void setpagetitle(in nsiuri auri, in astring atitle); methods
adduri()
add a uri to global history.
...void
adduri( in nsiuri auri, in boolean aredirect, in boolean atoplevel, in nsiuri areferrer ); parameters auri the nsiuri of the page being
added.
...uris that are not already in global history will not be
added.
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void
addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, ...
... void modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); void removealllogins(); void removelogin(in nsilogininfo alogin); void searchlogins(out unsigned long count, in nsipropertybag matchdata, [retval, array, size_is(count)] out nsilogininfo logins); void setloginsavingenabled(in astring ahost, in boolean isenabled); methods
addlogin() stores a new login in the login manager.
... void
addlogin( in nsilogininfo alogin ); parameters alogin the login to store.
nsILoginManagerStorage
method overview void
addlogin(in nsilogininfo alogin); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstr...
... methods
addlogin() called by the login manager to store a new login.
... void
addlogin( in nsilogininfo alogin ); parameters alogin the login to
add to the login storage.
nsIMemoryMultiReporter
this is important; multi-reporters can special-case this operation so it's much faster than gathering all the reports, filtering out the unneeded ones, and
adding up the rest.
... closure an object containing any
additional data your callback might need; this gets passed to the callback.
... you can specify null if your callback doesn't require any
additional data.
nsIMicrosummarySet
1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void
addobserver(in nsimicrosummaryobserver observer); nsisimpleenumerator enumerate(); void removeobserver(in nsimicrosummaryobserver observer); methods
addobserver()
add a microsummary observer to this microsummary set.
...
adding an observer to a set is the equivalent of
adding it to each constituent microsummary.
... void
addobserver( in nsimicrosummaryobserver observer ); parameters observer the microsummary observer to
add.
nsIMsgAccount
inherits from: nsisupports last changed in gecko 1.7 method overview void
addidentity(in nsimsgidentity identity); void clearallvalues(); void init(); void removeidentity(in nsimsgidentity identity); astring tostring(); attributes attribute type description defaultidentity nsimsgidentity identities nsisupportsarray read only.
... outgoing identity list (array of nsimsgidentity's) incomingserver nsimsgincomingserver incoming server stuff key acstring internal key identifying itself methods
addidentity()
adds a new identity to this account.
... void
addidentity( in nsimsgidentity identity ); parameters identity the identity to
add.
nsIMsgIdentity
john doe email astring user's e-mail
address, i.e.
... john@doe.com replyto astring optional replyto
address, i.e.
... astring dobcc boolean dobcclist astring draftfolder astring stationeryfolder astring showsavemsgdlg boolean directoryserver astring overrideglobalpref boolean autocompletetomydomain boolean if this is false, don't append the user's domain to an autocomplete
address with no matches.
nsIMsgIncomingServer
add brief description of interface ???
...if we have set up to filter return receipts into our sent folder, this utility method creates a filter to do that, and
adds it to our filterlist if it doesn't exist.
...( in nsimsgfilterlist filterlist ); parameters filterlist missing description exceptions thrown missing exception missing description configuretemporaryreturnreceiptsfilter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) if we have set up to filter return receipts into our sent folder, this utility method creates a filter to do that, and
adds it to our filterlist if it doesn't exist.
nsIMsgSendLater
to create an instance, use var msgsendlater = components.classes["@mozilla.org/messengercompose/sendlater;1"] .getservice(components.interfaces.nsimsgsendlater); method overview void sendunsentmessages(in nsimsgidentity identity); void removelistener(in nsimsgsendlaterlistener listener); void
addlistener(in nsimsgsendlaterlistener listener); nsimsgfolder getunsentmessagesfolder](in nsimsgidentity identity); attributes attribute type description msgwindow nsimsgwindow methods sendunsentmessages() sends all unsent messages for an identity.
...
addlistener()
add an event listener to this nsisendmsglater instance.
... void
addlistener(in nsimsgsendlaterlistener listener); parameters listener the nsimsgsendlaterlistener to
add.
nsIMsgThread
inherits from: nsisupports method overview void
addchild(in nsimsgdbhdr child, in nsimsgdbhdr inreplyto, in boolean threadinthread, in nsidbchangeannouncer announcer); nsimsgdbhdr getchildat(in long index); nsmsgkey getchildkeyat(in long index); nsimsgdbhdr getchild(in nsmsgkey msgkey); nsimsgdbhdr getchildhdrat(in long index); nsimsgdbhdr getroothdr(out long index); void removechildat(in long index); void removechildhdr(in nsimsgdbhdr child, in nsidbchangeannouncer announcer); void markchildread(in boolean bread); nsimsgdbhdr getfirstunreadchild(); nsisimpleenumerator enumeratemessages(in nsmsgkey parent); ...
... methods
addchild()
add a message to the thread.
... void
addchild(in nsimsgdbhdr child, in nsimsgdbhdr inreplyto, in boolean threadinthread, in nsidbchangeannouncer announcer); parameters child the message to
add inreplyto the message this should be in reply to threadinthread announcer an nsidbchangeannouncer to receive notification when the change is made.
nsIXPConnect
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to access the xpconnect service, use code like this: nsresult rv; nscomptr<nsixpconnect> xpconnect = do_getservice(nsixpconnect::getcid(), &rv); if (ns_succeeded(rv)) { /* use the object */ } method overview void
addjsholder(in voidptr aholder, in nsscriptobjecttracerptr atracer); native code only!
... obsolete since gecko 2.0 methods native code only!
addjsholder root js objects held by aholder.
... void
addjsholder( in voidptr aholder, in nsscriptobjecttracerptr atracer ); parameters aholder the object that hold the js objects that should be rooted.
XPCOM reference
in
addition, it details the various helper classes and functions, as well as the components, provided by the xpcom glue library.
...rss feeds are implemented by nslocalmailfolder.ns ensure successmacrons ensure truemacrons_abort_if_falsethis was removed in bug 1127201ns_
addrefmacrons_assertionmacrons_ensure_arg_pointermacrons_errorthrows a assertion (ns_assertion) with the text "error: (error text)", so writes this text to console (stderr) and to debug logs (nspr logging).
... this macro is meant for critical errors; like assertions, ns_errors should not be reachable.ns_if_
addrefmacrons_if_releasemacrons_releasemacrons_warningmacronsgetmoduleprocthis function prototype provides the xpcom entry-point into a module.nsiabcard/thunderbird3the nsiabcard interface is used to represent and manipulate cards in the
address book.
Frequently Asked Questions
call a getter that doesn't
addref its result?
... any xpcom function that returns an interface pointer, i.e., a `getter', must have already
addrefed that pointer.
...no matter which code pattern you use to solve this problem, you should comment it, e.g., // warning: this getter doesn't
addref() its result.
Using nsIDirectoryService
components can
add and remove locations at their will.
...c++ nscomptr<nsifile> dir; ns_getspecialdirectory(prop, getter_
addrefs(dir)); if (!dir) return ns_error_failure; javascript: var file = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); (the example is taken from the code snippets section of this site.)
adding a location: there are currently two ways to
add a file location to the directory service: directly and delayed.
... you can directly
add a new nsifile with any property string using the nsiproperties interface: components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .set("myfilename", file); now, if your cost is too high to set all of these properties at once, you can register to be a callback that can provide an nsifile.
Buddy icons in mail
seth spitzer mozilla is now able to show icons in the message header area and the
addressbook card pane.
... for the message pane, the icon we will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for sender email
address>.gif when trying to determine the screenname for the sender, we search the
addressbook that we are using for collection.
... (see this document for info about that.) for the
addressbook card pane, the icon will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for card>.gif if aim.session.screenname is not set, the icon will not appear.
Building a Thunderbird extension 3: install manifest
while this value is in email
address format, it is not an email
address.
... <em:name>my first extension</em:name>: the extension name is displayed in the thunderbird
add-on manager.
... <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>: this element contains the version id of the application that this
add on is developed for.
Filter Incoming Mail
by example, to modify the mail subject : var newmaillistener = { msg
added: function(amsghdr) { if( !amsghdr.isread ) { // here we are, a new mail has popped // let get a javascript string object from the subject property // querying mime conversion interface var mimeconvert = components.classes["@mozilla.org/messenger/mimeconverter;1"] .getservice(components.interfaces.nsimimeconverter); var subject = mimeconvert.decodemimeheader(amsghdr.subject, null, false, true); // here with have a string to modify with javascript.
...ding the string // and assign it to the message headers and we're done amsghdr.subject = mimeconvert.encodemimepartiistr_utf8(subject, false, "utf-8", 0, 72); } } }; function init() { var notificationservice = components.classes["@mozilla.org/messenger/msgnotificationservice;1"] .getservice(components.interfaces.nsimsgfoldernotificationservice); notificationservice.
addlistener(newmaillistener, notificationservice.msg
added); }
addeventlistener("load", init, true); have a look to nsimsgdbhdr to get the full list of properties to be modified.
... you can take a look at a working code in the capskiller
add-on repository.
Tips and Tricks from the newsgroups
the following discussions on mozilla.dev.apps.thunderbird and mozilla.dev.extensions include useful tips for thunderbird
add-on developers.
... please feel free to
add links to threads.
... we will
add a categorization system as the link list grows.
Using the Mozilla symbol server
you cannot visit this url directly: you must
add it to the symbol path of your debugging tool.
...to use only the mozilla symbol server,
add the following entry to your symbol path (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command.
... the source server in
addition to symbols, mozilla also has a source server, letting you do source-level debugging and inspection on demand.
Using Objective-C from js-ctypes
types and functions in
addition to the above code, we need to declare function and types.
...if this code were to be used in a production
add-on, then to avoid firefox locking up, run this code from a chromeworker.
...bridge/core.js#l370-l394 var bl = block_literal_1(); // set the class of the instance bl.isa = _nsconcreteglobalblock; // global flags bl.flags = block_const.block_has_stret; bl.reserved = 0; bl.invoke = afunctypeptr; // create descriptor var desc = block_descriptor_1(); desc.reserved = 0; desc.size = block_literal_1.size; // set descriptor into block literal bl.descriptor = desc.
address(); return bl; } an example of this function in use can be seen here: _ff-
addon-snippet-objc_monitorevents - shows how to monitor and block mouse and key events on mac os x ...
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 ...
Declaring types
for example, to define a new 32-bit integer variable with the value 5: var i = ctypes.int32_t(5); you can then pass a pointer to this value to a c function that requires a pointer to a 32-bit integer, like this: some_c_function(i.
address()); declaring new primitive types there are times when you want to create new types that are simply new names for existing primitive types.
... var timestr = asctime(thetime.
address()); // pass a pointer to the tm struct var jsstring = timestr.readstring(); // convert the c string to javascript the last line converts the c string returned by the libc asctime() function into a javascript string by calling the cdata readstring() method.
... declaring an array type with a specific length declaring an array type that specifies the array length is as simple as
adding a length when calling ctypes.arraytype(), like this: const filearray = new ctypes.arraytype(file, 20); this declares filearray as an array type that can hold 20 elements.
ArrayType
in
addition, each element in the array can be referenced by index using standard bracket notation, such as myarray[index].
... 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.
... cdata
addressofelement( idx ); parameters idx a numeric value indicating the offset into the array of the element just to return a pointer.
Drawing and Event Handling - Plugins
e } npwindowtype; typedef struct _npwindow { void* window; /* platform-specific handle */ uint32 x; /* position of top-left corner */ uint32 y; /* relative to a netscape page */ uint32 width; /* maximum window size */ uint32 height; nprect cliprect; /* clipping rectangle in port coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent
additional data */ #endif /* xp_unix */ npwindowtype type; /* whether this is a window or a drawable */ } npwindow; the window parameter is a platform-specific handle to a native window element in the browser window hierarchy on windows and unix.
...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.
...
additionally, the browser creates an npsetwindowcallbackstruct object and passes it in the ws_info field of npwindow.
Scripting plugins - Plugins
mozilla does this by calling the old plugin api call npp_getvalue with the new enumeration value that has been
added to the nppvariable enumeration.
... in
addition to this, a further extension to this api is being discussed that would give a plugin greater flexibility by letting the plugin control the origin of the calling code, so that the plugin can specify the origin of calls that come from internally loaded code from other origins.
...the extensions are two
additions to the npnvariables enumeration; the new enumerations are npnvwindownpobject and npnvpluginelementnpobject.
DOM Inspector internals - Firefox Developer Tools
inspector.xul itself is only a skeleton describing the basic structure and layout of the primary dom inspector window, leaving most of its contents to be
added by the overlays.
...
additionally, it defines the content in the main body of the dom inspector window, namely, the panelset, document and object viewer panels, and the document browser pane.
...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).
DOM Inspector - Firefox Developer Tools
this tool is an
add-on for xul-based applications such as firefox and thunderbird.
...(thunderbird users browsing amo in firefox should save the installation link, or visit the dom inspector for thunderbird page.) thunderbird 2 dom inspector for thunderbird 2 is available from thunderbird
add-ons.
... or, build thunderbird yourself with the following options: ac_
add_options --enable-extensions="default inspector" ac_
add_options --enable-inspector-apis mozilla suite and seamonkey select tools > web development > dom inspector.
Set a logpoint - Firefox Developer Tools
to create a logpoint: right click on a line number in the debugger panel and pick
add log action from the context menu.
...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.
Set event listener breakpoints - Firefox Developer Tools
in
addition, you get a box overlaid on the viewport saying "paused on event breakpoint", with buttons to step over that line of code or resume execution.
... you could
add regular breakpoints at the entry point of the listener to achieve the same effect.
... now the logs will show where in your app jquery was called, rather than where in jquery the event was fired: filter by event type also
added to firefox 71 is a new filter by event type...
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.
... dbg.
adddebuggee(w.wrappedjsobject); // enable allocation tracking in dbg's debuggees.
...the event handler should
add some text to the end of the page.
Deprecated tools - Firefox Developer Tools
over the course of devtools development, we have
added several experimental panels to try out new ideas.
... you may see a warning message, as in the following image, when trying to activate a deprecated panel: in
addition, if you open the panel for one of these tools, you will also see a warning message about its removal.
...the editor mode can be triggered clicking on the icon on the right of the console input, or with ctrl + b (cmd + b on macos) when in editor mode, the enter key
adds a new line in the input, and you can evaluate the expression using ctrl + enter (cmd + enter on macos).
Network request details - Firefox Developer Tools
the domain is
added to the blocking sidebar.
... request information the following information is shown only when the section is expanded: scheme: the scheme used in the url host: the server involved in the request filename: the full path to the file requested
address: the ip
address of the host the following information is shown in both the collapsed and the expanded states: status: the http response code for the request.
...(there may be some exceptions, such as x-firefox-spdy, which is
added by firefox.) you can copy some or all of the response header in json format by using the context menu: if you select copy, a single key word, value pair is copied.
Responsive Design Mode - Firefox Developer Tools
for example, many pages check for touch support on load and only
add event handlers if it is supported, or only enable certain features on certain browsers.
...select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch event simulation
additionally, firefox sets the user-agent http request header to identify itself as the default browser on the selected device.
... creating custom devices you can create and save custom devices in responsive design mode by clicking the
add custom device button.
Settings - Firefox Developer Tools
show split console
adds a section at the bottom of the tools showing the console.
... if common preferences is not included in the settings, web console logs can be persisted by using the 'about:config' url in browser
address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true inspector show browser styles a setting to control whether styles applied by the browser (user-agent styles) should be displayed in the inspector's rules view.
... enable browser chrome and
add-on debugging toolboxes enable you to use developer tools in the context of the browser itself, and not only web content.
Firefox Developer Tools
about:debugging debug
add-ons, content tabs, and workers running in the browser.
...this is useful for browser and
add-on development.
... browser console see messages logged by the browser itself and by
add-ons, and run javascript code in the browser's scope.
AudioParamDescriptor - Web APIs
here,
additionally, we'll create a custom gain parameter, so we can directly change volume of the output (although you could use gainnode to achieve this as well).
... we expand the processor by
adding a static parameterdescriptors getter.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.
addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime ...
AudioProcessingEvent - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it,
adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and
add a small amount of white noise, before setting that result to be the output sample in each case.
...(var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(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(scrip...
AudioWorkletNode.parameters - Web APIs
here,
additionally, we'll create a custom gain parameter, so we can directly change volume of the output (although you could use gainnode to achieve this as well).
... we expand the processor by
adding a static parameterdescriptors getter.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.
addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime ...
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
here,
additionally, we'll create a custom gain parameter, so we can directly change volume of the output (although you could use gainnode to achieve this as well).
... we expand the processor by
adding a static parameterdescriptors getter.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.
addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime ...
BaseAudioContext.createScriptProcessor() - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it,
adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and
add a small amount of white noise, before setting that result to be the output sample in each case.
...(var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(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(scrip...
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,mona...
...><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.
addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.
addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
... window.
addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification.
BiquadFilterNode() - Web APIs
lowshelf: the lowshelf filter allows all frequencies through, but
adds a boost (or attenuation) to the lower frequencies.
... highshelf: the highshelf filter is the opposite of the lowshelf filter and allows all frequencies through, but
adds a boost to the higher frequencies.
... peaking: the peaking filter allows all frequencies through,
adding a boost, or attenuation, to a range of frequencies.
BroadcastChannel: message event - Web APIs
sender <h1>sender</h1> <label for="message">type a message to broadcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">hello</textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; p
adding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { p
adding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); cons...
...t broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.
addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; p
adding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.
addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; p
adding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sa...
...ns-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.
addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...
CSSPseudoElement - Web APIs
methods csspseudoelement extends eventtarget, so it inherits the following methods: eventtarget.
addeventlistener() registers an event handler of a specific event type on the pseudo-element.
... examples basic example using element.pseudo using pseudo-elements, most modern browsers will automatically
add quotation marks around text inside a <q> element.
... (a style rule may be needed to
add quotation marks in older browsers.) the example below demonstrates the basic properties of the csspseudoelement object representing the opening quotation mark.
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; p
adding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></scr...
... var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.
addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements.
... then
addeventlistener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video.
Basic animations - Web APIs
text ctx = document.getelementbyid('canvas').getcontext('2d'); // set refresh rate return setinterval(draw, speed); } function draw() { ctx.clearrect(0, 0, clearx, cleary); // clear the canvas // if image is <= canvas size if (imgw <= canvasxsize) { // reset, start from beginning if (x > canvasxsize) { x = -imgw + x; } // draw
additional image1 if (x > 0) { ctx.drawimage(img, -imgw + x, y, imgw, imgh); } // draw
additional image2 if (x - imgw > 0) { ctx.drawimage(img, -imgw * 2 + x, y, imgw, imgh); } } // image is > canvas size else { // reset, start from beginning if (x > (canvasxsize)) { x = canvasxsize - imgw; ...
... c.fillstyle = "rgba(0,0,0,0.05)"; c.fillrect(0, 0, cn.width, cn.height); a.foreach(function(e, i) { e.dr(); }); } </script> <style> #cw { position: fixed; z-index: -1; } body { margin: 0; p
adding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" conten...
...(n.
addcolorstop(0, "black"), n.
addcolorstop(1, "#8bc34a")) : (n.
addcolorstop(0, "#8bc34a"), n.
addcolorstop(1, "white")), c.fillstyle = n } else c.fillstyle = "#8bc34a"; c.fillrect(t.x, t.y, this.w, this.h), c.strokestyle = "#e91e63", c.font = "30px serif", c.strokestyle = "#9e9e9e", i.length - 1 != e && 0 != e && c.strokerect(t.x, t.y, this.w, this.h), 0 == e && (c.beginp...
Compositing and clipping - Web APIs
in
addition, the clip property allows us to hide unwanted parts of shapes.
...the most important differences between the two are that clipping paths are never actually drawn to the canvas and the clipping path is never affected by
adding new shapes.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.
addcolorstop(0, '#232256'); lingrad.
addcolorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random() * 150)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.rest...
Pixel manipulation with canvas - Web APIs
img.style.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.
addeventlistener('mousemove', pick); painting pixel data into a context you can use the putimagedata() method to paint pixel data into a context: ctx.putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
... ctx.putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.
addeventlistener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.
addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
...none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.
addeventlistener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); }; canvas.a...
ConstrainDouble - Web APIs
additionally, you can specify the property's value as a simple floating-point value, in which case the user agent does its best to match the value once all other more stringent constraints are met.
... properties if the value of a constraindouble is an object rather than a number, it may have the properties below in
addition the properties it inherits from doublerange.
... candidate recommendation initial definition technically, constraindouble is actually based on an intermediary dictionary named constraindoublerange, which
adds exact and ideal to doublerange, with constraindouble being a type that can be either a long integer or a doublerange.
ConstrainULong - Web APIs
in
addition, you can specify the value as a simple long integer value, in which case the user agent does its best to match the value once all other more stringent constraints are met.
... properties if the value of a constrainulong is an object rather than a number, it may have the properties below in
addition to the properties it inherits from ulongrange.
... candidate recommendation initial definition technically, constrainulong is actually based on an intermediary dictionary named constrainulongrange, which
adds exact and ideal to ulongrange, with constrainulong being a type that can be either a long integer or a ulongrange.
DOMImplementation - Web APIs
added the createhtmldocument() method.
... obsolete
added the getfeature() method (never implemented by any user agent).
... obsolete
added the createdocument() and createdocumenttype() methods.
DOMTokenList.replace() - Web APIs
if the first token doesn't exist, replace() returns false immediately, without
adding the new token to the token list.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.replace("c", "z"); console.log(result); if (result) { span.textcontent = classes; } else { span.textcontent = 'token not replaced successfully'; } the output looks like this: polyfill the following polyfill will
add the replace method to the domtokenlist class.
...to use with earlier versions of ie, refer to the polyfill at element.classlist#polyfill domtokenlist.prototype.replace = function (a, b) { if (this.contains(a)) { this.
add(b); this.remove(a); return true; } return false; } specifications specification status comment domthe definition of 'replace()' in that specification.
DataTransferItemList.DataTransferItem() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its tree var datalist = ev.datatransfer.items; datalist.
add(ev.target.id, "text/plain"); //
add some other items to the drag payload datalist.
add("<p>...
... paragraph ...</p>", "text/html"); datalist.
add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... 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; p
adding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in that specification.
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; p
adding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its tree var datalist = ev.datatransfer.items; datalist.
add(ev.target.id, "text/plain"); // a...
...dd some other items to the drag payload datalist.
add("<p>...
... paragraph ...</p>", "text/html"); datalist.
add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
DataTransferItemList.length - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its tree var datalist = ev.datatransfer.items; datalist.
add(ev.target.id, "text/plain"); //
add some other items to the drag payload datalist.
add("<p>...
... paragraph ...</p>", "text/html"); datalist.
add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... 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; p
adding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specification.
DataTransferItemList.remove() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its tree var datalist = ev.datatransfer.items; datalist.
add(ev.target.id, "text/plain"); //
add some other items to the drag payload datalist.
add("<p>...
... paragraph ...</p>", "text/html"); datalist.
add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... 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; p
adding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification status comment html living standardthe definition of 'remove()' in that specification.
Document.createTextNode() - Web APIs
example <!doctype html> <html lang="en"> <head> <title>createtextnode example</title> <script> function
addtextnode(text) { var newtext = document.createtextnode(text), p1 = document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button onclick="
addtextnode('yes!
... ');">yes!</button> <button onclick="
addtextnode('no!
... ');">no!</button> <button onclick="
addtextnode('we can!
Document: drag event - Web APIs
raggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; p
adding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.
addeventlistener("drag", function(event) { }, false); document.
addeventlistener("dragstart", function(event) { // store a ref.
... on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.
addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.
addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.
addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.
addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it ...
... if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.
addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.
addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key.
...
addeventlistener keyup example <p>focus the iframe first (e.g.
... by clicking in it), then try pressing some keys.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.
addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent document.onkeyup = logkey; specifications specification status ui events working draft ...
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... living standard
added the constructor and the implementation of parentnode.
... obsolete
added the queryselector() and queryselectorall() methods.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
... living standard
added implemention of the childnode interface.
... obsolete
added the publicid, systemid, and internalsubset properties.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
"tr"); for (var j = 0; j < 2; j++) { // create a <td> element and a text node, make the text // node the contents of the <td>, and put the <td> at // the end of the table row var cell = document.createelement("td"); var celltext = document.createtextnode("cell in row "+i+", column "+j); cell.appendchild(celltext); row.appendchild(cell); } //
add the row to the end of the table body tblbody.appendchild(row); } // put the <tbody> in the <table> tbl.appendchild(tblbody); // appends <table> into <body> body.appendchild(tbl); // sets the border attribute of tbl to 2; tbl.setattribute("border", "2"); } note the order in which we created the elements and the text node: first we created the <table> element.
...for example, if you want to set the style background color property, you just
add: myp.style.background = "rgb(255,0,0)"; // setting inline style attribute creating textnodes with document.createtextnode("..") use the document object to invoke the createtextnode method and create your text node.
...another important note is that the appendchild method will append the child after the last child, just like the word world has been
added after the word hello.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
the browser engine has essentially ignored all of the whitespace that was
added in the source code.
... consider this example (again, the whitespace characters in the html are marked so they are visible): .people-list { list-style-type: none; margin: 0; p
adding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } <ul class="people-list">⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ </ul> this renders as follows: hidden example 3 .people-list { list-style-type: none; margin: 0; p
adding: 0; } .people-list li { display: i...
...this handles everything for you, and is definitely the preferred solution: ul { list-style-type: none; margin: 0; p
adding: 0; display: flex; } if you need to rely on inline-block, you could set the font-size of the list to 0.
EffectTiming.fill - Web APIs
</div> css content .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; p
adding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters f...
... document.getelementbyid("animatebutton").
addeventlistener("click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it
adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxrotationtiming objects to describ...
... elem.
addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.
Element.clientLeft - Web APIs
clientleft does not include the left margin or the left p
adding.
... syntax var left = element.clientleft; example p
adding-top lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... p
adding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status comment css object model (cssom) view modulethe definition of 'clientleft' in that specification.
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.
addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <tex...
...tarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { p
adding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; p
adding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.
addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.
...textcontent + `${event.type}: ${event.data}\n`; } inputelement.
addeventlistener('compositionstart', handleevent); inputelement.
addeventlistener('compositionupdate', handleevent); inputelement.
addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.
addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <t...
...extarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { p
adding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; p
adding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.
addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = lo...
...g.textcontent + `${event.type}: ${event.data}\n`; } inputelement.
addeventlistener('compositionstart', handleevent); inputelement.
addeventlistener('compositionupdate', handleevent); inputelement.
addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.
addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <...
...textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { p
adding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; p
adding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.
addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = l...
...og.textcontent + `${event.type}: ${event.data}\n`; } inputelement.
addeventlistener('compositionstart', handleevent); inputelement.
addeventlistener('compositionupdate', handleevent); inputelement.
addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element.computedStyleMap() - Web APIs
examples we start with some simple html: a paragraph with a link, and a definition list to which we will
add all the css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we
add a little bit of css a { --colour: red; color: var(--colour); } we
add javascript to grab our link and return back a definition list of all the css property values using computedstylemap().
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values,
adding a <dt> and <dd> for each for (const [prop, val] of allcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } in browsers that support computedstylemap(), you'll see a list of all the ...
Element: fullscreenchange event - Web APIs
examples in this example, a handler for the fullscreenchange event is
added to the element whose id is fullscreen-div.
... html <h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').
addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
... if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').
addeventlistener('click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object.
Element: mouseenter event - Web APIs
it then
adds an item to the list with the number of the mouseenter or mouseleave event.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.
addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++;
addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.
addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++;
addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function
addlistitem(text) { ...
... // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); //
add the text node to the li element newlistitem.appendchild(newtextnode); //
add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.
Element: mouseleave event - Web APIs
it then
adds an item to the list with the number of the mouseenter or mouseleave event.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.
addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++;
addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.
addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++;
addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function
addlistitem(text) { ...
... // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); //
add the text node to the li element newlistitem.appendchild(newtextnode); //
add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
Element: mouseout event - Web APIs
the mouseleave event is
added to the <ul> to color the list purple whenever the mouse exits the <ul>.
... mouseout is
added to the list to color the targeted element orange when the mouse exits it.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.
addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.
addeventlistener("mouseout", function( event ) { // highlight the mouseout targe...
Element.toggleAttribute() - Web APIs
the toggleattribute() method of the element interface toggles a boolean attribute (removing it if it is present and
adding it if it is not present) on the given element.
... force optional a boolean value to determine whether the attribute should be
added or removed, no matter whether the attribute is present or not at the moment.
... html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var input = document.queryselector("input"); button.
addeventlistener("click", function(){ input.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute ...
Event.eventPhase - Web APIs
event listeners registered for capture mode when eventtarget.
addeventlistener() was called are triggered during this phase.
...hain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; p
adding: 4px; border: thin black solid; } #divinfo { margin: 18px; p
adding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') c...
...hcapture.onclick = function () { removelisteners()
addlisteners() } clear()
addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function
addlisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { if (chcapture.checked) { d.
addeventlistener("click", ondivclick, true) } else { d.
addeventlistener("click", ondivclick, false) d.onmousemove = function () { clear = true } } } } } function ondivclick(e) { if (clear) { clear() clear = false } if ...
Event.preventDefault() - Web APIs
this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").
addeventlistener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
... html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; p
adding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
... first, listen for keypress events: var mytextbox = document.getelementbyid('my-textbox'); mytextbox.
addeventlistener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarning( "please use lowercase letters only." + "\n" + "charcode: " + charcode + "\n" ); } } } the displaywarning() function presents a notification of a problem.
Event - Web APIs
event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtarget.
addeventlistener(), and this generally replaces using the old html event handler attributes.
... further, when properly
added, such handlers can also be disconnected if needed using removeeventlistener().
...in
addition, work is underway to change this to be a domhighrestimestamp instead.
EventListener - Web APIs
example html <button id="btn">click here!</button> javascript const buttonelement = document.getelementbyid('btn'); //
add a handler for the 'click' event by providing a callback function.
...buttonelement.
addeventlistener('click', function (event) { alert('element clicked through function!'); }); // for compatibility, a non-function object with a `handleevent` property is // treated just the same as a function itself.
... buttonelement.
addeventlistener('click', { handleevent: function (event) { alert('element clicked through handleevent property!'); } }); result see also:
addeventlistener specifications specification status comment domthe definition of 'eventlistener' in that specification.
EventSource - Web APIs
additionally, the event source itself may send messages with an event field, which will create ad-hoc events keyed to that value.
... const sse = new eventsource('/api/v1/sse'); /* this will listen only for events * similar to the following: * * event: notice * data: useful data * id: someid * */ sse.
addeventlistener("notice", function(e) { console.log(e.data) }) /* similarly, this will listen for events * with the field `event: update` */ sse.
addeventlistener("update", function(e) { console.log(e.data) }) /* the event "message" is a special case, as it * will capture events without an event field * as well as events that have the specific type * `event: message...
... */ sse.
addeventlistener("message", function(e) { console.log(e.data) }) specifications specification status html living standardthe definition of 'eventsource' in that specification.
Using Fetch - Web APIs
arsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain sending a request with credentials included to cause browsers to send a request with credentials included, even for a cross-origin call,
add credentials: 'include' to the init object you pass to the fetch() method.
... fetch('https://example.com', { credentials: 'include' }); if you only want to send credentials if the request url is on the same origin as the calling script,
add credentials: 'same-origin'.
... they can also be created programmatically via javascript, but this is only really useful in serviceworkers, when you are providing a custom response to a received request using a respondwith() method: const mybody = new blob();
addeventlistener('fetch', function(event) { // serviceworker intercepting a fetch event.respondwith( new response(mybody, { headers: { 'content-type': 'text/plain' } }) ); }); the response() constructor takes two optional arguments — a body for the response, and an init object (similar to the one that request() accepts.) note: the static method error() simply returns an e...
FileReader: abort event - Web APIs
="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview =...
... document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function
addlisteners(reader) { reader.
addeventlistener('loadstart', handleevent); reader.
addeventlistener('load', handleevent); reader.
addeventlistener('loadend', handleevent); reader.
addeventlistener('progress', handleevent); reader.
addeventlistener('error', handleevent); reader.
addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0...
...]; if (selectedfile) {
addlisteners(reader); reader.readasdataurl(selectedfile); } reader.abort(); } fileinput.
addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: load event - Web APIs
="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview =...
... document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function
addlisteners(reader) { reader.
addeventlistener('loadstart', handleevent); reader.
addeventlistener('load', handleevent); reader.
addeventlistener('loadend', handleevent); reader.
addeventlistener('progress', handleevent); reader.
addeventlistener('error', handleevent); reader.
addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0...
...]; if (selectedfile) {
addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.
addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview =...
... document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function
addlisteners(reader) { reader.
addeventlistener('loadstart', handleevent); reader.
addeventlistener('load', handleevent); reader.
addeventlistener('loadend', handleevent); reader.
addeventlistener('progress', handleevent); reader.
addeventlistener('error', handleevent); reader.
addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0...
...]; if (selectedfile) {
addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.
addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview =...
... document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function
addlisteners(reader) { reader.
addeventlistener('loadstart', handleevent); reader.
addeventlistener('load', handleevent); reader.
addeventlistener('loadend', handleevent); reader.
addeventlistener('progress', handleevent); reader.
addeventlistener('error', handleevent); reader.
addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0...
...]; if (selectedfile) {
addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.
addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: progress event - Web APIs
="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview =...
... document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function
addlisteners(reader) { reader.
addeventlistener('loadstart', handleevent); reader.
addeventlistener('load', handleevent); reader.
addeventlistener('loadend', handleevent); reader.
addeventlistener('progress', handleevent); reader.
addeventlistener('error', handleevent); reader.
addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0...
...]; if (selectedfile) {
addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.
addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileSystemDirectoryEntry.createReader() - Web APIs
example this example creates a method called re
addirectory(), which fetches all of the entries in the specified filesystemdirectoryentry and returns them in an array.
... function re
addirectory(directory) { let dirreader = directory.createreader(); let entries = []; let getentries = function() { dirreader.readentries(function(results) { if (results.length) { entries = entries.concat(toarray(results)); getentries(); } }, function(error) { /* handle error -- error is a fileerror object */ }); }; getentries(); return entries; } this works by creating an internal function, getentries(), which calls itself recursively to get all the entries in the directory, concatenating each batch to the array.
...once control is returned to re
addirectory(), the array is returned to the caller.
FontFaceSet - Web APIs
methods fontfaceset.
add()
adds a font to the font set.
... fontfaceset.clear() removes all manually-
added fonts from the font set.
... fontfaceset.delete() removes a manually-
added font from the font set.
FormData.append() - Web APIs
the append() method of the formdata interface appends a new value onto an existing key inside a formdata object, or
adds the key if it does not already exist.
... example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you can
add key/value pairs to this using formdata.append: formdata.append('username', 'chris'); formdata.append('userpic', myfileinput.files[0], 'chris.jpg'); as with regular form data, you can append multiple values with the same name.
... for example (and being compatible with php's naming conventions by
adding [] to the name): formdata.append('userpic[]', myfileinput.files[0], 'chris1.jpg'); formdata.append('userpic[]', myfileinput.files[1], 'chris2.jpg'); this technique makes it simpler to process multi-file uploads because the resultant data structure is more conducive to looping.
Using the Frame Timing API - Web APIs
when one of those event types is
added to the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.
...ate_frame_observer(); var obs = new performanceobserver(frame_observer_2); obs.observe({entrytypes: ['frame']}); } function frame_observer_2(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser
adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.
... }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); in the following example, the observer registers to be notified when several different performance entry types are
added to the performance timeline.
Frame Timing API - Web APIs
the observer (callback) will be notified when new "frame" events are
added to the browser's performance timeline and the frame's duration (length of time) will be available.
... performanceentry.name set to the document's
address.
...when the browser
adds a new frame to the performance timeline, the specified observer callback will be invoked.
Geolocation API - Web APIs
webextensions that wish to use the geolocation object must
add the "geolocation" permission to their manifest.
... body { p
adding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; functi...
...e: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').
addeventlistener('click', geofindme); result specifications specification status comment geolocation api recommendation ...
GlobalEventHandlers.onanimationend - Web APIs
ss="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; p
adding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, ...
...we'll
add the animation style later to start animating the box.
... then we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").
addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; p
adding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, le...
...we'll
add the animation style later to start animating the box.
... finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").
addeventlistener("click", function(event) { box.style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box element's animation-play-state to "running" and increments the iteration counter.
GlobalEventHandlers.onanimationstart - Web APIs
ss="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; p
adding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, ...
...we'll
add the animation style later to start animating the box.
... then we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").
addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onpointerdown - Web APIs
you can also use
addeventlistener() to
add a listener for pointerdown events.
...you could also use
addeventlistener(), of course.
... in
addition, the event's preventdefault() method is called to ensure that the mouseup event isn't triggered unnecessarily.
HTMLAnchorElement - Web APIs
this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas...
... living standard the following property has been
added: download.
... the following properties have been
added: hash, host, hostname, media, pathname, port, protocol, rellist, search, and text.
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle"...
... living standard the following property has been
added: download.
... the following properties have been
added: rel, rellist, media, hreflang, type, host, hostname, pathname, port, protocol, search, and hash.
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mi...
...this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.
addeventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip }) events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement.
... listen to events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor=...
... events listen to these events using
addeventlistener().
... working draft
adds the method capturestream().
HTMLElement: animationend event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationend examples this example gets an element that's being animated and listens for the animationend event: const animated = document.queryselector('.animated'); animated.
addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night ...
...to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.
addeve...
...ntlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.
addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.
addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.
addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.
addeventlistener('click', () => { animation.classlist.toggle('active'); a...
HTMLElement: animationstart event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationstart examples this listens for the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.
addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our pl...
...anet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; p
adding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.
addeventlistene...
...r('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.
addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.
addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.
addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.
addeventlistener('click', () => { animation.classlist.toggle('active'); animatione...
HTMLElement: transitioncancel event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel examples this code gets an element that has a transition defined and
adds a listener to the transitioncancel event: const transition = document.queryselector('.transition'); transition.
addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of
addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition ...
...e <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll
add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
... const message = document.queryselector('.message'); const el = document.queryselector('.transition'); el.
addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.
addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.
addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.
addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitioncancel event is fired if the transition is cancelled ...
HTMLElement: transitionend event - Web APIs
examples this code gets an element that has a transition defined and
adds a listener to the transitionend event: const transition = document.queryselector('.transition'); transition.
addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the followin...
...nt, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll
add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
... const message = document.queryselector('.message'); const el = document.queryselector('.transition'); el.
addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.
addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.
addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.
addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitionend event is fired in both directions: when the box f...
HTMLElement: transitionrun event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionrun examples this code
adds a listener to the transitionrun event: el.
addeventlistener('transitionrun', () => { console.log('transition is running but hasn\'t necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of
addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transitio...
...n that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll
add some javascript to indicate where the transitionstart and transitionrun events fire.
... const el = document.queryselector('.transition'); const message = document.queryselector('.message'); el.
addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.
addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.
addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e.
HTMLElement: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionstart examples this code
adds a listener to the transitionstart event: element.
addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of
addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .
...transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll
add some javascript to indicate where the transitionstart and transitionrun events fire.
... const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.
addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); transition.
addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); transition.
addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e.
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
... recommendation the following properties have been
added: disabled, elements, name, type, valdiationmessage, validity, and willvalidate.
... the following methods have been
added: checkvalidity(), setcustomvalidity().
HTMLFormElement: reset event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.
addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs.
...time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.
addeventlistener('reset', logreset); result specifications specification status comment html living standardthe definition of 'reset' in that specification.
... recommendation
added info that the event is not trusted.
HTMLImageElement.crossOrigin - Web APIs
example in this example, a new <img> element is created and
added to the document, loading the image with the anonymous state; the image will be loaded using cors and credentials will be used for all cross-origin loads.
... const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.
addeventlistener("load", () => container.prepend(image) ); image.
addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
...thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; p
adding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.decode() - Web APIs
this can be used to initiate loading of the image prior to attaching it to an element in the dom (or
adding it to the dom as a new element), so that the image can be rendered immediately upon being
added to the dom.
... this, in turn, prevents the rendering of the next frame after
adding the image to the dom from causing a delay while the image loads.
...without a promise-returning method, you would
add the image to the dom in a load event handler, such as by using the img.onload event handler, and by handling the error in the error event's handler.
HTMLImageElement.srcset - Web APIs
an
additional, fallback image candidate is provided without any condition at all, to be used for any other width.
... .box { width: 200px; border: 2px solid rgba(150, 150, 150, 255); p
adding: 0.5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the window's load event.
... for
additional examples, see our guide to responsive images.
HTMLMediaElement: loadedmetadata event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadedmetadata specification html5 media
additional properties property type description mozchannels read only int the number of channels.
... examples these examples
add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known.
HTMLMediaElement.textTracks - Web APIs
you can detect when tracks are
added to and removed from an <audio> or <video> element using the
addtrack and removetrack events.
...instead, they're sent to the track list object of the htmlmediaelement that corresponds to the type of track that was
added to the element the returned list is live; that is, as tracks are
added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new text tracks are
added or existing ones removed.
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas...
... recommendation the following property has been
added: scoped.
... obsolete
added a second inheritence, the linkstyle interface.
IDBCursor - Web APIs
note: not to be confused with idbcursorwithvalue which is just an idbcursor interface with an
additional value property.
... properties note: idbcursorwithvalue is an idbcursor interface with an
additional value property.
... recommendation
added continueprimarykey() and support for binary keys, and the idbcursor.request property.
IDBDatabase: abort event - Web APIs
bubbles yes cancelable no interface event event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transaction,
adds a listener to the abort event, then aborts the transaction to trigger the event.
...objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.
addeventlistener('abort', () => { console.log('transaction aborted'); }); // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.
...nique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onabort = () => { console.log('transaction aborted'); }; // open a read/write db transaction, ready for
adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; ...
IDBIndexSync - Web APIs
method overview any
add (in any value, in optional any key) raises (idbdatabaseexception); any get (in any key) raises (idbdatabaseexception); any getobject (in any key) raises (idbdatabaseexception); void opencursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); void openobjectcursor (in optional idbkeyrange range, in optional uns...
... methods
add() stores the given value into this index, optionally with the specified key.
... any
add( in any value, in optional any key ) raises (idbdatabaseexception); parameters returns exceptions this method can raise a idbdatabaseexception with the following code: value the value to store into the index.
IDBObjectStore.autoIncrement - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store using
add().
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrite"); /...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.indexNames - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store using
add().
... // this is used a lot below db = this.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrite"); /...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification.
IDBObjectStore.keyPath - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store using
add().
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrite"); /...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store using
add().
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrite"); /...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.transaction - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store using
add().
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrite"); /...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBObjectStoreSync - Web APIs
method overview any
add (in any value, in optional any key) raises (idbdatabaseexception); idbindexsync createindex (in domstring name, in domstring storename, in domstring keypath, in optional boolean unique); any get (in any key) raises (idbdatabaseexception); idbcursorsync opencursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); ...
... methods
add() stores the given value into this object store, optionally with the specified key.
... any
add( in any value, in optional any key ) raises (idbdatabaseexception); parameters returns exceptions this method can raise a idbdatabaseexception with the following codes: value the value to store into the index.
IDBTransaction.abort() - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
...this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just...
IDBTransaction.db - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdata...
IDBTransaction.error - Web APIs
example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...ion transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specif...
IDBTransaction.mode - Web APIs
transactions in this mode are known as "upgrade transactions." example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transac...
IDBTransaction.onabort - Web APIs
}; example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...tion transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function(...
IDBTransaction.oncomplete - Web APIs
}; example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...tion transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification speci...
IDBTransaction.onerror - Web APIs
}; example in the following code snippet, we open a read/write transaction on our database and
add some data to an object store.
... // this is used a lot below db = dbopenrequest.result; // run the
adddata() function to
add the data to the database
adddata(); }; function
adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["todolist"], "readwrit...
...ion transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specif...
InputDeviceCapabilities API - Web APIs
the inputdevicecapabilities api
addresses this problem by abstracting the capabilities of input devices.
... mybutton.
addeventlistener('mousedown', function(e) { // touch event case handled above, don't change the style again on tap.
... if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.
add("pressed"); }); interfaces inputdevicecapabilities provides logical information about an input device.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family=...
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.
addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
... resources to pre-fetch:', urlstoprefetch); event.waituntil( caches.open(current_caches['prefetch']).then(function(cache) { return cache.
addall(urlstoprefetch.map(function(urltoprefetch) { return new request(urltoprefetch, {mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); specifications specification status comment service workers working draft as of may 2015, the install event is an instance of extendableevent rather than a child of it.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family...
... example <!doctype html> <html> <head> <script> 'use strict'; document.
addeventlistener('keydown', (event) => { const keyname = event.key; if (keyname === 'control') { // do not alert when only control key is pressed.
... alert(`combination of ctrlkey + ${keyname}`); } else { alert(`key pressed ${keyname}`); } }, false); document.
addeventlistener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer active, // so event.ctrlkey is false.
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" a...
... mediasource.
addsourcebuffer() creates a new sourcebuffer of the given mime type and
adds it to the mediasource.sourcebuffers list.
... = '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); } 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...
MediaStream() - Web APIs
if any parameters are given, the specified tracks are
added to the new stream.
... syntax newstream = new mediastream(); newstream = new mediastream(stream); newstream = new mediastream(tracks[]); parameters stream a different mediastream object whose tracks are
added to the newly-created stream automatically.
... tracks an array of mediastreamtrack objects, one for each track to
add to the stream.
MediaStreamAudioSourceNode - Web APIs
properties in
addition to the following properties, mediastreamaudiosourcenode inherits the properties of its parent, audionode.
... however, it's important to note that the rule establishing this ordering was
added long after this interface was first introduced into the web audio api.
...this is why it is typically wiser to use mediastreamtrackaudiosourcenode, which provides similar capabilities but was better-defined upon being
added to the specification, so it's more reliable.
MediaStreamTrack - Web APIs
properties in
addition to the properties listed below, mediastreamtrack has constrainable properties which can be set using applyconstraints() and accessed using getconstraints() and getsettings().
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended sent when playback of the track ends (when the value readystate changes to ended).
... candidate recommendation
additional properties for isolated track support media capture and streamsthe definition of 'mediastreamtrack' in that specification.
MediaStreamTrackEvent() - Web APIs
the mediastreamtrackevent() constructor returns a newly created mediastreamtrackevent object, which represents an event announcing that a mediastreamtrack has been
added to or removed from a mediastream.
...it is case-sensitive and can be "
addtrack" or "removetrack".
... track a mediastreamtrack object representing the track which was
added to or removed from the stream.
Recording a media element - Web APIs
<div class="bottom"> <pre id="log"></pre> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; float: left; width: 160px; p
adding: 0px; } .right { margin-left: 10px; float: left; width: 160px; p
adding: 0px; } .bottom { clear: both; p
adding-top: 10px; } javascript content now let's have a look at the...
... getting an input stream and setting up the recorder now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button: startbutton.
addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true, audio: true }).then(stream => { preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), reco...
... handling the stop button the last bit of code
adds a handler for the click event on the stop button using
addeventlistener(): stopbutton.
addeventlistener("click", function() { stop(preview.srcobject); }, false); this simply calls the stop() function we covered earlier.
Using the MediaStream Recording API - Web APIs
we wanted to give the first two (the header and the controls) fixed heights: header { height: 70px; } .main-controls { p
adding-bottom: 0.7rem; height: 170px; } however, we wanted to make the third area (which contains the recorded samples you can play back) take up whatever space is left, regardless of the device height.
...instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and p
adding of the other two: .sound-clips { box-shadow: inset 0 3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9.
...ks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.
add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl = window.url.cr...
Transcoding assets for Media Source Extensions - Web APIs
extract the executable from the archive file and
add it's location to your path statement.
...if you don't need it,
add --audio-codec=aac to the mp4-dash-encode.py command line.
... note: the fragmented version is slightly larger than the original, due to
additional metadata spread throughout the file.
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family...
...if the onmessage event is attached using
addeventlistener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.oncha...
... onconnect = function(e) { var port = e.ports[0]; port.
addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using
addeventlistener.
MessagePort: messageerror event - Web APIs
he ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.
addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages and message errors on it using code like this: window.
addeventlistener('message', (event) => { const myport = event.ports[0]; myport.
addeventlistener('message', (event) => { ...
... received.textcontent = event.data; }); myport.
addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the
addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.
addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; myport.onmessageerror = (event) => { console.error(event.data); }; }); specifications specification status html living standard living standard ...
MouseEvent.pageX - Web APIs
see page in coordinate systems for some
additional information about coordinates specified in this fashion.
... javascript var box = document.queryselector(".box"); var pagex = document.getelementbyid("x"); var pagey = document.getelementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.
addeventlistener("mousemove", updatedisplay, false); box.
addeventlistener("mouseenter", updatedisplay, false); box.
addeventlistener("mouseleave", updatedisplay, false); the javascript code uses
addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events.
... prior to being
added to the cssom view specification, pagex and pagey were available on the uievent interface in a limited subset of browsers for a short time.
NamedNodeMap - Web APIs
namednodemap.setnameditem() replaces, or
adds, the attr identified in the map by the given name.
... namednodemap.setnameditemns() replaces, or
adds, the attr identified in the map by the given namespace and related local name.
... obsolete
added getnameditemns(), setnameditemns() and removenameditemns() document object model (dom) level 1 specificationthe definition of 'namednodemap' in that specification.
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.
addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationsta...
... let's
add this information to the example above.
... the new code looks like this: window.
addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: output += "reload"; break; case performancenavigation.type_back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the previous ex...
Node.cloneNode() - Web APIs
the newclone has no parent and is not part of the document, until it is
added to another node that is part of the document (using node.appendchild() or a similar method).
...it does not copy event listeners
added using
addeventlistener() or those assigned to element properties (e.g., node.onclick = somefunction).
...
additionally, for a <canvas> element, the painted image is not copied.
Notifications API - Web APIs
this should be done in response to a user gesture, such as clicking a button, for example: btn.
addeventlistener('click', function() { let promise = notification.requestpermission(); // wait for permission }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.
... in
addition, the notifications api spec specifies a number of
additions to the serviceworker api, to allow service workers to fire notifications.
... service worker
additions serviceworkerregistration includes the serviceworkerregistration.shownotification() and serviceworkerregistration.getnotifications() method, for controlling the display of notifications.
PasswordCredential - Web APIs
passwordcredential.
additionaldata secure context one of a formdata instance, a urlsearchparams instance, or null.
... the data in the objects will be
added to the request body and sent to the remote endpoint with the credentials.
... samsung internet android full support 5.0
additionaldata experimentaldeprecatedchrome full support 51edge full support ≤79firefox ?
PayerErrors - Web APIs
the payer details include the payer's name, phone number, and email
address.
... properties email optional if present, this domstring is a string describing the validation error from which the payer's email
address—as given by paymentresponse.payeremail—currently suffers.
... if this property is absent from the payererrors object, the email
address passed validation.
PaymentRequest.shippingOption - Web APIs
const request = new paymentrequest(methoddata, details, options); // async update to details request.onshipping
addresschange = ev => { ev.updatewith(checkshipping(request)); }; // sync update to the total request.onshippingoptionchange = ev => { const shippingoption = shippingoptions.find( option => option.id === request.id ); const newtotal = { currency: "usd", label: "total due", value: calculatenewtotal(shippingoption), }; ev.updatewith({ ...details, total: newtotal }); }; async...
... function checkshipping(request) { try { const json = request.shipping
address.tojson(); await ensurecanshipto(json); const { shippingoptions, total } = await calculateshipping(json); return { ...details, shippingoptions, total }; } catch (err) { return { ...details, error: `sorry!
... we can't ship to your
address.` }; } } specifications specification status comment payment request apithe definition of 'shippingoption' in that specification.
PaymentRequest.show() - Web APIs
those look like this: async/await syntax using await to wait for a promise to be resolved makes it possible to write the code to handle payments particularly cleanly: async function processpayment() { try { const payrequest = new paymentrequest(methoddata, details, options); payrequest.onshipping
addresschange = ev => ev.updatewith(check
address(payrequest)); payrequest.onshippingoptionchange = ev => ev.updatewith(checkshipping(payrequest)); const repsonse = await payrequest.show(); await validateresponse(response); } catch(err) { /* handle the error; aborterror usually means a user cancellation */ } } in this code, the methods check
address() and checkshipping(), respect...
...ively, check the shipping
address and the shipping option changes and supply in response either a paymentdetailsupdate object or a promise to return one; this object contains the fields in the paymentresponse which have been or need to be changed.
... then/catch syntax you can also use the older promise-based approach to work with payments, using the then() and catch() functions on the promise returned by show(): function processspayment() { const payrequest = new paymentrequest(methoddata, details, options); payrequest.onshipping
addresschange = ev => ev.updatewith(check
address(payrequest)); payrequest.onshippingoptionchange = ev => ev.updatewith(checkshipping(payrequest)); payrequest.show() .then(response => validateresponse(response)) .catch(err => handleerror(err)); } this is functionally equivalent to the processpayment() method using the await syntax.
PaymentRequestUpdateEvent - Web APIs
those events are: shipping
addresschange secure context dispatched whenever the user changes their shipping
address.
... also available using the onshipping
addresschange event handler property.
... methods in
addition to methods inherited from the parent interface, event, paymentrequestupdateevent offers the following methods: paymentrequestupdateevent.updatewith() secure context if the event handler determines that information included in the payment request needs to be changed, or that new information needs to be
added, it calls updatewith() with the information that needs to be replaced or
added.
PaymentResponse: payerdetailchange event - Web APIs
ncelable no interface paymentrequestupdateevent event handler property onpayerdetailchange examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping
address, // payer email
address, name, and phone number all be collected.
...rname) { promisestovalidate.push(validatename(payername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves,
add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the dat...
...a to the server await fetch("/pay-for-things/", { method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, });
addeventlistener equivalent you could also set up the event handler using the
addeventlistener() method: response.
addeventlistener("payerdetailchange", async ev => { ...
Payment processing concepts - Web APIs
standardized payment method identifiers there is currently only one registered standardized payment method identifier (more may be
added in the future): basic-card payments are handled by the basic card payment specification.
...in
addition, the payment handler api can be used to establish support for
additional payment method providers, in browsers that support it.
... paymentrequest.onmerchantvalidation = function(event) { event.complete(fetchvalidationdata(event.validationurl)); } in this example, fetchvalidationdata() is a function which loads the payment handler specific identifying information from the
address given by validationurl.
Performance Timeline - Web APIs
the standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are
added to the browser's performance timeline.
...this interface has the following four properties, and these properties are extended (with
additional constraints) by other interfaces (such as performancemark): name the name of the performance entry when the metric was created.
... performance observers were
added to the level 2 version of the standard and were not widely implemented.
RTCDTMFToneChangeEvent - Web APIs
properties in
addition to the properties of event, this interface offers the following: rtcdtmftonechangeevent.tone read only a domstring specifying the tone which has begun playing, or an empty string ("") if the previous tone has finished playing.
...there are no
additional methods.
... dtmfsender.
addeventlistener("change", function(event) { if (event.tone !== "") { dialstringbox.innertext += event.tone; } else { senddtmfbutton.disabled = false; } }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent' 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.error; console.error("webrtc error: ", ...
... sctp 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.
... in
addition, however, depending on the value of errordetail,
additional information may be output.
RTCError - Web APIs
properties in
addition to the properties defined by the parent interface, domexception, rtcerror includes the following properties: errordetail read only a domstring specifying the webrtc-specific error code identifying the type of error that occurred.
... datachannel.
addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }...
... the above example uses
addeventlistener() to
add the handler for error events.
RTCErrorEvent.error - Web APIs
additional properties defined by rtcerror are: errordetail read only a domstring specifying the webrtc-specific error code identifying the type of error that occurred.
... datachannel.
addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }...
... the above example uses
addeventlistener() to
add the handler for error events.
RTCErrorEvent - Web APIs
it's based on the standard event interface, but
adds rtc-specific information describing the error, as shown below.
... properties in
addition to the standard properties available on the event interface, rtcerrorevent also includes the following: error read only an rtcerror object specifying the error which occurred; this object includes the type of error that occurred, information about where the error occurred (such as which line number in the sdp or what sctp cause code was at issue).
... methods no
additional methods are provided beyond any found on the parent interface, event.
RTCIceCandidate.candidate - Web APIs
function handlenewicecandidate(candidatesdp) { var candidateobj = new rtcicecandidate(candidatesdp); mypeerconnection.
addicecandidate(candidateobj).catch({ /* handle the error thrown by
addicecandidate() */ }); } the handlenewicecandidate() function shown here passes the received candidate's sdp text into rtcicecandidate() to receive an rtcicecanddiate object in return, which represents the candidate.
... the new candidate is then passed into rtcpeerconnection.
addicecandidate() to
add the candidate to the list of candidates for webrtc to consider using for the connection being established.
... this example could be simplified somewhat; you may more often see the code look something like this, taking advantage of more advanced ecmascript 2016 features: let handlenewicecandidate = candidatesdp => mypeerconnection.
addicecandidate(new rtcicecandidate(candidatesdp)); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.candidate' in that specification.
RTCIceCandidate.protocol - Web APIs
protocol is null by default if not specified properly in the sdp, but this is an error condition and will result in a thrown exception when you call rtcpeerconnection.
addicecandidate().
...the tcptype property provides
additional information about the kind of tcp candidate represented by the object.
... note: if protocol is null — and protocol is supported by the user agent — passing the candidate to
addicecandidate() will fail, throwing an operationerror exception.
RTCIceTransportState - Web APIs
in
addition, all candidate pairs have been considered and a pair has been selected for use.
...see the disconnected state for
additional details.
...instead, you can think of "disconnected" as being similar to "checking" but with the
added information that the connection had been working but at the moment is not.
RTCPeerConnection: datachannel event - Web APIs
a datachannel event is sent to an rtcpeerconnection instance when an rtcdatachannel has been
added to the connection, as a result of the remote peer calling rtcpeerconnection.createdatachannel().
... bubbles no cancelable no interface rtcdatachannelevent event handler property ondatachannel examples this example sets up a function that handles datachannel events by gathering the information needed to communicate with the newly
added rtcdatachannel and by
adding event handlers for the events that occur on that channel.
... pc.
addeventlistener("datachannel", ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; }, false); receivechannel is set to the value of the event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one.
RTCPeerConnection: iceconnectionstatechange event - Web APIs
the ice layer makes this determination upon receiving the end-of-candidates signal, which is provided by caling
addicecandidate() with a candidate whose candidate property is an empty string (""), or by setting the rtcpeerconnection property cantrickleicecandidates to false.
... examples an event handler for this event can be
added using the rtcpeerconnection.oniceconnectionstatechange property or by using
addeventlistener() on the rtcpeerconnection.
... pc.
addeventlistener("iceconnectionstatechange", ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status comment webrtc 1.0: real-time communication between browser...
RTCPeerConnection: negotiationneeded event - Web APIs
bubbles no cancelable no interface event event handler property rtcpeerconnection.onnegotiationneeded the negotiationneeded event is first dispatched to the rtcpeerconnection when media is first
added to the connection.
... examples in this example, we use
addeventlistener() to create an event handler for negotiationneeded.
... pc.
addeventlistener("negotiationneeded", ev => { pc.createoffer() .then(offer => return pc.setlocaldescription(offer)) .then(() => sendsignalingmessage({ type: "video-offer", sdp: pc.localdescription })) .catch(err => { /* handle error */ ); }, false); after creating the offer, the local end is configured by calling rtcpeerconnection.setlocaldescription(); then a signaling message is created and sent to the remote peer through the signaling server, to share that offer with the other peer.
RTCPeerConnectionIceErrorEvent - Web APIs
properties the rtcpeerconnectioniceerrorevent interface includes the properties found on the event interface, as well as the following properties:
address read only a domstring providing the local ip
address used to communicate with the stun or turn server being used to negotiate the connection, or null if the local ip
address has not yet been exposed as part of a local ice candidate.
... port read only an unsigned integer value giving the port number over which communication with the stun or turn server is taking place, using the ip
address given in
address.
... null if the connection hasn't been established (that is, if
address is null).
RTCRtpStreamStats - Web APIs
while the dictionary has a base set of properties that are present in each of these cases, there are also
additional properties
added depending on which interface the method is called on.
...it's based on rtcstats and
adds the following
additional fields.
...in
addition, some or all of the following properties are available.
RTCTrackEvent() - Web APIs
the rtctrackevent() constructor creates and returns a new rtctrackevent object, configured to describe the track which has been
added to the rtcpeerconnection.
... syntax trackevent = new rtctrackevent(eventinfo); parameters eventinfo an object based on the rtctrackeventinit dictionary, providing information about the track which has been
added to the rtcpeerconnection.
... return value a new rtctrackevent describing a track which has been
added to the rtcpeerconnection.
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
... methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using
addeventlistener() or by assigning an event listener to the equivalent on...
... candidate recommendation
adds the dataset property.
Using the Screen Capture API - Web APIs
there are three new constraints
added to mediatrackconstraints (as well as to mediatracksupportedconstraints and mediatracksettings) for configuring a screen capture stream: cursor indicates whether or not to capture the mouse cursor, and if so, whether to do so all the time or only while the mouse is in motion.
...this could be refined further by specifying
additional information for each of audio and video: const gdmoptions = { video: { cursor: "always" }, audio: { echocancellation: true, noisesuppression: true, samplerate: 44100 } } in this example the cursor will always be visible in the capture, and the audio track should ideally have noise suppression and echo cancellation features enabled, as well as an ideal audio sampl...
... const videoelem = document.getelementbyid("video"); const logelem = document.getelementbyid("log"); const startelem = document.getelementbyid("start"); const stopelem = document.getelementbyid("stop"); // options for getdisplaymedia() var displaymediaoptions = { video: { cursor: "always" }, audio: false }; // set event listeners for the start and stop buttons startelem.
addeventlistener("click", function(evt) { startcapture(); }, false); stopelem.
addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
ScriptProcessorNode.bufferSize - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it,
adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and
add a small amount of white noise, before setting that result to be the output sample in each case.
...(var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(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); scrip...
ScriptProcessorNode.onaudioprocess - Web APIs
} example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it,
adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and
add a small amount of white noise, before setting that result to be the output sample in each case.
...(var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(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(scrip...
ServiceWorkerGlobalScope.onpush - Web APIs
} self.
addeventlistener('push', function(pushevent) { ...
...the data payload of the push message is available in the event object's data property (pushevent.data, which contains a pushmessagedata object.) self.
addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification...
....
addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.
ServiceWorkerGlobalScope - Web APIs
additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
... self.
addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
Using readable streams - Web APIs
it has a number of advantages, and what is really nice about it is that browsers have recently
added the ability to consume a fetch response as a readable stream.
... in
addition, when we are done reading the fetch body we use the controller’s close() method to close the custom stream — any previously-enqueued chunks can still be read from it, but no more can be enqueued, and the stream is closed when reading has finished.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); //
add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.
addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we do...
StylePropertyMapReadOnly - Web APIs
we can
add some css, or not.
...</p> <dl id="output"></dl> we
add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we
add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap().
... // get the element const myelement = document.queryselector('p'); // get the <dl> we'll be populating const styleslist = document.queryselector('#output'); // retrieve all computed styles with computedstylemap() const stylepropertymap = myelement.computedstylemap(); // iterate thru the map of all the properties and values,
adding a <dt> and <dd> for each for (const [prop, val] of stylepropertymap) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om...
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.
add("fade-in"); sharedsecretvalue.
addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const g...
...ivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.
addeventlistener("click", () => { // alice then generates a secret using her private key and bob's public key.
....getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.
add("fade-in"); derivedbitsvalue.
addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.
addeventlistener("click", () => { getderivedbits(); }); specifications ...
UIEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family...
... specifications specification status comment inputdevicecapabilities draft
added sourcecapabilities property.
... obsolete
added the uievent() constructor, deprecated the inituievent() method and changed the type of view from abstractview to windowproxy.
VisualViewport - Web APIs
events listen to these events using
addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface.
... var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.
addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.
addeventlistener('scroll', viewporthandler); window.visualviewport.
addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.
Visual Viewport API - Web APIs
it also
adds two events, onresize and onscroll, that fire whenever the visual viewport changes.
... example the code below is based on the sample the specification, though it
adds a few things that make it function better.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.
addeventlistener('scroll', viewporthandler); window.visualviewport.
addeventlistener('resize', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification.
WebGL2RenderingContext - Web APIs
some methods of the webgl 1 context can accept
additional values when used in a webgl 2 context.
...in
addition, it can execute multiple instances of the range of elements.
...in
addition, it can execute multiple instances of a set of elements.
WebGLContextEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospac...
... webglcontextevent.statusmessage a read-only property containing
additional information about the event.
... examples with the help of the webgl_lose_context extension, you can simulate the webglcontextlost and webglcontextrestored events: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.
addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WebGLRenderingContext.bufferData() - Web APIs
when using a webgl 2 context, the following values are available
additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... when using a webgl 2 context, the following values are available
additionally: gl.static_read: the contents are intended to be specified once by reading data from webgl, and queried many times by the application.
...
adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer
adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
when using a webgl 2 context, the following values are available
additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a webgl 2 context, the following values can be returned
additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures.
... when using the ovr_multiview2 extension, the following value can be returned
additionally: ext.framebuffer_incomplete_view_targets_ovr: if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete.
WebGLRenderingContext.getBufferParameter() - Web APIs
when using a webgl 2 context, the following values are available
additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... when using a webgl 2 context, the following values are available
additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
...
adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer
adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
when using a webgl 2 context, the following values are available
additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a webgl 2 context, the following values are available
additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_att...
... when using a webgl 2 context, the following values are available
additionally: gl.framebuffer_attachment_alpha_size gl.framebuffer_attachment_blue_size gl.framebuffer_attachment_color_encoding gl.framebuffer_attachment_component_type gl.framebuffer_attachment_depth_size gl.framebuffer_attachment_green_size gl.framebuffer_attachment_red_size gl.framebuffer_attachment_stencil_size gl.framebuffer_attachment_texture_layer ...
WebGLRenderingContext.getTexParameter() - Web APIs
when using a webgl 2 context, the following values are available
additionally: gl.texture_3d: a three-dimensional texture.
...
additionally available when using the ext_texture_filter_anisotropic extension ext.texture_max_anisotropy_ext glfloat maximum anisotropy for a texture any float values.
...
additionally available when using a webgl 2 context gl.texture_base_level glint texture mipmap level any int values.
WebGLRenderingContext.texParameter[fi]() - Web APIs
when using a webgl 2 context, the following values are available
additionally: gl.texture_3d: a three-dimensional texture.
...
additionally available when using the ext_texture_filter_anisotropic extension ext.texture_max_anisotropy_ext maximum anisotropy for a texture a glfloat value.
...
additionally available when using a webgl 2 context gl.texture_base_level texture mipmap level any int values.
Clearing by clicking - Web APIs
me color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; p
adding : 0.6em; } window.
addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... window.removeeventlistener(evt.type, setupwebgl, false); //
adding the same click event handler to both canvas and // button.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.
addeventlistener("click", switchcolor, false); button.
addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.
Clearing with colors - Web APIs
in
addition, you may notice that clearing the drawing buffer with a solid color is a two-stage process.
...--> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope.
...window.
addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
Compressed texture formats - Web APIs
these are useful to increase texture detail while limiting the
additional video memory necessary.
...this allows for
additional detail while limiting the
added video memory necessary.
...if supported, it will return an extension object with constants for the
added formats and the formats will also be returned by calls to gl.getparameter(gl.compressed_texture_formats).
WebGL constants - Web APIs
constant name value description func_
add 0x8006 passed to blendequation or blendequationseparate to set an
addition blend function.
... constant name value description unpack_flip_y_webgl 0x9240 unpack_premultiply_alpha_webgl 0x9241 unpack_colorspace_conversion_webgl 0x9243
additional constants defined webgl 2 these constants are defined on the webgl2renderingcontext interface.
... editor's draft defines
additional constants.
Animating objects with WebGL - Web APIs
to actually animate, we need to
add code that changes the value of squarerotation over time.
... we can do that by creating a new variable to track the time at which we last animated (let's call it then), then
adding the following code to the end of the main function var then = 0; // draw the scene repeatedly function render(now) { now *= 0.001; // convert to seconds const deltatime = now - then; then = now; drawscene(gl, programinfo, buffers, deltatime); requestanimationframe(render); } requestanimationframe(render); this code uses requestanimationframe to ask the browser to call the function "render" on each frame.
...at the end of drawscene we
add the code to update squarerotation.
Writing WebSocket servers - Web APIs
that header looks something like the following (remember each header line ends with \r\n and put an extra \r\n after the last one to indicate the end of the header): http/1.1 101 switching protocols upgrade: websocket connection: upgrade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo=
additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details.
...the same client ip
address can try to connect multiple times.
...you're still using xml and its syntax, but you're
additionally restricted by a structure you agreed on.
Fundamentals of WebXR - Web APIs
webxr
additionally provides support for accepting inputs from control devices such as handheld vr controllers or specialized mixed reality gamepads.
...
additionally, these headsets may have various sensors for detecting when the headset moves through space.
...the user wears 3d glasses that both
add the 3d effect to the projected image, but provide a means for the system to render foreground objects into the world.
WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering 3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for
adding graphical imagery to the real world, (augmented reality, or ar).
...support for ar functionality is
added by the webxr augmented reality module.
... navigator.xr read only this property,
added to the navigator interface, returns the xrsystem object through which the webxr api is exposed.
Using the Web Speech API - Web APIs
var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); we
add our grammar to the list using the speechgrammarlist.
addfromstring() method.
... this accepts as parameters the string we want to
add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) the
added grammar is available in the list as a speechgrammar object instance.
... speechrecognitionlist.
addfromstring(grammar, 1); we then
add the speechgrammarlist to the speech recognition instance by setting it to the value of the speechrecognition.grammars property.
Window: blur event - Web APIs
it uses
addeventlistener() to monitor focus and blur events.
... html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.
add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
... click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.
addeventlistener('blur', pause); window.
addeventlistener('focus', play); result specifications specification status comment ui events working draft
added info that this event is composed.
Window: focus event - Web APIs
it uses
addeventlistener() to monitor focus and blur events.
... html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.
add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
... click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.
addeventlistener('blur', pause); window.
addeventlistener('focus', play); result specifications specification status comment ui events working draft
added info that this event is composed.
Window.getComputedStyle() - Web APIs
html <p>hello</p> css p { width: 400px; margin: 0 auto; p
adding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; r...
... the element.style object should be used to set styles on that element, or inspect styles directly
added to it from javascript manipulation or the global style attribute.
...these are usually the same as css 2.1’s computed values, but for some older properties like width, height, or p
adding, they are instead the same as used values.
Window: unhandledrejection event - Web APIs
window.
addeventlistener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event listener: window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; preventing default handling many environments (such as node.js) report unhan...
...you can prevent that from happening by
adding a handler for unhandledrejection events that—in
addition to any other tasks you wish to perform—calls preventdefault() to cancel the event, preventing it from bubbling up to be handled by the runtime's logging code.
... window.
addeventlistener('unhandledrejection', function (event) { // ...your code here to handle the unhandled rejection...
WindowEventHandlers.onbeforeunload - Web APIs
syntax window.
addeventlistener("beforeunload", function(event) { ...
...}; typically, it is better to use window.
addeventlistener() and the beforeunload event, instead of onbeforeunload.
... window.
addeventlistener('beforeunload', function (e) { // cancel the event e.preventdefault(); // if you prevent default behavior in mozilla firefox prompt will always be shown // chrome requires returnvalue to be set e.returnvalue = ''; }); guarantee the browser unload by removing the returnvalue property of the event window.
addeventlistener('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the browser unload happens delete e['returnvalue']; }); notes when your page uses javascript to render content, the javascript may stop w...
WindowEventHandlers.onhashchange - Web APIs
syntax using an event handler: window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event listener: to
add an event listener, use
addeventlistener(): window.
addeventlistener("hashchange", funcref, false); parameters funcref a reference to a function.
... function hashhandler() { console.log('the hash has changed!'); } window.
addeventlistener('hashchange', hashhandler, false); overriding the hash this function sets a new hash dynamically, setting it randomly to one of two values.
... polyfill for event.newurl and event.oldurl // let this snippet run before your hashchange event binding code if (!window.hashchangeevent)(function(){ var lasturl = document.url; window.
addeventlistener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status comment html living standardthe definition of 'onhash...
WindowOrWorkerGlobalScope.fetch() - Web APIs
headers any headers you want to
add to your request, contained within a headers object or an object literal with bytestring values.
... body any body that you want to
add to your request: this can be a blob, buffersource, formdata, urlsearchparams, usvstring, or readablestream object.
... living standard initial definition credential management level 1 working draft
adds federatedcredential or passwordcredential instance as a possible value for init.credentials.
Worker.prototype.postMessage() - Web APIs
transfer example this example shows a firefox
add-on that transfers an arraybuffer from the main thread to the chromeworker, and then the chromeworker transfers it back to the main thread.
...d code: var myworker = new chromeworker(self.path + 'myworker.js'); function handlemessagefromworker(msg) { console.log('incoming message from worker, msg:', msg); switch (msg.data.atopic) { case 'do_sendmainarrbuff': sendmainarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } myworker.
addeventlistener('message', handlemessagefromworker); // ok lets create the buffer and send it var arrbuf = new arraybuffer(8); console.info('arrbuf.bytelength pre transfer:', arrbuf.bytelength); myworker.postmessage( { atopic: 'do_sendworkerarrbuff', abuf: arrbuf // the array buffer that we passed to the transferrable section 3 lines below }, [ arrbuf // the arr...
...to see a full working example of this firefox demo
add-on see here: github :: chromeworker - demo-transfer-arraybuffer specifications specification status comment html living standardthe definition of 'worker.postmessage()' in that specification.
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consola...
... since then, a number of
additional event handlers have been implemented in various browsers (onload, onerror, onprogress, etc.).
... more recent browsers, including firefox, also support listening to the xmlhttprequest events via standard
addeventlistener() apis in
addition to setting on* properties to a handler function.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
these values are
added to the position and orientation of the current reference space and then the result is used as the position and orientation of the newly created xrreferencespace.
... first, we
add an event handler for mousemove events, which calls our code to perform the rotation if the right mouse button is down.
... canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.
addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
XRReferenceSpace: reset event - Web APIs
however, if that kind of "teleportation" is being used, you actually want to avoid jumping the user's position after tracking recovery, this can introduce
additional and potentially jarring jumping.
... examples to
add a handler for the reset event, you can use either of two approaches.
... first, you can use the
addeventlistener() method: viewerrefspace.
addeventlistener("reset", (event) => { /* perform reset related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* perform reset related tasks */ }; specifications specification status comment webxr device apithe definition of 'reset event' in that specification.
XRView.transform - Web APIs
currently, webxr doesn't support more than two views per pose, although room has been left to extend the specification to support that in the future with some
additions to the api.
...each object's model view matrix is computed by multiplying its own matrix which describes the object's own position and orientation by the
additional position and orientation adjustments needed to match the camera's movement.
...<<<--- finish and
add link --->>> specifications specification status comment webxr device apithe definition of 'xrview.transform' in that specification.
XSL Transformations in Mozilla FAQ - Web APIs
a known workaround is to
add a sufficiently long xml comment to the beginning of your xml file in order to "push" the <feed> or <rss> tag out of the first 512 bytes, which is analyzed by firefox to determine if it's a feed or not.
...disabling output escaping requires us to
add a parsing step to our output generation, which we don't.
...msxml has an
additional property.
Using the aria-hidden attribute - Accessibility
description
adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree.
...
additionally, since this attribute is inherited by an element's children, it should not be
added onto the parent or ancestor of a focusable element.
...</p> accessibility concerns best practices aria-hidden="true" should not be
added when: the html hidden attribute is present the element or the element's ancestor is hidden with display: none the element or the element's ancestor is hidden with visibility: hidden in all three scenarios, the attribute is unnecessary to
add because the element has already been removed from the accessibility tree.
Using the aria-labelledby attribute - Accessibility
in
addition to form elements, you can use the aria-labelledby attribute to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and other types of objects.
... examples example 1: multiple labels in the example below, each input field is labelled by both its own individual label and by the label for the group: <div id="mybillingid">billing</div> <div> <div id="mynameid">name</div> <input type="text" aria-labelledby="mybillingid mynameid"/> </div> <div> <div id="my
addressid">
address</div> <input type="text" aria-labelledby="mybillingid my
addressid"/> </div> example 2: associating headings with regions in the example below, header elements are associated with the content they head.
...</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 ...
ARIA: application role - Accessibility
in
addition, a set of so-called quick navigation keys has been established over the years that allows blind users to skim through a page via a certain element type.
... aria-describedby used to indicate the idref of an element that contains
additional instructions for navigating or operating this element.
...if used, the application role should be
added to the lowest common container possible, not on the <body> element, for example.
ARIA: form role - Accessibility
examples <div role="form" id="send-comment" aria-label="
add a comment"> <label for="username">username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="comment">comment</label> <textarea id="comment" name="comment"></textarea>...
... <form id="send-comment" aria-label="
add a comment"> ....
...
added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: gridcell role - Accessibility
<div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">496-619-5098</div> … </div> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and
adding aria.
... instead use the native html td element in conjunction with the and contenteditable attribute: <td>potato</td> <td>cabbage</td> <td>onion</td> description gridcells with dynamically
added, hidden, or removed rows and columns any element with a role="gridcell" applied to it should use aria to describe its order in the table-style grouping, provided the table, grid, or treegrid has the ability to have rows and/or columns dynamically
added, hidden, or removed.
... best practices the first rule of aria is: if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and
adding an aria role, state or property to make it accessible.
ARIA: tab role - Accessibility
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>content for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { p
adding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; p
adding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; p
adding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 ...
... window.
addeventlistener("domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); //
add a click event handler to each tab tabs.foreach(tab => { tab.
addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.
addeventlistener("keydown",...
...ectorall('[role="tabpanel"]') .foreach(p => p.setattribute("hidden", true)); // show the selected panel grandparent.parentnode .queryselector(`#${target.getattribute("aria-controls")}`) .removeattribute("hidden"); } best practices it is recommended to use a button element with the role tab for their built-in functional and accessible features instead, as opposed to needing to
add them yourself.
Accessibility: What users can do to browse more safely - Accessibility
they can be
addressed by the design and speed of the display and computer" hardware and operating systems on many computers offer control that is not afforded to developers.
...learn personalization and accessibility settings firefox 73 and above (dekstop) firefox
added support for css prefers-reduced-motion in october 2018.
... chrome 74 and above (desktop) chrome 74
added support for reduced-motion-query, it has even
added support to detect whether the user has requested a reduced motion experience.
Color contrast - Accessibility
the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; p
adding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; ...
... p
adding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your website, choose foreground and background colors that have good contrast.
... 1.4.11 non-text contrast (aa) (
added in 2.1) there should be a minimum color contrast ratio of 3 to 1 for user interface components and graphical objects.
Text labels and names - Accessibility
the caption is in
addition to any alternative text on images within the figure.
... <input type="checkbox" id="terms"> </label> <input type="checkbox" id="emailoptin"> <label for="emailoptin">yes, please send me news about this product.</label> form elements should have a visible text label in
addition to having a <label> for every form element, those labels should be visible, not hidden.
...in
addition, it is difficult for screen readers to navigate pages with <frame> elements.
-webkit-mask-position-x - CSS: Cascading Style Sheets
on-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's left p
adding edge.
... percentages are calculated against the horizontal dimension of the box p
adding area.
... that means, a value of 0% means the left edge of the image is aligned with the box's left p
adding edge and a value of 100% means the right edge of the image is aligned with the box's right p
adding edge.
-webkit-mask-position-y - CSS: Cascading Style Sheets
tion-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top p
adding edge.
... percentages are calculated against the vertical dimension of the box p
adding area.
... a value of 0% means the top edge of the image is aligned with the box's top p
adding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom p
adding edge.
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be
added.
... when the next image is
added, all of the current ones compress to allow room.
... example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be
added.
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
round as the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be
added.
... when the next image is
added, all of the current ones compress to allow room.
... example: an image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be
added.
font-style - CSS: Cascading Style Sheets
oblique with angle selects a font classified as oblique, and
additionally specifies an angle for the slant of the text.
... oblique with angle range selects a font classified as oblique, and
additionally specifies a range of allowable angle for the slant of the text.
... working draft
adds oblique keyword with angle value css fonts module level 3the definition of 'font-style' in that specification.
prefers-reduced-motion - CSS: Cascading Style Sheets
alternatively,
add gtk-enable-animations = false to the [settings] block of the gtk 3 configuration file.
... in firefox about:config:
add a number preference called ui.prefersreducedmotion and set its value to 1.
...*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; p
adding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status commen...
Detecting CSS animation support - CSS: Cascading Style Sheets
however,
adding keyframes is trickier, since they're not defined using traditional css syntax (which makes them more flexible, but harder to define from script).
... the next task is to actually
add the keyframes to the page's css.
...then the new <style> element is inserted into the document's <head>, thereby
adding the new style sheet to the document.
Using feature queries - CSS: Cascading Style Sheets
there are often
additional values
added to properties in css, and so the fact that you have to test for property and value means that you can detect support for these values.
... testing for lack of support in
addition to asking the browser if it supports a feature, you can test for the opposite by
adding in the not keyword: @supports not (property: value) { css rules to apply } the css inside the following example feature query will run if the browser does not support row-gap.
... in
addition, feature queries cannot test for partial implementations.
CSS Containment - CSS: Cascading Style Sheets
in
addition: float layout will be performed independently.
... paint containment article { contain: paint; } paint containment essentially clips the box to the p
adding edge of the principal box.
... 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 ...
CSS Display - CSS: Cascading Style Sheets
candidate recommendation
added run-in, flow, flow-root, contents and multi-keyword values.
... recommendation
added the table model values and inline-block.
... in
addition to the css display specification level 3, further specifications define the behavior of various values of display.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
if we
add display: flex to a container, the child items all become flex items arranged in a row.
... note: the value space-evenly is not defined in the flexbox specification and is a later
addition to the box alignment specification.
...you can try removing this, or
adding the class to another item to see how it works.
CSS Logical Properties and Values - CSS: Cascading Style Sheets
reference properties for sizing block-size inline-size max-block-size max-inline-size min-block-size min-inline-size properties for margins, borders and p
adding border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-color (logical keyword) border-inline border-inline-color border-inline-end border-inline-end-color border-inline-en...
...border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius border-style (logical keyword) border-width (logical keyword) margin (logical keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start p
adding (logical keyword) p
adding-block p
adding-block-end p
adding-block-start p
adding-inline p
adding-inline-end p
adding-inline-start properties for floating and positioning clear (inline-end and inline-start keywords) float (inline-end and inline-start keywords) inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start other properti...
... text-align (end and start keywords) deprecated properties offset-block-end (now inset-block-end ) offset-block-start (now inset-block-start ) offset-inline-end (now inset-inline-end ) offset-inline-start (now inset-inline-start ) guides basic concepts of logical properties and values logical properties for sizing logical properties for margins, borders and p
adding logical properties for floating and positioning specifications specification status comment css logical properties and values level 1 editor's draft initial definition.
Stacking context example 1 - CSS: Cascading Style Sheets
it is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like
adding a z-index value.
...3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; p
adding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #00...
...0099; background-color: #ddddff; text-align: left; p
adding-left: 10px; } result ...
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
in this article, we consider questions that might arise related to compatibility across browsers and versions of browsers when
adding support for scroll-snap to your web site or app.
... the example
adds the scroll-snap-points-y and scroll-snap-destination properties, which are deprecated, to make scroll snapping work in firefox.
... we also
added the scroll-snap-type property twice, once with the y axis value needed for browsers that support the new spec, and once for firefox pre-68, which supports the property but without the y value.
Pagination - CSS: Cascading Style Sheets
.pagination { list-style: none; margin: 0; p
adding: 0; display: flex; column-gap: 2px; } accessibility concerns we want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link.
... to help with this we have
added aria-label="pagination" on the <nav> element.
... we have also
added some
additional content that would be read by a screenreader but is hidden visually, and set the aria-hidden attribute on the paging arrows.
CSS reference - CSS: Cascading Style Sheets
--webkit-line-clampa:active
additive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-b...
...ate:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)p
addingp
adding-blockp
adding-block-endp
adding-block-startp
adding-bottomp
adding-inlinep
adding-inline-endp
adding-inline-startp
adding-leftp
adding-rightp
adding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)...
...a():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-p
addingscroll-p
adding-blockscroll-p
adding-block-endscroll-p
adding-block-startscroll-p
adding-bottomscroll-p
adding-inlinescroll-p
adding-inline-endscroll-p
adding-inline-startscroll-p
adding-leftscroll-p
adding-rightscroll-p
adding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesize (@page)skew...
Viewport concepts - CSS: Cascading Style Sheets
ment.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in css pixels, including p
adding (but not borders, margins, or vertical scrollbars, if present).
...this is because the outerheight includes the browser chrome: measurements were taken on a browser with an
address bar and bookmarks bar totalling 100px in height, but no chrome on the left or right of the window.
...when the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden
address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.
border-style - CSS: Cascading Style Sheets
double displays two straight lines that
add up to the pixel size defined by border-width.
... <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e396; } tr, td { p
adding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;} result specifications specification status comment cs...
... recommendation
adds hidden keyword value.
break-after - CSS: Cascading Style Sheets
once forced breaks have been applied, soft breaks may be
added if needed, but not on element boundaries that resolve in a corresponding avoid value.
... candidate recommendation
adds the recto and verso keywords.
...
adds the avoid-region and region keywords.
break-before - CSS: Cascading Style Sheets
once forced breaks have been applied, soft breaks may be
added if needed, but not on element boundaries that resolve in a corresponding avoid value.
... candidate recommendation
adds the recto and verso keywords.
...
adds the avoid-region and region keywords.
clamp() - CSS: Cascading Style Sheets
as math expressions, so you can use
addition, subtraction, multiplication and division without using the calc() function itself.
...the expressions are full math expressions, so you can use direct
addition, subtraction, multiplication and division without using the calc() function itself.
... the expression can be values combining the
addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules.
flex - CSS: Cascading Style Sheets
> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container { background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; p
adding: 0.5em; width: 110px; min-width: 0; background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } by default flex items don't shrink below their minimum content size.
...-container"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.
addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ?
... "block" : "none"; }); #flex-container { width: 100%; font-family: consolas, arial, sans-serif; } #flex-container > div { border: 1px solid #f00; p
adding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; } result specifications specification status comment css flexible box layout modulethe definition of 'flex' in that specification.
linear-gradient() - CSS: Cascading Style Sheets
customizing gradients by
adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors.
...you can move this midpoint to any position between two color stops by
adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be.
... working draft
adds interpolation hints.
mask - CSS: Cascading Style Sheets
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 for background-position)computed valueas each of the properties of the shorthand:mask-image: as specified, but with <url> ...
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> =
add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | p
adding-box | content-boxwhere <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
max-block-size - CSS: Cascading Style Sheets
both boxes share the standard-box class, which simply establishes coloring, p
adding, and their respective values of max-block-size.
... after that come the classes horizontal and vertical, which
add the writing-mode property to the box, with the value set to horizontal-tb or vertical-rl depending on which class is used.
... .standard-box { p
adding: 4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max-block-size' in that specification.
text-justify - CSS: Cascading Style Sheets
inter-word the text is justified by
adding space between words (effectively varying word-spacing), which is most appropriate for languages that separate words using spaces, like english or korean.
... inter-character the text is justified by
adding space between characters (effectively varying letter-spacing), which is most appropriate for languages like japanese.
...cras eu elementum dui.</p> p { font-size: 1.5em; border: 1px solid black; p
adding: 10px; width: 95%; margin: 10px auto; text-align: justify; } .none { text-justify: none; } .auto { text-justify: auto; } .dist { text-justify: distribute; } .word { text-justify: inter-word; } .char { text-justify: inter-character; } specifications specification status comment css text module level 3the definition of 'text-justify' in that s...
touch-action - CSS: Cascading Style Sheets
manipulation enable panning and pinch zoom gestures, but disable
additional non-standard gestures such as double-tap to zoom.
... living standard
added pinch-zoom property value.
... editor's draft
added pan-left, pan-right, pan-up, pan-down property values.
unicode-bidi - CSS: Cascading Style Sheets
/* keyword values */ unicode-bidi: normal; unicode-bidi: embed; unicode-bidi: isolate; unicode-bidi: bidi-override; unicode-bidi: isolate-override; unicode-bidi: plaintext; /* global values */ unicode-bidi: inherit; unicode-bidi: initial; unicode-bidi: unset; syntax values normal the element does not offer an
additional level of embedding with respect to the bidirectional algorithm.
... embed if the element is inline, this value opens an
additional level of embedding with respect to the bidirectional algorithm.
... proposed recommendation
added plaintext, isolate, and isolate-override keywords.
Used value - CSS: Cascading Style Sheets
<div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; p
adding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwid...
...ths(); window.
addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
...the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width p
adding-bottom, p
adding-left, p
adding-right, p
adding-top text-indent specification specification status comment css level 2 (revision 2)the definition of 'used value' in that specification.
will-change - CSS: Cascading Style Sheets
but
adding will-change directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise.
...if your page is performing well, don't
add the will-change property to elements just to wring out a little more speed.
... var el = document.getelementbyid('element'); // set will-change when the element is hovered el.
addeventlistener('mouseenter', hintbrowser); el.
addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment c...
CSS: Cascading Style Sheets
css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or
add animations and other decorative features.
... this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to
add styling to html.
...in
addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
Getting Started - Developer guides
<button id="ajaxbutton" type="button">make a request</button> <script> (function() { var httprequest; document.getelementbyid("ajaxbutton").
addeventlistener('click', makerequest); function makerequest() { httprequest = new xmlhttprequest(); if (!httprequest) { alert('giving up :( cannot create an xmlhttp instance'); return false; } httprequest.onreadystatechange = alertcontents; httprequest.open('get', 'test.html'); httprequest.send(); } function alertcontents() { if (httprequest.readystat...
...you can also
add an always-different get parameter, like a timestamp or random number (see bypassing the cache) note 3: if the httprequest variable is used globally, competing functions calling makerequest() can overwrite each other, causing a race condition.
... first we'll
add a text box to our html so the user can enter their name: <label>your name: <input type="text" id="ajaxtextbox" /> </label> <span id="ajaxbutton" style="cursor: pointer; text-decoration: underline"> make a request </span> we'll also
add a line to our event handler to get the user's data from the text box and send it to the makerequest() function along with the url of our server-side script: ...
WAI ARIA Live Regions/API Support - Developer guides
these features will help screen reader developers improve the quality and performance of live region support, both for pages that are marked up with aria live region markup, and for pages where the author did not
add any
additional markup.
... atk/at-spi event iaccessible2 event object about to be hidden or removed children_changed::remove (fired on the parent, with event data pointing to the child index of the accessible object to be removed) event_object_hide* (fired on the actual accessible object about to go away) object shown or inserted children_changed::
add (fired on the parent, with event data pointing to the child index of the inserted accessible object) event_object_show* (fired on the actual new accessible object) object replaced with different object (this happens especially if an object's interfaces or role changes) children_changed::remove followed immediately by children_change::
add event_object_hide followed immediately by...
... following object attributes from the event object, if they are defined on some ancestor element (closest ancestor wins): object attribute name possible values default value if not specified meaning aria markup if required container-live "off" | "polite" | "assertive" "off" interruption policy aria-live on ancestor element container-relevant "[
additions] [removals] [text]" | "all" "
additions text" what types of mutations are possibly relevant?
Ajax - Developer guides
xpath xpath stands for xml path language, it uses a non-xml syntax that provides a flexible way of
addressing (pointing to) different parts of an xml document.
... as well as this, it can also be used to test
addressed nodes within a document to determine whether they match a pattern or not.
... html in xmlhttprequest the xmlhttprequest specification
adds html parsing support to xmlhttprequest, which originally supported only xml parsing.
Media buffering, seeking, and time ranges - Developer guides
dio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.
addeventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } thi...
... block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.
addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 10...
...0 + "%"; break; } } } }); myaudio.
addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.
Block formatting context - Developer guides
in
addition, it is potentially not readable for a future developer, as it might not be obvious why you used overflow for this purpose.
...root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; p
adding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the element itself.
...r: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; p
adding: 10px; } rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the right div.
Mouse gesture events - Developer guides
gecko 1.9.1
added support for several mozilla-specific dom events used to handle mouse gestures.
... note: these gesture events are available to
add-ons and other browser chrome code, but are never sent to regular web page content.
...event fields mouse gesture events have
additional fields providing information about the gesture.
HTML5 - Developer guides
using files from web applications support for the new html5 file api has been
added to gecko, making it possible for web applications to access local files selected by the user.
...they can control text-overflow and hyphenation, but also can
add a shadow to it or control more precisely its decorations.
... new presentational layouts in order to improve the flexibility of designs, two new layouts have been
added: the css multi-column layouts and css flexible box layout.
Writing forward-compatible websites - Developer guides
what this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification
adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it.
...as browsers converge behavior, they both
add features and remove them.
...then, if the default code path doesn't work in past versions of particular browsers and the breakage cannot be detected by sniffing for the absence of certain features your default code path uses, it's ok to
add hacks that are targeted to old versions of particular browsers by sniffing for those old browser versions.
HTML attribute: pattern - HTML: Hypertext Markup Language
additionally, include a title attribute which gives a description of the pattern.
...
additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.
...type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%; color: #999; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
opera, firefox, and some others
add a dotted underline to the content of the element.
... a few browsers not only
add a dotted underline, but also put it in small caps; to avoid this styling,
adding something like font-variant: none in the css takes care of this case.
... html <p>using <abbr>css</abbr>, you can style your abbreviations!</p> css abbr { font-variant: all-small-caps; } result providing an expansion
adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
when the names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); p
adding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text.
... in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the rtl text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); p
adding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements.
... these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); p
adding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification.
<footer> - HTML: Hypertext Markup Language
note that a <footer> element must not be a descendant of an <
address>, <header> or another <footer> element.
... usage notes enclose information about the author in an <
address> element that can be included into the <footer> element.
...to
address this,
add role="contentinfo" to the footer element.
<input type="color"> - HTML: Hypertext Markup Language
in
addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g.
... here's an example that watches changes over time to the color value: colorpicker.
addeventlistener("input", updatefirst, false); colorpicker.
addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a te...
... var colorwell; var defaultcolor = "#0000ff"; window.
addeventlistener("load", startup, false); initialization once the page is loaded, our load event handler, startup(), is called: function startup() { colorwell = document.queryselector("#colorwell"); colorwell.value = defaultcolor; colorwell.
addeventlistener("input", updatefirst, false); colorwell.
addeventlistener("change", updateall, false); colorwell.select(); } this gets a reference...
<input type="datetime-local"> - HTML: Hypertext Markup Language
additional attributes in
addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes: attribute description max the latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when clicking arrows on spinner controls or perform...
... div { margin-bottom: 10px; display: flex; align-items: center; } label { display: inline-block; width: 300px; } input:invalid+span:after { content: '✖'; p
adding-left: 5px; } input:valid+span:after { content: '✓'; p
adding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { p
adding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; p
adding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; p
adding-left: 5px; } the other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="datetime-local">, we create a new <input> element, try setting...
<input type="password"> - HTML: Hypertext Markup Language
additional attributes in
addition to the attributes that operate on all <input> elements regardless of their type, password field inputs support the following attributes: attribute description maxlength the maximum length the value may be, in utf-16 characters minlength the minimum length in characters that will be considered valid pattern a regul...
...
additionally, disabled field values aren't submitted with the form.
...in
addition, it allows the three groups of digits to be separated by a space, a dash ("-"), or nothing.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new performance and security features have been
added to the <link> element too.
...see cors settings attributes for
additional information.
... recommendation
added crossorigin and sizes attributes; extended values of media to any media queries;
added numerous new values for rel.
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
next would then
add, within the header of the html document, a special tag, <nextid n="z8">, to inform where to continue its naming convention.
...they want to
add a couple new sections after the second section, appending four more sections at the end.
...</p> </body> </html> they then forward a copy of this document to someone with a next editor, and they delete sections z7 and z19,
add ten more, z20 through z29, and then delete paragraphs z24 and z29.
<p>: The Paragraph element - HTML: Hypertext Markup Language
the end tag may be omitted if the <p> element is immediately followed by an <
address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
...switch back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').
addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into...
... using empty <p> elements to
add space between paragraphs is problematic for people who navigate with screen-reading technology.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
<strong>
adding to the confusion is the fact that while html 4 defined <strong> as simply indicating a stronger emphasis, html 5 defines <strong> as representing "strong importance for its contents." this is an important distinction to make.
..."i love carrots"), <strong> is used to give portions of a sentence
added importance (e.g., "warning!
... examples basic example <p>before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> the resulting output: labeling warnings <p><strong>important:</strong> before proceeding, make sure you
add plenty of butter.</p> this results in: specifications specification status comment html living standardthe definition of '<strong>' in that specification.
HTML: Hypertext Markup Language
use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a web page: dealing with titles,
adding images or videos, emphasizing content, creating a basic form, etc.
...these are
additional values that configure the elements or adjust their behavior in various ways.
... related topics applying color to html elements using css this article covers most of the ways you use css to
add color to html content, listing what parts of html documents can be colored and what css properties to use when doing so.
Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' - HTTP
the header itself accepts a comma-delineated list of origins, so
adding a new origin is not difficult.
... for example, in apache,
add a line such as the following to the server's configuration (within the appropriate <directory>, <location>, <files>, or <virtualhost> section).
... header set access-control-allow-origin 'origin-list' for nginx, the command to set up this header is:
add_header 'access-control-allow-origin' 'origin-list' ...
CORS errors - HTTP
(reason:
additional information here).
...part of the error text is a "reason" message that provides
added insight into what went wrong.
... reason: cors disabled reason: cors request did not succeed reason: cors header ‘origin’ cannot be
added reason: cors request external redirect not allowed reason: cors request not http reason: cors header ‘access-control-allow-origin’ missing reason: cors header ‘access-control-allow-origin’ does not match ‘xyz’ reason: credential is not supported if the cors header ‘access-control-allow-origin’ is ‘*’ reason: did not find method in cors header ‘access-control-allow-methods’ reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ reason: cors preflight channel did not succeed reason...
HTTP conditional requests - HTTP
the more flexible one makes use of if-unmodified-since and if-match and the server returns an error if the precondition fails; the client then restarts the download from the beginning: even if this method works, it
adds an extra response/request exchange when the document has been changed.
...rarely is such
additional flexibility needed.
...to prevent this, conditional requests can be used: by
adding if-none-match with the special value of '*', representing any etag.
Configuring servers for Ogg media - HTTP
most servers don't by default serve ogg media with the correct mime types, so you'll likely need to
add the appropriate configuration for this.
... for apache, you can
add the following to your configuration:
addtype audio/ogg .oga
addtype video/ogg .ogv
addtype application/ogg .ogg you can find specific information about possible media file types and the codecs used within them in our comprehensive guide to media types and formats on the web.
...in
addition, gecko uses byte-range requests to seek to the end of the media (assuming you serve the content-length header) in order to determine the duration of the media.
Content negotiation - HTTP
in
addition to these, there is an experimental proposal to
add more headers to the list of available headers, called client hints.
... the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a document entered in the
address bar or an element linked via an <img>, <video> or <audio> element.
... the vary header was
added in the version 1.1 of http and is necessary in order to allow caches to work appropriately.
Clear-Site-Data - HTTP
depending on the browser, this might also clear out things like pre-rendered pages, script caches, webgl shader caches, or
address bar suggestions.
...if more data types are
added in future versions of this header, they will also be covered by it.
...you can achieve that by
adding the clear-site-data header when sending the page confirming that logging out from the site has been accomplished successfully (https://example.com/logout, for example): clear-site-data: "cache", "cookies", "storage", "executioncontexts" clearing cookies if this header is delivered with the response at https://example.com/clear-cookies, all cookies on the same domain https://example.com and any subdomains (like https://stage.example.com, etc), will be cleared out.
CSP: base-uri - HTTP
owed 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 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.
... examples meta tag configuration <meta http-equiv="content-security-policy" content="base-uri 'self'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "base-uri 'self'"; </ifmodule> nginx configuration
add_header content-security-policy "base-uri 'self';" violation case since your domain isn't example.com, a <base> element with its href set to https://example.com will result in a csp violation.
CSP: default-src - HTTP
e-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.
... working draft
added frame-src, manifest-src and worker-src as defaults.
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.
... examples meta tag configuration <meta http-equiv="content-security-policy" content="form-action 'none'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "form-action 'none'; </ifmodule> nginx configuration
add_header content-security-policy "form-action 'none';" violation case using a <form> element with an action set to inline javascript will result in a csp violation.
CSP: script-src-attr - HTTP
or 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 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.
... todo:
add comprehensive examples.
CSP: script-src-elem - HTTP
or 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.
... todo:
add comprehensive examples.
CSP: script-src - HTTP
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.
... examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with
addeventlistener calls: document.getelementbyid("btn").
addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides.
CSP: style-src-attr - HTTP
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.
... examples todo:
add examples specifications specification status comment content security policy level 3the definition of 'style-src-attr' in that specification.
CSP: style-src-elem - HTTP
wed 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.
... examples todo:
add examples specifications specification status comment content security policy level 3the definition of 'style-src-elem' in that specification.
Forwarded - HTTP
this header is used for debugging, statistics, and generating location-dependent content and by design it exposes privacy sensitive information, such as the ip
address of the client.
...this can be either: an ip
address (v4 or v6, optionally with a port, and ipv6 quoted and enclosed in square brackets), an obfuscated identifier (such as "_hidden" or "_secret"), or "unknown" when the preceding entity is not known (and you still want to indicate that forwarding of the request was made).
...note that ipv6
address are quoted and enclosed in square brackets in forwarded.
Firefox user agent string reference - HTTP
onkey/2.7.1 seamonkey on mac mozilla/5.0 (macintosh; intel mac os x 10.5; rv:10.0.1) gecko/20100101 firefox/10.0.1 seamonkey/2.7.1 seamonkey on linux mozilla/5.0 (x11; linux i686; rv:10.0.1) gecko/20100101 firefox/10.0.1 seamonkey/2.7.1 implementation notes for applications, vendors, and extensions prior to firefox 4 and gecko 2.0, it was possible for extensions to
add user agent parts through the general.useragent.extra.identifier preferences, (see the obsolete user agent strings reference).
... in the past, specific plug-ins,
add-ons or extensions
added user agent parts to notify sites they were installed.
... see also firefox os user agent string (blog post w/bug 777710 reference) final user agent string for firefox 4 (blog post) recommendations on sniffing the ua string for cross-browser support window.navigator.useragent
add android version to fennec ua string (bug 1169772) comments to mozilla.dev.platform ...
HTTP Messages - HTTP
response headers, like vary and accept-ranges, give
additional information about the server which doesn't fit in the status line.
...this is an
additional step in http/2, between http/1.1 messages and the underlying transport protocol.
...the http/2 framing mechanism
adds a new intermediate layer between the http/1.x syntax and the underlying transport protocol, without fundamentally modifying it: building upon proven mechanisms.
Network Error Logging - HTTP
18, "method": "post", "phase": "dns", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "", "status_code": 0, "type": "dns.name_not_resolved", "url": "https://example-host.com/" } } the type of the network error may be one of the following pre-defined values from the specification, but browsers can
add and send their own error types: dns.unreachable the user's dns server is unreachable dns.name_not_resolved the user's dns server responded but was unable to resolve an ip
address for the requested uri.
...servfail) dns.
address_changed for security reasons, if the server ip
address that delivered the original report is different to the current server ip
address at time of error generation, the report data will be downgraded to only include information about this problem and the type set to dns.
address_changed.
... tcp.timed_out tcp connection to the server timed out tcp.closed the tcp connection was closed by the server tcp.reset the tcp connection was reset tcp.refused the tcp connection was refused by the server tcp.aborted the tcp connection was aborted tcp.
address_invalid the ip
address is invalid tcp.
address_unreachable the ip
address is unreachable tcp.failed the tcp connection failed due to reasons not covered by previous errors http.error the user agent successfully received a response, but it had a 4xx or 5xx status code http.protocol.error the connection was aborted due to an http protocol error http.response.invalid response is empty, has a content-length mismatch, has improper encoding, and/or other conditions that prevent user agent from processing the response http...
Control flow and error handling - JavaScript
for example, do not write code like this: // prone to being misread as "x == y" if (x = y) { /* statements here */ } if you need to use an assignment in a conditional expression, a common practice is to put
additional parentheses around the assignment, like this: if ((x = y)) { /* statements here */ } falsy values the following values evaluate to false (also known as falsy values): false undefined null 0 nan the empty string ("") all other values—including all objects—evaluate to true when passed to a conditional statement.
...it formats the message as an error, and
adds it to the list of error messages generated by the page.
...
additionally, the finally block executes before the code that follows the try…catch…finally statement.
Meta programming - JavaScript
additional examples are available on the proxy reference page.
... handler.defineproperty() object.defineproperty() reflect.defineproperty() a property cannot be
added if target is not extensible.
... a property cannot be
added as (or modified to be) non-configurable if it does not exist as a non-configurable own property of target.
Numbers and dates - JavaScript
in
addition to being able to represent floating-point numbers, the number type has three symbolic values: +infinity, -infinity, and nan (not-a-number).
... a more recent
addition to javascript is bigint which lets you represent integers that may be very large.
...if the value of minute is less than 10, the conditional expression
adds a string with a preceding zero; otherwise it
adds a string with a demarcating colon.
Regular expressions - JavaScript
if escape strings are not already part of your pattern you can
add them using string.replace: function escaperegexp(string) { return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } the "g" after the regular expression is an option or flag that performs a global search, looking in the whole string and returning all matches.
...there is a proposal to
add such a function to regexp, but it was rejected by tc39.
...they cannot be
added or removed later.
JavaScript technologies overview - JavaScript
introduction whereas html defines a webpage's structure and content and css sets the formatting and appearance, javascript
adds interactivity to a webpage and creates rich web applications.
... internationalization api the ecmascript internationalization api specification is an
addition to the ecmascript language specification, also standardized by ecma tc39.
...objects in the dom tree may be
addressed and manipulated by using methods on the objects.
TypeError: X.prototype.y called on incompatible type - JavaScript
message typeerror: 'this' is not a set object (edge) typeerror: function.prototype.tostring called on incompatible object (firefox) typeerror: function.prototype.bind called on incompatible target (firefox) typeerror: method set.prototype.
add called on incompatible receiver undefined (chrome) typeerror: bind must be called on a function (chrome) error type typeerror what went wrong?
... examples invalid cases var myset = new set; ['bar', 'baz'].foreach(myset.
add); // myset.
add is a function, but "myset" is not captured as this.
... valid cases var myset = new set; ['bar', 'baz'].foreach(myset.
add.bind(myset)); // this works due to binding "myset" as this.
Functions - JavaScript
defining method functions getter and setter functions you can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the
addition of new properties.
... a safer way to define functions conditionally is to assign a function expression to a variable: var zero; if (shoulddefinezero) { zero = function() { console.log("this is zero."); }; } examples returning a formatted number the following function returns a string containing the formatted representation of a number p
added with leading zeros.
... // this function returns a string p
added with leading zeros function padzeros(num, totallen) { var numstr = num.tostring(); // initialize return value as string var numzeros = totallen - numstr.length; // calculate no.
Array.prototype.reduceRight() - JavaScript
polyfill reduceright was
added to the ecma-262 standard in the 5th edition; as such it may not be present in all implementations of the standard.
...cat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] run a list of asynchronous functions with callbacks in series each passing their results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...results) => fn(composition, ...results), callback )(...args); const randint = max => math.floor(math.random() * max) const
add5 = (callback, x) => { settimeout(callback, randint(1000), x + 5); }; const mult3 = (callback, x) => { settimeout(callback, randint(1000), x * 3); }; const sub2 = (callback, x) => { settimeout(callback, randint(1000), x - 2); }; const split = (callback, x) => { settimeout(callback, randint(1000), x, x); }; const
add = (callback, x, y) => { settimeout(callback, randint(1000), x + y); }; c...
...onst div4 = (callback, x) => { settimeout(callback, randint(1000), x / 4); }; const computation = waterfall(
add5, mult3, sub2, split,
add, div4); computation(console.log, 5) // -> 14 // same as: const computation2 = (input, callback) => { const f6 = x=> div4(callback, x); const f5 = (x, y) =>
add(f6, x, y); const f4 = x => split(f5, x); const f3 = x => sub2(f4, x); const f2 = x => mult3(f3, x);
add5(f2, input); } difference between reduce and reduceright var a = ['1', '2', '3', '4', '5']; var left = a.reduce(function(prev, cur) { return prev + cur; }); var right = a.reduceright(function(prev, cur) { return prev + cur; }); console.log(left); // "12345" console.log(right); // "54321" defining composible function the concept of compose function is s...
Array.prototype.map() - JavaScript
each time callback executes, the returned value is
added to new_array.
... polyfill map was
added to the ecma-262 standard in the 5th edition.
...certain functions are also commonly used with one argument, even though they take
additional optional arguments.
Array.prototype.splice() - JavaScript
the splice() method changes the contents of an array by removing or replacing existing elements and/or
adding new elements in place.
...in this case, no element will be deleted but the method will behave as an
adding function,
adding as many element as item[n*] provided.
...optional the elements to
add to the array, beginning from start.
Intl.Locale.prototype.maximize() - JavaScript
syntax locale.maximize() return value a locale instance whose basename property returns the result of the
add likely subtags algorithm executed against locale.basename.
...the
add likely subtags algorithm gives us this functionality.
...the "latn" and "fr" tags are
added, // since french is only written in the latin script and is most likely to be spoken in france.
Map - JavaScript
performance performs better in scenarios involving frequent
additions and removals of key-value pairs.
... not optimized for frequent
additions and removals of key-value pairs.
... let contacts = new map() contacts.set('jessie', {phone: "213-555-1234",
address: "123 n 1st ave"}) contacts.has('jessie') // true contacts.get('hilary') // undefined contacts.set('hilary', {phone: "617-555-4321",
address: "321 s 2nd st"}) contacts.get('jessie') // {phone: "213-555-1234",
address: "123 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map object.
Object - JavaScript
object.defineproperty()
adds the named property described by a given descriptor to an object.
... object.defineproperties()
adds the named properties described by the given descriptors to an object.
... object.prototype.watch()
adds a watchpoint to a property of the object.
Set.prototype.delete() - JavaScript
examples using the delete() method const myset = new set(); myset.
add('foo'); myset.delete('bar'); // returns false.
... setobj.
add({x: 10, y: 20}); //
add object in the set.
... setobj.
add({x: 20, y: 30}); //
add object in the set.
TypedArray - JavaScript
additionally, all typed array prototypes (typedarray.prototype) have %typedarray%.prototype as their [[prototype]].
... the buffer
address is saved as an internal property of the instance and all the methods of %typedarray%.prototype, i.e.
... set value and get value etc., operate on that array buffer
address.
WeakSet() constructor - JavaScript
syntax new weakset([iterable]); parameters iterable if an iterable object is passed, all of its elements will be
added to the new weakset.
... examples using the weakset object var ws = new weakset(); var foo = {}; var bar = {}; ws.
add(foo); ws.
add(bar); ws.has(foo); // true ws.has(bar); // true ws.delete(foo); // removes foo from the set ws.has(foo); // false, foo has been removed ws.has(bar); // true, bar is retained note that foo !== bar.
...and so they are both
added to the set.
Operator precedence - JavaScript
observe how multiplication has higher precedence than
addition and executed first, even though
addition is written first in the code.
...
adding parentheses makes things clear: (3 > 2) > 1.
...ation - … prefix increment ++ … prefix decrement -- … typeof typeof … void void … delete delete … await await … 16 exponentiation right-to-left … ** … 15 multiplication left-to-right … * … division … / … remainder … % … 14
addition left-to-right … + … subtraction … - … 13 bitwise left shift left-to-right … << … bitwise right shift … >> … bitwise unsigned right shift … >>> … 12 less than left-to-right … < … less than or equal … <= … greater than … > … greater than or equal …...
delete operator - JavaScript
r, let, and const create non-configurable properties that cannot be deleted with the delete operator: var nameother = 'xyz'; // we can access this global property using: object.getownpropertydescriptor(window, 'nameother'); // output: object {value: "xyz", // writable: true, // enumerable: true, // configurable: false} // since "nameother" is
added using with the // var keyword, it is marked as "non-configurable" delete nameother; // return false in strict mode, this would have raised an exception.
...console.log(delete func); // false cross-browser notes although ecmascript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest
added property coming first (at least for properties not on the prototype).
...in explorer, while the property value is indeed set to undefined, if one later
adds back a property with the same name, the property will be iterated in its old position--not at the end of the iteration sequence as one might expect after having deleted the property and then
added it back.
var - JavaScript
in the global context, a variable declared using var is
added as a non-configurable property of the global object.
...the corresponding name is also
added to a list on the internal [[varnames]] slot on the global environment record (which forms part of the global lexical environment).
... note that in both nodejs commonjs modules and native ecmascript modules, top-level variable declarations are scoped to the module, and are not, therefore
added as properties to the global object.
Trailing commas - JavaScript
trailing commas (sometimes called "final commas") can be useful when
adding new elements, parameters, or properties to javascript code.
... if you want to
add a new property, you can simply
add a new line without modifying the previously last line if that line already uses a trailing comma.
... javascript has allowed trailing commas in array literals since the beginning, and later
added them to object literals (ecmascript 5) and most recently (ecmascript 2017) to function parameters.
JavaScript typed arrays - JavaScript
however, as web applications become more and more powerful,
adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data.
... web apis using typed arrays these are some examples of apis that make use of typed arrays; there are others, and more are being
added all the time.
...take precautions and considerations for these p
adding differences.
<math> - MathML
in
addition you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it.
... attributes in
addition to the following attributes, the <math> element accepts any attributes of the <mstyle> element.
...you can achieve that easily by
adding the .xhtml extension to your local files.
Using images in HTML - Web media technologies
in this guide you'll find links to resources that deal with
adding images to websites.
...it supports a wide range of attributes that control how the image behaves and allows you to
add important information like alt text for people who don't see the image.
...
additionally, this article provides guidance for selecting the best image file type for a given situation.
Recommended Web Performance Timings: How long is too long? - Web Performance
the first asset retrieved from a request is usually an html document, which then makes calls for
additional assets.
... as noted in the description of the critical rendering path, when received, browsers immediately start processing the html, rendering the content as it is received rather than waiting for
additional assets to load.
...there are different suggested times for initially loading the page versus loading
additional assets, responding to user interaction, and ensuring smooth animations: idling goal browsers are single threaded (though background threads are supported for web workers).
Using dns-prefetch - Web Performance
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.
...while dns caching can help to reduce this latency, dns resolution can
add significant latency to requests.
...browsers that don’t support preconnect will still get some
added benefit by falling back to dns-prefetch.
gradientTransform - SVG: Scalable Vector Graphics
the gradienttransform attribute contains the definition of an optional
additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox).
...this
additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
...gradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some
additional transformation from the gradient coordinate system onto the target coordinate system.
<a> - SVG: Scalable Vector Graphics
the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email
addresses, or any other url.
...3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered best practice to
add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
...for a more widely-supported feature
addressing the same use cases, see navigator.sendbeacon().
<feSpecularLighting> - SVG: Scalable Vector Graphics
the result of the lighting calculation is
added.
...such a map is intended to be combined with a texture using the
add term of the arithmetic <fecomposite> method.
... multiple light sources can be simulated by
adding several of these light maps before applying it to the texture image.
<set> - SVG: Scalable Vector Graphics
note: the <set> element is non-
additive.
... the
additive and accumulate attributes are not allowed, and will be ignored if specified.
... html,body,svg { height:100%; margin:0; p
adding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.
Namespaces crash course - SVG: Scalable Vector Graphics
to resolve these problems, dom level 2 core
added namespace aware equivalents of all the applicable dom level 1 methods.
... dom1 (don't use) dom2 (use these instead!) createattribute createattributens createelement createelementns getattributenode getattributenodens getattribute getattributens getelementsbytagname getelementsbytagnamens (also
added to element) getnameditem getnameditemns hasattribute hasattributens removeattribute removeattributens removenameditem removenameditemns setattribute setattributens setattributenode setattributenodens setnameditem setnameditemns the first parameter for all the dom2 namespace aware methods must be the names...
...it may save you from some annoying errors if you end up
adding content from one of the unused namespaces at a later date.
SVG animation with SMIL - SVG: Scalable Vector Graphics
smil allows you to: animate the numeric attributes of an element (x, y, ...) animate transform attributes (translation or rotation) animate color attributes follow a motion path this is done
adding an svg element like <animate> inside the svg element to animate.
...to do so, we
add an <animate> element inside the <circle> element.
... if you want to animate more attributes inside the same element, just
add more <animate> elements.
Filter effects - SVG: Scalable Vector Graphics
a basic example is to
add a blur effect to svg content.
...between the filter tags, goes a list of primitives, basic operations that build on top of the previous operations (like blurring,
adding a lighting effect, etc).
... step 5 <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> the second <fecomposite> takes in "sourcegraphic" and "specout",
adds the result of "specout" on top of "sourcegraphic", and stores the result in "litpaint".
Introduction - SVG: Scalable Vector Graphics
in
addition there is the <g> element, which is used to group several basic shapes together.
...it builds on top of svg 1.0, but
adds more modularization to ease implementation.
... there were plans for an svg print specification, which would
add support for multiple pages and enhanced color management.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
with the filter element <filter> it is possible to
add these effects and later on attach them to an object.
...instead we need to
add more filter primitives which will produce the desire rendering.
... by
adding feoffset and result, the effect layer is defined <result> attribute is a reference that can be use later.
SVG fonts - SVG: Scalable Vector Graphics
since accessing the correct font file is however crucial for rendering text correctly, a font description technology was
added to svg to provide this ability.
...it also shows how glyphs are created: by simply
adding any graphical svg content inside.
...for simple glyphs, however, you can simply
add a d attribute — this defines a shape for the glyph exactly like how standard svg paths work.
preferences/event-target - Archive of obsolete content
this enables
add-ons to listen to change events to the system-wide settings.
...you can also use the simple-prefs module to access just the preferences for your own
add-on and expose them to the user in the
add-on manager.
preferences/service - Archive of obsolete content
this enables
add-ons to get and set system-wide settings.
...you can also use the simple-prefs module to access just the preferences for your own
add-on and expose them to the user in the
add-on manager.
util/object - Archive of obsolete content
let { merge } = require("sdk/util/object"); var a = { jetpacks: "are yes", foo: 10 } var b = merge(a, { foo: 5, bar: 6 }, { foo: 50, location: "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.
... arguments : object n amount of
additional objects that are merged into source object.
Troubleshooting - Archive of obsolete content
if you're having trouble getting the
add-on sdk up and running, don't panic!
... when you run jpm to test your
add-on or run unit tests, it prints out the location of the firefox or xulrunner binary that it found, so you can check its output to be sure.
Drag & Drop - Archive of obsolete content
first, you need to hook up the basic drag event handlers: elem.
addeventlistener("dragover", _dragover, true); elem.
addeventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element.
...].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 (var i=0; i<dragsession.numdropitems; i++) { var uri = null; dragsession.getdata(trans, i); var flavor = {}, data = {}, length = {}; trans.getanytransferdata(flavor, data, length); if (data) { try { var str = data.value.queryinterface(components.interfaces.nsis...
Label and description - Archive of obsolete content
absolutely nothing!</description> with white-space: pre-wrap; all whitespace is rendered literally, but text is
additionally permitted to wrap at spaces.
... note: if running in a xulrunner application
add the following preferences to your default preferences file: pref("network.protocol-handler.expose.http", false); pref("network.protocol-handler.warn-external.http", false); change or
add additional protocols (https or ftp) as needed.
QuerySelector - Archive of obsolete content
// if you'd like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to
add chromewindow.prototype or window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): htmldocument.prototype.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.querys...
...or xul return this.queryselector(selector); }; alert(document.$('label')); // [object xulelement] ]]></script> document.prototype.$ = function (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); //
add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').nodename); // gives 'bar' element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagna...
SVG General - Archive of obsolete content
svg requires you to use setattributens to
add attributes to a newly created svg dom element.
...attr_map[attribute] : attribute); var value = attributes[attribute]; if (attribute in ns_map) elem.setattributens(ns_map[attribute], name, value); else elem.setattribute(name, value); } return elem; } attributes are packed in a literal object and the helper script unpacks them and
adds them to the element.
Sidebar - Archive of obsolete content
to open a page in the "viewwebpanelssidebar" from chrome code (browser/
addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element).
...for example, use this in your sidebar's unload event handler: mainwindow.document.getelementbyid("sidebar-splitter").hidden = mainwindow.document.getelementbyid("sidebar-box").hidden; see also bootstrap demo
addon that creates a sidebar with html content: https://gist.github.com/noitidart/8728393 ...
XPath - Archive of obsolete content
s moved from document.evaluate) obj.evaluate(xpathexpression,contextnode,namespaceresolver,resulttype,result); //obj and contextnode should be the same object, if context is a ajax xml object (example: returnedxml) this should be used as : returnedxml.evaluate(xpathexpression,returnedxml,namespaceresolver,returntype,result); //contextnode should be used in the one in which it was created //
add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.activ...
...(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //
add by mooring 2008-11-15 16:16 china ...
Displaying web content in an extension without security issues - Archive of obsolete content
so there is no chance of accidentally
adding new elements or attributes.
...ment() method should be used that is meant for just that scenario: var target = entry.getelementsbyclassname("description")[0]; var fragment = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(description, false, null, target); target.appendchild(fragment); this will
add the html code to the specified node — minus all the potentially dangerous content.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
- #include "nsastring.h"- #include "nsstring.h"- #include "nsreadableutils.h"- #include "nsescape.h" + #include "nsstringapi.h" on windows, if you see the following error, you are including a header you shouldn't be: nsstringfwd.h(60) : fatal error c1001: internal compiler error to debug this error, make in the failing directory,
adding the /showincludes directive to figure out what is being included incorrectly: make -c directory/that/failed os_cppflags=-showincludes the frozen string api is similar but not identical to the nonfrozen string api.
...(see xpcom:arrays.) nscomptr<nsisupportsarray> array; - rv = ns_newisupportsarray(getter_
addrefs(array)); + array = do_createinstance(ns_supportsarray_contractid); - nscomptr<nsiinputstream> rawstream;- rv = ns_newbyteinputstream(getter_
addrefs(rawstream),- (const char*)data, length); + nscomptr<nsistringinputstream> rawstream =+ do_createinstance(ns_stringinputstream_contractid, &rv);+ ns_ensure_success(rv, rv);++ rv = rawstream->setdata((const char*)data, ...
Using the Editor from XUL - Archive of obsolete content
in
addition, editor actions in the user interface are propagated via the xul and javascript, and call methods on the nseditorshell.
...it responds to the start of a drag in draggesture by
adding data to the drag, notifies the drag whether a drop can occur in dragover, and handles the drop by inserting data in dragdrop.
arrowscrollbox - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute...
assign - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] for xml templates, specifies an
additional variable to assign a value to.
...ign, , 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, getuserdata, hasattribute...
caption - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
... 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...
colorpicker - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... value property gets and sets color attribute 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...
commandset - Archive of obsolete content
in
addition, this element can hold a command updater which is used to update commands when certain events occur.
...ign, , 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, getuserdata, hasattribute...
dialogheader - Archive of obsolete content
for example, for a menuitem in a menu you can
add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in
addition to the dialog title.
...ign, , 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, getuserdata, hasattribute...
editor - Archive of obsolete content
html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.designmode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special formatting and other html pieces
added to it using the document.execcommand method: var editor = document.getelementbyid("myeditor"); // toggle bold for the current selection editor.contentdocument.execcommand("bold", false, null); see the midas overview for more command strings.
... 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...
keyset - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...ign, , 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, getuserdata, hasattribute...
listhead - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...ign, , 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, getuserdata, hasattribute...
listheader - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
...ign, , 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, getuserdata, hasattribute...
preference - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute...
prefpane - Archive of obsolete content
for example, if you are using a listbox and the user changes the contents of the listbox (such as
adding or removing an item) and you want to sync the changes back to a preference, you must write an onsynctopreference handler for your listbox that returns the value to be written to the preference element, and then call the userchangedvalue function every time you edit the list in a way that should cause the preference's value to change.
... 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(), haschildnodes(), insertbe...
progressmeter - Archive of obsolete content
in
addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined.
...ign, , 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, getuserdata, hasattribute...
promptBox - Archive of obsolete content
note: this is largely an implementation detail; if you're developing an
add-on, you shouldn't need to tinker with this.
...method overview nsidomelement appendprompt(args, onclosecallback); void removeprompt(nsidomelement aprompt); nodelist listprompts(nsidomelement aprompt); methods appendprompt() creates a new prompt,
adding it to the tab.
richlistitem - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
rule - Archive of obsolete content
the bindings element is optional and may specify
additional variable bindings to be used.
...ign, , 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, getuserdata, hasattribute...
scale - Archive of obsolete content
visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update
additional state.
... 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...
statusbar - Archive of obsolete content
i suggest using the
add-on bar instead.
...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, getuserdata, hasattribute...
toolbaritem - Archive of obsolete content
it is also used to group buttons together so they can be
added and removed all at once like firefox's unified-back-forward-button.
...ign, , 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, getuserdata, hasattribute...
toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, which are
added in the custom toolbar dialog.
...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, getuserdata, hasattribute...
wizardpage - Archive of obsolete content
attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive text to appear in
addition to the dialog title.
...object, 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...
Application Update - Archive of obsolete content
pref("app.update.showinstalledui", false); // 0 = suppress prompting for incompatibilities if there are updates available // to newer versions of installed
addons that resolve them.
... // 1 = suppress prompting for incompatibilities only if there are versioninfo // updates available to installed
addons that resolve them, not newer // versions.
XUL Application Packaging - Archive of obsolete content
xulrunner application packages are standard toolkit bundles (like a firefox extension), with one
additional manifest file (application.ini) which helps describe the application.
... optional - default is 0 note: this option does not
add menu items that make the extension/theme manager available in the ui; that is the responsibility of the application author.
calICalendarViewController - Archive of obsolete content
calendar/base/public/calicalendarviewcontroller.idlscriptable please
add a summary to this article.
...return this; }, createnewevent: function (acalendar, astarttime, aendtime) { // if we're given both times, skip the dialog if (astarttime && aendtime && !astarttime.isdate && !aendtime.isdate) { var event = createevent(); event.startdate = astarttime; event.enddate = aendtime; event.title = "new event"; acalendar.
additem(event, null); } else if (astarttime && astarttime.isdate) { var event = createevent(); event.startdate = astarttime; acalendar.
additem(event, null); } else { createeventwithdialog(acalendar, astarttime, aendtime); } }, modifyoccurrence: function (aoccurrence, anewstarttime, anewendtime) { // if we can mod...
2006-11-03 - Archive of obsolete content
request to
add option for removal of firefox profiles during setup or uninstall a user suggests an option to remove profiles during setup or uninstall.
... ff 1.5 hiding a user
adds their "two cents" about firefox 1.5 now being easily available for download.
2006-11-04 - Archive of obsolete content
to
add option for removal of firefox profiles during setup or uninstall a user suggests an option to remove profiles during setup or uninstall.
... 1.5 hiding a user
adds their "two cents" about firefox 1.5 now being easily available for download.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 18 - 24, 2006 announcements none for this week discussions issues with 2.0 features there's renewed discussion on why certain features were removed in the 2.0 release, and the
addition of support for s/mime and not pgp/gpg encryption.
...
additional links: bug 22687 and original newsgroup thread.
JavaScript-DOM Prototypes in Mozilla
but this is not good enough, in
addition to being able to share and represent each "class" with a constructor, we also want users to be able to extend interfaces, like node.
...this means you can
add a property to every node in a dom tree by doing something like this: node.prototype.foo = bar; again, modifying host objects is an unsafe practice.
UpdateCheckListener
updatechecklisteners are passed the results of update checks performed by the
addonupdatechecker.
... void onupdatecheckcomplete( in updateinfo results[] ) parameters results an array of updateinfo objects representing the available
add-on versions onupdatecheckerror() called when the update check fails.
DeferredTask.jsm
with deferredtask, the task is delayed by a few milliseconds and, should a new change to the data occur during this period, only the final version of the data is actually written; a further grace delay is
added to take into account other changes.
... for example, during shutdown, you may want to ensure that any pending write is processed, using the latest version of the data if the timer is armed: asyncshutdown.profilebeforechange.
addblocker( "example service: shutting down", () => savedeferredtask.finalize() ); instead, if you are going to delete the saved data from disk anyways, you might as well prevent any pending write from starting, while still ensuring that any write that is currently in progress terminates, so that the file is not in use any more: savedeferredtask.disarm(); savedeferredtask.finalize().then(() =>...
Http.jsm
additional xhr configuration it is possible to modify things manually on the xhr object after calling httprequest.
... httprequest returns an xhr object, which can be used to set
additional parameters for the request.
JNI.jsm
the most common use for this module is in
add-ons and other works on firefox for android (fennec).
... name: 'window_service', sig: sig.string } // http://developer.android.com/reference/android/content/context.html#window_service // public static final string window_service ] }); var windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.windowmanager), { methods: [ { name: '
addview', sig: '(' + sig.view + sig.viewgroup_layoutparams + ')' + sig.void }, { name: 'removeview', sig: '(' + sig.view + ')' + sig.void }] }); var acontext = geckoappshell.getcontext(); var wm = acontext.getsystemservice(context.window_service); var wm_casted = jni.classes.android.vi...
JavaScript OS.Constants
using os.constants from the main thread to initialize os.constants for use in the main thread,
add the following snippet to your code: components.classes["@mozilla.org/net/osfileconstantsservice;1"].
... 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.
NetUtil.jsm
note: support for specifying an nsiinputstream as the input source was
added in gecko 5.
... aoptions specifies
additional options to control the reading process.
Sqlite.jsm
note: the sqlite.jsm javascript code module can only be used from chrome -- that is, from within the application itself or an
add-on.
... it is possible to automatically close the connection when the browser is closed with the shutdown hook: const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); try { sqlite.shutdown.
addblocker("my connection closing", async () => await conn.close()); } catch (e) { // it's too late to block shutdown, just close the connection.
WebChannel.jsm
note that in
addition to the permission manager check, the request must be made over https.
... chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.
addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
Webapps.jsm
gisteractivitiesforapps: function(aappstoregister, arunupdate) _registeractivities: function(amanifest, aapp, arunupdate) _createactivitiestounregister: function(amanifest, aapp, aentrypoint) _unregisteractivitiesforapps: function(aappstounregister) _unregisteractivities: function(amanifest, aapp) _processmanifestforids: function(aids, arunupdate) observe: function(asubject, atopic, adata)
addmessagelistener: function(amsgnames, aapp, amm) removemessagelistener: function(amsgnames, amm) formatmessage: function(adata) receivemessage: function(amessage) getappinfo: function getappinfo(aappid) broadcastmessage: function broadcastmessage(amsgname, acontent) registerupdatehandler: function(ahandler) unregisterupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, ama...
...all: function(amanifesturl) _promptforuninstall: function(adata) confirmuninstall: function(adata) denyuninstall: function(adata, areason = "error_unknown_failure") getself: function(adata, amm) checkinstalled: function(adata, amm) getinstalled: function(adata, amm) getnotinstalled: function(adata, amm) geticon: function(adata, amm) getall: function(acallback) isreceipt: function(data)
addreceipt: function(adata, amm) removereceipt: function(adata, amm) replacereceipt: function(adata, amm) setenabled: function(adata) getmanifestfor: function(amanifesturl, aentrypoint) getappbymanifesturl: function(amanifesturl) getfullappbymanifesturl: function(amanifesturl, aentrypoint, alang) getmanifestcspbylocalid: function(alocalid) getdefaultcspbylocalid: function(alocalid) getapploc...
Bootstrapping a new locale
once you have that account, send the l10n-drivers the details to be
added as a "writer".
... cd mozilla-1.9.1 echo "mk_
add_options moz_objdir=@topsrcdir@/../fx-ab-dc" > .mozconfig echo "ac_
add_options --with-l10n-base=../" >> .mozconfig echo "ac_
add_options --disable-compile-environment" >> .mozconfig echo "ac_
add_options --enable-application=browser" >> .mozconfig make -f client.mk configure create a language pack first, we'll create a build directory.
L10n Checks
if you want to test the localization for de, run: check-l10n-completeness browser/locales/l10n.ini ../l10n/ de
add-ons (xpi) mode l10n checks gathers the locales to compare from the chrome.manifest file inside the xpi file.
...dkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and
added with a similar name.
Localization and Plurals
additionally, there is a brief description of each plural form, followed by some sample numbers that fall into that particular form.
...
additionally, the localizer has control over where the placeholder is, in relation to the rest of the text.
SVN for Localizers
when localizing websites, l10n-drivers will always
add needed files to your repository or update your files with new strings in english.
... make you sure you're checking out the repository with https:// make sure you're
adding a commit message when running svn commit.
Localization sign-off reviews
encoding some tools
add bom to utf-8 encoded files, and some change the encoding altogether.
...text in green font represent
additions you've made in this new revision.
NSS 3.42 release notes
new in nss 3.42 new functionality bug 818686 - support xdg basedir specification new functions none notable changes in nss 3.42 the following ca certificates were
added: none the following ca certificates were removed: none
added support for some of the testcases from the wycheproof project: bug 1508666 -
added aes-gcm test cases bug 1508673 -
added chacha20-poly1305 test cases bug 1514999 -
added the curve25519 test cases thanks to jonas allmann for adapting thes...
... bugs fixed in nss 3.42 bug 1490006 - reject invalid ch.legacy_version in tls 1.3 bug 1507135 and bug 1507174 -
add additional null checks to several cms functions to fix a rare cms crash.
NSS 3.43 release notes
note that while the mechanism is present, post-handshake authentication is currently not tls 1.3 compliant due to bug 1532312 notable changes in nss 3.43 the following ca certificates were
added: cn = emsign root ca - g1 sha-256 fingerprint: 40f6af0346a99aa1cd1d555a4e9cce62c7f9634603ee406615833dc8c8d00367 cn = emsign ecc root ca - g3 sha-256 fingerprint: 86a1ecba089c4a8d3bbe2734c612ba341d813e043cf9e8a862cd5c57a36bbe6b cn = emsign root ca - c1 sha-256 fingerprint: 125609aa301da0a249b97a8239cb6a34216f44dcac9f3954b14292f2e8c8608f cn = ems...
...lowing ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fallback bug 1531267 - enable fips mode automatically if the system fips mode flag is set bug 1528262 -
add a -j option to the strsclnt command to specify sigschemes bug 1513909 -
add manual for nss-policy-check bug 1531074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1535122 - align tls 1.3 hkdf trace levels bug 1530102 - use getentropy on compatible versions of freebsd.
NSS 3.44.1 release notes
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-20...
...19-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 compatibility nss 3.44.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.50 release notes
added nist sp800-108 kbkdf - pkcs#11 implementation.
...also included in nss 3.49.2) bug 1608895 - gyp builds on taskcluster broken by setuptools v45.0.0 (for lacking python3) bug 1574643 - upgrade hacl* verified implementations of chacha20, poly1305, and 64-bit curve25519 bug 1608327 - two problems with neon-specific code in freebl bug 1575843 - detect aarch64 cpu features on freebsd bug 1607099 - remove the buildbot configuration bug 1585429 -
add more hkdf test vectors bug 1573911 -
add more rsa test vectors bug 1605314 - compare all 8 bytes of an mp_digit when clamping in windows assembly/mp_comba bug 1604596 - update wycheproof vectors and
add support for cbc, p256-ecdh, and cmac tests bug 1608493 - use aes-ni for non-gcm aes ciphers on platforms with no assembly-optimized implementation, such as macos.
NSS Developer Tutorial
under certain circumstances, it is safe to
add new members to an exported struct at the end.
...we would need to
add a new function to provide the desired behavior.
NSS Sample Code Sample1
we will
add message protection (encryption and macing) examples to this program in the future.
...the secondary host sends its rsa public key to the primary host as // part of a request for a particular key, or to be
added to a list // of secondary hosts.
NSS Sample Code sample2
* note that some mechanisms (*_pad) imply the p
adding is handled for you * by nss.
... if you choose something else, then data p
adding is the * application's responsibility */ ciphermech = ckm_des_cbc_pad; slot = pk11_getbestslot(ciphermech, null); /* slot = pk11_getinternalkeyslot(); is a simpler alternative but in * theory, it *may not* return the optimal slot for the operation.
Utilities for nss samples
void *pwdata); /* * generaterandom */ extern secstatus generaterandom(unsigned char *rbuf, int rsize); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * filesize */ extern long filesize(const char* filename); /* * re
adderfromfile */ extern secstatus re
adderfromfile(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.
...pen noise file."); return secfailure; } do { count = pr_read(fd,buf,sizeof(buf)); if (count > 0) { pk11_randomupdate(buf,count); } } while (count > 0); pr_close(fd); return secsuccess; } /* * filesize */ long filesize(const char* filename) { struct stat stbuf; stat(filename, &stbuf); return stbuf.st_size; } /* * re
adderfromfile */ secstatus re
adderfromfile(secitem *der, const char *infilename, prbool ascii) { secstatus rv = secsuccess; prfiledesc *infile = null; infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "failed to open file \"%s\" (%ld, %ld).\n", infilename, pr_geterror(), pr_getoserror()); rv = secfailure; ...
NSS sources building testing
when
adding new features to nss, tests for the new feature should be
added as well.
...after the build on your computer has succeeded, before you can run the tests on your computer, it might be necessary to set
additional environment variables.
nss tech note5
note that some mechanisms (*_pad) imply the p
adding is handled for you by nss.
... if you choose something else, then data p
adding is the application's responsibility.
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.
... complete software development kit in
addition to libraries and apis, nss provides security tools required for debugging, diagnostics, certificate and key management, cryptography module management, and other development tasks.
PKCS 7 functions
function name/documentation source code nss versions sec_pkcs7
addcertificate mxr 3.3 and later sec_pkcs7
addrecipient mxr 3.2 and later sec_pkcs7
addsigningtime 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_pkcs7encoderupdate mxr 3.2 and later sec_pkcs7getcertificatelist mxr 3.2 and later sec_pkcs7getcontent mxr 3.2 and later sec_pkcs7getencryptionalgorithm mxr 3.2 and later sec_pkcs7getsignercommonname mxr 3.4 and later sec_pkcs7getsigneremail
address mxr 3.4 and later sec_pkcs7getsigningtime mxr 3.4 and later sec_pkcs7includecertchain mxr 3.2 and later sec_pkcs7iscontentempty mxr 3.2 and later sec_pkcs7setcontent mxr 3.4 and later sec_pkcs7verifydetachedsignature mxr 3.4 and later ...
FC_GetInfo
manufacturerid: the pkcs #11 library manufacturer, "mozilla foundation", p
added with spaces to 32 characters and not null-terminated.
... librarydescription: description of the library, "nss internal crypto services", p
added with spaces to 32 characters and not null-terminated.
FC_SeedRandom
name fc_seedrandom() - mix
additional seed material into the random number generator.
... description fc_seedrandom() mixes
additional seed material into the token's random number generator.
NSS_Initialize
certprefix [in] prefix
added to the beginning of the certificate database, for example, "https-server1-".
... keyprefix [in] prefix
added to the beginning of the key database, for example, "https-server1-".
JIT Optimization Strategies
unboxed property reads are possible on properties which satisfy all the characteristics of a definite slot, and
additionally have been observed to only store values of one kind of value.
...unboxed property writes are possible on properties which satisfy all the characteristics of a definite slot, and
additionally have been observed to only store values of one kind of value.
JS::AutoVectorRooter
there are derived classes for the main types: class parent class js::autovaluevector autovectorrooter<value> js::autoidvector autovectorrooter<jsid> js::autoobjectvector
added in spidermonkey 24 autovectorrooter<jsobject *> js::autofunctionvector
added in spidermonkey 31 autovectorrooter<jsfunction *> js::autoscriptvector autovectorrooter<jsscript *> see also mxr id search for js::autovectorrooter mxr id search for js::autovaluevector mxr id search for js::autoidvector mxr id search for js::autoobjectvector mxr id search for j...
...s::autofunctionvector mxr id search for js::autoscriptvector js::autovaluearray<n> - fixed-size array of js::value bug 677079 bug 868580 - expose js::autoobjectvector bug 848592 -
added js::autofunctionvector bug 676281 -
added js::autoscriptvector ...
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); ...
... bool 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 leng...
JS::IdentifyStandardInstance
syntax jsprotokey js::identifystandardinstance(jsobject *obj); jsprotokey js::identifystandardprototype(jsobject *obj); jsprotokey js::identifystandardinstanceorprototype(jsobject *obj); jsprotokey js::identifystandardconstructor(jsobject *obj); //
added in spidermonkey 38 name type description obj jsobject * pointer to the instance/prototype/constructor object to determine.
... see also mxr id search for js::identifystandardinstance mxr id search for js::identifystandardprototype mxr id search for js::identifystandardinstanceorprototype mxr id search for js::identifystandardconstructor jsprotokey bug 975277 bug 976148 -
added identifystandardconstructor ...
JSID_IS_STRING
syntax bool jsid_is_string(jsid id); jsstring * jsid_to_string(jsid id); jsid interned_string_to_jsid(jscontext *cx, jsstring *str); //
added in spidermonkey 38 jsflatstring * jsid_to_flat_string(jsid id); //
added in spidermonkey 17 name type description cx jscontext * pointer to a js context from which to derive runtime information.
... see also mxr id search for jsid_is_string mxr id search for jsid_to_string mxr id search for interned_string_to_jsid mxr id search for jsid_to_flat_string bug 609440 -
added jsid_to_flat_string bug 1045900 -
added interned_string_to_jsid ...
JSID_VOID
an
additional jsid which is used to indicate the absence of a valid jsid.
... syntax const jsid jsid_void; const js::handleid jsid_voidhandle; //
added in spidermonkey 31 description jsid_void does not occur in js scripts but may be used to indicate the absence of a valid jsid.
JSNewEnumerateOp
syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::autoidvector &properties); //
added in spidermonkeysidebar 38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mutablehandlevalue statep, js::mutablehandleid idp); // obsolete since jsapi 37 name type description cx jscontext * the context in which the enumeration is taking place.
...the properties each op
adds to the properties vector are
added to the set of values the for-in loop will iterate over.
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.
... see also mxr id search for jsprincipals js_newglobalobject js_holdprincipals js_dropprincipals bug 715417 - removed getprincipalarray and globalprivilegesenabled bug 728250 -
added dump method, removed codebase, destroy, and subsume properties bug 884676 - changed refcount type to mozilla::atomic ...
JSPropertySpec
const char *name; int8 tinyid; // obsolete since jsapi 31 uint8_t flags; union { jsnativewrapper native; selfhostedwrapper selfhosted; } getter; union { jsnativewrapper native; selfhostedwrapper selfhosted; } setter; /* obsolete since jsapi 29 */ /*
added in jsapi 28 */ const char *selfhostedgetter; const char *selfhostedsetter; }; name type description name const char * name to assign the property.
...to define an array of jspropertyspec, use js_psg, js_psgs, js_self_hosted_get, js_self_hosted_getset, and js_ps_end see also mxr id search for jspropertyspec jsfunctionspec jsnativewrapper js_defineproperties js_psg js_psgs js_self_hosted_get js_self_hosted_getset js_ps_end bug 766448 - changed type of getter and setter to wrapper bug 938728 -
added selfhostedgetter and selfhostedsetter bug 958262 - changed type of getter and setter to union, and removed selfhostedgetter and selfhostedsetter.
JSVAL_LOCK
to lock a value, use local roots with js_
addroot.
...see also jsval_is_gcthing jsval_to_gcthing jsval_unlock js_
addroot js_lockgcthing bug 787580 ...
JS_CallFunction
syntax /*
added in spidermonkey 31 */ bool js_callfunction(jscontext *cx, js::handleobject obj, js::handlefunction fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js_callfunctionname(jscontext *cx, js::handleobject obj, const char *name, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js_callfunctionvalue(jscontext *cx, js::handleobject obj, js::handlevalue fval, const js::handlevaluearray& args, js::mutablehandlevalue rval); /* obsolete since jsapi 30 */ bool js_callfunction(jscontext *cx, jsobject *obj, jsfunction *fun, unsigned argc, jsval *argv, jsval *rval); bool js_callfunctionname(jscontext *cx, jsobject *obj, con...
...
added in spidermonkey 31 argc unsigned number of arguments you are passing to the function.
JS_ConvertArgumentsVA
added in spidermonkey 31 argc unsigned the number of arguments to convert.
... see also mxr id search for js_convertargumentsva js_convertarguments bug 969798 -
added args bug 1125784 ...
JS_DefineConstDoubles
syntax bool js_defineconstdoubles(jscontext *cx, js::handleobject obj, const jsconstdoublespec *cds); bool js_defineconstintegers(jscontext *cx, js::handleobject obj, const jsconstintegerspec *cis); //
added in spidermonkey 38 name type description cx jscontext * the context in which to define the new properties.
...see also mxr id search for js_defineconstdoubles mxr id search for js_defineconstintegers jsconstdoublespec jsconstintegerspec js_defineelement js_defineproperties js_defineproperty js_definepropertywithtinyid bug 1066020 -
added js_defineconstintegers ...
JS_DeleteElement
syntax bool js_deleteelement(jscontext *cx, js::handleobject obj, uint32_t index); //
added in spidermonkey 45 bool js_deleteelement(jscontext *cx, js::handleobject obj, uint32_t index, js::objectopresult &result); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... see also mxr id search for js_deleteelement bug 1113369 --
added result parameter ...
JS_DeleteProperty
syntax bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, jsid id); //
added in spidermonkey 1.8.1 //
added in spidermonkey 45 bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name, js::objectopresult &result); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::objectopresult &result); bool js_deleteucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::objectopresult &result); name type description cx jscontext * pointer to a js context from which to derive runtime ...
... see also mxr id search for js_deleteproperty mxr id search for js_deletepropertybyid js_deleteproperty2 js_deletepropertybyid2 bug 461163 bug 1113369 --
added result parameter and js_deleteucproperty ...
JS_EncodeString
syntax char * js_encodestring(jscontext *cx, jsstring *str); char * js_encodestringtoutf8(jscontext *cx, js::handlestring str); //
added in spidermonkey 24 name type description cx jscontext * a context.
... on failure, js_encodestring and js_encodestringtoutf8 return null see also mxr id search for js_encodestring mxr id search for js_encodestringtoutf8 js_encodestringtobuffer bug 397215 -
added js_encodestring bug 835719 -
added js_encodestringtobuffer ...
JS_EnterLocalRootScope
to avoid calling js_
addroot and js_removeroot to manage global roots temporarily.
... js_
addroot roots a variable, ensuring that whatever the variable points to at any given moment is protected from gc.
JS_ExecuteScript
syntax bool js_executescript(jscontext *cx, js::handlescript script, js::mutablehandlevalue rval); //
added in spidermonkey 45 bool js_executescript(jscontext *cx, js::handlescript script); //
added in spidermonkey 45 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script, js::mutablehandlevalue rval); //
added in spidermonkey 36 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script); //
added in spidermonkey 36 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js_executescript(jscontext *cx, js::handleobject obj, j...
...s::handlescript script); // obsolete since jsapi 39 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsscript*> script); //
added in spidermonkey 45 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsscript*> script); //
added in spidermonkey 31, obsoleted since jsapi 39 name type description cx jscontext * the context in which to execute the script.
JS_GetFunctionId
syntax jsstring * js_getfunctionid(jsfunction *fun); jsstring * js_getfunctiondisplayid(jsfunction *fun); //
added in spidermonkey 17 name type description fun jsfunction * a javascript function.
... // a.d< -- the '<' loosely means "contributor to" return function() {}; // a.d })(); var foo = function() { // foo var bar = function() {}; // foo/bar }; settimeout(function() {}, 100); // no name, js_getfunctiondisplayid returns null see also mxr id search for js_getfunctionid mxr id search for js_getfunctiondisplayid bug 433529 -
added js_getfunctiondisplayid ...
JS_GetGCParameter
syntax uint32_t js_getgcparameter(jsruntime *rt, jsgcparamkey key); void js_setgcparameter(jsruntime *rt, jsgcparamkey key, uint32_t value); uint32_t js_getgcparameterforthread(jscontext *cx, jsgcparamkey key); //
added in spidermonkeysidebar 17 void js_setgcparameterforthread(jscontext *cx, jsgcparamkey key, uint32_t value); //
added in spidermonkeysidebar 17 name type description rt jsruntime * the runtime to configure.
...
additionally if a zone expands beyond the threshold without this factor, then it will be collected non-incrementally jsgc_allocation_threshold_factor_avoid_interrupt / "allocationthresholdfactoravoidinterrupt" jsgc_min_empty_chunk_count / "minemptychunkcount" we try to keep at least this many unused chunks in the free chunk pool at all times, even after a shrinking gc.
JS_GetOwnPropertyDescriptor
js::mutablehandle<jspropertydescriptor> desc); bool js_getownpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); bool js_getownucpropertydescriptor(jscontext *cx, js::handleobject obj, const char16_t *name, js::mutablehandle desc); //
added in spidermonkey 45 name type description cx jscontext * a context.
... see also mxr id search for js_getownpropertydescriptor mxr id search for js_getownpropertydescriptorbyid mxr id search for js_getownucpropertydescriptor js_getpropertydescriptor js_getpropertydescriptorbyid jspropertydescriptor bug 893186 bug 1135731 --
added js_getownpropertydescriptor ...
JS_GetPropertyDescriptor
syntax bool js_getpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandle<jspropertydescriptor> desc); //
added in spidermonkey 31 bool js_getpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); name type description cx jscontext * a context.
...see also mxr id search for js_getpropertydescriptor mxr id search for js_getpropertydescriptorbyid js_getownpropertydescriptor js_getownpropertydescriptorbyid jspropertydescriptor bug 482381 -
added js_getpropertydescriptorbyid bug 893186 -
added js_getpropertydescriptor ...
JS_InstanceOf
syntax bool js_instanceof(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, js::callargs *args); //
added in spidermonkey 38 bool js_instanceof(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, jsval *argv); // obsolete since jsapi 32 name type description cx jscontext * pointer to a js context from which to derive runtime information.
...
added in spidermonkey 38 argv jsval * optional argument vector.
JS_LookupProperty
text *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_lookupucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_lookuppropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); //
added in spidermonkey 1.8.1 bool js_lookupelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); // ---- obsolete since spidermonkey 31 ---- bool js_lookuppropertywithflags(jscontext *cx, js::handleobject obj, const char *name, unsigned flags, js::mutablehandlevalue vp); bool js_lookuppropertywithflagsbyid(jscontext *cx...
..., js::handleobject obj, js::handleid id, unsigned flags, js::mutablehandleobject objp, js::mutablehandlevalue vp); //
added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information.
JS_NewArrayObject
syntax jsobject * js_newarrayobject(jscontext *cx, const js::handlevaluearray& contents); //
added in spidermonkey 31 jsobject * js_newarrayobject(jscontext *cx, size_t length); //
added in spidermonkey 31 jsobject * js_newarrayobject(jscontext *cx, int length, jsval *vector); // obsolete since jsapi 30 name type description cx jscontext * the context in which to create the new array.
...
added in spidermonkey 31 length size_t or int the length of the new array.
JS_NewDoubleValue
the result is subject to garbage collection until you protect against it using a local root, an object property, or the js_
addroot function.
... this can be avoided by using the
address of a rooted variable as rval.
JS_NewNumberValue
in this case, the value is subject to garbage collection until you protect against it using a local root, an object property, or the js_
addroot function.
... this can be avoided by using the
address of a rooted variable as rval.
JS_PushArguments
cx also affects the interpretation of format, if js_
addargumentformatter has been called.
... this function also takes in consideration any
additional custom types defined in cx using js_
addargumentformatter.
JS_RemoveExternalStringFinalizer
as with js_
addexternalstringfinalizer, there is a threading restriction if you compile the engine js_threadsafe: this function may be called for a given finalizer pointer on only one thread; different threads may call to remove distinct finalizers safely.
... see also js_
addexternalstringfinalizer bug 724810 ...
JS_SetContextCallback
added in spidermonkey 31 callback syntax typedef bool (* jscontextcallback)(jscontext *cx, unsigned contextop, void *data); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions.
...
added in spidermonkey 31 typedef enum jscontextop { jscontext_new, jscontext_destroy } jscontextop; enumeration meaning jscontext_new js_newcontext successfully created a new jscontext instance.
nsMsgSearchAttrib
smsgsearchattribvalue sender = 1; const nsmsgsearchattribvalue body = 2; const nsmsgsearchattribvalue date = 3; const nsmsgsearchattribvalue priority = 4; /* mail only */ const nsmsgsearchattribvalue msgstatus = 5; const nsmsgsearchattribvalue to = 6; const nsmsgsearchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue all
addresses = 9; const nsmsgsearchattribvalue location = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchatt...
... const nsmsgsearchattribvalue name = 17; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue
additionalemail = 22; const nsmsgsearchattribvalue phonenumber = 23; const nsmsgsearchattribvalue workphone = 24; const nsmsgsearchattribvalue homephone = 25; const nsmsgsearchattribvalue fax = 26; const nsmsgsearchattribvalue pager = 27; const nsmsgsearchattribvalue mobile = 28; const nsmsgsearchattribvalue city = 29; const nsmsgsearchattribvalue street = 30; ...
XPCOM category image-sniffing-services
in versions of firefox prior to firefox 3, extensions could
add decoders for new image types.
...in firefox 3, a new xpcom category was
added in bug 391667 to allow "third-party" xpcom components to identify images based on their content.
xpidl
using xpidl to
add an idl file to the build, use the xpidlsrcs makefile variable.
...sting purposes, or one-off interface compilation, xpidl can be run from the command line: usage: ./xpidl -m mode [-w] [-v] [-t version number] [-d filename.pp] [-i path] [-o basename | -e filename.ext] filename.idl -a emit annotations to typelib -w turn on warnings (recommended) -v verbose mode (nyi) -t create a typelib of a specific version number -i
add entry to start of include path for ``#include "nsithing.idl" -o use basename (e.g.
XTF
the extensible tag framework (xtf) allows
adding support for new namespaces using xpcom components to mozilla (written in javascript or c++).
... for example, the mozilla xforms project uses xtf to
add support for the xforms namespace.
The Valgrind Test Job
add the following lines to your mozconfig file.
... ac_
add_options --enable-valgrind ac_
add_options --disable-jemalloc running to run the valgrind test job locally, run the following command.
nsIMsgCloudFileProvider
void uploadfile(in nsilocalfile afile, in nsirequestobserver acallback); acstring urlforfile(in nsilocalfile afile); void cancelfileupload(in nsilocalfile afile); void refreshuserinfo(in boolean awithui, in nsirequestobserver acallback); void deletefile(in nsilocalfile afile, in nsirequestobserver acallback); void createnewaccount(in acstring aemail
address, in acstring apassword, in acstring afirstname, in acstring alastname, in nsirequestobserver acallback); void createexistingaccount(in nsirequestobserver acallback); acstring providerurlforerror(in unsigned long aerror); attributes attribute type description type acstring readonly: the ...
... void createnewaccount(in acstring aemail
address, in acstring apassword, in acstring afirstname, in acstring alastname, in nsirequestobserver acallback); parameters aemail
address the new user account email
address.
Spam filtering
currently, spam filtering is does not work for news, but it would be possible to
add support for this.
... initial state user action table changes unknown (user can't see this, looks like "not junk") mark as junk
add tokens to bad unknown (user can't see this, looks like "not junk") mark as not junk
add tokens to good not junk mark as junk remove tokens from good,
add tokens to bad not junk mark as not junk no op junk mark as junk no op junk mark as not junk remove tokens from bad,
add tokens to good ...
Building a Thunderbird extension 1: introduction
the tutorial has the following pages: introduction (this page) the extension filesystem (setting up your local system) install manifest (the install.rdf file that contains meta-information about the extension) chrome manifest (list of packages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface)
adding javascript (explains how to
add some simple javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site or from http://
addons.mozilla.org/) this tutorial is compatible with thunderbird versions 2,3 and 5.
... 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.
Using C struct and pointers
additionally, the js-ctypes pointer must be casted to reflect the size of the buffer: var ptr = ctypes.cast( str, ctypes.arraytype( ctypes.char, buff_size ).ptr ); here buff_size is of type ctypes.size_t.
... once we have a ctypes char pointer that points to a buffer of known size, we modiify the contents of the memory block as follows: ptr.contents = string("hello world from javascript!!!"); string()
adds the '\0' character.
Working with ArrayBuffers
var casted = ctypes.cast(pixelbuffer.
address(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight * 4 because per pixel there is r, g, b, a numbers casted.tostring(); // "ctypes.uint8_t.array(640000)([45, 66, 135, 255, 99, 86, 55, 255, ..........
... method 2: manually handled another strategy is to handle it manually, as illustrated by the following code example: var casted = ctypes.cast(pixelbuffer.
address(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight *4 because per pixel there is r, g, b, a numbers /** method a **/ for (var nindex = 0; nindex < casted.length; nindex = nindex + 4) { // casted.length is same as myimgdat.data.length var r = casted[nindex]; var g = casted[nindex + 1]; var b = casted[nindex + 2]; var a...
StructType
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.
... cdata
addressoffield( name ); parameters name the name of the field whose
address is to be returned.
Blocking By Domain - Plugins
criteria in order to improve firefox security and performance, there are two major categories of sites mozilla may choose to
add to plugin domain blocking: sites commonly embedded in a 3rd-party context web sites which are commonly embedded into other sites using iframes can have a large impact on browser security and also cause many sites to show plugin activation prompts.
...in order to improve site performance and reduce the number of plugin prompts that users see, popular sites that show unnecessary plugin prompts or slow the browser down with unnecessary plugins will be
added to the plugin block list.
Streams - Plugins
to avoid allocating
additional buffers, the plug-in could return 4096, resulting in a call to npp_write with a buffer of up to 4k bytes.
...instead,
additional npp_writeready and npp_write calls occur on the same stream.
Examine, modify, and watch variables - Firefox Developer Tools
pointing your cursor at a variable's name displays a tooltip that provides
additional information about the variable.
...to
add a watch expression, click in the box that says "
add watch expression" and enter a javascript expression whose output you'd like to monitor as you step through code.
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".
...you can use this to modify an existing condition or to
add a condition to a normal breakpoint.
Debugger-API - Firefox Developer Tools
both firefox’s built-in developer tools and the firebug
add-on use debugger to implement their javascript debuggers.
...by design, it ought not to introduce security holes, so in principle it could be made available to content as well; but it is hard to justify the security risks of the
additional attack surface.
Edit fonts - Firefox Developer Tools
fonts editor firefox 63
adds the font editor — a new area below "fonts used" with
additional controls for editing the fonts’ characteristics.
... variable font support in firefox developer tools firefox 62
added support for variable fonts and firefox 63 features support for editing the properties of variable fonts in the font editor.
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { p
adding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#sele...
...utton != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.
addeventlistener("click", toggleselection); ...
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { p
adding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100...
...keyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.reverse(); noteanimation.reverse(); } } document.
addeventlistener("click", animatechannel); ...
Animating CSS properties - Firefox Developer Tools
there are a number of elements, and we've
added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint.
...it's unlikely you'll see a smooth animation here, especially when you
add in user interaction.
Intensive JavaScript - Firefox Developer Tools
ns = 50; const multiplier = 1000000000; var worker = new worker("js/calculate.js"); function dopointlesscomputationsinworker() { function handleworkercompletion(message) { if (message.data.command == "done") { pointlesscomputationsbutton.disabled = false; console.log(message.data.primes); worker.removeeventlistener("message", handleworkercompletion); } } worker.
addeventlistener("message", handleworkercompletion, false); worker.postmessage({ "multiplier": multiplier, "iterations": iterations }); } the main difference here, compared with the original, is that we need to: create a worker send it a message when we are ready to calculate listen for a message called "done", which indicates that the worker has finished.
... then we need a new file "calculate.js", that looks like this: self.
addeventlistener("message", go); function go(message) { var iterations = message.data.iterations; var multiplier = message.data.multiplier; primes = calculateprimes(iterations, multiplier); self.postmessage({ "command":"done", "primes": primes }); } function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } return primes; } in the worker, we have t...
Waterfall - Firefox Developer Tools
adding markers with the console api two markers are directly controlled by console api calls: "console" and "timestamp".
... for example, consider code like this: var timerbutton = document.getelementbyid("timer"); timerbutton.
addeventlistener("click", handleclick, false); function handleclick() { console.time("timer"); runtimer(1000).then(timerfinished); } function timerfinished() { console.timeend("timer"); console.log("ready!"); } function runtimer(t) { return new promise(function(resolve) { settimeout(resolve, t); }); } the waterfall will display a marker for the period between time() and timeend(),...
Cookies - Firefox Developer Tools
you can edit cookies by double-clicking inside cells in the table widget and editing the values they contain, and
add new cookies by clicking the "plus" (+) button and then editing the resulting new row to the value you want.
... context menu the context menu for each cookie includes the following commands:
add item -
add a new cookie.
Storage Inspector - Firefox Developer Tools
the tree is live, so if a new origin gets
added (by
adding an iframe, for example), it will be
added to each storage type automatically.
...
add and refresh storage you'll also have buttons available to
add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't
add new entries to indexeddb or cache): sidebar when you select any row in the storage table widget, the sidebar is shown with details about that row.
Toolbox - Firefox Developer Tools
extra tools next there's an array of buttons that can be
added or removed in the developer tool settings.
... the following tools are not included in the toolbar by default, but you can
add them in the settings: highlight painted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the br...
View Source - Firefox Developer Tools
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.
... link to a line number it is possible to link to a particular line, by
adding the #linennn anchor to the url the browser will jump to the nnn line.
AbortSignal - Web APIs
events listen to this event using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.
addeventlistener('click', fetchvideo); abortbtn.
addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbsoluteOrientationSensor - Web APIs
const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.
addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.
addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requesting permissions for multiple device sensors.
Ambient Light Events - Web APIs
this event can be captured at the window object level by using the
addeventlistener method (using the devicelight event name) or by attaching an event handler to the window.ondevicelight property.
... example if ('ondevicelight' in window) { window.
addeventlistener('devicelight', function(event) { var body = document.queryselector('body'); if (event.value < 50) { body.classlist.
add('darklight'); body.classlist.remove('brightlight'); } else { body.classlist.
add('brightlight'); body.classlist.remove('darklight'); } }); } else { console.log('devicelight event not supported'); } specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
Animation.onfinish - Web APIs
here is one instance where we
add pointer events back to an element after its opacity animation has faded it in: //
add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits.
... hide(endingui); // when the credits are later faded in, // we re-
add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status comment web animationsthe definition of 'animation.onfinish' in that specification.
Animation.pause() - Web APIs
ation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause();
additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; // when the user releases the cupcake or the bottle, pause the animations.
... cake.
addeventlistener("mouseup", stopplayingalice, false); bottle.
addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
bottle.
addeventlistener("mousedown", shrinkalice, false); bottle.
addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow.
... cake.
addeventlistener("mousedown", growalice, false); cake.
addeventlistener("touchstart", growalice, false); in another example, the red queen's race game, alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.
addeventlistener("click", gofaster); document.
addeventlistener("touchstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specificatio...
Animation.startTime - Web APIs
*/ function
addcat(){ var newcat = document.createelement("div"); newcat.classlist.
add("cat"); return newcat; } /* this is the function that
adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat =
addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start...
... time to be the same as the original .cat#withwaapi newanimationplayer.starttime = catrunning.starttime; //
add the cat to the pile.
Attr - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
... living standard
added ownerelement property back dom4the definition of 'attr' in that specification.
AudioContext.createMediaStreamDestination() - Web APIs
this stream can be used in a similar way as a mediastream obtained via navigator.getusermedia — it can, for example, be sent to a remote peer using the rtcpeerconnection
addstream() method.
...opus file </p> <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.
addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.target.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push eac...
AudioScheduledSourceNode - Web APIs
methods inherits methods from its parent interface, audionode, and
adds the following methods: start() schedules the node to begin playing the constant sound at the specified time.
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended fired when the source node 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.
AudioTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property onchange examples using
addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.
addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.
addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = docu...
...ment.queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.
addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
AudioTrackList.onchange - Web APIs
the event is passed into the event handler in the form of an event object; the event doesn't provide any
additional information.
... note: you can also
add a handler for the change event using
addeventlistener().
AudioWorkletProcessor() - Web APIs
processoroptions optional any
additional data that can be used for custom initialization of the underlying audioworkletprocessor.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.
addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor', { processoroptions: { someusefulvariable: new map([[1, 'one'], [2, 'two']]) } }) the console output will be as follows: > 1 // audioworkletnode options.numberofinputs set to default > map(2) {1 => "one", 2 => "two"} // a cloned map under someusefulvariable specifications specifi...
AudioWorkletProcessor - Web APIs
processing audio an example algorithm of creating a custom audio processing mechanism is: create a separate file; in the file: extend the audioworkletprocessor class (see "deriving classes" section) and supply your own process() method in it; register the processor using audioworkletglobalscope.registerprocessor() method; load the file using
addmodule() method on your audio context's audioworklet property; create an audioworkletnode based on the processor.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.
addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status comment web audio apithe definition of 'audioworkletprocessor' in that specification.
BaseAudioContext.createDynamicsCompressor() - Web APIs
example the below code demonstrates a simple usage of createdynamicscompressor() to
add compression to an audio track.
... var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; 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.
BasicCardResponse.cardNumber - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
... billing
address is a payment
address object } } specifications specification status comment basic card paymentthe definition of 'cardnumber' in that specification.
BasicCardResponse.cardSecurityCode - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
... billing
address is a payment
address object } } specifications specification status comment basic card paymentthe definition of 'cardsecuritycode' in that specification.
BasicCardResponse.cardholderName - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
... billing
address is a payment
address object } } specifications specification status comment basic card paymentthe definition of 'cardholdername' in that specification.
BasicCardResponse.expiryMonth - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
... billing
address is a payment
address object } } specifications specification status comment basic card paymentthe definition of 'expirymonth' in that specification.
BasicCardResponse.expiryYear - Web APIs
dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billing
address" : { "country" : "gb", // etc.
... billing
address is a payment
address object } } specifications specification status comment basic card paymentthe definition of 'expiryyear' in that specification.
BatteryManager - Web APIs
methods inherited from eventtarget: eventtarget.
addeventlistener() registers an event handler of a specific event type on the eventtarget.
...
additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties.
Battery Status API - Web APIs
navigator.getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.
addeventlistener('chargingchange', function(){ updatechargeinfo(); }); function updatechargeinfo(){ console.log("battery charging?
..."yes" : "no")); } battery.
addeventlistener('levelchange', function(){ updatelevelinfo(); }); function updatelevelinfo(){ console.log("battery level: " + battery.level * 100 + "%"); } battery.
addeventlistener('chargingtimechange', function(){ updatecharginginfo(); }); function updatecharginginfo(){ console.log("battery charging time: " + battery.chargingtime + " seconds"); } battery.
addeventlistener('dischargingtimechange', function(){ updatedischarginginfo(); }); function updatedischarginginfo(){ console.log("battery discharging time: " + battery.dischargingtime + " seconds"); } }); see also the example in the specification.
Beacon API - Web APIs
the beacon interface
addresses the needs of analytics and diagnostics code that typically attempts to send data to a web server before unloading the document.
...the beacon api provides a standard way to
address these issues.
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment...
... example window.
addeventlistener("beforeinstallprompt", function(e) { // log the platforms provided as options in an install prompt console.log(e.platforms); // e.g., ["web", "android", "windows"] e.userchoice.then(function(choiceresult) { console.log(choiceresult.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
... bluetoothdevice.
addata read only an instance of bluetoothadvertisingdata containing the most recent advertising data received for the device.
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas...
... living standard re-
added in issue #295 due to web breakage dom4the definition of 'cdatasection' in that specification.
CSS - Web APIs
working draft
adds the paintworklet static property.
... working draft
adds the escape() static method.
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20...
... csscounterstylerule.
additivesymbols is a domstring object that contains the serialization of the
additive-symbols descriptor defined for the associated rule.
CSSMathSum - Web APIs
the cssmathsum interface of the css typed object model api represents the result obtained by calling
add(), sub(), or tosum() on cssnumericvalue.
... <div>has width</div> we assign a width div { width: calc(30% - 20px); } we
add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( stylem...
CSSMathValue - Web APIs
<div>has width</div> we assign a width with a calculation div { width: calc(30% - 20px); } we
add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].value ); // -20 the cssmathvalue.operator returns 'sum' because stylemap.get('width').val...
...ues[1].value ); is -20:
adding a negative number.
CSSStyleSheet.insertRule() - Web APIs
mystyle.insertrule('#blanc { color: white }', 0); function to
add a stylesheet rule /** *
add a stylesheet rule to the document (it may be better practice * to dynamically change classes, so style information can be kept in * genuine stylesheets and avoid
adding extra elements to the dom).
... * @param {array} rules accepts an array of json-encoded declarations * @example
addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ function
addstylesheetrules (rules) { var styleel = document.createelement('style'); // append <style> element to <head> document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) { var j = 1, ...
CSSStyleSheet - Web APIs
this is normally used to access individual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.length-1 to
add or remove items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods.
...
addrule()
adds a new rule to the stylesheet given the selector to which the style applies and the style block to apply to the matching elements.
Determining the dimensions of elements - Web APIs
if you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), p
adding, and border, you want to use the htmlelement.offsetwidth and htmlelement.offsetheight properties.
... if you need to know how much space the actual displayed content takes up, including p
adding but not including the border, margins, or scrollbars, you want to use the element.clientwidth and element.clientheight properties: how big is the content?
Managing screen orientation - Web APIs
nullam quis malesuada est.</p> css relies on the orientation media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; p
adding: .5em; } ul { list-style: none; font : 1em monospace; margin : 0; p
adding: .5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; p
adding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on to...
... screen.
addeventlistener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any web application can lock the screen to suits its own needs.
CSS Painting API - Web APIs
examples to draw directly into an element's background using javascript in our css, we define a paint worklet using the registerpaint() function, tell the document to include the worklet using the paintworklet
addmodule() method, then include the image we created using the css paint() function.
...i> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.
addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); then we can use the <image> with the css paint() function: li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) {...
CSS Typed Object Model API - Web APIs
stylepropertymap.append() method that
adds a new css declaration to the stylepropertymap with the given property and value.
... cssnumericvalue an interface representing operations that all numeric values can perform, including: cssnumericvalue.
add -
adds supplied numbers to the cssnumericvalue.
CacheStorage.has() - Web APIs
if so, we
add a list of assets to it.
... caches.has('v1').then(function(hascache) { if (!hascache) { somecachesetupfunction(); } else { caches.open('v1').then(function(cache) { return cache.
addall(myassets); }); } }).catch(function() { // handle exception here.
CacheStorage.open() - Web APIs
this consists of calling cachestorage.open() to create a new cache, then using cache.
addall() to
add a series of assets to it.
... self.
addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.
addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); specifications specification status comment service workersthe definition of 'cachestorage: open' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
note: be aware that the clipping region is only constructed from shapes
added to the path.
...instead, you'd have to use rect() to
add a rectangular shape to the path before calling clip().
CanvasRenderingContext2D.lineTo() - Web APIs
the canvasrenderingcontext2d method lineto(), part of the canvas 2d api,
adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically
adds to the current sub-path, which means that all the lines will all be stroked or filled together.
CanvasRenderingContext2D.translate() - Web APIs
the canvasrenderingcontext2d.translate() method of the canvas 2d api
adds a translation transformation to the current matrix.
... syntax void ctx.translate(x, y); the translate() method
adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid.
Compositing example - Web APIs
the new shape is drawn behind the canvas content.', 'where both shapes overlap the color is determined by
adding color values.', 'only the new shape is shown.', 'shapes are made transparent where both overlap and drawn normal everywhere else.', 'the pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer.
...alfwidth = width / 2; var rotate = (1 / 360) * math.pi * 2; // per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <= 359; n ++) { var gradient = ctx.createlineargradient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s: 100, v: 100 }); gradient.
addcolorstop(0, "rgba(0,0,0,0)"); gradient.
addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.
addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill();...
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco...
... living standard
added implemention of the childnode and nondocumenttypechildnode interface.
ChildNode - Web APIs
added the remove(), before(), after() and replacewith() methods.
... obsolete
added the initial definition of its properties to the elementtraversal pure interface and use it on element.
Client.postMessage() - Web APIs
examples sending a message from a service worker to a client:
addeventlistener('fetch', event => { event.waituntil(async function() { // exit early if we don't have access to the client.
... client.postmessage({ msg: "hey i just got a fetch from you!", url: event.request.url }); }()); }); receiving that message: navigator.serviceworker.
addeventlistener('message', event => { console.log(event.data.msg, event.data.url); }); specifications specification status comment service workersthe definition of 'postmessage()' in that specification.
Clients.openWindow() - Web APIs
in chrome for android, the method may instead open the url in an existing browsing context provided by a standalone web app previously
added to the user's home screen.
... send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.
addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the window clients e.waituntil(clients.matchall({ type: 'window' }).then(clientsarr => { // if a window tab matching the targeted url already exists, focus that; const hadwindowtofocus = clientsarr.some(windowclient => windowclient.url === e.notification.data.url ?
Clipboard - Web APIs
clipboard availability the asynchronous clipboard api is a relatively recent
addition, and the process of implementing it in browsers is not yet complete.
... in
addition, read() and write() are disabled by default and require changing a preference to enable them.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... living standard
added the constructor.
ConstantSourceNode - Web APIs
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.
... properties inherits properties from its parent interface, audioscheduledsourcenode, and
adds the following properties: offset an audioparam which specifies the value that this source continuously outputs.
ContentIndexEvent - Web APIs
properties in
addition to the properties listed below, this interface inherits the properties of its parent interface, extendableevent.
... self.
addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); specifications specification status comment unknownthe definition of 'contentindexevent' in that specification.
CustomElementRegistry.define() - Web APIs
; style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'p
adding: 10px;' + 'background: white;' + 'border-radius: 10px;' + 'opacity: 0;' + 'transition: 0.6s all;' + 'position: absolute;' + 'bottom: 20px;' + 'left: 10px;' + 'z-index: 3;' ...
...constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and
add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-...
DOMException - Web APIs
candidate recommendation
adds the constructor for the domexception class.
...
adds the notreadableerror, unknownerror, constrainterror, dataerror, transactioninactiveerror, readonlyerror, versionerror, operationerror, and notallowederror values.
DataTransfer.clearData() - Web APIs
</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; p
adding: 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', dragendhandler); dropable.
addeventlistener('dragover', dragoverhandler); dropable.
addeventlistener('dragleave', dragleavehandler); dropable.
addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
DataTransfer.dropEffect - Web APIs
</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css content div { margin: 0em; p
adding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its...
... tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // get the id of the target and
add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } specifications specification status comment html living standard...
DataTransfer.effectAllowed - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{dropeffect,effectallowed} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; p
adding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); //
add this element's id to the drag payload so the drop handler will // know which element to
add ...
...to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // get the id of the target and
add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples <code>datatransfer</code>.{<code>dropeffect</code>, <code>effectallow...
DataTransfer.items - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; p
adding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(e...
...v) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and
add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
DataTransfer.types - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; p
adding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); //
add this element's id to the drag payload so the drop handler will // know which element to
add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(e...
...v) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and
add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
Using light sensors - Web APIs
10 ~ 50 lux : dim environment 100 ~ 1000 lux : normal > 10000 lux : bright it uses the
addeventlistener method of the window object.
... window.
addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value; alert(luminosity); }); example: window.
addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { alert('hey, you!
DisplayMediaStreamConstraints - Web APIs
if a mediatrackconstraints object is provided here, an audio track is included in the stream, but the audio is processed to match the specified constraints after being retrieved from the hardware but before being
added to the mediastream.
...optionally, a mediatrackconstraints object may be given, providing options specifying processing to be performed on the video data before
adding it to the stream.
Document: animationcancel event - Web APIs
examples this code
adds a listener to the animationcancel event.
... document.
addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of
addeventlistener(): document.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.
Document.createDocumentFragment() - Web APIs
creates a new empty documentfragment into which dom nodes can be
added to build an offscreen dom tree.
... you can also use the documentfragment constructor to create a new fragment: let fragment = new documentfragment(); example this example creates a list of major web browsers in a documentfragment, then
adds the new dom subtree to the document to be displayed.
Document.createProcessingInstruction() - Web APIs
obsolete
added more explicit definition of how the data parameter is validated.
... obsolete
added note that the namespace of the target name is not checked whether it is well-formed, defined what is considered an illegal character for the target name and specified the returned processinginstruction object more precisely.
Document: fullscreenchange event - Web APIs
examples in this example, a handler for the fullscreenchange event is
added to the document.
... document.
addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
Document: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.
addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples
addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key.
...by clicking in it), then try pressing some keys.</p> <p id="log"></p> document.
addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent document.onkeydown = logkey; specifications specification status ui events working draft ...
Element.animate() - Web APIs
add dictates an
additive effect, where each successive iteration builds on the last.
... draft
added the iterationcomposite option.
Element: auxclick event - Web APIs
additionally, you may need to avoid opening a system context menu after a right click.
... return math.floor(math.random() * number); } function randomcolor() { return `rgb(${random(255)}, ${random(255)}, ${random(255)})`; } button.onclick = function() { button.style.backgroundcolor = randomcolor(); }; button.onauxclick = function(e) { e.preventdefault(); button.style.color = randomcolor(); } button.oncontextmenu = function(e) { e.preventdefault(); } notice that in
addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied.
Element: blur event - Web APIs
cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.
addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.
addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of
addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.
addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.
addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft
added info that this event is composed.
Element: click event - Web APIs
add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>.
... html <button>click</button> javascript const button = document.queryselector('button'); button.
addeventlistener('click', event => { button.innerhtml = `click count: ${event.detail}`; }); result try making rapid, repeated clicks on the button to increase the click count.
Element.clientHeight - Web APIs
it includes p
adding but excludes borders, margins, and horizontal scrollbars (if present).
... clientheight can be calculated as: css height + css p
adding - height of horizontal scrollbar (if present).
Element: focus event - Web APIs
cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.
addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.
addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of
addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.
addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.
addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft
added info that this event is composed.
Element.getElementsByClassName() - Web APIs
as new elements that match names are
added to the subtree, they immediately appear in the collection.
... var matches = element.getelementsbyclassname('colorbox'); for (var i=0; i<matches.length; i++) { matches[i].classlist.remove('colorbox'); matches.item(i).classlist.
add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.length > 0) { matches.item(0).classlist.
add('hueframe'); matches[0].classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class,
adds the class "hueframe", by calling item(0), then removes "colorbox" (using array notation).
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.
...note that the existing text node is not
added to — further text nodes are created containing the new
additions.
Element: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.
addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples
addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
... <input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.
addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples
addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.
addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications specification status ui events working draft ...
Element: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.
addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples
addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
... <input placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.
addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; p
adding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.
addeventlistener("overflow", function( event ) { console.log( event ); }, f...
...alse); wrapper.
addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.
addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element.scrollTop - Web APIs
example p
adding-top if you can see this, scrolltop = 0 lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...if you can see this, scrolltop is maxed-out p
adding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status comment css object model (cssom) view modulethe definition of 'scrolltop' in that specification.
Element.scrollWidth - Web APIs
the width is measured in the same way as clientwidth: it includes the element's p
adding, but not its border, margin or vertical scrollbar (if present).
...yid('anotherdiv'); //check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.
addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.
addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px; color: black; p
adding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.
addeventlistener("mousedown", mousedown, false); btn.
addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtml = "sorr...
...y, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.target.setcapture(); e.target.
addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on th...
Element.shadowRoot - Web APIs
use element.attachshadow() to
add a shadow root to an existing element.
... connectedcallback() { console.log('custom square element
added to page.'); updatestyle(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we get a reference to the shadow dom using element.shadowroot.
Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; p
adding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.
addeventlistener("overflow", function( event ) { console.log( event ); }, f...
...alse); wrapper.
addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.
addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; p
adding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom;
addeventlistener equivalent the event handler can also be set up using the
addeventl...
...istener() method: el.
addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" ...
... living standard
added the error property and the 5th parameter to the constructor.
Comparison of Event Targets - Web APIs
examples <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; p
adding: 5px; min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target...
...l = e.relatedtarget; document.getelementbyid('explicitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.getelementbyid('originaltarget').innerhtml = e.originaltarget; } function handlemouseover(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.
addeventlistener('click', handleclicks, false); document.
addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.
FetchEvent.replacesClientId - Web APIs
additionally, if the fetch isn't a navigation, replacesclientid will be an empty string.
... example self.
addeventlistener('fetch', function(event) { console.log(event.replacesclientid); }); specifications specification status comment service workersthe definition of 'replacesclientid' in that specification.
FetchEvent - Web APIs
self.
addeventlistener('fetch', event => { // let the browser do its default thing // for non-get requests.
... event.waituntil(cache.
add(event.request)); return cachedresponse; } // if we didn't find a match in the cache, use the network.
FileError - Web APIs
it extends the fileerror interface described in file writer and
adds several new error codes.
...a web app could fail for various reasons, so you don't want to spend the rest of your day guessing what's going on and going through m
addening troubleshooting.
FileException - Web APIs
it extends the fileexception interface described in file writer and
adds several new error codes.
...the
added complexity of using webworkers with this api makes debugging even more challenging.
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.
addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselect...
...or('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.
addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
FileReader - Web APIs
as filereader inherits from eventtarget, all those events can also be listened for by using the
addeventlistener method.
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
FileSystemDirectoryEntry.getDirectory() - Web APIs
let dictionary = null; function lo
addictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.
addeventlistener("loadend", function() { dictionary = json.parse(reader.result); ...
... }); reader.readastext(dictfile); }); }); }); } the lo
addictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
FileSystemDirectoryEntry.getFile() - Web APIs
let dictionary = null; function lo
addictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.
addeventlistener("loadend", function() { dictionary = json.parse(reader.result); ...
... }); reader.readastext(dictfile); }); }); }); } the lo
addictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
Introduction to the File and Directory Entries API - Web APIs
each of the apis
adds different functionality.
...the api is a better choice for apps that deal with blobs for the following reasons: the file and directory entries api offers client-side storage for use cases that are not
addressed by databases.
FormData - Web APIs
methods formdata.append() appends a new value onto an existing key inside a formdata object, or
adds the key if it does not already exist.
... formdata.set() sets a new value for an existing key inside a formdata object, or
adds the key/value if it does not already exist.
Gamepad - Web APIs
a gamepad object can be returned in one of two ways: via the gamepad property of the gamepadconnected and gamep
addisconnected events, or by grabbing any position in the array returned by the navigator.getgamepads() method.
... example window.
addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
GamepadEvent.gamepad - Web APIs
the gamepadevent.gamepad property of the gamepadevent interface returns a gamepad object, providing access to the associated gamepad data for fired gamepadconnected and gamep
addisconnected events.
... window.
addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
GeolocationCoordinates.longitude - Web APIs
let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("latitude"); let longtext = document.getelementbyid("longitude"); button.
addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude an...
...d logitude will be drawn, the event listener is established by calling
addeventlistener() on the <button> element.
Using the Geolocation API - Web APIs
body { p
adding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; functi...
...e: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').
addeventlistener('click', geofindme); result ...
GlobalEventHandlers.onanimationcancel - Web APIs
el="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; p
adding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, le...
... function handlecancelevent(event) { log("animation canceled", event); }; then we
add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "hide/show" the box button: document.getelementbyid('togglebox').
addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex"; document.getelementbyid("togglebox").innerhtml = "hide the box"; } else { box.style.display = "non...
GlobalEventHandlers.onclick - Web APIs
note: when using the click event to trigger an action, also consider
adding this same action to the keydown event, to allow the use of that same action by people who don't use a mouse or a touch screen.
...you may prefer to use the eventtarget.
addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.oncontextmenu - Web APIs
you may prefer to use the eventtarget.
addeventlistener() method instead, since it's more flexible.
... } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.
add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifications specification status comment html living standardthe defi...
GlobalEventHandlers.ontransitioncancel - Web APIs
in
addition, we also use a click event to make the box dissappear (display: none;), showing how it triggers the transitioncancel event to fire.
... .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; p
adding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg)...
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,...
... the following properties have been
added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload.
HTMLCanvasElement.toBlob() - Web APIs
ar canvas = document.getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg = document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked url.revokeobjecturl(url); }; newimg.src = url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you
add a second parameter to the toblob() call, you can specify the image type.
...) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/
add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or
add-on code as os apis are not present on web sites.
HTMLDetailsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailsele...
... events listen to this event using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLDialogElement: cancel event - Web APIs
nt handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.
addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.
addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const...
... closebutton = document.queryselector('.close'); closebutton.
addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'cancel' in that specification.
HTMLDialogElement: close event - Web APIs
ler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.
addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.
addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const ...
...closebutton = document.queryselector('.close'); closebutton.
addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'close' in that specification.
HTMLDialogElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div>...
...'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.
addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.
addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also)...
HTMLElement: change event - Web APIs
alue="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.
addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
... html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.
addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLElement.hidden - Web APIs
javascript document.getelementbyid("okbutton") .
addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
... .panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; p
adding: 12px; width: 500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; p
adding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; } result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in that specification.
HTMLElement.offsetHeight - Web APIs
the htmlelement.offsetheight read-only property returns the height of an element, including vertical p
adding and borders, as an integer.
... typically, offsetheight is a measurement in pixels of the element's css height, including any borders, p
adding, and horizontal scrollbars (if rendered).
HTMLFormElement: submit event - Web APIs
examples this example uses eventtarget.
addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form.
...time stamp: ${event.timestamp}`; event.preventdefault(); } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.
addeventlistener('submit', logsubmit); result specifications specification status comment html living standardthe definition of 'submit' in that specification.
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
... living standard the color property has been
added, as an obsolete property, to increase compatibility with the existing web.
HTMLImageElement.border - Web APIs
for compatibility (or perhaps other) reasons, you can use the older properties instead (or in
addition): border-top-width, border-right-width, border-bottom-width, and border-left-width.
... for example, if you have the following html: <img src="image.png" border="2"> the following will provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide
additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimageelement.border' in that specification.
HTMLImageElement.loading - Web APIs
example the
addimagetolist() function shown below
adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed.
... function
addimagetolist(url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status comment html living standardthe definition of 'htmlimageelement.loading' in that specification.
HTMLImageElement.naturalHeight - Web APIs
css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { p
adding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%).
... javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.
addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
HTMLImageElement.naturalWidth - Web APIs
css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { p
adding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%).
... javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.
addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
HTMLImageElement.sizes - Web APIs
i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; p
adding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascr...
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.
addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.
addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLImageElement.useMap - Web APIs
you can learn more about client-side image maps in our learning article
add a hitmap on top of an image.
...der a <map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for
additional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps.
HTMLImageElement.x - Web APIs
in the diagram below, the left border edge is the left edge of the blue p
adding area.
... css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); p
adding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
HTMLImageElement.y - Web APIs
in the diagram below, the top border edge is the top edge of the blue p
adding area.
... css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); p
adding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
HTMLInputElement: search event - Web APIs
current ua implementations of <input type="search"> have an
additional control to clear the field.
... examples //
addeventlistener version const input = document.queryselector('input[type="search"]'); input.
addeventlistener('search', () => { console.log("the term searched for was " + input.value); }) // onsearch version const input = document.queryselector('input[type="search"]'); input.onsearch = () => { console.log("the term searched for was " + input.value); }) specifications this event is not part of any specification.
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
... the following property has been
added: control.
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="...
... recommendation
adds the images property.
HTMLMediaElement.audioTracks - Web APIs
the returned list is live; that is, as tracks are
added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new audio tracks are
added or existing ones removed.
HTMLMediaElement: canplay event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplay specification html5 media examples these examples
add an event listener for the htmlmediaelement's canplay event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specifications specification status html living standardthe definition of 'canplay media event' in that specification.
HTMLMediaElement: canplaythrough event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplaythrough specification html5 media examples these examples
add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('canplaythrough', (event) => { console.log('i think i can play through the entire ' + ' video without ever having to stop to buffer.'); }); using the oncanplaythrough event handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specifications specification status html living standardthe definition of 'canplaythrough media event' in that specification.
HTMLMediaElement: durationchange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ondurationchange specification html5 media examples these examples
add an event listener for the htmlmediaelement's durationchange event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('durationchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselector('video'); video.ondurationchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status html living standardthe definition of 'durationchange media event' in that specification.
HTMLMediaElement: emptied event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onemptied specification html5 media examples these examples
add an event listener for the htmlmediaelement's emptied event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('emptied', (event) => { console.log('uh oh.
HTMLMediaElement: ended event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onended specification html5 media this event is also defined in media capture and streams and web audio api examples these examples
add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('ended', (event) => { console.log('video stopped either because 1) it was over, ' + 'or 2) no further data is available.'); }); using the onended event handler property: const video = document.queryselector('video'); video.onended = (event) => { console.log('video stopped either because 1) it was over, ' + 'or 2) no further data is available.'); }; specifications specification status html living standardthe definition of 'ended media event' in that specification.
HTMLMediaElement: loadeddata event - Web APIs
examples these examples
add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('loadeddata', (event) => { console.log('yay!
HTMLMediaElement: loadstart event - Web APIs
examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "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.location.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); ...
HTMLMediaElement: pause event - Web APIs
general info bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onpause specification html5 media examples these examples
add an event listener for the htmlmediaelement's pause event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('pause', (event) => { console.log('the boolean paused property is now true.
HTMLMediaElement: play event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplay specification html5 media examples these examples
add an event listener for the htmlmediaelement's play event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('play', (event) => { console.log('the boolean paused property is now false.
HTMLMediaElement: playing event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplaying specification html5 media examples these examples
add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specifications specification status html living standardthe definition of 'playing media event' in that specification.
HTMLMediaElement: progress event - Web APIs
examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; p
adding: .2rem; } .example { display: grid; grid-template-areas: "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.location.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(sou...
HTMLMediaElement: ratechange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onratechange specification html5 media examples these examples
add an event listener for the htmlmediaelement's ratechange event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the playback rate changed.'); }; specifications specification status html living standardthe definition of 'ratechange media event' in that specification.
HTMLMediaElement: seeked event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeked specification html5 media examples these examples
add an event listener for the htmlmediaelement's seeked event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('seeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the playback position it was looking for.'); }; specifications specification status html living standardthe definition of 'seeked media event' in that specification.
HTMLMediaElement: seeking event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeking specification html5 media examples these examples
add an event listener for the htmlmediaelement's seeking event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video = document.queryselector('video'); video.onseeking = (event) => { console.log('video is seeking a new position.'); }; specifications specification status html living standardthe definition of 'seeking media event' in that specification.
HTMLMediaElement: stalled event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onstalled specification html5 media examples these examples
add an event listener for the htmlmediaelement's stalled event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specifications specification status html living standardthe definition of 'stalled media event' in that specification.
HTMLMediaElement: suspend event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onsuspend specification html5 media examples these examples
add an event listener for the htmlmediaelement's suspend event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specifications specification status html living standardthe definition of 'suspend media event' in that specification.
HTMLMediaElement: timeupdate event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ontimeupdate specification html5 media examples these examples
add an event listener for the htmlmediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('timeupdate', (event) => { console.log('the currenttime attribute has been updated.
HTMLMediaElement.videoTracks - Web APIs
the returned list is live; that is, as tracks are
added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new video tracks are
added or existing ones removed.
HTMLMediaElement: volumechange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onvolumechange specification html5 media examples these examples
add an event listener for the htmlmediaelement's volumechange event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('volumechange', (event) => { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('the volume changed.'); }; specifications specification status html living standardthe definition of 'volumechange media event' in that specification.
HTMLMediaElement: waiting event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onwaiting specification html5 media examples these examples
add an event listener for the htmlmediaelement's waiting event, then post a message when that event handler has reacted to the event firing.
... using
addeventlistener(): const video = document.queryselector('video'); video.
addeventlistener('waiting', (event) => { console.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => { console.log('video is waiting for more data.'); }; specifications specification status html living standardthe definition of 'waiting media event' in that specification.
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
... recommendation
added the reversed property.
Option() - Web APIs
examples just
add new options /* assuming we have the following html <select id='s'> </select> */ var s = document.getelementbyid('s'); var options = [four, five, six]; options.foreach(function(element,key) { s[key] = new option(element,key); }); append options with different parameters /* assuming we have the following html <select id="s"> <option>first</option> <option>second</option> <op...
...tion>third</option> </select> */ var s = document.getelementbyid('s'); var options = [ 'zero', 'one', 'two' ]; options.foreach(function(element, key) { if (element == 'zero') { s[s.options.length] = new option(element, s.options.length, false, false); } if (element == 'one') { s[s.options.length] = new option(element, s.options.length, true, false); // will
add the "selected" attribute } if (element == 'two') { s[s.options.length] = new option(element, s.options.length, false, true); // just will be selected in "view" } }); /* result <select id="s"> <option value="0">zero</option> <option value="1" selected="">one</option> <option value="2">two</option> // user will see this as 'selected' </select> */ specification specification status comment...
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="...
... recommendation a constructor, option(), has been
added.
HTMLOptionsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas...
...you can either remove options from the end by lowering the value, or
add blank options at the end by raising the value.
HTMLOrForeignElement.dataset - Web APIs
in
addition to the information below, you'll find a how-to guide for using html data attributes in our article using data attributes.
... camelcase to dash-style conversion the opposite transformation, which maps a key to an attribute name, uses the following rules: restriction: before the transformation, a dash must not be immediately followed by an ascii lowercase letter a to z; the prefix data- is
added; any ascii uppercase letter a to z is transformed into a dash, followed by its lowercase counterpart; other characters are left unchanged.
HTMLSlotElement: slotchange event - Web APIs
add or delete) the actual nodes themselves.
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].
addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the <slot>s, then
add a slotchange event listener to the template's second slot — which is the one which has its contents changed in the example.
HTMLSpanElement - Web APIs
the htmlspanelement interface represents a <span> element and derives from the htmlelement interface, but without implementing any
additional properties or methods.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
HTMLTableElement.createCaption() - Web APIs
the caption does not need to be
added separately as would be the case if document.createelement() had been used to create the new <caption> element.
... syntax htmltableelement = table.createcaption(); return value htmltablecaptionelement example this example uses javascript to
add a caption to a table that initially lacks one.
HTMLTableElement.insertRow() - Web APIs
(to be valid html, a <tr> must have at least one <td> element.) finally, we
add some text to the cell using document.createtextnode() and node.appendchild().
... html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function
addrow(tableid) { // get a reference to the table let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call
addrow() with the table's id
addrow('my-table'); result specifications specification status comment html living standardthe definition of 'htmltableelement.insertrow()' in that specification.
HTMLTableRowElement.insertCell() - Web APIs
(to be valid html, a <tr> must have at least one <td> element.) finally, we
add some text to the cell using document.createtextnode() and node.appendchild().
... html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function
addrow(tableid) { // get a reference to the table let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call
addrow() with the table's id
addrow('my-table'); result specifications specification status comment html living standardthe definition of 'htmltablerowelement.insertcell()' in that specification.
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
...the htmlcollection is live and is automatically updated when cells are
added or removed.
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
...the htmlcollection is live and is automatically updated when rows are
added or removed.
HTMLTrackElement: cuechange event - Web APIs
bubbles no cancelable no interface event event handler oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the
addeventlistener() method: track.
addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event ...
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.
addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in
addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification...
HTMLUnknownElement - Web APIs
the htmlunknownelement interface represents an invalid html element and derives from the htmlelement interface, but without implementing any
additional properties or methods.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-...
...listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
... examples syntax options for a hash change you can listen for the hashchange event using any of the following options: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.
addeventlistener("hashchange", funcref, false); basic example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } } window.
addeventlistener('hashchange', locationhashchanged); polyfill there are several fallback scripts listed on the modernizr github page.
Headers() - Web APIs
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could
add a header to this using headers.append: myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' or you can
add the headers you want as the headers object is created.
... in the following snippet we create a new headers object,
adding some headers by passing the constructor an init object as an argument: var httpheaders = { 'content-type' : 'image/jpeg', 'accept-charset' : 'utf-8', 'x-my-custom-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.get('content-type'); // would return 'image/jpeg' — it inherits it from the first headers object specifications specification status comment fetchthe definition of 'headers()' in that specification.
Headers.get() - Web APIs
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty myheaders.get('not-set'); // returns null you could
add a header to this using headers.append, then retrieve it using get(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns "image/jpeg" if the header has multiple values associated with it, the byte string will contain all the values, in the order they were
added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept...
...-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns "deflate,gzip" note: headers.getall used to have this functionality, with headers.get returning only the first value
added to the headers object.
Headers.getAll() - Web APIs
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could
add a header to this using headers.append, then retrieve it using getall(): myheaders.append('content-type', 'image/jpeg'); myheaders.getall('content-type'); // returns [ "image/jpeg" ] if the header has multiple values associated with it, the array will contain all the values, in the order they were
added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('ac...
...cept-encoding', 'gzip'); myheaders.getall('accept-encoding'); // returns [ "deflate", "gzip" ] note: use headers.get to return only the first value
added to the headers object.
Headers.set() - Web APIs
the set() method of the headers interface sets a new value for an existing header inside a headers object, or
adds the header if it does not already exist.
... example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could
add a header to this using headers.append, then set a new value for this header using set(): myheaders.append('content-type', 'image/jpeg'); myheaders.set('content-type', 'text/html'); if the specified header does not already exist, set() will create it and set its value to the specified value.
History.back() - Web APIs
add a listener for the popstate event in order to determine when the navigation has completed.
... html <button id="go-back">go back!</button> javascript document.getelementbyid('go-back').
addeventlistener('click', () => { history.back(); }); specifications specification status comment html living standardthe definition of 'history.back()' in that specification.
History.forward() - Web APIs
add a listener for the popstate event in order to determine when the navigation has completed.
... html <button id='go-forward'>go forward!</button> javascript document.getelementbyid('go-forward').
addeventlistener('click', e => { window.history.forward(); }) specifications specification status comment html living standardthe definition of 'history' in that specification.
Ajax navigation example - Web APIs
genbmjaejsxgmlwzpeaach5bakkaaaalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); }; window.
addeventlistener ?
...
addeventlistener("load", init, false) : window.attachevent ?
Working with the History API - Web APIs
html5 introduced the pushstate() and replacestate() methods for
add and modifying history entries, respectively.
...
adding and modifying history entries using pushstate() changes the referrer that gets used in the http header for xmlhttprequest objects created after you change the state.
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success,
adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstor...
...e.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.
addeventlistener('success', event => { const db = event.target.result; db.
addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'task...
IDBDatabase - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
IDBObjectStore.createIndex() - Web APIs
multientry if true, the index will
add an entry in the index for each array element when the keypath resolves to an array.
... if false, it will
add one single entry containing the array.
IDBObjectStore.put() - Web APIs
this is for
adding new records, or updating existing records in an object store when the transaction's mode is readwrite.
...see the idbobjectstore.
add method for an insert only method.
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using
addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); obj...
...e.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.
addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var...
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,...
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
IDBRequest.error - Web APIs
you get this error, for example, if you try to
add a new key that already exists in the record.
... in
addition to the error codes sent to the idbrequest object, asynchronous operations can also raise exceptions.
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using
addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('mi...
...nutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.
addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstor...
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
IDBTransaction.commit() - Web APIs
examples // open a read/write db transaction, ready for
adding the data var transaction = db.transaction(["mydb"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("myobjstore"); //
add our newitem object to the object store var objectstorerequest = objectstore.
add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // force the changes to be committed to the database asap transaction.commit(); specification specification status comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification.
Basic concepts - Web APIs
they have onsuccess and onerror properties, and you can call
addeventlistener() and removeeventlistener() on them.
... in
addition, be aware that browsers can wipe out the database, such as in the following conditions: the user requests a wipe out.
InputEvent.data - Web APIs
examples in the following simple example we've set up an event listener on the input event so that when any change is made to the contents of the <input> element (either by typing or pasting), the text that was
added is retrieved via the inputevent.data property and reported in the paragraph below the input.
... <p>some text to copy and paste.</p> <input type="text"> <p class="result"></p> var editable = document.queryselector('input') var result = document.queryselector('.result'); editable.
addeventlistener('input', (e) => { result.textcontent = "inputted text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
the datatransfer read-only property of the inputevent interface returns a datatransfer object containing information about richtext or plaintext data being
added to or removed from editible content.
...<p><span style="font-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.
addeventlistener('input', (e) => { result.textcontent = e.datatransfer.getdata('text/html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
InputEvent.inputType - Web APIs
html <p id="log">input type: </p> <div contenteditable="true" style="margin: 20px;p
adding: 20px;border:2px dashed red;"> <p>some sample text.
... try inserting line breaks, or deleting text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = document.getelementbyid('log'); const editable = document.queryselector('div[contenteditable]'); editable.
addeventlistener('input', loginputtype); function loginputtype(event) { log.textcontent = `input type: ${event.inputtype}`; } result try editing the text inside the <div> and see what happens.
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86"...
... inputevent.datatransferread only returns a datatransfer object containing information about richtext or plaintext data being
added to or removed from editable content.
InstallTrigger - Web APIs
the installtrigger interface is an interesting outlier in the apps api; it's included in this api but are inherited from the old mozilla xpinstall technology for installing
add-ons.
... it is used for triggering the download and installation of an
add-on (or anything packaged in an .xpi file) from a web page, using javascript code to kick off the install process.
IntersectionObserver.rootMargin - Web APIs
each side of the rectangle represented by rootmargin is
added to the corresponding side in the root element's bounding box before the intersection test is performed.
...these offsets are
added to the corresponding values in the root's bounding box before the intersection between the resulting rectangle and the target element's bounds.
KeyframeEffectOptions - Web APIs
add dictates an
additive effect, where each successive iteration builds on the last.
... draft
added the iterationcomposite option.
MSCandidateWindowShow - Web APIs
syntax event property object.oncandidatewindowshow = handler;
addeventlistener method object.
addeventlistener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetinputcontext(); context.
addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getcandidatewindowclientrect(); var suggestionrect = document.getelementbyid("mysuggestionlist").getboundingclientrect(); // check if the two rects intersect, and position them away from each other.
MediaDevices: devicechange event - Web APIs
it's a generic event with no
added properties.
... bubbles no cancelable no interface event event handler ondevicechange example you can use the devicechange event in an
addeventlistener method: navigator.mediadevices.
addeventlistener('devicechange', function(event) { updatedevicelist(); }); or use the ondevicechange event handler property: navigator.mediadevices.ondevicechange = function(event) { updatedevicelist(); } specifications specification status media capture and streamsthe definition of 'devicechange' in that specification.
MediaDevices.ondevicechange - Web APIs
list" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; p
adding: 6px; } javascript content other code below is other code which, whi...
... let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").
addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44100, samplesize: 16, volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global variables that contain references to the <ul> elements that are u...
MediaError.message - Web APIs
this lets us see the behavior of the error event handler, which is received by an event handler we
add to the <audio> element itself.
... the error's code attribute is checked to determine a generic error message to display, and, if message is not empty, it's appended to provide
additional details.
msExtendedCode - Web APIs
example var video1 = object.getelementbyid("video1"); video1.
addeventlistener('error', function () { var error = video1.error.msextendedcode; //...
... }, false); video.
addeventlistener('canplay', function () { video1.play(); }, false); ...
MediaQueryListEvent - Web APIs
the mediaquerylistevent object stores information on the changes that have happened to a mediaquerylist object — instances are available as the event object on a function referenced by a mediaquerylist.onchange property or mediaquerylist.
addlistener() call.
... { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = '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.
addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent' in that specification.
MediaRecorder: dataavailable event - Web APIs
examples using
addeventlistener to listen for dataavailable events: ...
... var chunks = []; mediarecorder.
addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.
addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
MediaRecorder - Web APIs
events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...on(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.classlist.
add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codec...
MediaSource.isTypeSupported() - Web APIs
this may include the codecs parameter to provide
added details about the codecs used within the file.
...rl = '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); } 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...
MediaStreamConstraints.audio - Web APIs
onstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").
addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audi...
...onstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").
addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audi...
MediaStreamConstraints.video - Web APIs
onstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").
addeventlistener("click", function() { navigator.mediadevices.getusermedia({ vi...
...onstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; p
adding-top: 2px; p
adding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").
addeventlistener("click", function() { navigator.mediadevices.getusermedia({ vi...
MediaStreamEvent() - Web APIs
syntax var event = new mediastreamevent(type, mediastreameventinit); values type is a domstring containing the name of the event, like
addstream or removestream.
... example // s is a mediastream var event = new mediastreamevent("
addstream", {"stream": s}); ...
MediaStreamEvent - Web APIs
two events of this type can be thrown:
addstream and removestream.
... examples pc.on
addstream = function( ev ) { alert("a stream (id: '" + ev.stream.id + "') has been
added to this connection."); }; ...
MediaStreamTrack.applyConstraints() - Web APIs
the object may contain an advanced property containing an array of
additional mediatrackconstrants objects, which are treated as exact requires.
... working draft
adds image constraints.
Media Session API - Web APIs
it then instantiates a metadata object for the session, and
adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes...
...the following example
adds a pointerup event to an on-page play button, which is then used to kick off the media session code: playbutton.
addeventlistener('pointerup', function(event) { var audio = document.queryselector('audio'); // user interacted with the page.
MessagePort.close() - Web APIs
example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using eventtarget.
addeventlistener.
... channel.port1.
addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status comment html living standardthe definition of 'close()' in that specification.
MessagePort: message event - Web APIs
he ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.
addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages on it using code like this: window.
addeventlistener('message', (event) => { const myport = event.ports[0]; myport.
addeventlistener('message', (event) => { received.textcon...
...this is only needed when using the
addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.
addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; }); specifications specification status html living standard living standard ...
MessagePort.start() - Web APIs
this method is only needed when using eventtarget.
addeventlistener; it is implied when using messagechannel.onmessage.
... example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using onmessage: channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtarget.
addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.
addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status comment html living standardthe d...
MessagePort - Web APIs
start() starts the sending of messages queued on the port (only needed when using eventtarget.
addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active.
... var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.
addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging b...
MouseEvent.buttons - Web APIs
if more than one button is pressed, the button values are
added together to produce a new number.
... html <p>click anywhere with one or more mouse buttons.</p> <pre id="log">buttons: </pre> javascript let log = document.createtextnode('?'); // let log = new text('?'); function logbuttons(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.
addeventlistener('mouseup', logbuttons); document.
addeventlistener('mousedown', logbuttons); // document.
addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log) result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.region - Web APIs
example example of using the event.region combined with canvasrenderingcontext2d.
addhitregion() method.
... <canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.
addhitregion({id: "circle"}); canvas.
addeventlistener("mousemove", function(event){ if(event.region) { console.log("hit region: " + event.region); } }); </script> ...
MutationEvent - Web APIs
performance
adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... mutation events list the following is a list of all mutation events, as defined in dom level 3 events specification: domattrmodified domattributenamechanged domcharacterdatamodified domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified usage you can register a listener for mutation events using eventtarget.
addeventlistener() as follows: element.
addeventlistener("domnodeinserted", function (event) { // ...
NavigationPreloadManager - Web APIs
examples feature detecting and enabling navigation preloading
addeventlistener('activate', event => { event.waituntil(async function() { if (self.registration.navigationpreload) { // enable navigation preloads!
...
addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
Navigation Timing API - Web APIs
while this interface is defined by the high resolution time api, the navigation timing api
adds two properties: timing and navigation, of the types below.
... specifications specification status comment navigation timing level 2 working draft
adds performancenavigationtiming navigation timing recommendation initial definition.
Navigator.getBattery() - Web APIs
this implements the battery status api; see that documentation for
additional details, a guide to using the api, and sample code.
... let batteryischarging = false; navigator.getbattery().then(function(battery) { batteryischarging = battery.charging; battery.
addeventlistener('chargingchange', function() { batteryischarging = battery.charging; }); }); for more examples and details, see battery status api.
Navigator.onLine - Web APIs
you could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." therefore, if you really want to determine the online status of the browser, you should develop
additional means for checking.
... to see changes in the network state, use
addeventlistener to listen for the events on window.online and window.offline, as in the following example: window.
addeventlistener('offline', function(e) { console.log('offline'); }); window.
addeventlistener('online', function(e) { console.log('online'); }); specifications specification status comment html living standardthe definition of 'navigator.online' in that s...
Network Information API - Web APIs
the entire api consists of the
addition of the networkinformation interface and a single property to the navigator interface: navigator.connection.
... 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.
PaymentRequestUpdateEvent.updateWith() - Web APIs
for
address field specific errors, use shipping
addresserrors.
... shipping
addresserrors optional an
addresserrors object which includes an error message for each property of the shipping
address that could not be validated.
PaymentResponse.onpayerdetailchange - Web APIs
examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping
address, // payer email
address, name, and phone number all be collected.
...rname) { promisestovalidate.push(validatename(payername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves,
add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the dat...
Performance - Web APIs
performance.memory read only a non-standard extension
added in chrome, this property provides an object with basic memory usage information.
... events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
PerformanceFrameTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-siz...
... performanceentry.name returns the document's
address.
PerformanceMark - Web APIs
entries of this type are created by calling performance.mark() to
add a named domhighrestimestamp (the mark) to the browser's performance timeline.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/we...
PerformanceMeasure - Web APIs
entries of this type are created by calling performance.measure() to
add a named domhighrestimestamp (the measure) between two marks to the browser's performance timeline.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/we...
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
... performanceentry.name read only returns the document's
address.
PerformanceResourceTiming - Web APIs
additionally, the interface extends performanceentry with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/we...
Using the Performance API - Web APIs
additionally, there must be a way to create a timestamp for a specific point in time; this is done with the now() method.
...other web performance guides (listed in the see also section) describe how to use
additional methods and properties of the performance interface.
PointerEvent - Web APIs
editor's draft
added the getcoalescedevents() and getpredictedevents() methods and pointerrawupdate event.
... recommendation
added the twist and tangentialpressure properties.
Multi-touch interaction - Web APIs
this
additional feature can be used to provide richer user interaction models but at the cost of
additional complexity in the multi-touch interaction handling.
... <style> div { margin: 0em; p
adding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
Pinch zoom gestures - Web APIs
adding gestures to an application can significantly improve the user experience.
... <style> div { margin: 0em; p
adding: 2em; } #target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases.
Using Pointer Events - Web APIs
function startup() { var el = document.getelementsbytagname("canvas")[0]; el.
addeventlistener("pointerdown", handlestart, false); el.
addeventlistener("pointerup", handleend, false); el.
addeventlistener("pointercancel", handlecancel, false); el.
addeventlistener("pointermove", handlemove, false); log("initialized."); } this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.
...enty - 4, 8, 8); // and a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { log("can't figure out which touch to end"); } } this is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call array.splice(), we simply remove the old entry from the ongoing touch list, without
adding in the updated information.
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
... examples the following example
adds a progressevent to a new xmlhttprequest and uses it to display the status of the request.
Proximity Events - Web APIs
this event can be captured at the window object level by using the
addeventlistener method (using the deviceproximity or userproximity event name) or by attaching an event handler to the window.ondeviceproximity or window.onuserproximity properties.
... example window.
addeventlistener('userproximity', function(event) { if (event.near) { // let's power off the screen navigator.mozpower.screenenabled = false; } else { // otherwise, let's power on the screen navigator.mozpower.screenenabled = true; } }); specifications specification status comment proximity sensorthe definition of 'proximity events' in that specific...
RTCTrackEvent.track - Web APIs
the webrtc api interface rtctrackevent's read-only track property specifies the mediastreamtrack that has been
added to the rtcpeerconnection.
... syntax var track = trackevent.track; value a mediastreamtrack indicating the track which has been
added to the rtcpeerconnection.
Range() - Web APIs
we then select the range using window.getselection() and selection.
addrange().
.../p> <p>second paragraph.</p> <p>third paragraph.</p> <p>fourth paragraph.</p> javascript const paragraphs = document.queryselectorall('p'); // create new range const range = new range(); // start range at second paragraph range.setstartbefore(paragraphs[1]); // end range at third paragraph range.setendafter(paragraphs[2]); // get window selection const selection = window.getselection(); //
add range to window selection selection.
addrange(range); result specification specification status comment domthe definition of 'range.range()' in that specification.
Range.commonAncestorContainer - Web APIs
.highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { p
adding: 1px; } javascript document.
addeventlistener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.pa...
...rentnode; } el.classlist.remove('highlight'); settimeout(() => { el.classlist.
add('highlight'); }, 0); } result specifications specification status comment domthe definition of 'range.commonancestorcontainer' in that specification.
Range.extractContents() - Web APIs
event listeners
added using dom events are not retained during extraction.
... html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; p
adding: .3em; } button { font-size: 1.2em; p
adding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.
addeventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection...
Range.selectNodeContents() - Web APIs
document.createrange(), range.selectnodecontents(), and selection.
addrange() are used to select the content.
...="p"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button'); const deselectbutton = document.getelementbyid('deselect-button'); selectbutton.
addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.
addrange(range); }); deselectbutton.
addeventlistener('click', e => { const selection = window.getselection(); selection.removeallranges(); }); result ...
RelativeOrientationSensor - Web APIs
const options = { frequency: 60, referenceframe: 'device' }; const sensor = new relativeorientationsensor(options); sensor.
addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.
addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
Request() - Web APIs
headers: any headers you want to
add to your request, contained within a headers object or an object literal with bytestring values.
... body: any body that you want to
add to your request: this can be a blob, buffersource, formdata, urlsearchparams, usvstring, or readablestream object.
Request.mode - Web APIs
if any serviceworkers intercept these requests, they may not
add or override any headers except for those that are simple headers.
... in
addition, javascript may not access any properties of the resulting response.
ResizeObserverEntry - Web APIs
note: the content box is the box in which content can be placed, meaning the border box minus the p
adding and border width.
... the border box encompasses the content, p
adding, and border.
SVGAnimationElement: endEvent event - Web APIs
rg/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; p
adding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.
addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.ad...
...deventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.
addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) btn.
addeventlistener('click', () => { btn.disabled = true; animateelem.setattribute('repeatcount', '1'); }) event handler property equivalent note that you can also create an event listener for the end event using the onend event handler property: animateelem.onend = () => { console.log('endevent fired'); } specifications specification status comment ...
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
... working draft
added edgemode property.
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
... candidate recommendation changed the inheritance from svgelement to svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable and
added the crossorigin property.
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-...
... 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
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
... candidate recommendation removed the implemented interface svgexternalresourcesrequired and
added the crossorigin property.
SVGStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
... candidate recommendation
added inheritance of linkstyle.
SVGTextContentElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
... svgtextcontentelement.getnumberofchars() returns a long representing the total number of
addressable characters available for rendering within the current element, regardless of whether they will be rendered.
SVGURIReference - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; poin...
...on getting href, an svganimatedstring object is returned that reflects the href attribute, and if the element is defined to support the deprecated xlink:href attribute,
additionally reflects that deprecated attribute.
Screen - Web APIs
methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.
addeventlistener() registers an event handler of a specific event type on the eventtarget.
...
additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties.
Screen Wake Lock API - Web APIs
wakelock.
addeventlistener('release', () => { // the wake lock has been released statuselem.textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
... document.
addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all together you can find the complete code on github here.
ScriptProcessorNode: audioprocess event - Web APIs
bubbles no cancelable no default action none interface audioprocessingevent event handler property scriptprocessornode.onaudioprocess examples scriptnode.
addeventlistener('audioprocess', function(audioprocessingevent) { // the input buffer is a song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels...
...; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(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; } } }) you could also set up the event handler using the scriptprocessornode.onaudioprocess property: scriptnode.onaudioprocess = function(audioprocessingevent) { ...
Selection.containsNode() - Web APIs
it uses
addeventlistener() to check for selectionchange events.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.
addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
Selection.selectAllChildren() - Web APIs
the selection.selectallchildren() method
adds all the children of the specified node to the selection.
... example html <main> <button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <
address>webmaster@example.com</
address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.
addeventlistener('click', (e) => { window.getselection().selectallchildren(footer); }); result specifications specification status comment selection apithe definition of 'selection.selectallchildren()' in that specification.
Selection API - Web APIs
once your selection is in a variable, you perform a variety of operations on it, for example copying the selection to a text string using selection.tostring(),
adding a range (as represented by a standard range object) to the selection (or removing one) with selection.
addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren().
... 4notes notes the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers are supported as of firefox 52.opera android full support 10.1safari ios full support 1samsung internet android full support 1.0
addrange experimentalchrome full support 1edge full support 12firefox full support yesie ?
Using server-sent events - Web APIs
you can also listen for events with
addeventlistener(): evtsource.
addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then p...
...if this is specified, an event will be dispatched on the browser to the listener for the specified event name; the website source code should use
addeventlistener() to listen for named events.
ServiceWorker.onstatechange - Web APIs
} serviceworker.
addeventlistener('statechange', function(statechangeevent) { ...
... document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.
addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed.
ServiceWorkerContainer: message event - Web APIs
cancelable no interface messageevent event handler property onmessage examples in this example the service worker get the client's id from a fetch event and then sends it a message using client.postmessage: // in the service worker async function messageclient(clientid) { const client = await clients.get(clientid); client.postmessage('hi client!'); }
addeventlistener('fetch', (event) => { messageclient(event.clientid); event.respondwith(() => { // ...
... }); }); the client can receive the message by listening to the message event: // in the page being controlled navigator.serviceworker.
addeventlistener('message', (message) => { console.log(message); }); specifications specification status service workersthe definition of 'message' in that specification.
ServiceWorkerContainer.startMessages() - Web APIs
it's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.
addeventlistener() before the page has finished loading, but want to start processing the messages right away.
... navigator.serviceworker.
addeventlistener('message', (e) => { // ...
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
} self.
addeventlistener('pushsubscriptionchange', function() { ...
... }) example self.
addeventlistener('pushsubscriptionchange', function() { // do something, usually resubscribe to push and // send the new subscription details back to the // server via xhr or fetch }); specifications specification status comment push apithe definition of 'onpushsubscriptionchange' in that specification.
SharedWorker - Web APIs
if the onmessage event is attached using
addeventlistener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.oncha...
... onconnect = function(e) { var port = e.ports[0]; port.
addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using
addeventlistener.
SharedWorkerGlobalScope - Web APIs
some
additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference.
... events listen to this event using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
SourceBuffer.abort() - Web APIs
for example, consider this code: sourcebuffer.
addeventlistener('updateend', function (_) { ...
... you can see something similar in action in nick desaulnier's bufferwhenneeded demo — in line 48, an event listener is
added to the playing video so a function called seek() is run when the seeking event fires.
SourceBuffer.appendBufferAsync() - Web APIs
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.
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
... = '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); } 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...
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-f...
... event handlers sourcebufferlist.on
addsourcebuffer the event handler for the
addsourcebuffer event.
SpeechGrammarList.SpeechGrammarList() - Web APIs
examples in our simple speech color changer example, we create a new speechrecognition object instance using the speechrecognition() constructor, create a new speechgrammarlist,
add our grammar string to it using the speechgrammarlist.
addfromstring method, and set it to be the grammar that will be recognised by the speechrecognition instance using the speechrecognition.grammars property.
...goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.
addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status comment web speech apithe definition of 'speechgrammarlist' in that specification.
SpeechRecognition - Web APIs
events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.
addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color comman...
SpeechSynthesis - Web APIs
speechsynthesis.speak()
adds an utterance to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.
... events listen to this event using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
Storage - Web APIs
it allows, for example, the
addition, modification, or deletion of stored data items.
... storage.setitem() when passed a key name and value, will
add that key to the storage, or update that key's value if it already exists.
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dd...
...the oldvalue is null when the key has been newly
added and therefore doesn't have any previous value.
Using the Storage Access API - Web APIs
first of all, if the <iframe> is sandboxed, the embedding website needs to
add the allow-storage-access-by-user-activation sandbox token to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
...}); note that access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click — so this code needs to be run inside some kind of user gesture-based event handler, for example: btn.
addeventlistener('click', () => { // run code here }); ...
Streams API concepts - Web APIs
the streams api
adds a very useful set of tools to the web platform, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the developer.
...at some point the spec writers hope to
add something like a transformstream class to make creating transform streams easier.
StylePropertyMap.append() - Web APIs
the append() method of the stylepropertymap interface
adds a new css declaration to the stylepropertymap with the given property and value.
...font, width, background color) to
add.
StylePropertyMap - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertym...
... stylepropertymap.append()
adds a new css declaration to the stylepropertymap with the given property and value.
SubmitEvent - Web APIs
properties in
addition to the properties listed below, this interface inherits the properties of its parent interface, event.
... let form = document.queryselector("form"); form.
addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
SubtleCrypto.deriveKey() - Web APIs
let encryptbutton = document.queryselector(".ecdh .encrypt-button"); encryptbutton.
addeventlistener("click", () => { encrypt(alicessecretkey); }); // bob can use his copy to decrypt the message.
... let decryptbutton = document.queryselector(".ecdh .decrypt-button"); decryptbutton.
addeventlistener("click", () => { decrypt(bobssecretkey); }); } pbkdf2 in this example we ask the user for a password, then use it to derive an aes key using pbkdf2, then use the aes key to encrypt a message.
Boilerplate 1 - Web APIs
any
additional non-trivial css and html will be displayed on the pages of specific examples.
...]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"...
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; p
adding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.
addeventlistener("load", function setupa...
... browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.
addeventlistener("click", setcolormask, false); greentoggle.
addeventlistener("click", setcolormask, false); bluetoggle.
addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on";...
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_frag...
...color = 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 = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshade...
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } ;(function(){ "use strict" window.
addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.
addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.
addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinte...
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; p
adding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; p
adding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script type="x-shader/x-fragment" id="fra...
...gment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.
addeventlistener("load", 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...
Lighting in WebGL - Web APIs
then we
add the code to drawscene() to bind the normals array to a shader attribute so the shader code can get access to it: // tell webgl how to pull out the normals from // the normal buffer into the vertexnormal attribute.
... once the amount of directional lighting is computed, we can generate the lighting value by taking the ambient light and
adding in the product of the directional light's color and the amount of directional lighting to provide.
WebGL tutorial - Web APIs
adding 2d content to a webgl context how to render simple flat shapes using webgl.
... using shaders to apply color in webgl demonstrates how to
add color to shapes using shaders.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
rtcp
adds features including quality of service (qos) monitoring, participant information sharing, and the like.
...some of the more noteworthy things rtp doesn't include: editor's note: we should
add information about where these deficiencies are compensated for, if they are at all.
Improving compatibility using WebRTC adapter.js - Web APIs
in
addition, some browsers still have prefixes on some or all webrtc apis.
... for example, on firefox versions older than 38, the adapter
adds the rtcpeerconnection.urls property; firefox doesn't natively support this property until firefox 38, while on chrome, the adapter
adds support for the promise based api is
added if it's not present.
WebSocket - Web APIs
events listen to these events using
addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...const socket = new websocket('ws://localhost:8080'); // connection opened socket.
addeventlistener('open', function (event) { socket.send('hello server!'); }); // listen for messages socket.
addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of 'websocket' in that specification.
Writing WebSocket client applications - Web APIs
establishing a websocket relies on the http upgrade mechanism, so the request for the protocol upgrade is implicit when we
address the web server as ws://www.example.com or wss://www.example.com.
...to handle it,
add an event listener for the message event, or use the onmessage event handler.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
importantly, the effect of perspective on a vector can be represented by
adding a fourth component to the vector: the perspective component, called w.
... keep in mind that most webgl and webxr programming is done using third-party libraries which expand upon the basic functionality of webgl by
adding routines that make it much easier to perform not only core matrix and other operations, but often also to simulate these standard cinematography techniques.
Geometry and reference spaces in WebXR - Web APIs
however, in order to provide the ability to present scenes in true 3d using xr headsets and other such equipment, webxr has
additional concepts that must be understood.
...they usually have
additional form, as well as internal movement, such as moving legs, arms that swing as they walk, a head that turns or bobs, weapons that move around, and so forth.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
but webxr goes beyond that by
adding the ability to track the location, orientation, and motion of the input devices which generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment).
...other hardware elements can be used similarly to represent other parts of the body, providing
additional data to use when simulating the user's actions in their environment.
Web Audio API best practices - Web APIs
here is a simple example of creating the context from inside a click event: const button = document.queryselector('button'); button.
addeventlistener('click', function() { const audioctx = new audiocontext(); }, false); if however, you create the context outside of a user gesture, its state will be set to suspended and it will need to be started after user interaction.
... const audioctx = new audiocontext(); const button = document.queryselector('button'); button.
addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } }, false); you might instead be working with an offlineaudiocontext, in which case you can resume the suspended audio context with the startrendering() method.
Controlling multiple parameters with ConstantSourceNode - Web APIs
function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.
addeventlistener("click", toggleplay, false); volumecontrol.
addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantno...
...de = context.createconstantsource(); constantnode.connect(gainnode2.gain); constantnode.connect(gainnode3.gain); constantnode.start(); gainnode1.connect(context.destination); gainnode2.connect(context.destination); gainnode3.connect(context.destination); } window.
addeventlistener("load", setup, false); first, we get access to the window's audiocontext, stashing the reference in context.
Using IIR filters - Web APIs
the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.
addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
...first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.
addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...
Attestation and Assertion - Web APIs
android key attestation - one of the features
added in android o was android key attestation, which enables the android operating system to attest to keys.
...when registering an authenticator for a new account, typically a trust on first use (tofu) model applies; and when
adding an authenticator to an existing account, a user has already been authenticated and has established a secure session.
Web Storage API - Web APIs
when you choose different options, the page is instantly updated; in
addition your choices are stored in localstorage, so that when you leave the page then load it again later on your choices are remembered.
... in
addition, we have provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as the storageevent is fired.
Window: animationcancel event - Web APIs
examples this code
adds a listener to the animationcancel event.
... window.
addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of
addeventlistener(): window.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.
Window.controllers - Web APIs
chrome code can
add controllers (to be used in conjunction with the godocommand and goupdatecommand functions in globaloverlay.js).
... however, the
added controllers must be explicitly removed when the window is unloaded, as this is not done automatically.
Window.external - Web APIs
the external property of the window api returns an instance of the external interface, which was intended to contain functions related to
adding external search providers to the browser.
... methods the external object has the following methods: method description
addsearchprovider(descriptionurl) dummy function; does nothing.
Window: load event - Web APIs
bubbles no cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.
addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log...
...plate-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.
addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.
addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.
addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.
addeventliste...
Window.onbeforeinstallprompt - Web APIs
syntax window.
addeventlistener("beforeinstallprompt", function(event) { ...
... window.
addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.preventdefault(); // prevents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.
addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window: resize event - Web APIs
it is still possible to set onresize attributes or use
addeventlistener() to set a handler on any element.
...>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function reportwindowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = reportwindowsize;
addeventlistener equivalent you could set up the event handler using the
addeventlistener() method: window.
addeventlistener('resize', reportwindowsize); specifications specification status document object model (dom) level 3 events specificationthe definition of 'resize' in that specification.
Window.sessionStorage - Web APIs
example the following snippet accesses the current origin's session storage object and
adds data to it with storage.setitem().
... // get the text field that we're going to track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the text field field.
addeventlistener("change", function() { // and save the results into the session storage object sessionstorage.setitem("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
Window: unload event - Web APIs
examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.
addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.
addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doctype html> <html> <head> <title>child fra...
...me</title> <script> window.
addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.
addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ☻ </body> </html> when the parent frame is unloaded, events will be fired in the order described by the console.log() messages.
WindowEventHandlers.onbeforeprint - Web APIs
syntax window.
addeventlistener("beforeprint", function(event) { ...
... var mediaquerylist = window.matchmedia('print'); mediaquerylist.
addlistener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification.
WindowEventHandlers.onunload - Web APIs
syntax window.
addeventlistener("unload", function(event) { ...
...}; typically, it is better to use window.
addeventlistener() and the unload event, instead of onunload.
WindowEventHandlers - Web APIs
each of these interfaces can implement
additional specific event handlers.
...
added onlanguage since the html5 snapshot.
XMLDocument - Web APIs
it inherits from the generic document and does not
add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; p
adding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node...
HTML in XMLHttpRequest - Web APIs
the w3c xmlhttprequest specification
adds html parsing support to xmlhttprequest, which originally supported only xml parsing.
...html parsing support is a recent
addition.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
gerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.
addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://
addons.mozilla.org"); produced the following output in my console: connection status: succeeded security info: security state: secure ...
... common name (cn) =
addons.mozilla.org organisation = mozilla corporation issuer = verisign, inc.
Sending and Receiving Binary Data - Web APIs
note: support for sending arraybuffer objects using xmlhttprequest was
added to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6).
...
add information about other browsers' support here.
XMLHttpRequest() - Web APIs
non-standard firefox syntax firefox 16
added a non-standard parameter to the constructor that can enable anonymous mode (see bug 692677).
...most important, this means that cookies will not be sent unless explicitly
added using setrequestheader.
XMLHttpRequest: abort event - Web APIs
ame="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; p
adding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} byt...
...es transferred\n`; } function
addlisteners(xhr) { xhr.
addeventlistener('loadstart', handleevent); xhr.
addeventlistener('load', handleevent); xhr.
addeventlistener('loadend', handleevent); xhr.
addeventlistener('progress', handleevent); xhr.
addeventlistener('error', handleevent); xhr.
addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest();
addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.
addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.
addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.
addeventlistener('click', () =...
XMLHttpRequest: error event - Web APIs
ame="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; p
adding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} byt...
...es transferred\n`; } function
addlisteners(xhr) { xhr.
addeventlistener('loadstart', handleevent); xhr.
addeventlistener('load', handleevent); xhr.
addeventlistener('loadend', handleevent); xhr.
addeventlistener('progress', handleevent); xhr.
addeventlistener('error', handleevent); xhr.
addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest();
addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.
addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.
addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.
addeventlistener('click', () =...
XMLHttpRequest: load event - Web APIs
ame="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; p
adding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} byt...
...es transferred\n`; } function
addlisteners(xhr) { xhr.
addeventlistener('loadstart', handleevent); xhr.
addeventlistener('load', handleevent); xhr.
addeventlistener('loadend', handleevent); xhr.
addeventlistener('progress', handleevent); xhr.
addeventlistener('error', handleevent); xhr.
addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest();
addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.
addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.
addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.
addeventlistener('click', () =...
XMLHttpRequest: loadend event - Web APIs
ame="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; p
adding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} byt...
...es transferred\n`; } function
addlisteners(xhr) { xhr.
addeventlistener('loadstart', handleevent); xhr.
addeventlistener('load', handleevent); xhr.
addeventlistener('loadend', handleevent); xhr.
addeventlistener('progress', handleevent); xhr.
addeventlistener('error', handleevent); xhr.
addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest();
addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.
addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.
addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.
addeventlistener('click', () =...
XMLHttpRequest: loadstart event - Web APIs
ame="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; p
adding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} byt...
...es transferred\n`; } function
addlisteners(xhr) { xhr.
addeventlistener('loadstart', handleevent); xhr.
addeventlistener('load', handleevent); xhr.
addeventlistener('loadend', handleevent); xhr.
addeventlistener('progress', handleevent); xhr.
addeventlistener('error', handleevent); xhr.
addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest();
addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.
addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.
addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.
addeventlistener('click', () =...
XMLHttpRequest: progress event - Web APIs
ame="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; p
adding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} byt...
...es transferred\n`; } function
addlisteners(xhr) { xhr.
addeventlistener('loadstart', handleevent); xhr.
addeventlistener('load', handleevent); xhr.
addeventlistener('loadend', handleevent); xhr.
addeventlistener('progress', handleevent); xhr.
addeventlistener('error', handleevent); xhr.
addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest();
addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.
addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.
addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.
addeventlistener('click', () =...
ARIA: Region role - Accessibility
scrolling content areas with overflow text if there is a content area with tabindex="0",
add role="region" to convey to screen reader users that is a generic region.
...
added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: search role - Accessibility
the search role is
added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality.
...
added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
Architecture - Accessibility
in
addition, nsiaccessiblehyperlink is implemented on any non-text child inside a container that also has text.
...this means that we have an exact mirror to the dom, but text lives in the parents instead of in the leaves, which now don't really provide
additional useful information.
Keyboard-navigable JavaScript widgets - Accessibility
authors can also make a <div> or <span> keyboard accessible by
adding a tabindex of 0.
...choose between changing the background color via something like this.style.backgroundcolor = "gray"; or
add a dotted border via this.style.border = "1px dotted invert".
Understandable - Accessibility
3.2.3 consistent navigation (aa) navigation menu/control style and positioning should be consistent between different pages or views of a web page, and the existing items should appear in the same order, even if for example new iteam are
added.
...when a simple instruction or prompt is required, you can use <label> elements for single inputs like name or age, a combination or <label>s and <fieldset>s/<legend>s for multiple inputs that go together (like the elements of a date of birth or postal
address).
::first-letter (:first-letter) - CSS: Cascading Style Sheets
t-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all p
adding properties: p
adding, p
adding-top, p
adding-right, p
adding-bottom, p
adding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration...
...stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; p
adding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters.
:disabled - CSS: Cascading Style Sheets
html <form action="#"> <fieldset id="shipping"> <legend>shipping
address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="
address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing
address</legend> <label for="billing-checkbox">same as shipping
address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placehol...
...der="name" disabled> <input type="text" placeholder="
address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.
addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification ...
:invalid - CSS: Cascading Style Sheets
html <form> <div class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email
address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; p
adding: 1px; } .field { margin: 1px; p
adding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { bord...
...people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an
additional indicator that does not rely on color to convey meaning.
:nth-child() - CSS: Cascading Style Sheets
the <code><em></code> is completely skipped over and ignored.</p> <div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { p
adding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
... working draft
adds of <selector> syntax and specifies that matching elements are not required to have a parent.
:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target { background-color: gold; } /*
add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
...is neque arcu, nec gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; p
adding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; ...
marks - CSS: Cascading Style Sheets
the marks css at-rule descriptor, used with the @page at-rule,
adds crop and/or cross marks to the presentation of the document.
... formal definition related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples
adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
@page - CSS: Cascading Style Sheets
marks
adds crop and/or registration marks to the document.
... editor's draft
adds the :recto and :verso page selectors css paged media module level 3the definition of '@page' in that specification.
Mastering margin collapsing - CSS: Cascading Style Sheets
no content separating parent and descendants if there is no border, p
adding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, p
adding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse.
... empty blocks if there is no border, p
adding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
Using CSS transforms - CSS: Cascading Style Sheets
tatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; p
adding: 10px; font-family: sans-serif; text-align: left; } result the second element to configure is the position of the viewer, with the perspective-origin property.
...orm: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; p
adding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result once you have done this, you can work on the element in the 3d space.
Animatable CSS properties - CSS: Cascading Style Sheets
mask-size max-block-size max-height max-inline-size max-lines max-width min-block-size min-height min-inline-size min-width object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order outline outline-color outline-offset outline-width p
adding p
adding-block-end p
adding-block-start p
adding-bottom p
adding-inline-end p
adding-inline-start p
adding-left p
adding-right p
adding-top perspective perspective-origin right rotate row-gap scale scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom s...
...croll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-p
adding scroll-p
adding-block scroll-p
adding-block-end scroll-p
adding-block-start scroll-p
adding-bottom scroll-p
adding-inline scroll-p
adding-inline-end scroll-p
adding-inline-start scroll-p
adding-left scroll-p
adding-right scroll-p
adding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top...
Column layouts - CSS: Cascading Style Sheets
you can control the gaps between columns with the column-gap property, and
add a rule between columns using column-rule.
... there is currently no way to
add a rule between flex items, and browser support for the column-gap and row-gap properties is limited.
Recipe: Media objects - CSS: Cascading Style Sheets
an option for the pattern is to flip it to switch the image to the other side — this is done by
adding the media-flip class, which defines a flipped grid template causing the layout to be mirrored.
...a good catch-all would be to float the image left, and to
add a clearfix to the box to ensure that it contained the floats.
Media queries - CSS: Cascading Style Sheets
for example, a media query can shrink the font size on small devices, increase the p
adding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.
...you can also use mediaquerylist.
addlistener() to be notified whenever the state of a query changes.
align-content - CSS: Cascading Style Sheets
n value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.
addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.
addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-content' in that specification.
... working draft
adds the [ first | last ]?
background - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: p
adding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparentapplies toall elements.
...] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<attachment> = scroll | fixed | local<box> = border-box | p
adding-box | content-boxwhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><length-percentage> = <length> | <percentage>where <image()> = image( <image-tags>?
border-image-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; p
adding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value...
...="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.
addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-width - CSS: Cascading Style Sheets
if this property's value is greater than the element's border-width, the border image will extend beyond the p
adding (and/or content) edge.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; p
adding: 40px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-image - CSS: Cascading Style Sheets
#bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; p
adding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> c...
...ss #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; p
adding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image' in that specification.
border-width - CSS: Cascading Style Sheets
ourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; p
adding: 0.25em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-width' in that specification.
... recommendation
added the constraint that values' meaning must be constant inside a document.
break-inside - CSS: Cascading Style Sheets
once forced breaks have been applied, soft breaks may be
added if needed, but not on element boundaries that resolve in a corresponding avoid value.
...
add both properties for backwards compatibility.
Computed value - CSS: Cascading Style Sheets
for example, if an element has specified values font-size: 16px and p
adding-top: 2em, then the computed value of p
adding-top is 32px (double the font size).
...
additionally, unitless numbers specified on the line-height property become the computed value, as specified.
conic-gradient() - CSS: Cascading Style Sheets
customizing gradients by
adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors.
...you can move this color transition midpoint to any point between two color stops by
adding a color hint, indicating where the middle of the color transition should be.
<dimension> - CSS: Cascading Style Sheets
editor's draft
adds cap, ic, lh, rlh, vi, vb css values and units module level 3the definition of '<dimension>' in that specification.
... candidate recommendation
adds ch, rem, vw, vw, vmin, vmax, q css level 2 (revision 1)the definition of '<dimension>' in that specification.
<mtable> - MathML
in
addition, values of the align attribute can end with a rownumber (e.g.
... framespacing specifies
additional space
added between the table and frame.
MathML element reference - MathML
ts) <merror> (enclosed syntax error messages) f <mfenced> (parentheses) <mfrac> (fraction) g <mglyph> (displaying non-standard symbols) i <mi> (identifier) l <mlabeledtr> (labeled row in a table or a matrix) <mlongdiv> (long division notation) m <mmultiscripts> (prescripts and tensor indices) n <mn> (number) o <mo> (operator) <mover> (overscript) p <mp
added> (space around content) <mphantom> (invisible content with reserved space) r <mroot> (radical with specified index) <mrow> (grouped sub-expressions) s <ms> (string literal) <mscarries> (annotations such as carries) <mscarry> (single carry, child element of <mscarries>) <msgroup> (grouped rows of <mstack> and <mlongdiv> elements) <msline> (horizontal lines inside <mstack> element...
...ipt) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotations) mathml presentation elements by category top-level elements <math> token elements <mglyph> <mi> <mn> <mo> <ms> <mspace> <mtext> general layout <menclose> <merror> <mfenced> <mfrac> <mp
added> <mphantom> <mroot> <mrow> <msqrt> <mstyle> script and limit elements <mmultiscripts> <mover> <mprescripts> <msub> <msubsup> <msup> <munder> <munderover> <none> tabular math <maligngroup> <malignmark> <mlabeledtr> <mtable> <mtd> <mtr> elementary math <mlongdiv> <mscarries> <mscarry> <msgroup> <msline> <msrow> <mstack> uncategorized elements <maction> ...
MathML
mailing list newsgroup rss feed matrix chat room wiki used by mozilla contributors w3c math home www-math w3.org mail archive tools w3c validator mathzilla firefox
add-on collection texzilla — javascript latex to mathml converter (live demo, firefox os webapp, firefox
add-on, using in a web page, js program etc) latexml - convert latex documents into html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-browser javascript display engine for mathematics.
... to force mathjax to use native mathml, try this mozilla
add-on, this safari extension or this greasemonkey script.
Guide to streaming audio and video - Web media technologies
<<<...xxxxxx...>>> protocols in
addition to the configuration of the server and the streaming code, there are sometimes special protocols which can be used to optimize performance.
...
additionally, forms of the stream can be provided which are optimized for different network conditions.
Animation performance and frame rate - Web Performance
there are a number of elements, and we've
added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint.
...it's unlikely you'll see a smooth animation here, especially when you
add in user interaction.
Performance fundamentals - Web Performance
you can easily trigger these animations with the :hover, :focus, or :target, or by dynamically
adding and removing classes on parent elements.
... in
addition, transforms give you capabilities you might not otherwise have.
Performance budgets - Web Performance
additionally, it can uncover development needs (i.e.
... the sooner that you can identify a potential
addition pushing the budget, the better you can analyze the current state of your site, and pinpoint optimizations or unnecessary code.
Progressive loading - Progressive web apps (PWAs)
to fix that we can, for example,
add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure.
... we can also split css files and
add media types to them: <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> this will tell the browser to load them only when the condition is met.
accumulate - SVG: Scalable Vector Graphics
this attribute said to the animation if the value is
added to the previous animated attribute's value on each iteration.
... this attribute is ignored if the target attribute value does not support
addition, or if the animation element does not repeat.
orient - SVG: Scalable Vector Graphics
" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-
additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
... candidate recommendation
added the auto-start-reverse value and simplified the descriptions of the values.
SVG Attribute reference - SVG: Scalable Vector Graphics
svg attributes a to z a accent-height accumulate
additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelera...
...nction attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation
addition attributes
additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondura...
<animate> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin:0; p
adding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename,
additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event...
...
additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity.
<animateMotion> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; p
adding: 0; display:block; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes ...
...ber>|auto|auto-reverse; default value: 0; animatable: no note: for <animatemotion> the default value for the calcmode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename,
additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes this element implements the svganimatemotionelement interface.
<radialGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides
additional transformation to the gradient coordinate system.
... candidate recommendation
added fr attribute scalable vector graphics (svg) 1.1 (second edition)the definition of '<radialgradient>' in that specification.
<script> - SVG: Scalable Vector Graphics
the svg script element allows to
add scripts to an svg document.
... while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.
addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').
addeventlistener('click', (e) => { e.target.styl...
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; p
adding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.
... var repel = parseint( document.getelementbyid('repel_peer').value ); var average = averagemoteposition(); this.applyforce(average, -repel); //
add some randomness to the velocity.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
(another style rule makes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that could have been part of an existing web site, and
added an attractive, interactive background the approach is backwards compatible to browsers that do not support svg; simply, no background appears in them it's very simple and performs very well the picture dynamically sizes itself to the required size in an intelligent way we can have declarative style rules applying to both html and svg the same script manipulates both html and svg the docum...
...ent is entirely standards-based to
add a linked image with dom methods to an embedded svg element, one has to use setattributens to set href.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
symptoms previously you were able to open and display svg content with mozilla, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local svg files, and displays the "
additional plugins are required to display all the media on this page" bar when you try to view html with embedded svg.
... note: the "
additional plugins are required" bar can appear for legitimate reasons when the svg or its embedding html is broken or served incorrectly over the network (see the svg faq).
SVG: Scalable Vector Graphics
additionally, this means they can be created and edited with any text editor or with drawing software.
... some real eye-candy svg at svg-wow.org firefox extension (grafox) to
add a subset of smil animation support interactive photos manipulation html transformations using svg's foreignobject mapping, charting, games & 3d experiments while a little svg can go a long way to enhanced web content, here are some examples of heavy svg usage.
Referer header: privacy and security concerns - Web security
the referrer problem the referer (sic) header contains the
address of the previous web page from which a link to the currently requested page was followed, which has lots of fairly innocent uses including analytics, logging, or optimized caching.
... in
addition, you should consider removing any third party content (e.g.
How to turn off form autocompletion - Web security
this means that the criterion can be passed (by
adding the relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off.
...
additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.
Securing your site - Web security
you can use this to prevent your site from being used improperly; in
addition, you can use it to establish resources that other sites are expressly permitted to use.
... content security policy an
added layer of security that helps to detect and mitigate certain types of attacks, including cross site scripting (xss) and data injection attacks.
Subdomain takeovers - Web security
you want to
add a blog at blog.example.com, and you decide to use a hosting provider who maintains a blogging platform.
...if your site has multiple layers of virtualization (e.g., a cdn in
addition to virtual hosting), you may need to examine each layer to see where exactly the attacker asserted their virtual host claim to take over your domain.
Transport Layer Security - Web security
tls 1.3
adds just one significant new use case.
...enabling 0-rtt requires
additional steps, both to ensure successful deployment and to manage the risks of replay attacks.
Tutorials
css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or
add animations and other decorative features.
... this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to
add styling to html.
Introduction to using XPath in JavaScript - XPath
snapshots do not change with document mutations, so unlike the iterators, the snapshot does not become invalid, but it may not correspond to the current document, for example, the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been
added.
... <?xml version="1.0"?> <people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <person> <name first="george" last="bush" /> <
address street="1600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-456-1111</phonenumber> </person> <person> <name first="tony" last="blair" /> <
address street="10 downing street" city="london" country="uk"/> <phonenumber>020 7925 0918</phonenumber> </person> </people> to make the contents of the xml document available within the extension, we create an xmlhttpre...
XPath snippets - XPath
sample usage assume we have the following xml document (see also how to create a dom tree and parsing and serializing xml): example: an xml document to use with the custom evaluatexpath() utility function <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <
address street="321 south st" city="denver" state="co" country="usa"/> <
address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <
address street="321 north st" city="atlanta" state="ga" country="usa"/> <
address street="123 west st" city="seattle" state="wa" country="usa"/> <
address street="321 south avenue" cit...
... example: javascript code with the custom evaluatexpath() utility function // display the last names of all people in the doc var results = evaluatexpath(people, "//person/@last-name"); for (var i in results) alert("person #" + i + " has the last name " + results[i].value); // get the 2nd person node results = evaluatexpath(people, "/people/person[2]"); // get all the person nodes that have
addresses in denver results = evaluatexpath(people, "//person[
address/@city='denver']"); // get all the
addresses that have "south" in the street name results = evaluatexpath(people, "//
address[contains(@street, 'south')]"); alert(results.length); docevaluatearray the following is a simple utility function to get (ordered) xpath results into an array, regardless of whether there is a special nee...
action - Archive of obsolete content
lign, , 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, getuserdata, hasattribute...
bbox - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
binding - Archive of obsolete content
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, getuserdata, hasattribute...
bindings - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
box - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
broadcaster - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
broadcasterset - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
column - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
columns - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
conditions - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
content - Archive of obsolete content
métodos 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...
deck - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
dropmarker - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
grid - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
grippy - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
groupbox - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
hbox - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
listcol - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
listcols - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
member - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
menubar - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
menupopup - Archive of obsolete content
methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
notification - Archive of obsolete content
methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
observes - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
page - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
panel - Archive of obsolete content
methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
param - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
popupset - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
preferences - Archive of obsolete content
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...
query - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
queryset - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
resizer - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
row - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
rows - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
script - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
scrollbar - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
scrollcorner - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
separator - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
spacer - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
spinbuttons - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
splitter - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
stack - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
stringbundle - Archive of obsolete content
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...
stringbundleset - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
tabbox - Archive of obsolete content
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...
tabpanel - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
tabpanels - Archive of obsolete content
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...
template - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
textnode - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
titlebar - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
toolbargrippy - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
toolbarseparator - Archive of obsolete content
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, getuserdata, hasattribute...
toolbarspacer - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
toolbarspring - Archive of obsolete content
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, getuserdata, hasattribute...
treecell - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
treechildren - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
treecols - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
treeitem - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
treerow - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
treeseparator - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
triple - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
vbox - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
where - Archive of obsolete content
ign, , 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, getuserdata, hasattribute...
wizard - Archive of obsolete content
methods inherited methods
addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattri...
Building XULRunner - Archive of obsolete content
a basic minimal mozconfig which will build a release configuration of xulrunner is: mk_
add_options moz_co_project=xulrunner mk_
add_options moz_objdir=@topsrcdir@/obj-xulrunner ac_
add_options --enable-application=xulrunner #uncomment the following line if you don't want to build javaxpcom: #ac_
add_options --disable-javaxpcom cvs tags and xulrunner versions older xulrunner releases where tagged in cvs with (for instance xulrunner_1_8_0_5_release ) up to version 1.8.0.5 the cvs repos...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
tput outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma solidcompression=yes [languages] name: english; messagesfile: compiler:default.isl [components] name: main; description: my app; types: full compact custom; flags: fixed name: runtime; description: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupdescription: {cm:
additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:createquicklaunchicon}; groupdescription: {cm:
additionalicons}; flags: unchecked [files] source: c:\develop\xulrunnerinstaller\myapp\myapp.exe; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp\application.ini; destdir: {app}; components: main; flags: ignoreversion source: c:\d...
Custom app bundles for Mac OS X - Archive of obsolete content
content/ example.xul (this directory contains your application's chrome) example.manifest defaults/ preferences/ app-prefs.js (this provides some default values for preferences) application bundle contents in
addition to the standard directory hierarchy that's required of all mac os x applications, as shown above in application bundle layout, there are some specific rules for what content goes where: the top-level directory is given a name that ends with .app which designates the whole package as an application bundle.