Search completed in 2.73 seconds.
2212 results for "open":
Your results are loading. Please wait...
OpenClose - Archive of obsolete content
opening and closing popups popups and menus may be opened and closed by a script.
... opening menus menus will display themselves automatically when needed without extra work.
... for instance, a menu's popup will open when the menu label is clicked, and a submenu will open when the mouse is hovered over the parent menu element.
...And 66 more matches
Window.open() - Web APIs
WebAPIWindowopen
the window interface's open() method loads the specified resource into the new or existing browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new browsing context is opened in a new tab or a new window, and the specified resource is loaded into it.
... syntax var window = window.open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded.
...And 57 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
appendix: what you should know about open-source software licenses draft this page is not complete.
... any discussion of open-source software deserves an explanation of licensing-related issues.
... in this chapter, i’ll explain some of the basics: what open-source software (oss) licenses are, what types of licenses exist, and when they’re appropriate.
...And 29 more matches
OpenSearch description format
the opensearch description format lets a website describe a search engine for itself, so that a browser or other client application can use that search engine.
... opensearch is supported by (at least) firefox, edge, internet explorer, safari, and chrome.
... (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.
...And 15 more matches
IDBFactory.open() - Web APIs
WebAPIIDBFactoryopen
the open() method of the idbfactory interface requests opening a connection to a database.
... the method returns an idbopendbrequest object immediately, and performs the open operation asynchronously.
... if an error occurs while the database connection is being opened, then an error event is fired on the request object returned from this method.
...And 12 more matches
Window.openDialog() - Web APIs
WebAPIWindowopenDialog
window.opendialog() is an extension to window.open().
... the call to opendialog() returns immediately.
...note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.
...And 10 more matches
OpenType font features guide - CSS: Cascading Style Sheets
font features or variants refer to different glyphs or character styles contained within an opentype font.
...these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings.
... this article provides you with all you need to know about using opentype font features in css.
...And 9 more matches
Debugging OpenGL
for various reasons, debugging opengl related code can be tricky.
... this article provides suggestions for how to improve your efficiency while debugging opengl code in gecko.
... opengl debug mode when running a debug build, you can enable the opengl debug mode by defining the environment variable moz_gl_debug.
...And 8 more matches
Document.open() - Web APIs
WebAPIDocumentopen
the document.open() method opens a document for writing.
... syntax document.open(); parameters none.
... examples the following simple code opens the document and replaces its content with a number of different html fragments, before closing it again.
...And 8 more matches
PR_Open
opens a file for reading, writing, or both.
... syntax #include <prio.h> prfiledesc* pr_open( const char *name, printn flags, printn mode); parameters the function has the following parameters: name the pathname of the file to be opened.
...if the flags parameter does not include any of the first three flags (pr_rdonly, pr_wronly, or pr_rdwr), the open file can't be read or written, which is not useful.
...And 7 more matches
IDBIndex.openKeyCursor() - Web APIs
the openkeycursor() method of the idbindex interface returns an idbrequest object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.
... note: cursors returned by openkeycursor() do not make the referenced value available as idbindex.opencursor does.
... syntax var request = myindex.openkeycursor(); var request = myindex.openkeycursor(range); var request = myindex.openkeycursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range.
...And 6 more matches
IDBKeyRange.lowerOpen - Web APIs
the loweropen read-only property of the idbkeyrange interface returns a boolean indicating whether the lower-bound value is included in the key range.
... syntax var loweropen = mykeyrange.loweropen value a boolean: value indication true the lower-bound value is not included in the key range.
...here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
...And 6 more matches
IDBKeyRange.upperOpen - Web APIs
the upperopen read-only property of the idbkeyrange interface returns a boolean indicating whether the upper-bound value is included in the key range.
... syntax var upperopen = mykeyrange.upperopen value a boolean: value indication true the upper-bound value is not included in the key range.
...here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
...And 6 more matches
IDBOpenDBRequest - Web APIs
the idbopendbrequest interface of the indexeddb api provides access to the results of requests to open or delete databases (performed using idbfactory.open and idbfactory.deletedatabase), using specific event handler attributes.
...50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inhe...
... blocked fired when an open connection to a database is blocking a versionchange transaction on the same database.
...And 6 more matches
Cross-Origin-Opener-Policy - HTTP
the http cross-origin-opener-policy (coop) response header allows you to ensure a top-level document does not share a browsing context group with cross-origin documents.
... coop will process-isolate your document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
... if a cross-origin document with coop is opened in a new window, the opening document will not have a reference to it, and the window.opener property of the new window will be null.
...And 6 more matches
IDBIndex.openCursor() - Web APIs
the opencursor() method of the idbindex interface returns an idbrequest object, and, in a separate thread, creates a cursor over the specified key range.
... syntax var request = myindex.opencursor(); var request = myindex.opencursor(range); var request = myindex.opencursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range.
... example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
...And 5 more matches
open - Archive of obsolete content
summary opens the file, specifying file mode and type.
... syntax open(mode,type) parameters mode a comma-delimited list describing the method to use to open the file, described in detail here.
... type a string describing the type of file being opened.
...And 4 more matches
Open and Save Dialogs - Archive of obsolete content
« previousnext » a common type of dialog is one where the user can select a file to open or save.
...it is most commonly used for the open and save menu commands, but you can use it any place in which the user needs to select a file.
... you can use the file picker in one of three modes: open - the user is asked to select a file for opening.
...And 4 more matches
AudioBufferSourceNode.loopEnd - Web APIs
the loopend property of the audiobuffersourcenode interface specifies is a floating point number specifying, in seconds, at what offset into playing the audiobuffer playback should loop back to the time indicated by the loopstart property.
... syntax audiobuffersourcenode.loopend = endoffsetinseconds; var endoffsetinseconds = audiobuffersourcenode.loopend; value a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart).
...buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart and loopend properties on the fly.
...And 4 more matches
Clients.openWindow() - Web APIs
the openwindow() method of the clients interface creates a new top level browsing context and loads a given url.
... if the calling script doesn't have permission to show popups, openwindow() will throw an invalidaccesserror.
... 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.
...And 4 more matches
HTMLDialogElement.open - Web APIs
the open property of the htmldialogelement interface is a boolean reflecting the open html attribute, indicating whether the dialog is available for interaction.
... syntax dialoginstance.open = true; var myopenvalue = dialoginstance.open; value a boolean representing the state of the open html attribute.
... examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the showmodal() method.
...And 4 more matches
PR_GetOpenFileInfo64
gets an open file's information.
... syntax #include <prio.h> prstatus pr_getopenfileinfo64( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file.
... description pr_getopenfileinfo64 is the 64-bit version of pr_getopenfileinfo.
...And 3 more matches
IDBObjectStore.openCursor() - Web APIs
the opencursor() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, returns a new idbcursorwithvalue object.
... syntax var request = objectstore.opencursor(); var request = objectstore.opencursor(query); var request = objectstore.opencursor(query, direction); parameters query optional a key or idbkeyrange to be queried.
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.value contains the current record being iterated through // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specification specification status comment indexed database api 2.0the definitio...
...And 3 more matches
USBDevice.opened - Web APIs
WebAPIUSBDeviceopened
the opened read only property of the usbdevice interface indicates whether a session has been started with a paired usb device.
... a device must be opened before it can be controlled by a web page.
... syntax var serialnumber = usbdevice.opened value a boolean.
...And 3 more matches
Window.opener - Web APIs
WebAPIWindowopener
the window interface's opener property returns a reference to the window that opened the window using open().
... in other words, if window a opens window b, b.opener returns a.
... syntax const openerwindow = window.opener value a window referring to the window that opened the current window (using window.open(), or by a link with target attribute set).
...And 3 more matches
The Web Open Font Format (WOFF) - Developer guides
WebGuideWOFF
woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations.
... it uses a compressed version of the same table-based sfnt structure used by truetype, opentype, and open font format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired.
... there are three main benefits to using woff: the font data is compressed, so sites using woff will use less bandwidth and will load faster than if they used equivalent uncompressed truetype or opentype files.
...And 3 more matches
Opening a Link in the Default Browser - Archive of obsolete content
xulrunner applications may have situation where they wish to open a uri in the default browser.
...this can be done using the nsiexternalprotocolservice interface: // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uritoopen = ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); // now, open it!
... extps.loaduri(uritoopen, null); by default, the external protocol service will warn the user about opening the link in another application.
...And 2 more matches
openLocationLastURL.jsm
(bug 953124) the openlocationlasturl.jsm javascript code module lets you set and retrieve the url most recently opened using the "open location" option in the file menu.
... to use this, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/openlocationlasturl.jsm"); once you've imported the module, you can then use the openlocationlasturl object it exports.
... this object lets you fetch and change the url that is placed in the "open location" dialog box when it opens.
...And 2 more matches
PR_GetOpenFileInfo
gets an open file's information.
... syntax #include <prio.h> prstatus pr_getopenfileinfo( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file.
... description pr_getopenfileinfo obtains the file type (normal file, directory, or other), file size (as a 32-bit integer), and the file creation and modification times of the open file represented by the file descriptor.
...And 2 more matches
PR_OpenDir
opens the directory with the specified pathname.
... syntax #include <prio.h> prdir* pr_opendir(const char *name); parameter the function has the following parameter: name the pathname of the directory to be opened.
... returns if the directory is successfully opened, a prdir object is dynamically allocated and the function returns a pointer to it.
...And 2 more matches
FC_OpenSession
name fc_opensession - open a session between an application and a token.
... syntax ck_rv fc_opensession( ck_slot_id slotid, ck_flags flags, ck_void_ptr papplication, ck_notify notify, ck_session_handle_ptr phsession ); parameters fc_opensession has the following parameters: slotid [in] the id of the token's slot.
... description fc_opensession opens a session between an application and the token in the slot with the id slotid.
...And 2 more matches
IDBObjectStore.openKeyCursor() - Web APIs
the openkeycursor() method of the idbobjectstore interface returns an idbrequest object whose result will be set to an idbcursor that can be used to iterate through matching results.
... syntax var request = objectstore.openkeycursor(); var request = objectstore.openkeycursor(query); var request = objectstore.openkeycursor(query, direction); parameters query optional the key range to be queried.
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.openkeycursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.key contains the key of the current record being iterated through // note that there is no cursor.value, unlike for opencursor // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specifications specifi...
...And 2 more matches
IDBOpenDBRequest.onblocked - Web APIs
the onblocked event handler of the idbopendbrequest interface is the event handler for the blocked event.
... syntax idbopendbrequest.onblocked = function(event) { ...
... }; example var db; // let us open our database var request = indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 2 more matches
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asynchronous, so you don't immediately get back a tab object which you can examine.
... to do this, pass a callback function into open().
... the callback is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: function onready(tab) { console.log(tab.title); } }); even then, you don't get direct access to any content hosted in the tab.
...this add-on loads a page, then attaches a script to the page which adds a red border to it: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: runscript }); function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
openPopup - Archive of obsolete content
« xul reference home openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location.
... anchor the popup may be either anchored to another node or opened freely.
...it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.
... triggerevent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).
PR_OpenSemaphore
creates or opens a named semaphore with the specified name.
... syntax #include <pripcsem.h> #define pr_sem_create 0x1 /* create if not exist */ #define pr_sem_excl 0x2 /* fail if already exists */ nspr_api(prsem *) pr_opensemaphore( const char *name, printn flags, printn mode, pruintn value ); parameters the function has the following parameters: name the name to be given the semaphore.
... flags how to create or open the semaphore.
... if pr_sem_create is specified, the third argument is the access permission bits of the new semaphore (same interpretation as the mode argument to pr_open) and the fourth argument is the initial value of the new semaphore.
PR_OpenSharedMemory
opens an existing shared memory segment or, if one with the specified name doesn't exist, creates a new one.
... syntax #include <prshm.h> nspr_api( prsharedmemory * ) pr_opensharedmemory( const char *name, prsize size, printn flags, printn mode ); /* define values for pr_opensharememory(...,create) */ #define pr_shm_create 0x1 /* create if not exist */ #define pr_shm_excl 0x2 /* fail if already exists */ parameters the function has the following parameters: name the name of the shared memory segment.
... mode same as passed to pr_open.
... description pr_opensharedmemory creates a new shared memory segment or associates a previously created memory segment with the specified name.
ctypes.open
at the heart of js-ctypes is the ctypes.open() function.
...therefore, the path has to be converted and then the converted path is used for loading with ctypes.open.
....installpath.path; // if unpacked is set to false in install.rdf this will look like: "c:\users\vayeate\appdata\roaming\mozilla\firefox\profiles\aksozfjt.unnamed profile 10\extensions\asynczip@jetpack" var filepath_mylib = os.path.join(filepath_folder, 'mysubfolder', 'mycfunctionsforunix.so'); var jarpath_mylib = jarpath_folder + 'mysubfolder/mycfunctionsforunix.so'; } this can then be opened and the c functions within can be used from js-ctypes.
... var lib = ctypes.open(filepath_mylib); var add_with_c = lib.declare("add", ctypes.default_abi, ctypes.int, // return type ctypes.int, // a ctypes.int // b ); var rez = add_with_c(2, 5); // rez is 7 lib.close(); references heather's paragraphs: playing around with js-ctypes on linux - credits for basis of this article github :: diegocr - fx-sapi-test - creating a native file for windows (dll) and use in a simple bootstrap add-on standard os libraries see standard os libraries ...
CacheStorage.open() - Web APIs
WebAPICacheStorageopen
the open() method of the cachestorage interface returns a promise that resolves to the cache object matching the cachename.
... syntax caches.open(cachename).then(function(cache) { // do something with your cache }); parameters cachename the name of the cache you want to open.
...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.
IDBOpenDBRequest: blocked event - Web APIs
the blocked handler is executed when an open connection to a database is blocking a versionchange transaction on the same database.
... 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 }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectst...
...ore.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 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) => { // 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.onblocked = () => { console.log('request was blocked'); }; }; ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
the onupgradeneeded property of the idbopendbrequest interface is the event handler for the upgradeneeded event, triggered when a database of a bigger version number than the existing stored database is loaded.
... syntax idbopendbrequest.onupgradeneeded = function(event) { ...
...var request = window.indexeddb.open("library", 3); // this event handles the event whereby a new version of the // database needs to be created.
... either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above.
IDBOpenDBRequest: upgradeneeded event - Web APIs
the upgradeneeded event is fired when an attempt was made to open a database with a version number higher than its current version.
... bubbles no cancelable no interface event event handler onupgradeneeded examples this example opens a database and handles the upgradeneeded event by making any necessary updates to the object store.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // 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 }); }); this is the same example, but uses the onupgradeneeded event handle...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // 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 }); }; ...
RTCDataChannel.onopen - Web APIs
the rtcdatachannel.onopen property is an eventhandler which specifies a function to be called when the open event is fired; this is a simple event which is sent when the data channel's underlying data transport—the link over which the rtcdatachannel's messages flow—is established or re-established.
... syntax rtcdatachannel.onopen = function; value a function which the browser will call to handle the open event.
...it then establishes an open event handler which updates some user interface elements to prepare them for being used to send messages over the data channel.
... let dc = mypeerconnection.createdatachannel("message channel"); dc.onopen = function(event) { let messagebox = document.getelementbyid("messagebox"); let sendbutton = document.getelementbyid("sendbutton"); messagebox.disabled = false; messagebox.focus(); sendbutton.disabled = false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onopen' in that specification.
RTCDataChannel: open event - Web APIs
the webrtc open event is sent to an rtcdatachannel object's onopen event handler when the underlying transport used to send and receive the data channel's messages is opened or re-opened.
... bubbles no cancelable no interface rtcdatachannelevent event handler property onopen examples this example adds to the rtcdatachannel dc a handler for the open event that adjusts the user interface to indicate that a chat window is ready to be used after a connection has been established.
... dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property.
... dc.onopen = ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); } ...
XMLHttpRequest.open() - Web APIs
the xmlhttprequest method open() initializes a newly-created request, or re-initializes an existing one.
... note: calling this method for an already active request (one for which open() has already been called) is the equivalent of calling abort().
... syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "put", "delete", etc.
... specifications specification status comment xmlhttprequestthe definition of 'open()' in that specification.
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
... this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
... note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.
... specifications specification status comment html living standardthe definition of 'noopener' in that specification.
List Open Tabs - Archive of obsolete content
to list the open tabs, you can iterate over the tabs object itself.
... 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".
...this add-on attaches a script to all open tabs.
openWindow - Archive of obsolete content
« xul reference home openwindow( windowtype, url, features, params ) return type: window open a child window.
...if a window with that type is already open, this method will just switch that window to the front and focus it instead of opening another window.
... if a window of the type is not open, a new one is opened displaying the supplied url.
Archived open Web documentation - Archive of obsolete content
the documentation listed below is archived, obsolete material about open web topics.
...you can opt in in html as follows: window.importdialog() because opening windows on mobile isn't necessarily appropriate, the firefox mobile team designed the importdialog() method to replace window.opendialog().
... instead of opening a new window, it merges the specified xul dialog into the main window.
mozbrowseropensearch
the mozbrowseropensearch event is fired when a link to a search engine is found — i.e.
... when an instance of <link rel="search" type="application/opensearchdescription+xml"> is encountered.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowseropenwindow
the mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target.
...for a complete list of possible features, see window.open().
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
PR_OpenTCPSocket
syntax #include <prio.h> prfiledesc* pr_opentcpsocket(printn af); parameters the function has the following parameters: af the address family of the new tcp socket.
... returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened tcp socket.
...pr_opentcpsocket creates a new tcp socket of the address family af.
PR OpenUDPSocket
syntax #include <prio.h> prfiledesc* pr_openudpsocket(printn af); parameters the function has the following parameters: af the address family of the new udp socket.
... returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened udp socket.
... pr_openudpsocket creates a new udp socket of the address family af.
EventSource.onopen - Web APIs
the onopen property of the eventsource interface is an eventhandler called when an open event is received, that is when the connection was just opened.
... syntax eventsource.onopen = function examples evtsource.onopen = function() { console.log("connection to server opened."); }; note: you can find a full example on github — see simple sse demo using php.
... specifications specification status comment html living standardthe definition of 'onopen' in that specification.
msSaveOrOpenBlob - Web APIs
the navigator.mssaveoropenblob() method saves the file or blob to disk.
... this method behaves in the same way as navigator.mssaveblob() except that this enables the file open option.
... syntax navigator.mssaveoropenblob(blob, defaultname); parameters blob a blob to be saved.
PaymentRequestEvent.openWindow() - Web APIs
the openwindow property of the paymentrequestevent interface opens the specified url in a new window, if and only if the given url is on the same origin as the calling page.
... syntax var apromise = paymentrequestevent.openwindow(url) parameters url the url to open in the new window.
... specifications specification status comment payment handler apithe definition of 'openwindow' in that specification.
USBDevice.open() - Web APIs
WebAPIUSBDeviceopen
the open() method of the usbdevice interface returns a promise that resolves when a device session has started.
... syntax var promise = usbdevice.open() parameters none.
... specifications specification status comment webusbthe definition of 'open()' in that specification.
WebSocket.onopen - Web APIs
WebAPIWebSocketonopen
the websocket.onopen property is an eventhandler that is called when the websocket connection's readystate changes to 1; this indicates that the connection is ready to send and receive data.
... syntax awebsocket.onopen = function(event) { console.log("websocket is open now."); }; value an eventlistener.
... specifications specification status comment html living standardthe definition of 'websocket: onopen' in that specification.
WebSocket: open event - Web APIs
the open event is fired when a connection with a websocket is opened.
... bubbles no cancelable no interface event event handler property onopen examples // create websocket connection.
... const socket = new websocket('ws://localhost:8080'); // connection opened socket.addeventlistener('open', (event) => { socket.send('hello server!'); }); specifications specification status html living standardthe definition of 'websocket open' in that specification.
XDomainRequest.open() - Web APIs
opens an xdomainrequest which is configured to use a given method (get/post) and url.
... syntax xdr.open(method, url); parameters method the http method to use for the request.
... example var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); specification not part of any specification.
open - Archive of obsolete content
ArchiveMozillaXULAttributeopen
« xul reference home open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
... the open attribute is not present if the menu is closed.
openSubDialog - Archive of obsolete content
« xul reference home opensubdialog( url, features, params ) return type: window opens a child modal dialog.
...the arguments are similar to the window's opendialog method except that the window name does not need to be supplied.
colorpicker.open - Archive of obsolete content
« xul reference open type: boolean returns true if the popup for a button-type colorpicker is open.
... set this property to true to open the popup or false to close the popup.
datepicker.open - Archive of obsolete content
« xul reference open type: boolean for popup type datepickers, specifies whether the popup is open.
... set this property to open or close the popup.
menu.open - Archive of obsolete content
« xul reference open type: boolean this property will be set to true when the menu is open.
... the menu may be opened by setting the open property to true and closed by setting it to false.
open - Archive of obsolete content
ArchiveMozillaXULPropertyopen
« xul reference open type: boolean gets and sets the value of the open attribute.
... see also colorpicker.open datepicker.open menu.open ...
popupOpen - Archive of obsolete content
« xul reference popupopen new in thunderbird 15 requires seamonkey 2.12 type: boolean indicates whether the popup is open or not.
... set this property to open or close the popup.
OpenGL - MDN Web Docs Glossary: Definitions of Web-related terms
opengl (open graphics library) is a cross-language, multi-platform application programming interface (api) for rendering 2d and 3d vector graphics.
... learn more general knowledge opengl on wikipedia ...
OpenSSL - MDN Web Docs Glossary: Definitions of Web-related terms
openssl is an open-source implementation of ssl and tls.
... learn more general knowledge openssl on wikipedia official website ...
mozbrowseropentab
the mozbrowseropentab event is fired when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the t...
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired...
PR_OpenAnonFileMap
creates or opens a named semaphore with the specified name syntax #include <prshma.h> nspr_api( prfilemap *) pr_openanonfilemap( const char *dirname, prsize size, prfilemapprotect prot ); parameters the function has the following parameters: dirname a pointer to a directory name that will contain the anonymous file.
... on unix platforms, pr_openanonfilemap uses dirname as a directory name, without the trailing '/', to contain the anonymous file.
Element.openOrClosedShadowRoot - Web APIs
the element.openorcloseshadowroot read-only property represents the shadow root hosted by the element, regardless if its mode is open or closed.
... syntax var shadowroot = element.shadowroot; value a shadowroot object instance, regardless if its mode is set to open or closed, or null if no shadow root is present.
EventSource: open event - Web APIs
the open event of the eventsource api is fired when a connection with an event source is opened.
... bubbles no cancelable no interface event event handler property eventsource.onopen examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('open', (e) => { console.log("the connection has been established."); }); // onopen version evtsource.onopen = (e) => { console.log("the connection has been established."); }; specifications specification status html living standardthe definition of 'open event' in that specification.
FileHandle.open() - Web APIs
summary the open method returns a lockedfile object that allows to safely write in the file.
... syntax var myfile = instanceoffilehandle.open(mode); parameters mode a string that specifies the writing mode for the file.
Demos of open web technologies
mozilla supports a wide variety of exciting open web technologies, and we encourage their use.
... if you know of a good demonstration or application of open web technology, please add a link to the appropriate section here.
alwaysopenpopup - Archive of obsolete content
« xul reference home alwaysopenpopup obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamonkeyif true, the autocomplete popup will be displayed even when there are no matches.
open - Archive of obsolete content
ArchiveMozillaXULMethodOpen
« xul reference home open( mode ) return type: no return value opens the findbar using the specified mode, which should be one of find_normal, find_typeahead, or find_links.
openPopupAtScreen - Archive of obsolete content
« xul reference home openpopupatscreen( x, y, iscontextmenu ) return type: no return value open the popup at a specific screen position specified by x and y.
alwaysOpenPopup - Archive of obsolete content
« xul reference alwaysopenpopup obsolete since gecko 1.9.1 type: boolean gets and sets the value of the alwaysopenpopup attribute.
Detect Opening Folder
some actions require execution every time you open a folder (for example, registering a custom column handler.
Open the debugger - Firefox Developer Tools
there are three ways to open the debugger: select "debugger" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press ctrl + shift + z on windows and linux, or cmd + opt + z on macos (starting in firefox 71; prior to firefox 66, the letter in this shortcut was s).
Open the Inspector - Firefox Developer Tools
there are two main ways to open the inspector: choose tools > web developer > inspector from the menu bar or the equivalent keyboard shortcut.
XMLHttpRequest.openRequest() - Web APIs
to initialize a request from javascript code, use the standard open() method instead.
SVG-in-OpenType - Developer guides
the svg-in-opentype work is currently in the hands of the mpeg group.
Index - Web APIs
WebAPIIndex
117 audiobuffersourcenode.loopend api, audio, audiobuffersourcenode, media, property, reference, web audio api, loopend, sound a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart).
... 515 cachestorage.open() api, cachestorage, experimental, method, reference, service workers, service worker api, serviceworker, open the open() method of the cachestorage interface returns a promise that resolves to the cache object matching the cachename.
... 634 clients.openwindow() api, clients, experimental, method, reference, service workers, serviceworker, openwindow the openwindow() method of the clients interface creates a new top level browsing context and loads a given url.
...And 82 more matches
Using IndexedDB - Web APIs
basic pattern the basic pattern that indexeddb encourages is the following: open a database.
...such and such feature will not be available."); } opening a database we start the whole process like this: // let us open our database var request = window.indexeddb.open("mytestdatabase", 3); see that?
... opening a database is just like any other operation — you have to "request" it.
...And 48 more matches
Index - Archive of obsolete content
2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other.
... 61 tabs add-on sdk open, manipulate, and access tabs, and receive tab events.
... 67 windows add-on sdk enumerate and examine open browser windows, open new windows, and listen for window events.
...And 46 more matches
Working with windows in chrome code
it contains tips and example code on opening new windows, finding an already opened window, and passing data between different windows.
... opening windows from a <script> in a window or an overlay to open a new window, we usually use a window.open or window.opendialog dom call, like this: var win = window.open("chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen"); the first parameter to window.open is the uri of the xul file that describes the window and its contents.
... the window.opendialog function works similarly, but lets you specify optional arguments that can be referenced from the javascript code.
...And 39 more matches
OS.File for the main thread
example: read the contents of a file as text the following snippet opens a file "file.txt" and read its contents as a string, using the default encoding (utf-8).
... ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.
...this example also shows the resolve value of open (an instance of os.file, this is a file, so you can do any of the methods on it found here), write (a number indicating bytes written), and close (undefined, meaning there is no resolve value).
...And 34 more matches
Eclipse CDT
introduction eclipse cdt (c/c++ development tools) is an open-source ide for c and c++ development with advanced code assistance (inheritance/call graph explorer, jump to definition, refactoring, autocomplete, syntax highlighting, and so on).
...then, to create the eclipse project and open it, run: ./mach ide eclipse or to create the eclipse project without opening it yet, run: ./mach build-backend -b cppeclipse building the eclipse project should only take a few seconds.
... in the case of the build-backend command, instructions on how to open the project will be displayed after the command completes.
...And 29 more matches
HTTP Cache
are no longer accessible through the cache apis; the method is fast to execute and non-blocking in any way; the actual erase happens in background purgefrommemory – removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded to open.
... unimplemented or underimplemented functionality: asyncevictstorage (bug 977766), asyncvisitstorage (bug 916052) nsicacheentryopencallback //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentryopencallback.idl the result of nsicachestorage.asyncopenuri is always and only sent to callbacks on this interface.
... these callbacks are ensured to be invoked when asyncopenuri returns ns_ok.
...And 27 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
true javascript.options.strict (present in firefox 3.5+) enforces strict error output from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-click on them to set them accordingly.
... open the dom inspector by selecting the tools > dom inspector menu item.
... firefox 31 open the dom inspector by open menu>developer>dom inspector menu item.
...And 25 more matches
Tree View Details - Archive of obsolete content
this is a fairly tricky process as it involves keeping track of which items have children and also which rows are open and closed.
... containers there are also three functions, iscontainer, iscontainerempty and iscontaineropen that are used to handle a parent item in the tree.
... the iscontaineropen method is used to determine which items are opened and closed.
...And 25 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the open source webkit engine.
... 31 blink glossary, infrastructure, layout, rendering engine blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
...(firefox os was also often called boot2gecko before the project had an official name.) 38 bootstrap bootstrap, css, glossary, intro, framework bootstrap is a free, open source html, css, and javascript framework for quickly building responsive websites.
...And 23 more matches
Client-side storage - Learn web development
basic syntax let's show you how: first, go to our web storage blank template on github (open this in a new tab).
... open the javascript console of your browser's developer tools.
...the first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again.
...And 23 more matches
Command line options
for example, if you have multiple profiles you can use command line configuration options to bypass the profile manager and open a specific profile.
... you can also control how mozilla applications open, which components open initially, and what the components do when they open.
...you can open the command line interface by pressing shift + f2.
...And 23 more matches
Tabbed browser - Archive of obsolete content
if you need to do something with gbrowser right after the window is opened, listen for the load event and use gbrowser in the event listener.
...onents.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 mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrows...
...er.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 22 more matches
tabs - Archive of obsolete content
open, manipulate, and access tabs, and receive tab events.
... usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
... tabs.on('open', function onopen(tab) { myopentabs.push(tab); }); // listen for tab content loads.
...And 21 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
17 alwaysopenpopup xul attributes, xul reference no summary!
... 257 open needshelp, xul attributes, xul reference, needsattention no summary!
... 543 open no summary!
...And 20 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you can type these examples up and open them in firefox to see how they behave and appear.
... fixme: explain how setting this option and use next listings if we want to run firefox displaying none of its gui and only the contents of a certain xul file, we can launch firefox and set the option: -chrome file_url.xul another way, as shown in listing 1, is to use the window.opendialog() method, which can be used only within a xul window.
... this is used by extensions to open a separate window.
...And 19 more matches
nsIWindowWatcher
it maintains a list of open top-level windows, and allows some operations on them.
... method overview nsiwebbrowserchrome getchromeforwindow(in nsidomwindow awindow); nsiauthprompt getnewauthprompter(in nsidomwindow aparent); nsiprompt getnewprompter(in nsidomwindow aparent); nsidomwindow getwindowbyname(in wstring atargetname, in nsidomwindow acurrentwindow); nsisimpleenumerator getwindowenumerator(); nsidomwindow openwindow(in nsidomwindow aparent, in string aurl, in string aname, in string afeatures, in nsisupports aarguments); void registernotification(in nsiobserver aobserver); void setwindowcreator(in nsiwindowcreator creator); void unregisternotification(in nsiobserver aobserver); attributes attribute type description activewindow nsidomwindow ...
...nsiwindowwatcher keeps a list of all top-level dom windows currently open, along with their corresponding chrome interfaces.
...And 19 more matches
PopupEvents - Archive of obsolete content
an overview of these is listed below: contextmenu this event is fired when a request is made to open a context menu, whether by the keyboard or mouse.
...this will occur regardless of how the popup is opened, either from user interaction or from a script calling the openpopup or openpopupatscreen methods.
...the preventdefault method will stop this from happening and the popup will not be opened.
...And 18 more matches
nsIZipWriter
oid 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 azipentry); boolean hasentry(in autf8string azipentry); void open(in nsifile afile, in print32 aioflags); void processqueue(in nsirequestobserver aobserver, in nsisupports acontext); void removeentry(in autf8string azipentry, in boolean aqueue); attributes attribute type description comment acstring gets or sets the comment associated with the currently open zip file.
... exceptions thrown ns_error_not_initialized if no zip file has been opened.
...if the operation is performed on the queue then the channel will be opened asynchronously, otherwise the channel must support being opened synchronously.
...And 18 more matches
menupopup - Archive of obsolete content
when a menupopup is open, it floats above the window and may extend outside the window border.
... there are several ways in which a menupopup may be used: it may be placed inside a menu, menulist, toolbarbutton, or a button with the type attribute set to "menu" to create a popup that will open when the menu or button is pressed.
...when a context menu is opened, the menupopup will be displayed.
...And 17 more matches
mozIStorageService
storage/public/mozistorageservice.idlscriptable this interface lets you open a mozistorageconnection to a database file, as well as create backups of an unopened database file.
... this is the only way to open a database connection.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) see mozistorageconnection method overview nsifile backupdatabasefile(in nsifile adbfile, in astring abackupfilename, [optional] in nsifile abackupparentdirectory); mozistorageconnection opendatabase(in nsifile adatabasefile); mozistorageconnection openspecialdatabase(in string astoragekey); mozistorageconnection openunshareddatabase(in nsifile adatabasefile); methods backupdatabasefile() this method makes a backup of the specified file.
...And 17 more matches
panel - Archive of obsolete content
ArchiveMozillaXULpanel
when open, it floats above the window and may extend outside the border of the main window.
...a panel may also be opened via a script using the openpopup method.
... attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label.
...And 16 more matches
nsILocalFile
file openansifiledesc(in string mode); native code only!
... prfiledescstar opennsprfiledesc(in long flags, in long mode); native code only!
... constants constant value description delete_on_close 0x80000000 optional parameter used by opennsprfiledesc().
...And 16 more matches
Features of a Window - Archive of obsolete content
as in html, you can use the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() function to open the second window.
... this function will return a reference to the newly opened window.
...And 15 more matches
Encrypt Decrypt_MAC_Using Token
*/ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[40]; char trailer[40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: ...
...; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; 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; } /* open the input file.
... */ infile = pr_open(encryptedfilename, pr_rdonly , 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", encryptedfilename); return secfailure; } /* open the output file.
...And 15 more matches
Accessing the Windows Registry Using XPCOM
a simple example here's a simple example showing how to read your windows productid: var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows several important things about using the interface.
...second, you must call open() on the key before attempting to read a value.
... notice in the open() call that the root key to use is specified using the named constants available on the nsiwindowsregkey interface, in this case root_key_local_machine, which corresponds to hkey_local_machine in the windows registry.
...And 15 more matches
Using XMLHttpRequest - Web APIs
to send an http request, create an xmlhttprequest object, open a url, and send the request.
... 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.
... the type of request is dictated by the optional async argument (the third argument) that is set on the xmlhttprequest.open() method.
...And 15 more matches
Positioning - Archive of obsolete content
if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused.
...first, the position can be specified when using the popup's openpopup method.
... this is used when a popup is opened by a script.
...And 14 more matches
prefwindow - Archive of obsolete content
you can open a preference window using a window's opendialog method as with other dialogs.
... you can pass the id of a particular pane as the fourth argument to opendialog to open a specific pane by default.
... note for mac os x: a common way of opening modal windows on mac os x that are not attached as a sheet to the main window is to use nsiwindowwatcher.openwindow() with a null parentwindow.
...And 14 more matches
Sqlite.jsm
this symbol is an object with a single function: openconnection.
... this function takes an object defining connection options: path (required) the database file to open.
... openconnection(options) returns a promise that resolves to an opened connection instance or is rejected if an error occurred while opening the database.
...And 14 more matches
Encrypt Decrypt MAC Keys As Session Objects
eader file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[40]; char trailer[40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: ...
...; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; 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; } /* open the input file.
... */ infile = pr_open(encryptedfilename, pr_rdonly , 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", encryptedfilename); return secfailure; } /* open the output file.
...And 14 more matches
Encrypt and decrypt MAC using token
eader file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[40]; char trailer[40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: ...
...; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; 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; } /* open the input file.
... */ infile = pr_open(encryptedfilename, pr_rdonly , 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", encryptedfilename); return secfailure; } /* open the output file.
...And 14 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
eader file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[40]; char trailer[40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: ...
...; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; 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; } /* open the input file.
... */ infile = pr_open(encryptedfilename, pr_rdonly , 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", encryptedfilename); return secfailure; } /* open the output file.
...And 14 more matches
nsIChannel
then, the uri can be fetched by calling open() or asyncopen().
... method overview void asyncopen(in nsistreamlistener alistener, in nsisupports acontext); nsiinputstream open(); attributes attribute type description contentcharset acstring the character set of the channel's content if available and if applicable.
... setting contentcharset before the channel has been opened provides a hint to the channel on what the charset should be.
...And 14 more matches
nsITransport
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) this interface provides methods to open blocking or non-blocking, buffered or unbuffered streams to the resource.
...method overview void close(in nsresult areason); nsiinputstream openinputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); nsioutputstream openoutputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsieventtarget aeventtarget); constants open flags.
... constant value description open_blocking 1<<0 open flags.
...And 14 more matches
windows - Archive of obsolete content
enumerate and examine open browser windows, open new windows, and listen for window events.
...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.
... private browser windows won't appear in the browserwindows property, you won't receive any window events, and you won't be able to open private windows.
...And 13 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.
...in the near future the mozilla code base will include a complete open source cryptographic library, and mozilla will include ssl support as a standard feature.
...export regulations in january 2000 to allow export of source code for open source software implementing encryption, the major remaining legal obstacle to mozilla crypto development was the fact that rsa security, inc., held a u.s.
...And 13 more matches
Menus - Archive of obsolete content
when the menu or button is clicked the menu is opened, listing the commands that are available.
...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.
... <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the window or screen.
...And 13 more matches
EncDecMAC using token object - sample 3
) { return cryptinit(dk, iv, ivlen, type, cka_decrypt); } /* * read cryptographic parameters from the header file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; prfiledesc* file; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char header[40]; char trailer[40]; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strcpy(trailer, iv_trailer); break; case mac: strcpy(header, mac...
...l; unsigned char iv[blocksize]; unsigned int ivlen = ivitem->len; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; 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; } /* open the input file.
... */ infile = pr_open(encryptedfilename, pr_rdonly , 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", encryptedfilename); return secfailure; } /* open the output file.
...And 13 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
nsdocumentopeninfo this class encapsulates all the information related to a particular load.
...nsdocumentopeninfo implements nsistreamlistener and proxies the nsistreamlistener calls over to the "real" stream listener once one is chosen.
...()" coords="534,239,715,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10) getcategoryentry()" coords="575,418,821,418,821,455,629,455,629,484,575,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="639,129,703,129,703,165,833,165,833,204,639,204" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="637,121,709,121,709,96,783,96,783,58,637,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="311,306,432,371" href="#open"> <...
...And 12 more matches
How to build custom form controls - Learn web development
here is the result we want to achieve: this screenshot shows the three main states of our control: the normal state (on the left); the active state (in the middle) and the open state (on the right).
... the control was in its open state and the user clicks on it.
... the control is in its open state when: the control is in any other state than open and the user clicks on it.
...And 12 more matches
Getting started with HTML - Learn web development
anatomy of an html element let's further explore our paragraph element from the previous section: the anatomy of our element is: the opening tag: this consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets.
... this opening tag marks where the element begins or starts to take effect.
... the closing tag: this is the same as the opening tag, except that it includes a forward slash before the element name.
...And 12 more matches
Enc Dec MAC Output Public Key as CSR
header file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char *header; char *trailer; prfiledesc *file = null; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); return secfailure; } switch (type) { case pubkey: header = pubkey_header; trailer = pubkey_trailer; break; case symkey: header = enckey_header; trailer = enckey_trailer; break; case mackey: header = mackey_hea...
... = null; secitem *encoding = null; secoidtag signalgtag; secitem result; secstatus rv = secsuccess; print32 numbytes; void *exthandle; prarenapool *arena = null; prfiledesc *outfile = null; /* open the certificate request file to write */ outfile = pr_open(certreqfilename, pr_create_file | pr_rdwr | pr_truncate, 00660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing (%ld, %ld).\n", certreqfilename, pr_geterror(), pr_getoserror()); goto cleanup; } /* create info about public key */ spki = seck...
...rintf(pr_stderr, "extracted : "); printasascii(pr_stderr, macitem->data, macitem->len); pr_fprintf(pr_stderr, "computed : "); printasascii(pr_stderr, newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } return rv; } /* * open intermediate file, read in iv, wrapped encryption key, * wrapped mac key, mac, pad and public key from header file */ secstatus getdatafromheader(const char *headerfilename, secitem *ivitem, secitem *wrappedenckeyitem, secitem *wrappedmackeyitem, secitem *macitem, secitem *paditem, seckey...
...And 12 more matches
NSS PKCS11 Functions
secmod_loadusermodule secmod_unloadusermodule secmod_openuserdb secmod_closeuserdb pk11_findcertfromnickname pk11_findkeybyanycert pk11_getslotname pk11_gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc secmod_loadusermodule load a new pkcs #11 module based on a modulespec.
...secmod_closeuserdb close an already opened user database.
... note: the database must be in the internal token, and must be one created with secmod_openuserdb().
...And 12 more matches
Adding windows and dialogs - Archive of obsolete content
« previousnext » opening windows and dialogs to open a new window, use the javascript window.open function just like with html windows.
... window.open( "chrome://xulschoolhello/content/somewindow.xul", "xulschoolhello-some-window", "chrome,centerscreen"); the first argument is the url to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window.
...the window.open page has a detailed description of the features you can use and their values.
...And 11 more matches
Panels - Archive of obsolete content
when the button is pressed, the panel is opened.
... only buttons (and toolbarbuttons) have this automatic behaviour which opens the popup when pressed.
... <label value="search" popup="search-panel"/> <panel id="search-panel"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> to attach a panel to an non-button element, for instance to have a panel open when a label is clicked, use the popup attribute.
...And 11 more matches
FileUtils.jsm
file constructor if you have a path to a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile getfile(string key, array patharray, bool followlinks); nsifile getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int modeflags); nsifileoutputstream opensafefileoutputstream(nsifile file, int modeflags); void closeatomicfileoutputstream(nsifileoutputstream stream); void closesafefileoutputstream(nsifileoutputstream stream); constants constant valu...
...e description mode_rdonly 0x01 corresponds to the pr_rdonly parameter to pr_open mode_wronly 0x02 corresponds to the pr_wronly parameter to pr_open mode_create 0x08 corresponds to the pr_create_file parameter to pr_open mode_append 0x10 corresponds to the pr_append parameter to pr_open mode_truncate 0x20 corresponds to the pr_truncate parameter to pr_open perms_file 0644 default permissions when creating files.
...instead use the file constructor, so simply: var dir = new fileutils.file('c:\\blah\\blah'); if (dir.exists()) { //yes directory exists } openfileoutputstream() opens a file output stream for writing.
...And 11 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
e>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf...
..._destroycontext(sgn, pr_true); } return rv; } /* * verify the signature using public key */ secstatus verifydata(const char *infilename, seckeypublickey *pk, secitem *sigitem, secupwdata *pwdata) { unsigned int nb; unsigned char ibuf[4096]; secstatus rv = secfailure; vfycontext *vfy = null; prfiledesc *infile = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } vfy = vfy_createcontext(pk, sigitem, sec_oid_pkcs1_md5_with_rsa_encryption, ...
... readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv = secsuccess; prfiledesc* file = null; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char *header; char *trailer; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); rv = secfailure; goto cleanup; } switch (type) { case pubkey: header = pubkey_header; trailer = pubkey_trailer; break; case symkey: header = enckey_header; trailer = enckey_trailer; break; case ...
...And 11 more matches
sslfnc.html
database files are opened read-only.
... description nss_init opens the certn.db, keyn.db, and secmod.db files (wheren is a numeric digit) in the specified directory.
... nss_init opens the database files read-only.
...And 11 more matches
Observer Notifications
sessionstore-windows-restored sent by the session restore process to indicate that all initial browser windows have opened.
... note that while the window are open and the chrome loaded the tabs in the windows may still be being restored after this notification.
... browser-lastwindow-close-requested sent when the browser wishes to close the last open browser window.
...And 11 more matches
nsIMessenger
method overview void setdisplaycharset(in acstring acharset); void setwindow(in nsidomwindow ptr, in nsimsgwindow msgwindow); void openurl(in acstring aurl); void loadurl(in nsidomwindow ptr, in acstring aurl); void launchexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long getundotransactiontype(); unsigned long getredotransactiontype(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void se...
...ndunsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); void setdocumentcharset(in acstring characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aidentity, in astring amsgfilename); void openattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string urlarray, [array, size_is(count)] in string displaynamearray, [array, size_is(count)] in string messageuri...
...if there is no messagepane element, then the root xul nsidocshell will be used (so that openurl() will still work).
...And 11 more matches
All keyboard shortcuts - Firefox Developer Tools
the first section lists the shortcut for opening each tool and the second section lists shortcuts that are applicable to the toolbox itself.
... opening and closing tools these shortcuts work in the main browser window to open the specified tool.
...for tools like the browser console that open in a new window, you have to close the window to close the tool.
...And 11 more matches
Key Values - Web APIs
opens an interface (typically a dialog box) for performing a find/search operation.
...opens or toggles the display of help information.
...ejects removable media (or toggles an optical storage device tray open and closed).
...And 11 more matches
Event reference
websocket events event name fired when open a websocket connection has been established.
... form events event name fired when reset the reset button is pressed submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when compositionstart the composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
... storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value change events broadcast checkboxstatechange hashchange input radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e.
...And 11 more matches
Tamarin build documentation - Archive of obsolete content
if you have trouble starting the app try this: $ export android_swt=$android_build_top/android-sdk-mac_86/tools/lib/x86_64 where $android_build_top is the full path to your sdk/ndk top folder - get the openssl-0.9.8r.tar (openssl-1.0.0c.tar.gz won't work) openssl files from http://www.openssl.org (use the source link on the left).
... unzip the file and put the /openssl main folder under your sdk/ndk top folder.
... make sure its name is just "openssl".
...And 10 more matches
ContextMenus - Archive of obsolete content
context menus a context menu is a menu where the items on the menu are specific to the context in which the menu was opened.
... context menu events there are various ways in which a context menu can be opened.
...on macintosh systems with only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control key and clicking the mouse button.
...And 10 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
attributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, ...
...nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, 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,...
... alwaysopenpopup obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamonkeyif true, the autocomplete popup will be displayed even when there are no matches.
...And 10 more matches
tooltip - Archive of obsolete content
attributes crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="click here to see more information"/> <label value="really!" style="color: red;"/> </tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: ...
... this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden.
... onpopupshowing type: script code this event is sent to a popup just before it is opened.
...And 10 more matches
Fonts for Mozilla's MathML engine
fonts with appropriate unicode coverage and open font format features are required for good math rendering.
... open the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory.
... open the latinmodern-math font file and click the install button.
...And 10 more matches
A Web PKI x509 certificate primer
generate the key using the following command: openssl genpkey -algorithm rsa -out key.pem -pkeyopt rsa_keygen_bits:2048 2048 is considered secure for the next 4 years.
...generate csr using this command: openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that will be valid for 3 years.
...write extensions file by creating a new file with name openssl.ss.cnf with the following contents: basicconstraints = ca:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth 4.
...And 10 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... a disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle.
... note: the common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties." a <details> widget can be in one of two states.
...And 10 more matches
Web video codec guide - Web media technologies
codec details av1 the aomedia video 1 (av1) codec is an open format designed by the alliance for open media specifically for internet video.
... feature chrome edge firefox internet explorer opera safari av1 support 70 75 67 no 57 no container support isobmff[1], mpeg-ts, mp4, webm rtp / webrtc compatible yes supporting/maintaining organization alliance for open media specification https://aomediacodec.github.io/av1-spec/av1-spec.pdf licensing royalty-free, open standard [1] iso base media file format [2] see the av1 specification's tables of levels, which describe the maximum resolutions and rates at each level.
... [1] while firefox does not generally support h.263, the openmax platform implementation (used for the boot to gecko project upon which firefox os was based) did support h.263 in 3gp files.
...And 10 more matches
io/file - Archive of obsolete content
open(path, mode) returns a stream providing access to the contents of a file.
... parameters path : string the path of the file to open.
... if the string contains "r", the file is opened in read-only mode.
...And 9 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
"> <span>test</span> </div> javascript: var mydiv = document.getelementbyid("foo"); var mychildren = mydiv.childnodes; for (var i = 0; i < mychildren.length; i++) { if (mychildren[i].nodetype == 1){ // element node }; }; generate and manipulate content mozilla supports the legacy methods for adding content into the dom dynamically, such as document.write, document.open and document.close.
...one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading.
... therefore, you may execute the line after the window.open line before the new window has finished.
...And 9 more matches
Monitoring downloads - Archive of obsolete content
the result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension.
... 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 open the database this.storageser...
...vice = components.classes["@mozilla.org/storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); // now create the table; if it already exists, this fails, but we don't care!
...And 9 more matches
Creating a Window - Archive of obsolete content
opening a window in order to open a xul window, there are several methods that can be used.
... note: the local xul document can be opened in the browser as mentioned above only if |dom.allow_xul_xbl_for_file| preference in "about:config" has been set to |true| .
... the correct way, of course, is to open the window using javascript.
...And 9 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards such as html 5, css 3, the w3c dom, xml, javascript, and others.
...gecko enables a pioneering new class of dynamic content that is more interactive and offers greater presentation control to web developers, using open and recommended internet standards instead of proprietary apis.
... because gecko is small, lightweight, and open source, other companies and organizations can easily reuse it.
...And 9 more matches
Beginner's guide to media queries - Learn web development
@media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source.
...for example, to make the color blue if the viewport is narrower than 600 pixels, use max-width: @media screen and (max-width: 600px) { body { color: blue; } } open this example in the browser, or view the source.
... @media (orientation: landscape) { body { color: rebeccapurple; } } open this example in the browser, or view the source.
...And 9 more matches
sample2
progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to create context for signing\n"); rv = secfailure; goto cleanup; ...
...n"); goto cleanup; } cleanup: if (infile) { pr_close(infile); } if (sgn) { sgn_destroycontext(sgn, pr_true); } return rv; } /* * verify the signature using public key */ secstatus verifydata(const char *infilename, seckeypublickey *pk, secitem *sigitem, secupwdata *pwdata) { unsigned int nb; unsigned char ibuf[4096]; secstatus rv = secfailure; vfycontext *vfy = null; prfiledesc *infile = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } vfy = vfy_createcontext(pk, sigitem, sec_oid_pkcs1_md5_with_rsa_encryption, pwdata); if (!vfy) { pr_fprintf(pr_stderr, "unable to create context for verifying signature\n"); rv = secfailure; goto cleanu...
...e, "%s\n\n", trailer); return secsuccess; } /* * read cryptographic parameters from the header file */ secstatus readfromheaderfile(const char *filename, headertype type, secitem *item, prbool ishexdata) { secstatus rv = secsuccess; prfiledesc* file = null; secitem filedata; secitem outbuf; unsigned char *nonbody; unsigned char *body; char *header; char *trailer; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); rv = secfailure; goto cleanup; } switch (type) { case pubkey: header = pubkey_header; trailer = pubkey_trailer; break; case symkey: header = enckey_header; trailer = enckey_trailer; break; case mackey: header = mackey_header; trailer = mackey_trailer; break; case iv: header = iv_header; trailer = iv_trai...
...And 9 more matches
Places utilities for JavaScript
orbookmark(int aboomarkid); array string geturlandpostdataforkeyword(string akeyword); string getitemdescription(int aitemid); nsinavhistoryresultnode getmostrecentbookmarkforuri(nsiuri auri); nsinavhistoryresultnode getmostrecentfolderforfeeduri(nsiuri auri); nsinavhistoryresultnode geturlsforcontainernode(nsinavhistoryresultnode anode); void opencontainernodeintabs(nsinavhistoryresultnode anode, nsidomevent aevent); void openurinodesintabs(array nsinavhistoryresultnode anodes, nsidomevent aevent); void createmenuitemfornode(nsinavhistoryresultnode anode, acontainersmap); constants mimetypes type_x_moz_place_container type_x_moz_place_separator: "text/x-moz-place-separator", type_x_moz_place: "text/x-moz-plac...
... parameters folderid the folder to open [optional] excludeitems true to hide all items (individual bookmarks).
...the result.root is guaranteed to be open.
...And 9 more matches
Index
MozillaTechXPCOMIndex
199 moziplacesautocomplete interfaces, interfaces:scriptable, places, xpcom, xpcom interface reference mark a page as being currently open.
... 253 defaultkeybinding provides localized string of global keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o).
... 330 nsiapplicationcache dom, interfaces, interfaces:scriptable, offline_resources, xpcom, xpcom interface reference each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries.
...And 9 more matches
nsIHttpChannel
this attribute may only be set before the channel is opened.
... exceptions thrown ns_error_failure if set after the channel has been opened.
... this attribute may only be set before the channel is opened.
...And 9 more matches
WebGL: 2D and 3D graphics for the web - Web APIs
WebAPIWebGL API
webgl does so by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements.
... the webgl 2 api introduces support for much of the opengl es 3.0 feature set; it's provided through the webgl2renderingcontext interface.
...it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render targets, fragment depth.
...And 9 more matches
A simple RTCDataChannel sample - Web APIs
the rtcdatachannel interface is a feature of the webrtc api which lets you open a channel between two peers over which you may send and receive arbitrary data.
... in this example, we will open an rtcdatachannel connection linking two elements on the same page.
... set up the local peer localconnection = new rtcpeerconnection(); sendchannel = localconnection.createdatachannel("sendchannel"); sendchannel.onopen = handlesendchannelstatuschange; sendchannel.onclose = handlesendchannelstatuschange; the first step is to create the "local" end of the connection.
...And 9 more matches
Web audio codec guide - Web media technologies
after initially being a closed format, apple opened it up under an apache license.
... browser compatibility feature chrome edge firefox internet explorer opera safari alac support no no no no no yes container support mp4 rtp / webrtc compatible no licensing open license (apache license 2.0); source code available on github amr (adaptive multi-rate) the adaptive multi-rate audio codec is optimized for encoding human speech efficiently.
...atibility feature chrome edge firefox internet explorer opera safari flac support yes yes 51 (desktop) 58 (mobile) no no 11 container support mp4, ogg, flac rtp / webrtc compatible no licensing fully open and free of any licensing requirements g.711 (pulse code modulation of voice frequencies) the g.711 specification, published by the international telecommunications union (itu), was initially created in 1972 to define standards for encoding the voice frequencies on telephone lines into digital form.
...And 9 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
introduction javascript lacks functions for opening files and character-code conversion, among other things.
... <script type="application/javascript"><![cdata[ var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); alert(ioservice); ]]></script> </page> calling xpconnect using local files try saving the contents of listing 1 as the file test.xul, somewhere on your desktop, and drag and drop it into firefox to open it.
... permit by dialog try adding the contents of listing 2 to test.xul, before the line var ioservice = …, and re-open it in firefox.
...And 8 more matches
Localizing with Koala
click "open" to create the project.
...setup wizard will open.
...the easy way involves opening the console and issuing the following commands: c:\users\stas> cd c:\mozilla\l10n\application\firefox c:\mozilla\l10n\application\firefox> rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 3.6 requesting all changes adding changesets adding manifests adding file changes added 33099 changesets with 158636 changes to 50664 files (+9 heads) updat...
...And 8 more matches
Index
it's free and open source software, and many other software projects have decided to use it.
...it will detect and open an existing database, or it can create a new one.
...each layer defines its own functions for the open/close/read/write/poll/select (etc.) functions.
...And 8 more matches
nsIFilePicker
to create an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
...this should be set before calling open() or show().
...this should be set this before calling open() or show() to specify a starting point.
...And 8 more matches
nsINavHistoryContainerResultNode
dnodebydetails(in autf8string auristring, in prtime atime, in long long aitemid, in boolean arecursive); nsinavhistoryresultnode getchild(in unsigned long aindex); unsigned long getchildindex(in nsinavhistoryresultnode anode); attributes attribute type description childcount unsigned long the number of child nodes; accessing this throws an ns_error_not_available exception of containeropen is false.
... containeropen boolean set this to true to allow descent into this container.
...for queries and bookmark folders, however, being open means they must keep themselves up-to-date by listening for updates and re-querying as needed.
...And 8 more matches
nsIWindowsRegKey
siwindowsregkey createchild(in astring relpath, in unsigned long mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); void open(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey openchild(in astring relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in as...
... constant value description root_key_classes_root 0x80000000 root_key_current_user 0x80000001 root_key_local_machine 0x80000002 access constants values for the mode parameter passed to the open() and create() methods.
...create() this method opens an existing key or creates a new key.
...And 8 more matches
nsIZipReader
nputstream(in string zipentry); obsolete since gecko 10 nsiinputstream getinputstreamwithspec(in autf8string ajarspec, in autf8string zipentry); nsiinputstream getinputstreamwithspec(in autf8string ajarspec, in string zipentry); obsolete since gecko 10 boolean hasentry(in autf8string zipentry); void init(in nsifile zipfile); obsolete since gecko 1.9 void open(in nsifile zipfile); void openinner(in nsizipreader zipreader, in autf8string zipentry); void openinner(in nsizipreader zipreader, in string zipentry); obsolete since gecko 10 void test(in autf8string aentryname); void test(in string aentryname); obsolete since gecko 10 attributes attribute type description file nsifile the file t...
... nsiinputstream getinputstream( in autf8string zipentry ); parameters zipentry the name of the entry to open() the stream from.
...if the entry refers to a directory (ends with '/'), a directory stream is opened, otherwise the contents of the file entry is returned.
...And 8 more matches
Add to iPhoto
initializing core foundation the init() method, which sets everything up, looks like this: init: function() { this.lib = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); // declaring all the apis goes here } shutting down core foundation while the core foundation system framework itself doesn't need to be shut down, we do need to close the library we opened using the js-ctypes api; that's where the shutdown() method comes in: shutdown: function() { this.lib.close(); } select api dec...
...the application services api we'll be using is the launch services api, which is used to launch applications and open files in default (or specific, in our case) applications.
... the function we'll be using is lsopenurlswithrole(), whose declaration looks like this: this.lsopenurlswithrole = this.lib.declare("lsopenurlswithrole", ctypes.default_abi, // abi type osstatus, // returns osstatus corefoundation.cfarrayref, // array of files to open in the app optionbits, // roles mask ctypes.voidptr_t, // inaeparam this.struct_lsapplicationparameters.ptr, // description of the app to launch ctypes.voidptr_t, // psn array pointer ...
...And 8 more matches
ARIA Test Cases - Accessibility
for more up-to-date examples, see the openajaxalliance aria examples page.
... a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken.
... when closing the menu, this should be indicated, and focus should be repeated for the menu button the menu was opened from, or the new focus location if the activated menu item results in that.
...And 8 more matches
window/utils - Archive of obsolete content
the exception is the windows() function which returns an array of currently opened windows.
... parameters window : nsidomwindow returns nsiloadcontext open(uri, options) this function is used to open top level (application) windows.
... var { open } = require('sdk/window/utils'); var window = open('data:text/html,hello window'); this function wraps nsiwindowwatcher.openwindow.
...And 7 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
when venkman first launches, it can only debug the file currently open in your web browser.
... this is because a lot of javascript files can slow down the browser down if they’re opened for debugging, but you’ll need to lift this restriction in order to develop extensions.
... using venkman read in source code activate venkman, and then select open windows:quicknote.xul:files on the top-left of the screen.
...And 7 more matches
Setting Up a Development Environment - Archive of obsolete content
it's free, open source, and cross-platform.
...after setting up make, you should be able to open a command line window, run "make -ver", and get the installed version of make as output.
... open the project file (helloworld2.komodoproject) from the src directory in komodo edit.
...And 7 more matches
Creating Dialogs - Archive of obsolete content
creating a dialog the opendialog() function is used to open a dialog, and is related to open().
... this function differs from open() in several ways.
... in addition, the opendialog() function can take additional arguments beyond the first three.
...And 7 more matches
What are browser developer tools? - Learn web development
note: before you run through the examples below, open the beginner's example site that we built during the getting started with the web article series.
... you should have this open as you follow the steps below.
... how to open the devtools in your browser the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: how do you pull it up?
...And 7 more matches
Debugging on Mac OS X
to work around that, the steps below have you initialize the project outside the mozilla source tree, close the project, copy the .xcodeproj project "file" into the source tree, and then reopen the project to finish setting it up.
... these steps were last updated for xcode 10.3: open xcode, and create a new project with file > new project.
... before going any further, close the project (file > close project) and open finder.
...And 7 more matches
PKCS #11 Module Specs
flags valid flags are: nomoddb don't open secmod.db and try to supply the strings.
... readonly databases should be opened read only.
... nocertdb don't try to open a certificate database.
...And 7 more matches
nsITreeView
getparentindex(in long rowindex); long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstri...
...ng action, in long row); void selectionchanged(); void setcelltext(in long row, in nsitreecolumn col, in astring value); void setcellvalue(in long row, in nsitreecolumn col, in astring value); void settree(in nsitreeboxobject tree); void toggleopenstate(in long index); attributes attribute type description rowcount long the total number of rows in the tree (including the offscreen rows).
... note: nsitreeview implementations must be prepared to handle a call to toggleopenstate for any row index which returns true for a call to iscontainer, even if iscontainerempty returns true.
...And 7 more matches
Standard OS Libraries
components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd162805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", [ { "x": ctypes.long }, { "y": ctypes.lo...
...there is a star/asterik ("*") before "bsd" because this means the bsd family such as freebsd, openbsd (who by the way made ssh), netbsd, etc.
...on top of which everybody uses "window managers" (known as "wm"s) such as fluxbox, i3, awesome, openbox, mutter (used by gnome 3), plasma (used by kde) etc.
...And 7 more matches
CacheStorage - Web APIs
use cachestorage.open() to obtain a cache instance.
...those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu.
...equivalent functionality to match a cache entry can be implemented by returning an array of cache names from cachestorage.keys(), opening each cache with cachestorage.open(), and matching the one you want with cache.match().
...And 7 more matches
IDBKeyRange - Web APIs
a bounded key range can either be open (the endpoints are excluded) or closed (the endpoints are included).
... y, true, true) all keys > x && ≤ y idbkeyrange.bound(x, y, true, false) all keys ≥ x &&< y idbkeyrange.bound(x, y, false, true) the key = z idbkeyrange.only(z) a key is in a key range if the following conditions are true: the lower value of the key range is one of the following: undefined less than key value equal to key value if loweropen is false.
... the upper value of the key range is one of the following: undefined greater than key value equal to key value if upperopen is false.
...And 7 more matches
WebGLRenderingContext.pixelStorei() - Web APIs
pixel storage parameters parameter name (for pname) description type default value allowed values (for param) specified in gl.pack_alignment packing of pixel data into memory glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_alignment unpacking of pixel data from memory.
... glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_flip_y_webgl flips the source data along its vertical axis if true.
... glint 0 0 to infinity opengl es 3.0 gl.pack_skip_pixels number of pixel locations skipped before the first pixel is written into memory.
...And 7 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
not allowed annotation annotation noopener creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value).
...additionally, has the same effect as noopener.
... not allowed annotation annotation opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value).
...And 7 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
(default) _blank: usually a new tab, but users can configure browsers to open a new window instead.
... note: when using target, add rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g.
... firefox 79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".
...And 7 more matches
widget - Archive of obsolete content
you can attach panels to them that open when they're clicked, or you can define a custom click handler to perform some other action, like opening a web page in a tab.
... data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel }); note that this is, at the moment, the only way you can attach a panel to a widget.
...if you assign the panel to the widget after construction, the panel can still be shown but will not be anchored to the widget: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); widget = require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png") }); widget.panel = clockpanel; // will not be anchored widget.panel.show(); also, if you try to call panel.show() inside your widget's click event listener, the panel will not be anchored: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") ...
...And 6 more matches
Reading from Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...to create an input stream, first get a reference to a nsifile, and then use nsiscriptableio.newinputstream() to open a stream for reading from it.
...this method will open the file and return a stream.
...And 6 more matches
Popup Guide - Archive of obsolete content
popup types xul provides a number of different types of elements which may be used to create popup menus or other types of popup widgets, which vary based on the manner in which they are attached to an element and the manner in which they are opened.
... context menus a context menu is like a regular menu except that the commands it contains apply to what the user had clicked on to open the context menu.
... opening a menu or popup most menus and popups are opened automatically when they are associated with an element.
...And 6 more matches
Building a Theme - Archive of obsolete content
the location differs by operating system: linux: /usr/lib/mozillafirefox/chrome/classic.ja or /usr/lib/firefox-*.*.*/omni.ja windows: \program files\mozilla firefox\omni.ja mac os x: /applications/firefox.app/contents/macos/omni.ja now, open (or unzip) this file into the directory you created.
... create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> ...
... if you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you.
...And 6 more matches
Scratchpad - Archive of obsolete content
it is also possible to use scratchpad over pages opened from a local file system, if permission policies allow that.
... usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
... this will open up scratchpad in its own window.
...And 6 more matches
How to get a stacktrace with WinDbg
debugging to begin debugging, ensure that firefox is not already running and open windbg from the start menu.
... (start->all programs->debugging tools for windows->windbg) next, open the "file" menu and choose "open executable...".
... in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox).
...And 6 more matches
JavaScript OS.Constants
emfile too many open files in the process enametoolong name too long enfile too many open files on the system enoent no such file or directory enomem cannot allocate memory enospc no space on device enotdir is not a directory enxio device no configured or does not support operation eopnotsupp (not always available under wi...
... exdev cross-device link opening files unix access rights defined on all platforms but meaningful only on unix.
... unix opening mode o_append open the file for appending.
...And 6 more matches
Application Translation with Mercurial
comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g.
... now go in the file system to the file and open it in your favorite text editor.
...the page which opens has a bar holding information about how many texts (strings) have already been translated, how many there are in english and your locale and have the same text, and how many are missing in your local.
...And 6 more matches
Places Developer Guide
var foldernode = result.root; // open the folder, and iterate over its contents.
... foldernode.containeropen = true; for (var i=0; i < foldernode.childcount; ++i) { var childnode = foldernode.getchild(i); // some item properties.
... if (type == ci.nsinavhistoryresultnode.result_type_uri) { var uri = childnode.uri; } else if (type == ci.nsinavhistoryresultnode.result_type_folder) { childnode.queryinterface(ci.nsinavhistorycontainerresultnode); childnode.containeropen = true; // now you can iterate over a subfolder's children } } ther available node types are documented in the idl.
...And 6 more matches
Querying Places
when a "place:" uri is bookmarked, it will expand to the results of the query when it is opened by the user.
... containers can be open or closed.
... this corresponds to the open and closed state in a tree view, and can also be mapped to showing and hiding menus.
...And 6 more matches
nsITextInputProcessor
tip.appendclausetopendingcomposition("foo-".length, tip.attr_converted_clause); tip.appendclausetopendingcomposition("bar".length, tip.attr_selected_clause); tip.appendclausetopendingcomposition("-buzz".length, tip.attr_converted_clause); // then, sets the caret if you need tip.setcaretinpendingcomposition("foo-bar".length); // finally, flush the pending composition on the focused editor if (!tip.flushpendingcompos...
...for example: tip.setpendingcompositionstring("a"); tip.appendclausetopendingcomposition("a".length, tip.attr_raw_clause); tip.setcaretposition("a".length); // this means that the first composition character is inputted by a keypress of "a" key.
...var shiftkeyevent = new keyboardevent("", { key: "shift", code: "shiftleft", keycode: keyboardevent.dom_vk_shift }); tip.keydown(shiftkeyevent); tip.setpendingcompositionstring("ab"); tip.appendclausetopendingcomposition("ab".length, tip.attr_raw_clause); tip.setcaretposition("ab".length); // this means that the second composition character is inputted by a keypress of "b" key during left shift key is down.
...And 6 more matches
nsIWindowMediator
xpfe/appshell/public/nsiwindowmediator.idlscriptable the window mediator is a mozilla component that keeps track of open windows.
...this example below waits for listens to when a window opens, and then after that window opens it adds event listener to listen to when the window completes loading, after that it fires a function.
... important: this will attach the functionality to future opened windows, so if you copy paste this code to scratchpad, then after running this script, you need to open a new window by pressing ctrl + n and then in the new window, selecting tabs will fire the alert.
...And 6 more matches
Zombie compartments
for example, if i open www.techcrunch.com the following compartments are created.
... for example, if i open https://bugzilla.mozilla.org/show_bug.cgi?id=668871 in one tab, then compartment(https://bugzilla.mozilla.org/show_bug.cgi?id=668871) will show up in about:memory.
... if i then open https://bugzilla.mozilla.org/show_bug.cgi?id=700547 and close the first tab, the same compartment will continue to be used.
...And 6 more matches
Index - Firefox Developer Tools
if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting.
...to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": 40 dom allocation example this article describes a very simple web page that we'll use to illustrate some features of the memory tool.
...xamine and edit the box model guide, tools with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: 65 inspect and select colors guide, inspector, tools in the css pane's rules view, if a rule contains a color value, you'll see a sample of the color next to the value: 66 open the inspector guide, inspector, tools there are two main ways to open the inspector: 67 reposition elements in the page starting in firefox 48 you can move absolutely positioned elements by dragging them around the page.
...And 6 more matches
Examine and edit HTML - Firefox Developer Tools
there is an ellipsis shown between the opening and closing tag of an element when the node is collapsed if it has larger contents.
...clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of javascript code in the debugger where the listener is defined.
... ::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.
...And 6 more matches
about:debugging - Firefox Developer Tools
opening the about:debugging page there are two ways to open about:debugging: type about:debugging in the firefox url bar.
... when about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup: setup use the setup tab to configure the connection to your remote device.
... this firefox provides information about temporary extensions you have loaded for debugging, extensions that are installed in firefox, the tabs that you currently have open, and service workers running on firefox.
...And 6 more matches
EventSource - Web APIs
an eventsource instance opens a persistent connection to an http server, which sends events in text/event-stream format.
... the connection remains open until closed by calling eventsource.close().
... once the connection is opened, incoming messages from the server are delivered to your code in the form of events.
...And 6 more matches
Using Service Workers - Web APIs
the service worker will now control pages, but only those opened after the register() is successful.
... const imgload = (url) => { return new promise((resolve, reject) => { var request = new xmlhttprequest(); request.open('get', url); request.responsetype = 'blob'; request.onload = () => { if (request.status == 200) { resolve(request.response); } else { reject(error('image didn\'t load successfully; error code:' + request.statustext)); } }; request.onerror = () => { reject(error('there was a network error.')); }; request.send(); }); } we return ...
... 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/snowtroo...
...And 6 more matches
Signaling and video calling - Web APIs
in this article, we will further enhance the websocket chat first created as part of our websocket documentation (this article link is forthcoming; it isn't actually online yet) to support opening a two-way video call between users.
... once the two peers agree upon a mutually-compatible candidate, that candidate's sdp is used by each peer to construct and open a connection, through which media then begins to flow.
...ral there are a few key points at which signaling messages get handled: the signaling process involves this exchange of messages among a number of points: each user's client running within a web browser each user's web browser the signaling server the web server hosting the chat service imagine that naomi and priya are engaged in a discussion using the chat software, and naomi decides to open a video call between the two.
...And 6 more matches
font-variant-alternates - CSS: Cascading Style Sheets
tes: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters.
...it corresponds to the opentype value hist.
...it corresponds to the opentype value salt, like salt 2.
...And 6 more matches
font-variant-numeric - CSS: Cascading Style Sheets
it corresponds to the opentype values ordn.
...it corresponds to the opentype values zero.
...it corresponds to the opentype values lnum.
...And 6 more matches
text-emphasis-style - CSS: Cascading Style Sheets
it may be computed to or rendered as 'f' only */ /* keyword values */ text-emphasis-style: filled; text-emphasis-style: open; text-emphasis-style: dot; text-emphasis-style: circle; text-emphasis-style: double-circle; text-emphasis-style: triangle; text-emphasis-style: filled sesame; text-emphasis-style: open sesame; /* global values */ text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-style: unset; syntax values none no emphasis marks.
...if neither filled nor open is present, this is the default.
... open the shape is hollow.
...And 6 more matches
File I/O - Archive of obsolete content
le, use nsifile.createunique(): components.utils.import("resource://gre/modules/fileutils.jsm"); var file = fileutils.getfile("tmpd", ["suggestedname.tmp"]); file.createunique(components.interfaces.nsifile.normal_file_type, fileutils.perms_file); // do whatever you need to the created file alert(file.path); user input via nsifilepicker the file picker component, nsifilepicker, can be used to open standard open / save dialogs.
...please note that some i/o, such as getting file information and opening the file can still happen on the main thread and therefore block the ui for periods of time.
...it defaults to // fileutils.mode_wronly | fileutils.mode_create | fileutils.mode_truncate; var ostream = fileutils.opensafefileoutputstream(file); var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"].
...And 5 more matches
Intercepting Page Loads - Archive of obsolete content
attaching the load event handler to gbrowser allows us to listen to these events for all tabs, without having to worry how many tabs are open.
...otherwise you have to make sure to avoid duplicated work if you have 2 or more windows open.
... the subject argument on the observe method is the nsihttpchannel object that corresponds to the http channel being opened or already opened, depending on the topic.
...And 5 more matches
List of Mozilla-Based Applications - Archive of obsolete content
dogtag certificate system uses nss dojo javascript toolkit uses mozilla rhino in shrinksafe eclipse platform open development platform the ajax toolkit framework, standard widget toolkit and eclipsemozilla projects make use of mozilla elixon wcms/xul web content management system fully remote xul wcms (no need to install extensions).
...ript application server uses mozilla rhino etna xml wysiwyg editor eudora mail and news application the upcoming version 8 will be based on thunderbird evergreen library automation system evolution email client uses nss exe elearning xhtml editor seems to be using xul for some of their webui facebook open platform facebook open platform the fbml parser used in the platform is based on mozilla code fennec browser for mobiles as mark notes: fennec is not firefox, it’s a completely different application findthatfont!
...st digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from global stats fossamail email client for windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner foxkeh clock clock frizione javascript development, testing and deployment environment uses mozilla rhino geckofx embeddable gecko gjs javascript bindings for gnome globalmojo browser that raises money for your favorite causes gluescript a javascript engine which can be used ...
...And 5 more matches
Building Hierarchical Trees - Archive of obsolete content
if the items are containers, the tree builder will mark the right rows as containers, so that they can be opened and closed with the small icon twisties on the left of the column.
...if a node is a container, the tree item becomes a container, and the user may open the row by double-clicking it.
...since a photo isn't a container, the tree rows will not become containers, so you will not be able to open them.
...And 5 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
key, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchco...
... enablehistory new in thunderbird 1requires seamonkey 2.0 type: boolean if true, an arrow button will appear on the end of the textbox which, when pressed, will open a dropdown menu of all available results.
...new in thunderbird 3requires seamonkey 2.0 a zero value will always open the popup.
...And 5 more matches
button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...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.
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
...And 5 more matches
Debugging a XULRunner Application - Archive of obsolete content
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...
... add ui to open venkman to your window (it could be a menu item or a toolbar button).
...And 5 more matches
Dialogs in XULRunner - Archive of obsolete content
file open and save dialogs are good examples of these.
...iption="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are fruity"/> <radio id="2" selected="true" label="strawberries because of color"/> <radio id="3" label="bananna because it pre packaged"/> </radiogroup> </groupbox> </dialog> xul window elements have a special method to open dialogs, called window.opendialog().
... here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal"); } the resulting dialog looks like this on windows 2000, and will look similar on other operating systems: the first thing that caught my eye about dialog is the button-related attributes on the element.
...And 5 more matches
What’s in the head? Metadata in HTML - Learn web development
now open the file in your browser.
... you should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser.
...it will look something like this (although it may change over time): <meta name="description" content="the mdn web docs site provides information about open web technologies including html, css, and apis for both web sites and progressive web apps."> now search for "mdn web docs" in your favorite search engine (we used google.) you'll notice the description <meta> and <title> element content used in the search result — definitely worth having!
...And 5 more matches
TypeScript support in Svelte - Learn web development
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/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode.
... note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to get the complete to-do list application in javascript before you start porting it to typescript.
...(the trailing dot tells vs code to open the current folder) to open the code editor.
...And 5 more matches
Mozilla’s UAAG evaluation report
see meta bug 41924 for open issues with the alt attribute.
...(p2) p our interface for image toggling needs redesign unfortunately, there are quite a few open bugs on image toggling guideline 4.
...(p2) c preferences, advanced, scripts & windows - allow scripts to "open unrequested windows" 5.2 keep viewport on top.
...And 5 more matches
Eclipse CDT Manual Setup
below.) initial workspace preferences when you open eclipse, it will ask you to "select a workspace" (a directory where eclipse will store files that it generates during indexing, and so on.) it's recommended that you have a separate workspace containing only a single project for each mozilla source tree [rational], and that you choose a directory outside the mozilla source.
...after selecting an appropriate directory, click ok, then close the "welcome" tab when the main eclipse window opens.
...download this first pass at an eclipse formatter configuration for mozilla c/c++ coding style, and install it by opening the workspace preferences, selecting "c/c++ > code style > formatter", and then using the "import" button to import that file.
...And 5 more matches
Localizing with Pontoon
pontoon will automatically open that locale's project for you to get started.
...and there it is, opened inside pontoon: main toolbar as you can see, most of the interface is taken by the website being translated.
... only the toolbar on top belongs to pontoon, containing the following items (from left to right): list of strings opens a sidebar with a list of all strings to localize.
...And 5 more matches
Web Replay
there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below.
... open a new tab in recording mode click the 'tools -> web developer -> web replay -> reload and record tab' menu item.
... this has the same effect as above but can be used when the developer tools are not open.
...And 5 more matches
nsIBrowserHistory
ice;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 auri); void removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify); void removepagesbytimeframe(in long long abegintime, in long long aendtime); void removepagesfromhost(in autf8string ahost, in boolean ...
...aentiredomain); void removevisitsbytimeframe(in long long abegintime, in long long aendtime); void unregisteropenpage(in nsiuri auri); obsolete since gecko 9.0 note: the markpageasfollowedlink and markpageastyped methods were moved to nsinavhistoryservice in gecko 22.0 so that all markpageas* methods can be found in one interface.
... registeropenpage() obsolete since gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) mark a page as being currently open.
...And 5 more matches
nsICacheSession
netwerk/cache/public/nsicachesession.idlscriptable handles open synchronous and asynchronous cache entry operations along with evicting cache entries and checking for cache devices instantiation according to the session storage policies.
... inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void asyncopencacheentry(in acstring key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait); void evictentries(); prbool isstorageenabled(); nsicacheentrydescriptor opencacheentry(in acstring key, in nscacheaccessmode accessrequested, in boolean blockingmode); void doomentry(in acstring key, in nsicachelistener listener); attributes attribute type description doomentriesifexpired prbool expired entries will be doomed or evicted if this attribute is set to true.
... methods asyncopencacheentry() this method gives an asynchronous cache access.
...And 5 more matches
nsIFileInputStream
if open_on_read is defined, and the file was recreated after the first delete, the file will be deleted again when it is closed again.
... reopen_on_rewind 1<<3 if this is set, the file will be reopened whenever seek(0) occurs.
... if the file is already open and the seek occurs, it will happen naturally.
...And 5 more matches
nsISound
event_alert_dialog_open 1 an alert dialog is opened.
... event_confirm_dialog_open 2 a confirm dialog is opened.
... event_prompt_dialog_open 3 a prompt dialog (one that allows the user to enter data, such as an authentication dialog) is opened.
...And 5 more matches
Using js-ctypes
this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/ctypes.jsm") loading a native library once you've imported the code module, you can call the ctypes.open() method to load each native library you wish to use.
... on windows, for example, you might load the system user32 library like this: var lib = ctypes.open("user32.dll"); on mac os x, you can load the core foundation library from the core foundation framework like this: var corefoundation = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); the returned object is a library object that you use to declare functions and data types for use with the loaded library.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("c:\\windows\\system32\\user32.dll"); /* declare the signature of the function we are going to call */ var msgbox = lib.declare("messageboxw", ctypes.winapi_abi, ctypes.int32_t, ctypes.int32_t, ctypes.jschar.ptr, ctypes.jschar.ptr, ctypes.int32_t);...
...And 5 more matches
IDBKeyRange.bound() - Web APIs
WebAPIIDBKeyRangebound
the bounds can be open (that is, the bounds exclude the endpoint values) or closed (that is, the bounds include the endpoint values).
... syntax var myidbkeyrange = idbkeyrange.bound(lower, upper); var myidbkeyrange = idbkeyrange.bound(lower, upper, loweropen); var myidbkeyrange = idbkeyrange.bound(lower, upper, loweropen, upperopen); parameters lower specifies the lower bound of the new key range.
... loweropen optional indicates whether the lower bound excludes the endpoint value.
...And 5 more matches
IDBObjectStore - Web APIs
idbobjectstore.index() opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor.
... idbobjectstore.opencursor() returns an idbrequest object, and, in a separate thread, returns a new idbcursorwithvalue object.
... idbobjectstore.openkeycursor() returns an idbrequest object, and, in a separate thread, returns a new idbcursor.
...And 5 more matches
text-emphasis - CSS: Cascading Style Sheets
it may be computed to or rendered as 'f' only */ /* keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /* keywords value combined with a color */ text-emphasis: filled sesame #555; /* global values */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset; values none no emphasis marks.
...if neither filled nor open is present, this is the default.
... open the shape is hollow.
...And 5 more matches
Link types - HTML: Hypertext Markup Language
<a>, <area>, <form> <link> noopener instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
... this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
... note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.
...And 5 more matches
Connection management in HTTP/1.x - HTTP
connection management is a key topic in http: opening and maintaining connections largely impacts the performance of web sites and web applications.
... this simple model held an innate limitation on performance: opening each tcp connection is a resource-consuming operation.
...the persistent-connection model keeps connections opened between successive requests, reducing the time needed to open new connections.
...And 5 more matches
Working with Events - Archive of obsolete content
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.
... so there are two main ways you will interact with the eventemitter framework: listening to built-in events emitted by objects in the sdk, such as tabs opening, pages loading, mouse clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide.
...many event emitters may emit more than one type of event: for example, a browser window might emit both open and close events.
...And 4 more matches
Finding window handles - Archive of obsolete content
rface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633539%28v=vs.85%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user32.declare('setforegroundwindow', ctypes.winapi_abi, ctypes.bool, // return bool ctypes.voidptr_t // hwnd ); var hwnd = ctypes.voidptr_t(ctypes.uint64(hwndstring)); var rez_setforegroundwindow = setforegroun...
...ace(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var nswindowstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var objc = ctypes.open(ctypes.libraryname('objc')); // types let id = ctypes.voidptr_t; let sel = ctypes.voidptr_t; // constants let nil = ctypes.voidptr_t(0); //common functions let sel_registername = objc.declare('sel_registername', ctypes.default_abi, sel, ctypes.char.ptr); let objc_msgsend = objc.declare('objc_msgsend', ctypes.default_abi, id, id, sel, '...'); /* https://developer.apple.com/library/mac/document...
...ctypes.unsigned_int : ctypes.unsigned_long; var xid = card32; var gdk = ctypes.open('libgdk-x11-2.0.so.0'); var gdk_x11_drawable_get_xid = gdk.declare('gdk_x11_drawable_get_xid', ctypes.default_abi, xid, gdkdrawable.ptr); var gdkwindowptrstring = basewindow.nativehandle; var gdkwinptr = gdkwindow.ptr(ctypes.uint64(gdkwindowptrstring)); var gdkdrawptr = ctypes.cast(gdkwinptr, gdkdrawable.ptr); var xidofwin = gdk_x11_drawable_get_xid(gdkdrawptr); gdkwindow* to gtkwindow* how ...
...And 4 more matches
Sidebar - Archive of obsolete content
opening and closing the sidebar firefox provides a built-in sidebarui object function defined in browser-sidebar.js.
... // toggle the bookmarks sidebar (close it if it's open or // open it if it's currently closed) sidebarui.toggle("viewbookmarkssidebar"); // show the history sidebar, whether it's hidden or already showing sidebarui.show("viewhistorysidebar"); // hide the sidebar, if one is showing sidebarui.hide(); avoid opening the sidebar on startup.
... users have been known to complain about this "feature", and if two or more extensions try to open their sidebars on startup, the user will see a flurry of sidebars opening and closing with which ever extension going last "winning".
...And 4 more matches
JavaScript Object Management - Archive of obsolete content
} // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs.
... once you have this working right, try the following: open the message a few times, so that the number increments.
... now open a new window and display the message from the new window.
...And 4 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
because gecko has a cross-platform architecture, is easily embeddable and is open source, it and the rich web applications it supports will be usable on any supported platform or device.
...open source and freely available, gecko is small in size and modular and achieves rendering speed superior to all other browser engines - which makes it perfect for embedding into both desktop applications such as browsers and new devices such as browsing appliances and set top boxes.
...gecko is based on contributions from mozilla.org, the organization chartered with managing netscape's open source initiative among thousands of internet developers and participating vendors such as netscape.
...And 4 more matches
File object - Archive of obsolete content
pipelines are implemented with the popen() system call.
... there is currently no support for p2open()-like semantics.
... file.isopen true if the file is open.
...And 4 more matches
Writing to Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...to create an input stream, first get a reference to a nsifile, and then use nsiscriptableio.newoutputstream() to open a stream for writing to it.
... notruncate if used, don't truncate an existing file when opening it for writing.
...And 4 more matches
PopupKeys - Archive of obsolete content
cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu.
...if a menu is selected, the menu will open.
...if a chain of submenus is open, only one level of menus is closed.
...And 4 more matches
Providing Command-Line Options - Archive of obsolete content
example the below example component implements two command line parameters: firefox.exe -myapp opens a chrome window for my application.
... firefox.exe -viewapp url opens a chrome window for my application and passes it an nsiuri object.
...er/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); components.utils.import("resource://gre/modules/services.jsm"); // changeme: to the chrome uri of your extension or application const chrome_uri = "chrome://myapp/content/"; /** * utility functions */ /** * opens a chrome window.
...And 4 more matches
Code Samples - Archive of obsolete content
you can launch an executable file or some other file that your operating system knows how to open.
...const path = "c:\\windows\\charmap.exe" var file = components .classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile) file.initwithpath(path) file.launch() open a web page if your button is in firefox or seamonkey, use code like this to open a web page.
... change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" document .getelementbyid("content") .webnavigation .loaduri(url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page.
...And 4 more matches
XPCOM Examples - Archive of obsolete content
creating a window menu the list of currently open mozilla windows can be used as an rdf datasource.
... this allows you to create a window menu with a list of the currently open windows in the application.
...toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
...And 4 more matches
Windows and menus in XULRunner - Archive of obsolete content
ystem "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem label="&file.new;" oncommand="dofilenew();"/> <menuitem label="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> <menuitem label="&edit.undo;" oncommand="doeditundo();"/> <menuitem labe...
...l="&edit.redo;" oncommand="doeditredo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ...
...xul has a way to centralize commands and event handlers for menus and toolbars that do the same thing, like open and save in the above example.
...And 4 more matches
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
the purpose of this document is to discuss and emphasize the importance of conforming to open technology standards that are external to the organization.
...merican national standards institute ) atsc (advanced television systems committee ) ieee (institute of electrical and electronics engineers ) ietf (internet engineering task force ) irtf (internet research task force ) iso (international standards organization ) itu (international telecommunication union ) oasis (organization for the advancement of structured information standards ) oma (open mobile alliance ), uni (unicode consortium ) w3c (world wide web consortium ) iana (internet assigned numbers authority ) ecma international like the processes and standards that accountants and project managers must follow, the above-mentioned standards organizations provide focus and direction for the development engineering community.
...and xerox chose to bypass multiple opportunities to port the code to other platforms, and to provide open-source code.
...And 4 more matches
Popup Window Controls - Archive of obsolete content
mozilla and firefox allow users to control most unsolicited attempts to open new windows such as popup and popunder windows.
... popup window controls configuration using the preference for privacy & security > popup windows, users can: allow all sites to open popup windows except for sites which the user has explicity denied permission what popup windows are suppressed?
... mozilla will attempt to suppress all calls to window.open() which occur in the following circumstances: global script which is executed as the document is loading script executed as part of a onload event handler script executed in settimeout() or setinterval() what popup windows are not suppressed?
...And 4 more matches
Test your skills: Links - Learn web development
the second link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "whales@example.com".
... note: the first link in the example has the target="_blank" attribute set on it, so that when you click on it, it opens the page in a new tab.
... this is not strictly best practice, but we've done it here so that the page doesn't open in the embedded <iframe>, getting rid of your example code in the process!
...And 4 more matches
Getting started with React - Learn web development
the scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab.
... let's open src/app.js, since our browser is prompting us to edit it.
... </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of three main parts: some import statements at the top, the app component in the middle, and an export statement at the bottom.
...And 4 more matches
Getting started with Svelte - Learn web development
you can see this in action by opening localhost:5000 in a new browser tab, right/ctrl-clicking on the hello world!
... inspecting main.js: the entry point of our app let’s open src/main.js, which is where the app component is being imported and used.
... after installing git, to clone the repository you should execute: git clone https://github.com/opensas/mdn-svelte-tutorial.git then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this: cd 02-starting-our-todo-app npm install npm run dev if you want lo learn more about git and github, we've compiled a list of links to useful guides — see git and github.
...And 4 more matches
Working with Svelte stores - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode.
...let's open app.svelte and try it.
... open the file stores.js and add the following store below the existing one: export const todos = writable([]) that was easy.
...And 4 more matches
Debugging on Windows
it would open visual studio with firefox's run options configured.
... alternatively, if you have generated the visual studio solution, via ./mach build-backend -b visualstudio, opening this solution allows you to run firefox.exe directly in the debugger.
...you can then select the process from dialog opened from "attach to process".
...And 4 more matches
Displaying Places information using views
it will open any parent nodes that it needs to in order to show the selected items.
... void selectitems( array aids, array aopencontainers ); parameters aids an array of item ids.
... aopencontainers if true or undefined, folders that are closed are also searched.
...And 4 more matches
IME handling guide
otherwise, we call it "ime is open".
... (fyi: "open" is also called "active" or "turned on".
... the other is ime open state: dont_change_open_state the open state of ime shouldn't be changed.
...And 4 more matches
CustomizableUI.jsm
this is often when the window has opened, but in the case of add-ons, could fire when the node has just been registered with customizableui after an add-on update or disable/enable sequence.
... oncustomizestart(awindow) fired when opening customize mode in awindow.
... onwindowopened(awindow) fired when a new customizable (ie browser) window is opened.
...And 4 more matches
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
will nss potentially open more than one session at a time?
... nss opens new read/write sessions for key generation, some password management, and storage of new certificates.
... if your token is read/write and has only one session, nss will open that one initial session read/write.
...And 4 more matches
mozIPlacesAutoComplete
toolkit/components/places/public/moziplacesautocomplete.idlscriptable this interface provides some constants used by the places autocomplete search provider as well as methods to track opened pages for autocomplete purposes.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void registeropenpage(in nsiuri auri); void unregisteropenpage(in nsiuri auri); constants constant value description match_anywhere 0 match anywhere in each searchable term.
... behavior_openpage 1 << 7 search for pages that have been marked as being opened, such as a tab in a tabbrowser.
...And 4 more matches
nsICache
non_blocking 0 the synchronous opencacheentry() may be blocking or non-blocking.
... if a cache entry is waiting to be validated by another cache descriptor (so no new cache descriptors for that key can be created), opencacheentry() will return ns_error_cache_wait_for_validation in non-blocking mode.
... blocking 1 the synchronous opencacheentry() may be blocking or non-blocking.
...And 4 more matches
nsIDownloadManager
n boolean aisprivate); void addlistener(in nsidownloadprogresslistener alistener); void canceldownload(in unsigned long aid); void cleanup(); void endbatchupdate(); obsolete since gecko 1.9.1 void flush(); obsolete since gecko 1.8 nsidownload getdownload(in unsigned long aid); void onclose(); obsolete since gecko 1.9.1 void open(in nsidomwindow aparent, in nsidownload adownload); obsolete since gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose); obsolete since gecko 1.9.1 void pausedownload(in unsigned long aid); void removedownload(in unsigned long aid); void removedownloadsbytimeframe(in long long abegintime, ...
... open() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) opens the download manager front end.
... void open( in nsidomwindow aparent, in nsidownload adownload ); parameters aparent the parent, or opener, of the front end.
...And 4 more matches
nsIWebSocketChannel
to create an instance, use: var websocketchannel = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiwebsocketchannel); method overview void asyncopen(in nsiuri auri, in acstring aorigin, in nsiwebsocketlistener alistener, in nsisupports acontext); void close(in unsigned short acode, in autf8string areason); void sendbinarymsg(in acstring amsg); void sendmsg(in autf8string amsg); attributes attribute type description extensions acstring sec-websocket-extensions response header value...
... 1001 close_going_away the endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.
... methods asyncopen() asynchronously opens the websocket connection.
...And 4 more matches
Index
if the user opens (but never sends or closes compose windows), this trick will not apply to them.
...for example, invoking thunderbird's help | what's new menu option opens a tab that displays web content.
... 74 building a thunderbird extension 1: introduction add-ons, extensions, thunderbird thunderbird is a community managed open-source email application.
...And 4 more matches
Introduction to DOM Inspector - Firefox Developer Tools
inspecting a document when the dom inspector opens, it may or may not load an associated document, depending on the host application.
...in firefox and seamonkey browser, these will be the webpages you have opened in tabs.
...a browser window and the dom inspector are likely be already open and displayed in this list.
...And 4 more matches
DevTools API - Firefox Developer Tools
the toolpanel is built only when the tool is selected (not when the toolbox is opened).
... showtoolbox(target [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given target either by creating a new one or activating an existing one.
... opensplitconsole() opens the split console to the bottom of the toolbox.
...And 4 more matches
Migrating from Firebug - Firefox Developer Tools
that means that when you open a page on the same origin in a different tab, firebug gets opened automatically.
... and when you open a page of a different origin in the same tab, it closes automatically.
...that means, that when you open the devtools in a tab, they stay open even when you switch between different websites.
...And 4 more matches
FileHandle API - Web APIs
var idbreq = indexeddb.open("myfilestoragedatabase"); idbreq.onsuccess = function(){ var db = this.result; var buildhandle = db.mozcreatefilehandle("test.txt", "plain/text"); buildhandle.onsuccess = function(){ var myfilehandle = this.result; console.log('handle', myfilehandle); }; }; mozcreatefilehandle() takes two arguments: a name and an optional type.
...the filehandle.open() method provides such an object which can be readonly or readwrite.
... // get a lockedfile object from the handle var myfile = myfilehandle.open('readwrite'); // start a writing operation var writing = myfile.append('some content'); writing.onsuccess = function () { console.log('writing operation successful'); } writing.onerror = function () { console.log('something goes wrong in the writing process: ' + this.error); } reading it's possible to directly write the content of a lockedfile object without using an intermediate file o...
...And 4 more matches
IDBCursor.direction - Web APIs
the direction read-only property of the idbcursor interface is a domstring that returns the direction of traversal of the cursor (set using idbobjectstore.opencursor for example).
...possible values are: value description next this direction causes the cursor to be opened at the start of the source.
... nextunique this direction causes the cursor to be opened at the start of the source.
...And 4 more matches
IDBFactory - Web APIs
you open — that is, create and access — and delete a database with this object, and not directly with idbfactory.
... methods idbfactory.open the current method to request opening a connection to a database.
... example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
...And 4 more matches
IDBIndex - Web APIs
WebAPIIDBIndex
idbindex.opencursor() returns an idbrequest object, and, in a separate thread, creates a cursor over the specified key range.
... idbindex.openkeycursor() returns an idbrequest object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.
... example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
...And 4 more matches
IDBRequest.transaction - Web APIs
this property can be null for requests not made within transactions, such as for requests returned from idbfactory.open — in this case you're just connecting to a database, so there is no transaction to return.
... if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with mode equal to "versionchange", and can be used to access existing object stores and indexes, or abort the the upgrade.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified ...
...And 4 more matches
window.postMessage() - Web APIs
broadly, one window may obtain a reference to another (e.g., via targetwindow = window.opener), and then dispatch a messageevent on it with targetwindow.postmessage().
...methods for obtaining such a reference include: window.open (to spawn a new window and then reference it), window.opener (to reference the window that spawned this one), htmliframeelement.contentwindow (to reference an embedded <iframe> from its parent window), window.parent (to reference the parent window from within an embedded <iframe>), or window.frames + an index value (named or numeric).
...otherwise, a security hole in the site you trusted to send only trusted messages could then open a cross-site scripting hole in your site.
...And 4 more matches
HTML in XMLHttpRequest - Web APIs
usage retrieving an html resource as a dom using xmlhttprequest works just like retrieving an xml resource as a dom using xmlhttprequest, except you can't use the synchronous mode and you have to explicitly request a document by assigning the string "document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send().
... var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("get", "file.html"); xhr.responsetype = "document"; xhr.send(); feature detection method 1 this method relies on the "force async" nature of the feature.
... when you try to set responsetype of an xmlhttprequest object after it is opened as "sync".
...And 4 more matches
Sending and Receiving Binary Data - Web APIs
var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary...
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "blob"; oreq.onload = function(oevent) { var blob = oreq.response; // ...
... function load_binary_resource(url) { var req = new xmlhttprequest(); req.open('get', url, false); //xhr binary charset opt by marcus granado 2006 [http://mgran.blogspot.com] req.overridemimetype('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responsetext; } the magic happens in line 5, which overrides the mime type, forcing the browser to treat it as plain text, using a user-defined character set.
...And 4 more matches
@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... font-feature-settings allows control over advanced typographic features in opentype fonts.
... font-variation-settings allows low-level control over opentype or truetype font variations, by specifying the four letter axis names of the features to vary, along with their variation values.
...And 4 more matches
font-variant-caps - CSS: Cascading Style Sheets
in each case, if the font doesn't support the opentype value, then it synthesizes the glyphs.
... small-caps enables display of small capitals (opentype feature: smcp).
... all-small-caps enables display of small capitals for both upper and lowercase letters (opentype features: c2sc, smcp).
...And 4 more matches
Media container formats (file types) - Web media technologies
video codecs supported by 3gp codec browser support chrome edge firefox safari avc (h.264) yes1,2 h.263 yes1 mpeg-4 part 2 (mp4v-es) yes1 vp8 yes1 [1] firefox only supports 3gp on openmax-based devices, which currently means the boot to gecko (b2g) platform.
...upported by 3gp codec browser support chrome edge firefox safari amr-nb yes1 amr-wb yes1 amr-wb+ yes1 aac-lc yes1,2 he-aac v1 yes1,2 he-aac v2 yes1,2 mp3 yes1 [1] firefox only supports 3gp on openmax-based devices, which currently means the boot to gecko (b2g) platform.
... ogg the ogg container format is a free and open format maintained by the xiph.org foundation.
...And 4 more matches
context-menu - Archive of obsolete content
a bad use would be to show a submenu that listed all the user's tabs, since tabs aren't related to the page or the node the user clicked to open the menu.
... var cm = require("sdk/context-menu"); cm.item({ label: "edit image", context: cm.selectorcontext("img"), contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + '});', onmessage: function (imgsrc) { openimageeditor(imgsrc); } }); updating a menu item's label each menu item must be created with a label, but you can change its label later using a couple of methods.
...ction (pageurl) { editsource(pageurl); } }); show an "edit image" item when the menu is invoked on an image: var cm = require("sdk/context-menu"); cm.item({ label: "edit image", context: cm.selectorcontext("img"), contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + '});', onmessage: function (imgsrc) { openimageeditor(imgsrc); } }); show an "edit mozilla image" item when the menu is invoked on an image in a mozilla.org or mozilla.com page: var cm = require("sdk/context-menu"); cm.item({ label: "edit mozilla image", context: [ cm.urlcontext(["*.mozilla.org", "*.mozilla.com"]), cm.selectorcontext("img") ], contentscript: 'self.on("click", function (node, data) {' + ...
...And 3 more matches
indexed-db - Archive of obsolete content
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.
... so you can use the indexed-db module to access the same api: var { indexeddb } = require('sdk/indexed-db'); var request = indexeddb.open('mydatabase'); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; most of the objects that implement the indexeddb api, such as idbtransaction, idbopendbrequest, and idbobjectstore, are accessible through the indexeddb object itself.
... the add-on implements helper functions open(), additem() and getitems() to open the database, add a new item to the database, and get all items in the database.
...And 3 more matches
page-mod - Archive of obsolete content
attachto controls whether to attach scripts to tabs that were already open when the page-mod was created, and whether to attach scripts to iframes as well as the topmost document.
... name: attachto type: string,array if this option is not specified, content scripts: are not attached to any tabs that are already open when the page-mod is created.
... it accepts the following values: "existing": the page-mod will be automatically applied on already opened tabs.
...And 3 more matches
ui/button/action - Archive of obsolete content
by default, the button has global state: that is, its properties are the same across all open windows and tabs, and updating them updates the button's state across all open windows and tabs.
... by default, a button's properties are global, meaning that they are the same across all open windows and tabs, and that if you update these properties, then they are updated across all windows and tabs.
...for example, this add-on: creates a button with a default label opens a new tab sets a new label only for the new tab logs the result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels var { actionbutton } = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = actionbutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/...
...And 3 more matches
ui/sidebar - Archive of obsolete content
if a new window is opened from a window that has a sidebar visible, the new window gets a sidebar, too.
...this will be used for the label for your sidebar in the "sidebar" submenu in firefox, and will be shown at the top of your sidebar when it is open.
...this will be used for the label for your sidebar in the "sidebar" submenu in firefox, and will be shown at the top of your sidebar when it is open.
...And 3 more matches
Creating Reusable Modules - Archive of obsolete content
cumentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
...; // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data back var hash = ch.fin...
...; // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data back var hash = ch.fin...
...And 3 more matches
Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note ...
...click the icon, and a new tab will open with http://www.mozilla.org/ loaded into it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute jpm run again.
...And 3 more matches
Windows - Archive of obsolete content
opening new browser windows to open a new browser window, you can simply use window.open().
... however, window.open() returns a window object for content, not for the browser window itself, so you should get the chrome window first.
... example window.open(); //this open a pop-up window that could be "blocked" client-side //the following code generate an error as describe in the following warning box var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var newwindow = wm.getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console.
...And 3 more matches
Handling Preferences - Archive of obsolete content
to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms.
... the standard way of opening a preferences window is to open the add-ons manager, select the add-on, and then click on the preferences button.
... in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:optionsurl>chrome://xulschoolhello/content/preferenceswindow.xul</em:optionsurl> if you want to open this window from a different place in the ui, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a preferences window is different depending on the operating system.
...And 3 more matches
The Essentials of an Extension - Archive of obsolete content
you can open it with any text editor.
...if we open the chrome.manifest file (again, any text editor will do), we see that the same 3 sections are mentioned: content xulschoolhello content/ skin xulschoolhello classic/1.0 skin/ locale xulschoolhello en-us locale/ the chrome.manifest file tells firefox where to look for chrome files.
...open a new firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press enter.
...And 3 more matches
Updating addons broken by private browsing changes - Archive of obsolete content
ces: ff 15: nsidomstoragemanager ff 16: nsitransferable ff 18: imgicache moziasyncfavicons nsifaviconservice nsiwebbrowserpersist ff 19: nsicontentprefservice nsidownloadmanager nsidownload nsihttpauthmanager nsistricttransportsecurityservice ff 20: nsiprivatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: 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 co...
... chrome apis openbrowserwindow: takes an optional parameter to indicate desired properties of the window.
... passing {private: true} will cause a private window to open, otherwise the window will always be non-private.
...And 3 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
"component returned failure code: 0xc1f30001 (ns_error_not_initialized) [nsildapurl.spec]" nsresult: "0xc1f30001 (ns_error_not_initialized)" location: "js frame :: file:////usr/lib/thunderbird-3.0b2/defaults/autoconfig/prefcalls.js :: getldapattributes :: line 174" data: no] bug 295329 had been re-opened .
...one can check how firefox has been compiled by opening about:buildconfig (don't know the equivalent for thunderbird!
... documentation i also opened a report on the lack of documentation bug 178685 which led to the wonderful doc: http://wangrepublic.org/daniel/mozilla/prefs/ defeultpref for home page i cannot set the home page with the defaultpref function, so that it is set by default, but still allows the user to change it!
...And 3 more matches
MenuButtons - Archive of obsolete content
a button or toolbarbutton with a type attribute set to 'menu' creates a button that will open a menu when pressed.
...however a segment of the button displays an arrow which, when pressed, opens a menu.
... the 'menu' button the 'menu' type of button is used when pressing the button alone should just open the menu and not execute a command directly.
...And 3 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
open the file in seamonkey (for example, by dragging it and dropping it in the navigator window, or by choosing file – open file...
...to open the javascript console, choose tools – web development – javascript console.
... to install the packaged extension, open the xpi file in seamonkey.
...And 3 more matches
Commands - Archive of obsolete content
a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp" oncommand="alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the oncommand attribute on the button, we instead place it on a command element.
...the result is that when the button is pressed, the command 'cmd_openhelp' is invoked.
... example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable" oncommand="document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable" oncommand="document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in this example, both buttons us...
...And 3 more matches
Keyboard Shortcuts - Archive of obsolete content
once the file menu is open, the close menu item can be selected by pressing c.
...although shortcuts such as this might not always be valid, they will usually work any time the window is open.
... 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 vk_slash vk_back_quote vk_open_bracket vk_back_slash vk_close_bracket vk_quote vk_help for example, to create a shortcut that is activated when the user presses alt and f5, do the following: <keyset> <key id="test-key" modifiers="alt" keycode="vk_f5"/> </keyset> the example below demonstrates some more keyboard shortcuts: <keyset> <key id="copy-key" modifiers="accel" key="c"/> ...
...And 3 more matches
More Tree Features - Archive of obsolete content
the tree will draw the open and close icons to open and close a parent item as well as lines connecting the children to their parents.
...you can have the child rows initially displayed by adding the open attribute.
... when the user expands and collapses the parent, the view's toggleopenstate function will be called to toggle the item between open and closed.
...And 3 more matches
XUL Questions and Answers - Archive of obsolete content
he said the code will be open-source, but it is not released yet (as of oct 2006).
... a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done.
...a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument.
...And 3 more matches
menu - Archive of obsolete content
ArchiveMozillaXULmenu
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> ...
... <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
...And 3 more matches
toolbarbutton - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" labe...
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
... the open attribute is not present if the menu is closed.
...And 3 more matches
XULRunner tips - Archive of obsolete content
avascript console chrome://global/content/console.xul global:console about:config chrome://global/content/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defined.
... 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/ over...
...erlay chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/dom/keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://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 app...
...And 3 more matches
Theme changes in Firefox 2 - Archive of obsolete content
browser.css the following styles used in firefox 1.5 themes are no longer used in firefox 2 and should be removed from your theme: #bookmarks-button:active #copy-button:active #cut-button:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="smal...
...l"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolbar[iconsize="small"] #mail-button toolbar[iconsize="small"] #mail-button:active toolbar[iconsize="small"] #mail-button[disabled="true"] toolbar[iconsize="small"] #mail-button[open="true"] toolbar[iconsize="small"] #new-tab-button:active toolbar[iconsize="small"] #new-window-button:active toolbar[iconsize="small"] #paste-button:active toolbar[iconsize="small"] #print-button:active toolbar[iconsize="small"] #reload-button:active toolbar[iconsize="small"] #stop-button:active toolbar[mode="icons"] .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text toolbar[mode="text"] .toolbarbutton...
...button:hover .toolbarbutton-menubutton-dropmarker #back-button:hover:active #back-button:hover:active .toolbarbutton-menubutton-dropmarker #back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker #back-button[buttonover="true"] #back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker #back-button[disabled="true"] .toolbarbutton-menubutton-dropmarker #back-button[open="true"] #bookmarks-button:hover #bookmarks-button:hover:active #bookmarks-button[checked="true"] #copy-button:hover #copy-button:hover:active #cut-button:hover #cut-button:hover:active #downloads-button:hover #downloads-button:hover:active #feed-button[chromedir="rtl"][feeds]:active #feed-button[chromedir="rtl"][feeds]:hover #feed-button[feeds]:active #feed-button[feeds]:hover #forw...
...And 3 more matches
XForms Select1 Element - Archive of obsolete content
single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list.
... possible values are open and closed, default is closed (see #representations section to refer if the attribute is supported for every representation).
...xhtml widget characteristics analogous widgets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements.
... these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
... external links and linking to non-html resources links that open in a new tab or window via the target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements.
... these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
... external links and linking to non-html resources links that open in a new tab or window via the target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
...And 3 more matches
HTML basics - Learn web development
the main parts of our element are as follows: the opening tag: this consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets.
... the closing tag: this is the same as the opening tag, except that it includes a forward slash before the element name.
... the element: the opening tag, the closing tag and the content together comprise the element.
...And 3 more matches
Drawing graphics - Learn web development
first make a local copy of our 0_canvas_start.html file, and open it in your text editor.
... 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 javascript in a below section).
... make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor.
...And 3 more matches
Deployment and next steps - Learn web development
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/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode.
...opensas ?
...[y/n] n linked to opensas/mdn-svelte-tutorial (created .vercel) inspect: https://vercel.com/opensas/mdn-svelte-tutorial/[...] [1s] ✅ production: https://mdn-svelte-tutorial.vercel.app [copied to clipboard] [19s] deployed to production.
...And 3 more matches
CSUN Firefox Materials
" - alan cantor, cantor access consulting (http://www.cantoraccess.com) firefox includes keyboard access to all of its amazing features: find as you type allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search.
...this extension is useful for making ie specific sites, or site that read better in ie, open directly in firefox, while using the internet explorer engine tab mix plus completely enhances firefox's tab browsing capabilities.
...it also includes a full-featured session manager with crash recovery that can save and restore combinations of opened tabs and windows.
...And 3 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...
... updating pwindowglobal.ipdl open up ./dom/ipc/pwindowglobal.ipdl.
... defining windowglobalparent's alloc/deallocpechoparent() open up dom/ipc/windowglobalparent.h and we are going to add two things: at the top, add #include "mozilla/dom/echoparent.h" and then, as part of the windowglobalparent class definition, add the following two public methods: already_addrefed<echoparent> allocpechoparent(); bool deallocpechoparent(pechoparent* aactor); natrually, we will have to do the alloc/dealloc dance for the children t...
...And 3 more matches
Download
launchwhensucceeded boolean if this property is true when the download finishes successfully, the target file will be opened or executed automatically.
... launch() opens or executes the target file after download has completed.
... if the launcherpath property is null, the file will be opened with the default application for the mime type specified in the contenttype property.
...And 3 more matches
Localizing without a specialized tool
you can follow more detailed guidelines on compare-locale's page, but running the following command from the command line should be enough: $ sudo easy_install -u compare-locales to start, be sure to open your command line interface and change your directory to where you are keeping your localization files, the en-us sources $ cd /path/to/your/working/directory now, you will need run compare locales.
...run: $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing > ~/desktop/x-testing.compare open the x-testing.compare file that is on your desktop.
... you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/searchbar.dtd l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open the file in your x-testing directory and translate the words inside the quotation marks.
...And 3 more matches
Named Shared Memory
shared memory protocol named shared memory functions shared memory protocol using named shared memory functions pr_opensharedmemory creates the shared memory segment, if it does not already exist, or opens a connection with the existing shared memory segment if it already exists.
... pr_attachsharedmemory should be called following pr_opensharedmemory to map the memory segment to an address in the application's address space.
... filenames the name passed to pr_opensharedmemory should be a valid filename for a unix platform.
...And 3 more matches
NSS FAQ
MozillaProjectsNSSFAQ
it provides a complete open-source implementation of the crypto libraries used by mozilla and other companies in the firefox browser, aol instant messenger (aim), server products from red hat, and other products.
...for detailed information on the open-source nss project, see nss project page.
... how does nss compare to openssl?
...And 3 more matches
Overview of NSS
open source crypto libraries proven application security architecture if you want to add support for ssl, s/mime, or other internet security standards to your application, you can use network security services (nss) to implement all your security features.
... nss provides a complete open-source implementation of the crypto libraries used by aol, red hat, google, and other companies in a variety of products, including the following: mozilla products, including firefox, thunderbird, seamonkey, and firefox os.
... aol instant messenger (aim) open source client applications such as evolution, pidgin, apache openoffice, and libreoffice.
...And 3 more matches
Python binding for NSS
nss is an alternative to openssl and used extensively by major software projects.
...red hat following it's open source philosophy has contributed the source to the mozilla security project.
... red hat welcomes all interested contributors who would like to contribute the the python-nss project as part of an open source community.
...And 3 more matches
Retrieving part of the bookmarks tree
before accessing the children of any result container, you must first open it, and then you can iterate the children.
... as long as the container is open, it will listen for notifications from the bookmarks system to keep itself up-to-date.
...var rootnode = result.root; rootnode.containeropen = true; // iterate over the immediate children of this folder and dump to console for (var i = 0; i < rootnode.childcount; i ++) { var node = rootnode.getchild(i); dump("child: " + node.title + "\n"); } // close a container after using it!
...And 3 more matches
mozIStorageConnection
; void setgrowthincrement(in print32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print32 agranularity, in mozistorageprogresshandler ahandler); boolean tableexists(in autf8string atablename); attributes attribute type description connectionready boolean indicates if the connection is open and ready to use.
... this will be false if the connection failed to open, or it has been closed.
... exceptions thrown ns_error_unexpected thrown if the method was called on a thread other than the one that opened the connection.
...And 3 more matches
nsICacheEntryDescriptor
inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadataelement(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode get the a...
...openinputstream() this method opens blocking input stream to cache data.
...nsiinputstream openinputstream( in unsigned long offset ); parameters offset read starting from this offset into the cached data.
...And 3 more matches
nsIFileOutputStream
inherits from: nsioutputstream last changed in gecko 1.7 method overview void init(in nsifile file, in long ioflags, in long perm, in long behaviorflags); constants behavior flag constants constant value description defer_open 1<<0 see the same constant in nsifileinputstream.
... the deferred open will be performed when one of the following is called: seek() tell() write() flush() defer_open is useful if we use the stream on a background thread, so that the opening and possible stating of the file happens there as well.
... note: using this flag results in the file not being opened during the call to init().
...And 3 more matches
nsIResumableChannel
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void asyncopenat(in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid); obsolete since gecko 1.8 void resumeat(in unsigned long long startpos, in acstring entityid); attributes attribute type description entityid acstring the entity id for this uri.
... methods asyncopenat() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) open this channel, and read starting at the specified offset.
...void asyncopenat( in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid ); parameters listener as for asyncopen.
...And 3 more matches
nsISessionStore
new windows will be opened as needed.
... undoclosetab() reopens a closed tab in a specified window.
... nsidomnode undoclosetab( in nsidomwindow awindow, in unsigned long aindex ); parameters awindow the browser window in which to reopen a closed tab.
...And 3 more matches
Mozilla
android-specific test suites there are several android-specific test suites that run on the firefox for android codebase: api change rules until further notice, the following rules govern api changes: application cache implementation overview this happens in nshttpchannel::opencacheentry().
...you can open the command line interface by pressing shift + f2.
...here is a very simple example of the observer pattern: creating mozsearch plugins firefox 2 uses a simplified form of the opensearch format for storing search plugins.
...And 3 more matches
Plug-in Basics - Plugins
when the user opens a page that contains embedded data of a media type that invokes a plug-in, the browser responds with the following sequence of actions: check for a plug-in with a matching mime type load the plug-in code into memory initialize the plug-in create a new instance of the plug-in gecko can load multiple instances of the same plug-in on a single page, or in several open windows at the same tim...
...multiple instances of the same plug-in can exist (a) if there are multiple embedded objects on a single page, or (b) if several browser windows are open and each displays the same data type.
... advanced: you can determine which directories a gecko program checks with the linux strace command, for example: strace -e open /usr/bin/firefox 2>&1 | grep plugin but with version firefox-41.0.2 we can not check.
...And 3 more matches
Browser Toolbox - Firefox Developer Tools
to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging".
... opening the browser toolbox open the browser toolbox through the menu button and the menu items "developer" then "browser toolbox".
... you can also open it with the ctrl + alt +shift + i key combination ( cmd + opt +shift + i on a mac).
...And 3 more matches
Network request list - Firefox Developer Tools
this opens the blocking sidebar.
...this opens the search sidebar.
... save all as har creates an http archive (har) for all requests listed, and opens a file dialog, so you can save it to a file.
...And 3 more matches
Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ...
...you can also choose to open the tools in a separate window.
...to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox.
...And 3 more matches
Console messages - Firefox Developer Tools
file opens a file dialog box so you can save an export of all messages available in the display pane.
... the context menu for network messages includes a few extra items in addition the globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again.
... open url in new tab opens the url in a new browser tab.
...And 3 more matches
The JavaScript input interpreter - Firefox Developer Tools
the multi-line editing pane opens on the left side the of web console.
... you can open files when in multi-line mode, and save the current contents of the editing pane to a file.
... to open a file, press ctrl+o (cmd+o on macos).
...And 3 more matches
Canvas API - Web APIs
easeljs is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
... fabric.js is an open-source canvas library with svg parsing capabilities.
... heatmap.js is an open-source library for creating canvas-based data heat maps.
...And 3 more matches
Document.write() - Web APIs
WebAPIDocumentwrite
the document.write() method writes a string of text to a document stream opened by document.open().
... note: because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.
... example <html> <head> <title>write example</title> <script> function newcontent() { document.open(); document.write("<h1>out with the old, in with the new!</h1>"); document.close(); } </script> </head> <body onload="newcontent();"> <p>some original document content.</p> </body> </html> notes the text you write is parsed into the document's structure model.
...And 3 more matches
Using files from web applications - Web APIs
nal code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
...ccept="image/*" style="display:none"> <button id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the file picker as you wish.
... using a label element to trigger a hidden file input element to allow opening the file picker without using javascript (the click() method), a <label> element can be used.
...And 3 more matches
IDBDatabase.transaction() - Web APIs
transactions are opened in one of three modes: readonly, readwrite and readwriteflush (non-standard, firefox-only.) versionchange mode can't be specified here.
...to avoid slowing things down, don't open a readwrite transaction unless you actually need to write into the database.
... if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
...And 3 more matches
IDBDatabase - Web APIs
the idbdatabase interface of the indexeddb api provides a connection to a database; you can use an idbdatabase object to open a transaction on your database then create, manipulate, and delete objects (data) in that database.
...thus, you cannot execute commands, access data, or open anything outside of a transaction.
... example in the following code snippet, we open a database asynchronously (idbfactory), handle success and error cases, and create a new object store in the case that an upgrade is needed (idbdatabase).
...And 3 more matches
IDBObjectStore.createIndex() - Web APIs
from inside a idbopendbrequest.onupgradeneeded handler.
...has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
... for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // two event handlers for opening the database.
...And 3 more matches
IDBRequest - Web APIs
the interface idbopendbrequest is derived from idbrequest.
...if no source exists (such as when calling idbfactory.open), it returns null.
...this property can be null for certain requests, for example those returned from idbfactory.open unless an upgrade is needed.
...And 3 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.
... connection setup and management these interfaces, dictionaries, and types are used to set up, open, and manage webrtc connections.
... datachannel a new rtcdatachannel is available following the remote peer opening a new data channel.
...And 3 more matches
Writing WebSocket client applications - Web APIs
creating a websocket object in order to communicate using the websocket protocol, you need to create a websocket object; this will automatically attempt to open the connection to the server.
...the readystate will become open once the connection is ready to transfer data.
... if you want to open a connection and are flexible about the protocols you support, you can specify an array of protocols: var examplesocket = new websocket("wss://www.example.com/socketserver", ["protocolone", "protocoltwo"]); once the connection is established (that is, readystate is open), examplesocket.protocol will tell you which protocol the server selected.
...And 3 more matches
Window.close() - Web APIs
WebAPIWindowclose
this method can only be called on windows that were opened by a script using the window.open() method.
... if the window was not opened by a script, an error similar to this one appears in the console: scripts may not close windows that were not opened by script.
... syntax window.close(); examples closing a window opened with window.open() this example shows a method which opens a window and a second one which closes the window; this demonstrates how to use window.close() to close a window opened by calling window.open().
...And 3 more matches
Window.closed - Web APIs
WebAPIWindowclosed
false: the window is open.
... examples change the url of a window from a popup the following example demonstrates how a popup window can change the url of the window that opened it.
... before attempting to change the url, it checks that the current window has an opener using the window.opener property and that the opener isn't closed: // check that an opener exists and is not closed if (window.opener && !window.opener.closed) { window.opener.location.href = 'http://www.mozilla.org'; } note that popups can only access the window that opened them.
...And 3 more matches
Synchronous and asynchronous requests - Web APIs
var xhr = new xmlhttprequest(); xhr.open("get", "/bar/foo.txt", true); xhr.onload = function (e) { if (xhr.readystate === 4) { if (xhr.status === 200) { console.log(xhr.responsetext); } else { console.error(xhr.statustext); } } }; xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); line 2 specifies true for its third parameter to indicate that the request should be handled async...
...*/) { var xhr = new xmlhttprequest(); xhr.callback = callback; xhr.arguments = array.prototype.slice.call(arguments, 2); xhr.onload = xhrsuccess; xhr.onerror = xhrerror; xhr.open("get", url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary li...
...3); var xhr = new xmlhttprequest(); xhr.ontimeout = function () { console.error("the request for " + url + " timed out."); }; xhr.onload = function() { if (xhr.readystate === 4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { console.error(xhr.statustext); } } }; xhr.open("get", url, true); xhr.timeout = timeout; xhr.send(null); } notice the addition of code to handle the "timeout" event by setting the ontimeout handler.
...And 3 more matches
XMLHttpRequest.readyState - Web APIs
open() not called yet.
... 1 opened open() has been called.
... unsent the xmlhttprequest client has been created, but the open() method hasn't been called yet.
...And 3 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
") / "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 string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated.
... open-quote | close-quote these values are replaced by the appropriate string from the quotes property.
... no-open-quote | no-close-quote introduces no content, but increments (decrements) the level of nesting for quotes.
...And 3 more matches
Getting Started - Developer guides
}; next, after declaring what happens when you receive the response, you need to actually make the request, by calling the open() and send() methods of the http request object, like this: httprequest.open('get', 'http://www.example.org/some.file', true); httprequest.send(); the first parameter of the call to open() is the http request method – get, post, head, or another method supported by your server.
...be sure to use the exact domain name on all of your pages or you will get a "permission denied" error when you call open().
...you have two options to access that data: httprequest.responsetext – returns the server response as a string of text httprequest.responsexml – returns the response as an xmldocument object you can traverse with javascript dom functions note that the steps above are valid only if you used an asynchronous request (the third parameter of open() was unspecified or set to true).
...And 3 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
this can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method.
... allow-modals: lets the resource open modal windows.
... allow-popups: allows popups (such as window.open(), target="_blank", or showmodaldialog()).
...And 3 more matches
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
12-hour 24-hour edge the edge time control is somewhat more elaborate, opening up an hour and minute picker with sliding reels.
...in the following example we are setting a minimum time of 12:00 and a maximum time of 18:00: <form> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00"> <span class="validity"></span> </form> here's the css used in the above example.
... let's look at an example; here we've set minimum and maximum times, and also made the field required: <form> <div> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try to submit the form with an incomplete time (or with a time outside the set bounds), the browser displays an error.
...And 3 more matches
HTTP Index - HTTP
WebHTTPIndex
http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response.
... 15 connection management in http/1.x connection management, guide, http, networking, performance, webmechanics connection management is a key topic in http: opening and maintaining connections largely impacts the performance of web sites and web applications.
... 69 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes.
...And 3 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.
...keep in mind that if you're opening a new connection using the websocket api, or any library that does websockets, most or all of this is done for you.
... for example, opening a websocket connection is as simple as: websocket = new websocket("ws://destination.server.ext", "optionalprotocol"); the websocket() constructor does all the work of creating an initial http/1.1 connection then handling the handshaking and upgrade process for you.
...And 3 more matches
Image file type and format guide - Web media technologies
compression lossless licensing free and open under the creative commons attribution-sharealike license (cc-by-sa) version 3.0 or later.
... compression several compression methods are supported, including lossy or lossless algorithms licensing covered by the microsoft open specification promise; while microsoft holds patents against bmp, they have published a promise not to assert its patent rights as long as specific conditions are met.
... compression lossless (lzw) licensing while the gif format itself is open, the lzw compression algorithm was covered by patents until the early 2000s.
...And 3 more matches
2015 MDN Fellowship Program - Archive of obsolete content
2015 mdn fellowship program launching in q1 2015, the mozilla developer fellowship intends to accelerate the involvement of highly-skilled and experienced web developers with the open web.
... specific projects (we encourage you to target one of these in your application): testthewebforward brief project description mozilla participates in an important w3c open testing initiative, testthewebforward.com.
... github: brittanystoroz twitter: @brittanystoroz webgl brief project description webgl is the latest incarnation of the opengl family of real time rendering immediate mode graphics apis.
...And 2 more matches
panel - Archive of obsolete content
the screenshot below shows a panel whose content is built from the list of currently open tabs: panels are useful for presenting temporary interfaces to users in a way that is easier for users to ignore and dismiss than a modal dialog, since panels are hidden the moment users interact with parts of the application interface outside them.
... 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.
... if you want to close an existing panel without opening a new one, you can call the hide() or the destroy() method.
...And 2 more matches
private-browsing - Archive of obsolete content
the user enters private browsing by opening a new private browser window.
... when they do this, any existing non-private windows are kept open, so the user will typically have both private and non-private windows open at the same time.
...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 modul...
...And 2 more matches
io/text-streams - Archive of obsolete content
function readtextfromfile(filename) { var fileio = require("sdk/io/file"); var text = null; if (fileio.exists(filename)) { var textreader = fileio.open(filename, "r"); if (!textreader.closed) { text = textreader.read(); textreader.close(); } } return text; } function writetexttofile(text, filename) { var fileio = require("sdk/io/file"); var textwriter = fileio.open(filename, "w"); if (!textwriter.closed) { textwriter.write(text); textwriter.close(); } } globals constructors textreader(inputstream, charset) creates a buffered input stream that reads text from a backing stream using a given text encoding.
... you can also create textreader objects using io/file's open() function.
...it must already be opened.
...And 2 more matches
tabs/utils - Archive of obsolete content
opentab(window, url, options) open a new tab in the specified browser window.
... parameters window : window the browser window in which to open the tab.
... options : object optional options: name type inbackground boolean if true, open the new tab, but keep the currently selected tab selected.
...And 2 more matches
ui/button/toggle - Archive of obsolete content
by default, a button's properties are global, meaning that they are the same across all open windows and tabs, and that if you update these properties, then they are updated across all windows and tabs.
...for example, this add-on: creates a button with a default label opens a new tab sets a new label only for the new tab logs the result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels var { togglebutton } = require('sdk/ui/button/toggle'); var tabs = require("sdk/tabs"); var button = togglebutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/...
...", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "default label" console.log(button.state("window").label); // access the first tab's label -> "default label" console.log(button.state(tabs[0]).label); // access the second tab's label -> "tab-specific label" console.log(button.state(tabs[1]).label); } setting a property won't affect a more-specific property setting.
...And 2 more matches
Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save ...
...click the icon, and a new tab will open with https://www.mozilla.org/ loaded into it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
...And 2 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
step 3a: option 1: use nsizipreader let zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); zipreader.open(addondata.installpath); ...
... from there you can open nsiinputstreams, extract files, or perform some other functions.
...it's available in the global for a window, but in jsm you'll need to fetch it from an interface: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.responsetype = type; request.onerror = function(event) { logerrormessage("error attempting to load: " + url); returnresult(null); }; request.onload = function(event) { if (request.response) returnresult(request.response); else request.onerror(event); }; request.send(); } loadf...
...And 2 more matches
Adding sidebars - Archive of obsolete content
if not, you can open either one from the view > sidebar menu.
... they also have shortcuts to open or close them using the keyboard.
...the load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up .
...And 2 more matches
Setting up an extension development environment - Archive of obsolete content
to quickly achieve our task of creating just a developer profile, we will start the application with the parameters: /path/to/firefox -no-remote -p profilename without these parameters, the default behavior of your mozilla applications is to only open the everyday user profile: named default.
... as we are specifically defining the user profile dev, if you don't have the dev profile already created, the profile selection window opens, where you can create it.
...if you are already running a firefox instance without -no-remote, and you attempt to start another instance with -p profilename (but without the -no-remote parameter), that second invocation would ignore its -p profilename parameter, instead opening a new window for the already running instance; sharing all its profile, sessions etc.
...And 2 more matches
Promises - Archive of obsolete content
let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", dataurl); xhr.responsetype = "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct form data object for the // second request.
... resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("post", updateurl); xhr.send(form); }); // use the response of the second request.
... representative example usage components.utils.import("resource://gre/modules/sqlite.jsm"); task.spawn(function* () { // open the connection.
...And 2 more matches
Creating a dynamic status bar extension - Archive of obsolete content
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().
...startup() the startup() function is called when a new browser window is opened.
... httprequest = new xmlhttprequest(); httprequest.open('get', fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } the httprequest variable will contain an xmlhttprequest object.
...And 2 more matches
Index of archived content - Archive of obsolete content
implementing the widget overview storing annotations chrome authority creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (j...
... in firefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4: using xpcom—implementing advanced processes chapter 5: let's build a firefox extension chapter 6: firefox extensions an...
... bookmarks.import() adding preferences to an extension an interview with douglas bowman of wired news archived mozilla and build documentation activex control for hosting netscape plug-ins in ie archived spidermonkey docs file object open merging tracemonkey repo spidermonkey coding conventions autodial for windows nt automated testing tips and tricks automatic mozilla configurator enabling quicklaunch for all users how mozilla finds its configuration files how thunderb...
...And 2 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
chrome/locale/emptysidebar.dtd <!entity emptysidebar.title "emptysidebar"> <!entity openemptysidebar.commandkey "e"> <!entity openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3.
...chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="viewsidebarmenu"> <menuitem key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" ...
... if the sidebar is not going to have a command-key, one can remove the openemptysidebar.commandkey and openemptysidebar.modifierskey keys from the dtd, remove the <keyset> from the firefoxoverlay.xul file.
...And 2 more matches
Getting Started - Archive of obsolete content
opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive.
...chrome.manifest make a copy of chrome.manifest and place it in \my_theme and open it up in your text editor.
...install.rdf make a copy of install.rdf and place it in the my_theme directory, then open it up in your text editor.
...And 2 more matches
Getting Started - Archive of obsolete content
you can open them up in your zip program the same way you open up zip files.
...to point mozilla at the correct files we need to open up \mozilla\chrome\installed-chrome.txt in a text editor.
...go into \mozilla\chrome\classic\skin\classic\global and open button.css in your favourite text editor.
...And 2 more matches
In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours.
...then open the dom inspector (tools->web development->dom inspector).
...open up navigator.css, again (if you closed it), and look for the #back-button section.
...And 2 more matches
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive.
...(yes, this means that the structure of your new directory and classic.jar will be slightly different.) creating the install files contents.rdf make a copy of contents.rdf, place it in \my_theme and open it up in your text editor.
... install.rdf make a copy of install.rdf and place it in the my_theme directory, then open it up in your text editor.
...And 2 more matches
Creating a Help Content Pack - Archive of obsolete content
open up your favorite text editor and create the file content-pack.rdf.
... viewing your content pack in the help viewer to launch the help viewer with your content pack, you need to have chrome://help/content/contexthelp.js loaded into the xul file that provides the ui to open the help viewer: <script type="application/javascript" src="chrome://help/content/contexthelp.js"/> this will allow you to access all of the viewer functions.
... to open the help viewer, run the openhelp() function.
...And 2 more matches
Venkman Introduction - Archive of obsolete content
you may need to close and re-open any objects you had open to see the change.
...when the view again becomes necessary—for example, when you open a source file from the loaded scripts view and want to view the source—the view reappears where it was last positioned.
... if you want to load new scripts in—say from a web page you are trying to troubleshoot—you can do so by simply opening that web page in the regular browser window, at which point the compiler gets the javascript source and populates the loaded scripts window with the new entry.
...And 2 more matches
Special per-platform menu considerations - Archive of obsolete content
for instance, this is the proper place to put the menu items which open the application preferences and which quit the application.
... menu_preferences the item which opens the application preferences.
... aboutname the item which opens the about dialog for the application.
...And 2 more matches
Rule Compilation - Archive of obsolete content
content inside a menu is not generated until the menu is opened.
... this makes sense since the user can't see the contents of the menu until it is open.
... however, it also means that the dom api usage, such as an attempt to get the number of child nodes as above, will also not include generated items until the menu is opened.
...And 2 more matches
Document Object Model - Archive of obsolete content
for example, the following two lines which open a new window are functionally equivalent: window.open("test.xul","_new"); open("test.xul","_new"); when you declare a function or a variable at the top level of a script, that is outside another function, you are actually declaring a property of the global object.
...to do this, we can do the following: alert(window.opener.gettext()); each window has an opener property which holds the window object that opened this one.
... in this example, we retrieve the opener window and call the gettext() function declared in a script used there.
...And 2 more matches
Manifest Files - Archive of obsolete content
if you aren't sure what the file path is, open that directory in a browser and copy the url from the address field.
... open the file <mozilla-directory>/chrome/installed-chrome.txt, where <mozilla-directory> is the directory where mozilla is installed.
...if you aren't sure what the url is, open the directory created in step 1 into a mozilla browser and copy the url from the location field.
...And 2 more matches
XUL Structure - Archive of obsolete content
you can load xul files from your own machine by opening them in the browser, or by double-clicking the file in your file manager.
... chrome urls may be used to access installed packages and open them with enhanced privileges.
...these are the -chrome command line argument and the chrome modifier to the window.open() function.
...And 2 more matches
Mozilla release FAQ - Archive of obsolete content
mozilla is a project to continue netscape communicator as an open project.
...this list will be updated with time, but (according to netscape.public.mozilla.general) the following platforms have been built successfully: solaris 2.4, 2.5, 2.6 freebsd 2.2, 3.0 linux/intel and alpha 2.0, 2.1 macos winnt 4.0 irix 5.3, 6.2, 6.3, 6.4 win95, win98 digital unix 4.0 netbsd openbsd bsdi hp/ux 9.05, 10.20, 11.0 (see 2.7) hurd .03 dg/ux mac os x i'm *still* having problems getting mozilla to build on my platform!
...people who want to work on an operating system no doubt would be welcomed by the bsd teams, the linux team, the freedows team, or any of the many other open source operating system groups out there.
...And 2 more matches
Practical positioning examples - Learn web development
save this somewhere sensible on your local computer, and open it up in your text editor.
... 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.
...put the following block of code, exactly as written in between your opening and closing <script> tags (you'll find these below the html content): var tabs = document.queryselectorall('.info-box li a'); var panels = document.queryselectorall('.info-box article'); for(i = 0; i < tabs.length; i++) { var tab = tabs[i]; settabhandler(tab, i); } function settabhandler(tab, tabpos) { tab.onclick = function() { for(i = 0; i < tabs.length; i++) { tabs[i].cla...
...And 2 more matches
Creating hyperlinks - Learn web development
if the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on).
... linking to non-html resources — leave clear signposts when linking to a resource that will be downloaded (like a pdf or word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a flash movie), you should add clear wording to reduce any confusion.
... let's look at some examples, to see what kind of text can be used here: <p><a href="http://www.example.com/large-report.pdf"> download the sales report (pdf, 10mb) </a></p> <p><a href="http://www.example.com/video-stream/" target="_blank"> watch the video (stream opens in separate tab, hd quality) </a></p> <p><a href="http://www.example.com/car-game"> play the car game (requires flash) </a></p> use the download attribute when linking to a download when you are linking to a resource that's to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename.
...And 2 more matches
Debugging HTML - Learn web development
next, open it in a browser.
... first, load the markup validation service in one browser tab, if it isn't already open.
... "end tag li implied, but there were open elements" (2 instances): these messages indicate that an element is open that should be closed.
...And 2 more matches
HTML table advanced features and accessibility - Learn web development
you should put it just below the opening <table> tag.
... open up your language teacher's school timetable from the end of html table basics, or make a local copy of our timetable-fixed.html file.
... save your code and open it in a browser to see what it looks like.
...And 2 more matches
Fetching data from the server - Learn web development
add the following below your previous lines inside your updatedisplay() function: let request = new xmlhttprequest(); next, you need to use the open() method to specify what http request method to use to request the resource from the network, and what its url is.
...add this below your previous line: request.open('get', url); next, we'll set the type of response we are expecting — which is defined by the request's responsetype property — as text.
...(if you didn't work through the previous exercise, create a new directory and inside it make copies of xhr-basic.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt.) inside the updatedisplay() function, find the xhr code: let request = new xmlhttprequest(); request.open('get', url); request.responsetype = 'text'; request.onload = function() { poemdisplay.textcontent = request.response; }; request.send(); replace all the xhr code with this: fetch(url).then(function(response) { response.text().then(function(text) { poemdisplay.textcontent = text; }); }); load the example in your browser (running it through a web server) and it should wor...
...And 2 more matches
Server-side web frameworks - Learn web development
all of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites.
...it’s free and open source.
... popular sites using django (from django home page) include: disqus, instagram, knight foundation, macarthur foundation, mozilla, national geographic, open knowledge foundation, pinterest, open stack.
...And 2 more matches
Handling common HTML and CSS problems - Learn web development
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.
... put the following code into the head of your html document, just before the opening <style> tag: <script type="text/javascript" src="mootools-core-1.6.0.js"></script> <!--[if (gte ie 6)&(lte ie 8)]> <script type="text/javascript" src="selectivizr-min.js"></script> <![endif]--> if you try running this in an old version of ie, it should work fine.
... try this simple example: open up google.com, or another site that has a prominent heading or other block-level element.
...And 2 more matches
Software accessibility: Where are we today?
because most popular desktop and productivity applications are not open source, this forced disabled people to rely on the companies which produce this software to make it accessible.
...enter open source software microsoft was on the right track with microsoft active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never made fully accessible.
... in open source, however, making the necessary modifications to make them accessible is very possible.
...And 2 more matches
Capturing a minidump
if firefox is not already running, then open windbg from the start menu (start->all programs->debugging tools for windows->windbg).
... next, open the "file" menu and choose "open executable...".
... in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox).
...And 2 more matches
Message manager overview
communicate with frame scripts using message-passing apis there are various types of frame message managers, as depicted in this diagram: this diagram shows the setup when there are 2 browser windows open, one with 2 tabs open and one with 1 tab open.
...if you load a frame script using the global frame message manager, the script gets loaded separately into every open tab: three times, in the diagram above.
...if you load a frame script using the window message manager it gets loaded separately into each tab open in that particular window.
...And 2 more matches
Browser API
mozbrowsercontextmenu sent when a browser <iframe> tries to open a context menu.
... mozbrowsermanifestchange sent when a the path to the app manifest changes, in the case of a browser <iframe> with an open web app embedded in it.
... mozbrowseropenwindow sent when window.open() is called within a browser <iframe>.
...And 2 more matches
NetUtil.jsm
} }) asyncfetch() the asyncfetch() method opens an input source, asynchronously, and gives an nsiinputstream containing the data obtained to the callback provided.
... asyncfetch( asource, acallback ); parameters asource the source to open asynchronously.
... this may be specified as an nsiuri, nsifile, nsichannel, nsiinputstream or as a string specifying the url to open.
...And 2 more matches
Localizing with Mercurial
# debian/ubuntu $ apt-get install mercurial # fedora $ yum install mercurial # gentoo $ emerge mercurial # arch linux $ pacman -s mercurial # opensolaris $ pkg install sunwmercurial if you prefer a graphical interface, you can download and install mercurialeclipse here.
... open a terminal window and enter hg --version.
...if the utility modified your %path% successfully, a dialog will open saying, "%path% has been updated correctly." alternatively, you can edit the %path% variable manually.
...And 2 more matches
MathML Accessibility in Mozilla
x plus y enclosed by: an arabic factorial symbol x + y up madruwb enclosed abcd e __________ open a comma b comma c comma d comma e close __________ not supported.
...right paren ( open-fence n numerator k / 2 denominator fraction without bar ) close-fence torture test 9: ( p 2 ) x 2 y p - 2 - 1 1 - x 1 1 - x 2 no output ( fraction start, p over 2, end of fraction, ), x squared y, superscript p - 2, - fraction start, 1 over 1 - x, end of fraction, fraction start, 1 over 1 - x, squared, end of fraction see webkit's bug 146454 ...
... torture test 10: ∑ 0 ≤ i ≤ m 0 < j < n p ( i , j ) __________ sum over fraction 0 is less than or equal to i is less than or equal to m over 0 is less than j is less than n end fraction of cap pee of open i comma j close __________ ∑ p (i, j) see webkit's bug 146407 sum.
...And 2 more matches
Activity Monitor, Battery Status Menu and top
when the energy tab of activity monitor is first opened, the "average energy impact" column is empty and the title bar says "activity monitor (processing...)".
...if you have top open during those 5–10 seconds you'll see that systemstats is running and using a lot of cpu, and so presumably the measurements are obtained from it.
...if a laptop is closed for several hours and then reopened, those hours are not included in the calculation.) battery status menu when you click on the battery icon in the os x menu bar you get a drop-down menu that includes a list of “apps using significant energy”.
...And 2 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".
...this will open a file dialog that lets you save the memory reports to a file of your choosing.
... note that in both cases the generated data contains privacy-sensitive details such as the full list of the web pages you have open in other tabs.
...And 2 more matches
NSS 3.12.4 release notes
new functions in the nss shared library: pk11_isinternalkeyslot (see pk11pub.h) secmod_opennewslot (see pk11pub.h) new error codes (see secerr.h): sec_error_bad_info_access_method sec_error_crl_import_failed new oids (see secoidt.h) sec_oid_x509_any_policy the nssckbi pkcs #11 module's version changed to 1.75.
... support for openvms has been removed.
...bug 488550: crash in certutil or pp when printing cert with empty subject name bug 488992: fix lib/freebl/win_rand.c warnings bug 489010: stop exporting mktemp and dbopen (again) bug 489287: resolve a few remaining issues with nss's new revocation flags bug 489710: byteswap optimize for msvc++ bug 490154: cryptokey framework requires module to implement generatekey when they support keypairgeneration bug 491044: remove support for vms (a.k.a., openvms) from nss bug 491174: cert_pkixverifycert reports wrong error code when ee cert is expired bug 491919: cert.h does...
...And 2 more matches
Necko walkthrough
nsdocshell::internalload nsdocshell::douriload opens the nsichannel for the uri (ns_newchannel) if "http:", it will be an nsihttpchannel nsdocshell::dochannelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::openchannel - it creates an nsdocumentopeninfo object, which implements nsistreamlistener, i.e.
... nshttpchannel::asyncopen called from openuri; openchannel isn't named the best, since the opening happens in the context of openuri, its calling function.
...but the interface for clients of necko is important to consider: send request uri helps creates channel setup channel (headers, request data, response callback...) channel->asyncopen.
...And 2 more matches
Embedded Dialog API
these new windows can be entire new browser windows opened in response to web page script, or dialogs or alerts which may arise from script or merely during normal operation of the browser.
... responsibilities of the embedding application basic windowing api to be able to respond to script requests to open new windows, an embedded gecko browser must have a way of opening new windows.
...the nsiwebbrowserchrome::chrome_openas_chrome flag deserves special mention.
...And 2 more matches
nsIAppShellService
boolean createstartupstate( in long awindowwidth, in long awindowheight ); parameters awindowwidth the width to make the initial window(s) opened.
... awindowheight the height to make the initial window(s) opened.
... return value true if a window was opened.
...And 2 more matches
nsIDownloadManagerUI
constants constant value description reason_user_interacted 0 when opening the download manager user interface, this value indicates that it's being done at the user's request.
... reason_new_download 1 when opening the download manager user interface, this value indicates that the user interface is being displayed because a new download is being started.
... methods getattention() calls attention to the download manager's user interface if it's already open.
...And 2 more matches
nsIDynamicContainer
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the service can fill result nodes directly into the container when it is opened.
...method overview void oncontainermoved(in long long aitemid, in long long anewparent, in long anewindex); void oncontainernodeclosed(in nsinavhistorycontainerresultnode acontainer); void oncontainernodeopening(in nsinavhistorycontainerresultnode acontainer, in nsinavhistoryqueryoptions aoptions); void oncontainerremoving(in long long aitemid); methods oncontainermoved() this method is called when the given container has just been moved, in case the service needs to do any bookkeeping.
...this only happens when the container itself goes from the open state to the closed state.
...And 2 more matches
nsIFileStreams
if open_on_read is defined, and the file was recreated after the first delete, the file will be deleted again when it is closed again.
... reopen_on_rewind 1<<3 if this is set, the file will be reopened whenever seek(0) occurs.
... if the file is already open and the seek occurs, it will happen naturally.
...And 2 more matches
nsIMsgDBView
method overview void open(in nsimsgfolder folder, in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder, in nsmsgviewflagstypevalue viewflags, out long count); void openwithhdrs(in nsisimpleenumerator aheaders, in nsmsgviewsorttypevalue asorttype, in nsmsgviewsortordervalue asortorder, in nsmsgviewflagstypevalue aviewflags, out long acount); void close(); void init(in nsimesse...
... methods open() opens a folder in the database.
... void open(in nsimsgfolder folder, in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder, in nsmsgviewflagstypevalue viewflags, out long count); parameters folder the nsimsgfolder to open.
...And 2 more matches
nsIMsgDatabase
last changed in gecko 1.9 (firefox 3) inherits from: nsidbchangeannouncer method overview void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); void forcefolderdbclosed(in 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 ke...
... defaultviewflags nsmsgviewflagstypevalue readonly: defaultsorttype nsmsgviewsorttypevalue readonly: defaultsortorder nsmsgviewsortordervalue readonly: msghdrcachesize unsigned long folderstream nsioutputstream summaryvalid boolean methods open() opens a database folder.
... void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); parameters afoldername the name of the folder to create.
...And 2 more matches
nsIRequest
constant value description load_anonymous 1 << 14 when set, this flag indicates that no user-specific data should be added to the request when opened.
...this will close any open input or output streams and terminate any async requests.
...requests do not necessarily start out pending; in some cases, requests have to be explicitly initiated (for example nsichannel implementations are only pending once asyncopen returns successfully).
...And 2 more matches
Address Book examples
new contact dialog window.opendialog("chrome://messenger/content/addressbook/abnewcarddialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {selectedab:selectedab}); edit contact dialog window.opendialog("chrome://messenger/content/addressbook/abeditcarddialog.xul", "", "chrome,resizable=no,modal,titlebar,centerscreen", ...
... {aburi:aburi, card:card}); new list dialog window.opendialog("chrome://messenger/content/addressbook/abmaillistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {selectedab:selectedab}); edit list dialog window.opendialog("chrome://messenger/content/addressbook/abeditlistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {abcard:abcard, listuri:listuri}); new address book dialog unlike the edit address book dialog, the new address book dialog does not currently have the facility to get the chrome uri based on the address book type.
... for local (mork) address books: window.opendialog( "chrome://messenger/content/addressbook/abaddressbooknamedialog.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); for ldap address books: window.opendialog("chrome://messenger/content/addressbook/pref-directory-add.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); note: there is no new address book dialog for the os x address book.
...And 2 more matches
ctypes
method overview ctype arraytype(type[, length]); cdata cast(data, type); ctype functiontype(abi, returntype[, argtype1, ...]); cdata int64(n); string libraryname(name); library open(libspec); ctype pointertype(typespec); ctype structtype(name[, fields]); cdata uint64(n); properties property type description errno number the value of the latest system error.
... open() opens a library, specified by a pathname.
... library open( libspec ); parameters libspec the native library to open, specified as a pathname string.
...And 2 more matches
Browser Console - Firefox Developer Tools
opening the browser console you can open the browser console in one of two ways: from the menu: select "browser console" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
...the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled show content messages.
...here's an example add-on that just logs an error when the user clicks a widget: widget = require("sdk/widget").widget({ id: "an-error-happened", label: "error!", width: 40, content: "error!", onclick: logerror }); function logerror() { console.error("something went wrong!"); } if you build this as an xpi file, then open the browser console, then open the xpi file in firefox and install it, you'll see a widget labeled "error!" in the add-on bar: click the icon.
...And 2 more matches
Shader Editor - Firefox Developer Tools
with webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
... these shaders are written in opengl shading language, or glsl.
... here's another screencast, showing how you can use the shader editor for complex applications (in this case, the unreal engine demo): opening the shader editor the shader editor is disabled by default.
...And 2 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
opening the about:debugging page there are several different ways to open about:debugging: type "about:debugging" in the firefox url bar.
... 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.
... tabs in firefox 49 onwards, a tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current firefox instance.
...And 2 more matches
AudioBufferSourceNode.loopStart - Web APIs
buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart, and loopend properties on the fly.
... when the audio is played to the end, it loops, but you can control how long the loops last by altering loopstart and loopend.
... function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; loopstartcontrol.setattribute('max...
...And 2 more matches
Using FormData Objects - Web APIs
var blob = new blob([content], { type: "text/xml"}); formdata.append("webmasterfile", blob); var request = new xmlhttprequest(); request.open("post", "http://foo.com/submitform.php"); request.send(formdata); note: the fields "userfile" and "webmasterfile" both contain a file.
... 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", serialnu...
...put 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 = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.preventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the...
...And 2 more matches
HTMLDialogElement.showModal() - Web APIs
exceptions if the dialog is already open (i.e.
... if the open attribute is already set on the <dialog> element), an invalidstateerror is thrown.
... examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the showmodal() method.
...And 2 more matches
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 unsigned short direction) raises (idbdatabaseexception); any put (in any value, in optional any key) raises (idbdatabaseexception); void remove (in any key) raises (idbdatabaseexception); attr...
... opencursor() creates a cursor over the records of this index.
... void opencursor ( in optional idbkeyrange range, in optional unsigned short direction ) raises (idbdatabaseexception); parameters range the key range to use as the cursor's range.
...And 2 more matches
IDBObjectStore.index() - Web APIs
the index() method of the idbobjectstore interface opens a named index in the current object store, after which it can be used to, for example, return a series of records sorted by that index using a cursor.
... syntax var index = objectstore.index(name); parameters name the name of the index to open.
... example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
...And 2 more matches
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); idbindexsync openindex (in domstring name) raises (idbdatabaseexception); any put (in any value, in optional any key) raises (idbdatabaseexception); void remove (in any key) raises (idbdatabaseexception); void removeindex (in domstring indexname) raises ...
... opencursor() creates a cursor over the records of this object store.
... cursorsync opencursor ( in optional keyrange range, in optional unsigned short direction ) raises (databaseexception); parameters range the key range to use as the cursor's range.
...And 2 more matches
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.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 2 more matches
IDBVersionChangeEvent - Web APIs
the idbversionchangeevent interface of the indexeddb api indicates that the version of the database has changed, as the result of an idbopendbrequest.onupgradeneeded event handler function.
... example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
...// moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of o...
...And 2 more matches
IndexedDB API - Web APIs
you need to specify the database schema, open a connection to your database, and then retrieve and update data within a series of transactions.
... interfaces to get access to a database, call open() on the indexeddb attribute of a window object.
... idbopendbrequest represents a request to open a database.
...And 2 more matches
RTCIceCandidate.tcpType - Web APIs
"active" the transport will try to open an outbound connection but won't receive inoming connection requests.
... "passive" the transport will receive incoming connection requests but won't try to open an outbound connection.
... "so" the transport will try to open a connection simultaneously with its peer.
...And 2 more matches
WebGL best practices - Web APIs
even basic requests can take as long as 1ms, but they can take even longer if they need to wait for all graphics work to be completed (with an effect similar to glfinish() in native opengl).
... always keep vertex attrib 0 array-enabled if you draw with vertex attrib 0 array disabled, you will force the browser to do complicated emulation when running on desktop opengl (such as on macos).
... this is because in desktop opengl, nothing gets drawn if vertex attrib 0 is not array-enabled.
...And 2 more matches
WebSocket - Web APIs
WebAPIWebSocket
constants constant value websocket.connecting 0 websocket.open 1 websocket.closing 2 websocket.closed 3 properties websocket.binarytype the binary data type used by the connection.
... websocket.onopen an event listener to be called when the connection is opened.
... open fired when a connection with a websocket is opened.
...And 2 more matches
Window.resizeBy() - Web APIs
WebAPIWindowresizeBy
creating and resizing an external window for security reasons, it's no longer possible in firefox for a website to change the default size of a window in a browser if the window wasn’t created by window.open(), or contains more than one tab.
... even if you create window by window.open() it is not resizable by default.
... to make the window resizable, you must open it with the "resizable" feature.
...And 2 more matches
Window - Web APIs
WebAPIWindow
window.opener returns a reference to the window that opened this current window.
... window.open() opens a new window.
... window.print() opens the print dialog to print the current document.
...And 2 more matches
XMLHttpRequest - Web APIs
xmlhttprequest.open() initializes a request.
...you must call setrequestheader()after open(), but before send().
... xmlhttprequest.openrequest() initializes a request.
...And 2 more matches
font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings css property controls advanced typographic features in opentype fonts.
... syntax /* use the default settings */ font-feature-settings: normal; /* set values for opentype feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-vari...
... these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature.
...And 2 more matches
font-variant-east-asian - CSS: Cascading Style Sheets
this keyword corresponds to the opentype values ruby.
...possible values are: keyword standard defining the glyphs opentype equivalent jis78 jis x 0208:1978 jp78 jis83 jis x 0208:1983 jp83 jis90 jis x 0208:1990 jp90 jis04 jis x 0213:2004 jp04 simplified none, use the simplified chinese glyphs smpl traditional none, use the traditional chinese glyphs trad <east-asian-width-values> these values control the sizing of figures used for east asian characters.
...it corresponds to the opentype values pwid.
...And 2 more matches
Audio and Video Delivery - Developer guides
web audio api var context; var request; var source; try { context = new audiocontext(); request = new xmlhttprequest(); request.open("get","http://jplayer.org/audio/mp3/riomez-01-sleep_together.mp3",true); request.responsetype = "arraybuffer"; request.onload = function() { context.decodeaudiodata(request.response, function(buffer) { source = context.createbuffersource(); source.buffer = buffer; source.connect(context.destination); // auto play source.start(0); // start was...
...your files have been encoded incorrectly your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable: audacity — free audio editor and recorder miro — free, open-source music and video player handbrake — open source video transcoder firefogg — video and audio encoding for firefox ffmpeg2 — comprehensive command line encoder libav — comprehensive command line encoder vid.ly — video player,transcoding and delivery internet archive — free transcoding and storage detecting when no sources have loaded to detect that all child <source> elem...
...open source (gpl licensed.) jwplayer: requires registration to download.
...And 2 more matches
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
in ie, such calls are either ignored or imply a call to document.open(), replacing the document.
... the syntax <foo/> opens and immediately closes the foo element if it is a mathml or svg element (i.e.
... when an svg or mathml element is open <![cdata[…]]> sections work the way they do in xml.
...And 2 more matches
Large-Allocation - HTTP
a large-allocation header was ignored due to the presence of windows which have a reference to this browsing context through the frame hierarchy or window.opener.
... this error means that the document was not loaded at the top level of an user-opened or noopener-opened tab or window.
... the document with the large-allocation header was loaded in a window which was opened by window.open(), <a target="_blank"> or other similar methods without rel="noopener" or the "noopener" feature being set.
...And 2 more matches
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.
... background mozilla decides if and how it can open files by using their media (mime) type.
...try and open a local .svg file using mozilla and when the "opening ..." dialog comes up, select the "open with" radio button and choose any .exe except firefox.exe/mozilla.exe.
...And 2 more matches
Using templates and slots - Web Components
we'll call it <my-paragraph>: customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } } ); the key point to note here is that we append a clone of the template content to the shadow root, created using the node.clonenode() method.
... creating a template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <detail...
... customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); using the <element-details> custom element with named slots now let’s take that <element-details> element and actually use it in our document: <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with the effe...
...And 2 more matches
Interacting with page scripts - Archive of obsolete content
m 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.html") var pagemod = mod.pagemod({ include: pageurl, contentscript: "console.log(unsafewindow.foo);" }) tabs.open(pageurl); be careful using unsafewindow: you can't rely on any of its properties or functions being, or doing, what you expect.
...the "main.js" opens the local file "page.html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({ url: self.data.url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.url("content-script.js") }); } the content script defines an object and assigns it to unsafewindow ...
...the "main.js" opens the local file "page.html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({ url: self.data.url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.url("content-script.js") }); } the content script defines a function greetme() and exports it to the...
...e a page-mod that will attach "content-script.js" to the target web page, and will then load the target web page: var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event cont...
clipboard - Archive of obsolete content
var clipboard = require("sdk/clipboard"); clipboard.set("<blink>lorem ipsum dolor sit amet</blink>", "html"); if the clipboard contains html content, open it in a new tab.
... var clipboard = require("sdk/clipboard"); if (clipboard.currentflavors.indexof("html") != -1) require("sdk/tabs").open("data:text/html;charset=utf-8," + clipboard.get("html")); set the clipboard contents to an image.
... var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru5erkjggg%3d%3d"); if the clipboard contains an image, open it in a new tab.
... var clipboard = require("sdk/clipboard"); if (clipboard.currentflavors.indexof("image") != -1) require("sdk/tabs").open(clipboard.get()); as noted before, data type can be easily omitted for images.
Storing annotations - Archive of obsolete content
the user will be able to click links in the panel, but we want to open them in the main browser window rather than the panel.
...nnotationlist = panels.panel({ width: 420, height: 200, contenturl: data.url('list/annotation-list.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('list/annotation-list.js')], contentscriptwhen: 'ready', onshow: function() { this.postmessage(simplestorage.storage.annotations); }, onmessage: function(message) { require('sdk/tabs').open(message); } }); since this panel's content script uses jquery we will pass that in too: again, make sure the name of it matches the version of jquery you downloaded.
...when the panel sends us a url we use the tabs module to open it in a new tab.
... try it: execute cfx run and open a new private window: you should no longer see the annotator's widget.
Bootstrapped extensions - Archive of obsolete content
note: if you open the add-on manager and then click "remove" on an add-on, it will not call uninstall function right away.
...g.dtd the chrome.manifest file must include a definition for content for example: content name_of_your_addon ./ the chrome.manifest file must also include a line pointing to the locale, just like in the above property section, if you had a folder named en-us in locale, the chrome.manifest file should contain: locale name_of_your_addon en-us locale/ here is an example add-on that opens an html page and a xul page on install: github :: l10n-xhtml-xul.
...you can go to about:config and change the value of the preference general.useragent.locale to en-us and then to en-gb and then reload the open pages to see the localization change.
... dave townsend provides a basic code base to load ui for each opened window in a bootstrapped extension.
Dialogs and Prompts - Archive of obsolete content
to get an idea of what it looks like, open options (or preferences) dialog in firefox or thunderbird (v1.0 and earlier only).
...the code to open a dialog named mydialog.xul and pass it arguments: var params = {inn:{name:"foo", description:"bar", enabled:true}, out:null}; window.opendialog("chrome://myext/content/mydialog.xul", "", "chrome, dialog, modal, resizable=yes", params).focus(); if (params.out) { // user clicked ok.
... displaying the standard "open file"/"save file"/"select folder" dialogs nsifilepicker prompts and the prompt service now that you understand dialogs, let's examine prompts.
... links nsipromptservice open and save dialogs see also alerts and notifications ...
Displaying web content in an extension without security issues - Archive of obsolete content
if you open "chrome://foo/content/foo.xul" in the browser, it will open as a content document despite having extended privileges.
... this also means that you won’t be able to establish a security boundary between your extension and untrusted data if your extension opens as a tab in the browser — so displaying your extension in a browser tab is a bad choice.
...so in the simplest case you would have: <iframe type="content" src="data:text/html,%3chtml%3e%3cbody%3e%3c/body%3e%3c/html%3e"/> but usually you don’t want to start with an empty document, you would rather want to load some template into the frame: var request = new xmlhttprequest(); request.open("get", "chrome://foo/content/template.html", false); request.send(null); frame.setattribute("src", "data:text/html," + encodeuricomponent(request.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame.
...out restrictions): <iframe type="content" onclick="handleclick(event);"/> and the event handler would look like that: function handlebrowserclick(event) { // only react to left mouse clicks if (event.button != 0) return; // default action on link clicks is to go to this link, cancel it event.preventdefault(); if (event.target instanceof htmlanchorelement && event.target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
the menu and menu-button types allow you to create buttons that open popup menus beneath them.
...the dialog can be opened from view > toolbars > customize..., or by right-clicking on the main toolbar (or any toolbar with the correct context attribute value) and clicking on the customize option.
...make sure your icons look ok while the customize dialog is open, and after clicking on the ok button.
...all of this is very important to test because, when the dialog is opened, firefox changes the dom of the toolbar, adding wrapper elements that allow the customization.
Connecting to Remote Content - Archive of obsolete content
let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.target.status); }; request.open("get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
... the open method takes two required parameters: the http request method and the url to send the request.
... request.open("post", url, true); request.setrequestheader("content-type", "application/x-www-form-urlencoded"); request.send("data=hello&version=2"); the third parameter for the open method specifies whether the request should be handled asynchronously or not.
... after installation, you can find a tamper data menu item in the menu bar: tools > tamper data or view > sidebar > tamper data once you open the tamper data view, all requests and responses will begin to appear in it.
Bookmark Keywords - Archive of obsolete content
to file this bookmark open the "bookmarks" menu in the browser and select "add bookmark," or by of use the keyboard equivalent (e.g., <tt>cmd-d</tt> on macintosh).
...to open the bookmark manager go to "bookmarks" menu and select the "manage bookmarks" option.
... this will open up the bookmark manager.
...this will open up a dialog box that will let you edit the properties of the bookmark.
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
mnemonic string a character that is used as the item's shortcut key while the menu is open.
...this is the node the user clicked to open the menu.
...examples before running any examples, import the api from the future: jetpack.future.import("menu"); snippets add a single, static menuitem to the jetpack menu that doesn't do anything: jetpack.menu.add("two drink holders and a captain's chair"); add a menuitem to the jetpack menu that displays the current date and time each time it's opened: jetpack.menu.add(function () new date().tostring()); click an item in the jetpack menu to be notified of the current date and time: jetpack.menu.add({ label: "show current date and time", command: function () jetpack.notifications.show(new date()) }); the same, except on the content context menu: jetpack.menu.context.page.add({ label: "show current date and time", command: function (...
...if the menu remains open when getrecenttweets() receives data from the network and calls done(), the "loading..." item is replaced with the tweets, one item per tweet: this example will not work on os x due to a platform bug in firefox.
Configuration - Archive of obsolete content
the file must be located in the web app home directory: splashscreen.html include uris that should be opened in the web app, rather than in the default browser.
...separate multiple uris with commas: *google.com, *yahoo.com exclude urls that should be opened in the default browser, rather than in the web app.
...iconic specifies that the application should be opened in iconic state.
... currently support only on windows in conjunction with the trayicon, causes the application to open minimized to the system tray: yes or no.
Remotely debugging Firefox for Metro - Archive of obsolete content
open the toolbox, click the "settings" button in the toolbar, and check "enable remote debugging" in the settings tab.
... connecting on the desktop on the desktop, open the web developer menu and select "connect...".
... you'll see one entry under "available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab.
...the toolbox will open in its own window, attached to the firefox for metro tab that's currently hosting mozilla.org: the toolbox, and the tools it hosts (including the console, debugger, style editor, profiler, etc.), work in just the same way as they do when attached to local content.
A XUL Bestiary - Archive of obsolete content
in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application.
... near synonyms for xul there is much confusion about the words that begin with "x" in the mozilla open source project.
... <menu id="file" label="file"> <menupopup> <menuitem label="new" oncommand="createnewdoc()" /> <menuitem label="open" oncommand="opendoc()" /> <menuitem label="close" oncommand="closedoc()" /> </menupopup> </menu> element names the item, the widget, while attributes describes features of that element, such as its name, its style, and so on.
...note that the menu element includes both the opening tag at the top and the closing tag at the bottom of the example.
Extensions - Archive of obsolete content
for instance, opening a context menu for a link displays items to open the link in a new window or tab and to save or bookmark the link.
...ontextmenu) contextmenu.addeventlistener("popupshowing", thumbnailsshowhideitems, false); } function thumbnailsshowhideitems(event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = (document.popupnode.localname != "img"); } the init function should be called within the handler for the load event so that the popupshowing event handler is hooked up before it would be opened by the user.
...while the popup is open, the gcontextmenu global variable is set to an object which handles all of the functionality specific to the firefox context menu.
...if the keyboard was used to open a context menu, this will be the focused element.
MenuItems - Archive of obsolete content
unlike the access key, which only functions while the menu is open, a shortcut key works at any time.
... <keyset> <key id="open-key" modifiers="accel" key="o"/> <key id="close-key" modifiers="accel" key="c"/> </keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open" key="open-key"/> <menuitem label="close" key="close-key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a key using the key attribute.
...for the "open" item in this example, this command can be invoked by using the "accel" modifier key and pressing 'o'.
...you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu.
Building Menus With Templates - Archive of obsolete content
however, unlike with other elements, the content of a menu is only generated once the menu has been opened.
... this means that a menu created with a template will not have any of the generated items until the user opens the menu, or a script opens the menu.
...if you press this button before opening the menu, there will be one child (the template itself).
... however, after the menu has been opened, there will be two children, one is the template and the other is the generated menupopup.
The Joy of XUL - Archive of obsolete content
overlays can be used to add features to mozilla without contaminating the original open source code with proprietary alterations.
... xpcom/xpconnect enables integration of native code.a fully-featured open source calendar library, libical, was harvested for the calendar project.
... libical is an open source implementation of the ietf's icalendar calendaring and scheduling protocols (rfc 2445, rfc 2446, and rfc 2447).
...mozilla delivers much of the same value as these cross platform tools, but with an open source license.
Localization - Archive of obsolete content
key="&copycmd.commandkey;"/> <key id="paste_cmd" modifiers="accel" key="&pastecmd.commandkey;"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="&filemenu.label;" accesskey="&filemenu.accesskey;"> <menupopup id="file-popup"> <menuitem label="&opencmd.label;" accesskey="&opencmd.accesskey;"/> <menuitem label="&savecmd.label;" accesskey="&savecmd.accesskey;"/> <menuseparator/> <menuitem label="&closecmd.label;" accesskey="&closecmd.accesskey;" key="close_cmd" oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="&editmenu.labe...
... accesskey="&cutcmd.accesskey;" key="cut_cmd"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;" key="copy_cmd"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="&opencmdtoolbar.label;"/> <toolbarbutton id="savesearch" label="&savecmdtoolbar.label;"/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer c...
... next, the dtd file - findfile.dtd: <!entity findwindow.title "find files"> <!entity filemenu.label "file"> <!entity editmenu.label "edit"> <!entity filemenu.accesskey "f"> <!entity editmenu.accesskey "e"> <!entity opencmd.label "open search..."> <!entity savecmd.label "save search..."> <!entity closecmd.label "close"> <!entity opencmd.accesskey "o"> <!entity savecmd.accesskey "s"> <!entity closecmd.accesskey "c"> <!entity cutcmd.label "cut"> <!entity copycmd.label "copy"> <!entity pastecmd.label "paste"> <!entity cutcmd.accesskey "t"> <!entity copycmd.accesskey "c"> <!entity pastecmd.accesskey "p"> <!entity cut...
...cmd.commandkey "x"> <!entity copycmd.commandkey "c"> <!entity pastecmd.commandkey "v"> <!entity opencmdtoolbar.label "open"> <!entity savecmdtoolbar.label "save"> <!entity searchtab "search"> <!entity optionstab "options"> <!entity finddescription "enter your search criteria below and select the find button to begin the search."> <!entity findcriteria "search criteria"> <!entity type.name "name"> <!entity type.size "size"> <!entity type.date "date modified"> <!entity mode.is "is"> <!entity mode.isnot "is not"> <!entity casesensitive "case sensitive search"> <!entity matchfilename "match entire filename"> <!entity results.filename "filename"> <!entity results.location "location"> <!entity results.size "size"> <!entity bytes.before ""> <!entity bytes.after "bytes"> <!entity button.find "find"> <...
menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <me...
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
... the open attribute is not present if the menu is closed.
... open type: boolean gets and sets the value of the open attribute.
Building XULRunner with Python - Archive of obsolete content
it might also be possible to use the open source mingw compiler with the correct msvc run time but that is apparently not recommended.
... unhandled exceptions are displayed in the javascript error console which can be opened usingxulrunner -jsconsole.
...the jsconsole can also be open and used from code, for example (in javascript) function openjavascriptconsole() { var wwatch = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); wwatch.openwindow(null, "chrome://global/content/console.xul", "_blank", "chrome,dialog=no,all", null); } // dump to the js console (xulrunner -jsconsole) function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } function jserror(st...
...a zombie will keep old code open and cause confusion when you make changes and run xulrunner again.
Getting started with XULRunner - Archive of obsolete content
first change the file extension to zip and then use your normal filesystem's decompression tool to open it up.
...*/ 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); xulrunner specific preferences include: toolkit.defaultchromeuri specifies the default window to open when the application is launched.
... toolkit.defaultchromefeatures specifies the features passed to window.open() when the main application window is opened.
... windows from a windows command prompt opened to the myapp folder, we should be able to execute this: c:\path\to\xulrunner.exe application.ini of course, if you opted to install xulrunner then you could simply do ​%programfiles%\xulrunner.exe application.ini or on 64 bit systems ​%programfiles(x86)%\xulrunner.exe application.ini note: you can also install your application when you're finished debugging it.
XULRunner Hall of Fame - Archive of obsolete content
source evergreen - staff client evergreen is an open source library system.
...build instructions pencil the pencil project's unique mission is to build a free and opensource tool for making diagrams and gui prototyping that everyone can use.
...build instructions kirix strata a new specialty browser for accessing and manipulating data from the web telekast an open source teleprompter and script editor.
... opendocument viewer cross-platform viewer for opendocument files.
Archived Mozilla and build documentation - Archive of obsolete content
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).
... error console the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens.
...in firefox, the error console can be opened from the tools menu or by ctrl-shift-j.
...mozprocess utilizes and extends subprocess.popen to these ends.
Using SSH to connect to CVS - Archive of obsolete content
cygwin makes ssh available on windows if you install the openssh package from the net category.
... if all else fails, openssh is a widely used and highly portable implementation.
...only proceed with these steps once you are certain you can access cvs.mozilla.org from the open internet.
...corkscrew uses the standard "./configure; make install" technique common to many open source projects.
Window.importDialog() - Archive of obsolete content
summary because opening windows on mobile isn't necessarily appropriate, the firefox mobile team designed the importdialog() method to replace window.opendialog().
... instead of opening a new window, it merges the specified xul dialog into the main window.
... syntax newdialog = importdialog(aparent, asrc, aarguments) newdialog the opened window aparent the dialog's parent; can be null.
... example var dialog = importdialog(null, "chrome://myextension/content/dialog.xul", myobject); notes the xul passed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted.
XQuery - Archive of obsolete content
the extension now includes and interfaces with the open-source version of saxonica's saxon b (though this extension currently only performs the xqueries).
... other popular native xml databases might also be supported (e.g., exist) in the future, especially now that the extension has added some basic support for the open-standard (xqj) for java and exist is in the midst of getting such an api.
... berkeley db xml was the initial choice by the extension developer for its support across many languages (c++, java, python, perl, php, etc.) (besides its also being open source), but now some problems may exist with bdbxml (unlike saxon).
... however, use of the approach of the java firefox extension might be used to turn the above extension concept into an xpcom component (giving it access to all open windows), and for berkeley db xml, possibly implementing it in c++ instead, which is that database's original language of development.
3D games on the Web - Game development
webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
... there's an ongoing effort on releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help developers build games for the modern web using current, powerful hardware.
...shaders use glsl, a special opengl shading language, with syntax similar to c, that is executed directly by the graphics pipeline.
... building up a basic demo with playcanvas playcanvas is a popular 3d webgl game engine open-sourced on github, with an editor available online and good documentation.
Visual-js game engine - Game development
full name : visual-js gui for windows multiplatform 2d game engine creator : nikola lukic 2017 2018 open source visual-js project parts : -2d part : this is javascript game engine (server part node.js / client part js) js framework with windows gui editor and game instance creator.
... 1) click create application 2) enter new application name in input prompt 3) select folder for server part of application (important : www is not secure place) 4) select folder for client part of application ( any path in www) 5) new app name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use windows bat-s file (in server root folder with prefix install_ ) second way - open cmd terminal and enter next command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 very easy installation and project files generator .
...manual start from cmd : server_folder/node editor.js after starting on-page-editor open browser icon to open internet browser in editor mode .
... adding new script explanation : after adding new script and save script if you have extra changes , open starter/run.js and you will found line : sys.script.load("scripts/new_script.js") ctrl+s use from menu run->choose browser for testing .
Mobile accessibility - Learn web development
double-tapping anywhere will open the app/select the option.
... for example, with talkback turned on: open your web browser.
... to activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
... browsing web pages let's have a go at web browsing with voiceover: open your web browser.
Web fonts - Learn web development
for example, most modern browsers support woff/woff2 (web open font format versions 1 and 2), the most efficient format around, but older versions of ie only support eot (embedded open type) fonts, and you might need to include an svg version of the font to support older versions of iphone and android browsers.
...it doesn't matter whether they are ttf (true type fonts) or otf (open type fonts).
... open up the stylesheet.css file and copy both the @font-face blocks contained inside into your web-font-start.css file — you need to put them at the very top, before any of your css, as the fonts need to be imported before you can use them on your site.
...this is what one of the blocks looks like: @font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cicle_fina-webfont.woff2') format('woff2'), url('fonts/cicle_fina-webfont.woff') format('woff'), url('fonts/cicle_fina-webfont.ttf') format('truetype'), url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); font-weight: normal; font-style: normal; } this is referred to as "bulletproof @font-face syntax", after a post by paul irish ...
What text editors are available? - Learn web development
ource free windows faq, forum online help yes sublime text closed source $70 windows, mac, linux forum official, unofficial yes textmate closed source $50 mac twitter, irc, mailing list, e-mail online manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free windows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or installing a text editor of your choice.
... generally speaking, any text editor can open any text file.
... when you install a new text editor, your os will probably continue to open text files with its default editor until you change the file association.
... these instructions will help you specify that your os should open files in your preferred editor when you double-click them: windows windows 8 windows 7 older systems mac os x linux ubuntu unity gnome kde next steps now that you have a good text editor, you could take some time to finalize your basic working environment, or, if you want to play with it right away, write your very first web page.
Sending forms through JavaScript - Learn web development
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.
...something went wrong.' ); } ); // set up our request xhr.open( 'post', 'https://example.com/cors.php' ); // send our formdata object; http headers are set automatically xhr.send( fd ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: using formdata bound to a form element you can also bind a formdata object to an <form> element.
...something went wrong.' ); } ); // set up our request xhr.open( "post", "https://example.com/cors.php" ); // the data sent is what the user provided in the form xhr.send( fd ); } // access the form element...
...something went wrong.' ); } ); // set up our request xhr.open( 'post', 'https://example.com/cors.php' ); // add the required http header to handle a multipart form data post request xhr.setrequestheader( 'content-type','multipart/form-data; boundary=' + boundary ); // and finally, send our data.
Index - Learn web development
you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it.
... beginner, express, flask, learn, node, php, python, django, lamp, server-side, servers throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the html file, dragging and dropping it into the browser window, or choosing file > open...
... 256 use javascript within a webpage beginner, html, javascript, openpractices javascript is a programming language mostly used client-side to make webpages interactive.
... you can create amazing webpages without javascript, but javascript opens up a whole new level of possibilities.
A first splash into JavaScript - Learn web development
open it in both your text editor and your web browser.
... if you haven't already done so, save your code, refresh the page in your browser, and open the developer tools javascript console.
... first of all, open up your program in a browser.
... next, open your browser developer tools, and make sure the javascript console tab is open.
What went wrong? Troubleshooting JavaScript - Learn web development
to get started, open the local copy inside your favorite text editor, and your browser.
... fixing syntax errors earlier on in the course we got you to type some simple javascript commands into the developer tools javascript console (if you can't remember how to open this in your browser, follow the previous link to find out how).
... go to the tab that you've got number-game-errors.html open in, and open your javascript console.
... syntaxerror: expected expression, got 'string' or syntaxerror: unterminated string literal these errors generally mean that you've left off a string value's opening or closing quote mark.
Working with JSON - Learn web development
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.
... note: if you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.) note: if you are having trouble following the dot/bracket notation we are using to access the javascript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our javascript.
...the key snippet of code is here: request.open('get', requesturl); request.responsetype = 'text'; // now we're getting a string!
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
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/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
... update your existing checkalltodos() function to the following: const checkalltodos = (completed) => { todos.foreach(t => t.completed = completed) console.log('todos', todos) } go back to your browser, open your devtools console, and click check all/uncheck all a few times.
... open the file components/todo.svelte and add a nameel variable declaration, just below your editing and name declarations: let nameel // reference to the name input dom node now update your onedit() function like so: function onedit() { editing = true // enter editing mode nameel.focus() // set focus to name inp...
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode.
Dynamic behavior in Svelte: working with variables and props - Learn web development
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.
... now try going back to localhost:5000, pressing ctrl + shift + k to open your browser console and typing something into the input field.
...update the newtodo form's opening tag like so: <form on:submit|preventdefault={addtodo}> the on:eventname directive supports adding modifiers to the dom event with the | character.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode.
Getting started with Vue - Learn web development
as you work through this tutorial, you might want to keep the vue guide and api documentation open in other tabs, so you can refer to them if you want more information on any sub topic.
... 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>.
... app.vue open your app.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information.
...open the app.vue file, and delete the <img> element from the template section: <img alt="vue logo" src="./assets/logo.png"> if your server is still running, you should see the logo removed from the rendered site almost instantly.
Strategies for carrying out testing - Learn web development
you may also consider using open source and privacy focussed analytics platforms like open web analytics and matomo.
... note: some efforts have been made to create publically accessible device labs — see open device labs.
... open the app; you'll be presented with a view like the following: to create a new virtual machine, press the new button in the top left hand corner.
...at this point, you can double-click to open it — it will start to boot up the virtual machine, but it won't yet have the operating system (os) installed.
Setting up your own test automation environment - Learn web development
there are other ways, but the best way to use selenium is via webdriver, a powerful api that builds on top of selenium and makes calls to a browser to automate it, carrying out actions such as "open this web page", "move over this element on the page", "click this link", "see whether the link opens this url", etc.
... to set your path variable on mac os x/most linux systems: open your .bash_profile (or .bashrc) file (if you can't see hidden files, you'll need to display them, see show/hide hidden files in mac os x or show hidden folders in ubuntu).
...).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, make sure you are inside your project folder, then enter the following command: node google_test you should see an instance of firefox automatically open up!
... shutting down drivers after use after you've finished running a test, you should shut down any driver instances you've opened, to make sure that you don't end up with loads of rogue browser instances open on your machine!
Command line crash course - Learn web development
if you're running any tooling for web development there's a near-guaranteed chance that you'll have to pop open the command line and run some commands to use your chosen tools (you'll often see such tools referred to as cli tools — command line interface tools).
...before you go any further, open your terminal program!
...this will open up the man page in the terminal’s default text file viewer (for example, less in my terminal), and you should then be able to scroll through the page using the arrow keys, or some similar mechanism.
... once you've installed node, open up the terminal and run the following command to install prettier: npm install --global prettier once the command has finished running, the prettier tool is now available in your terminal, at any location in your file system.
Accessibility Features in Firefox
the find bar allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search.
...chen is a screen reader extension built just for firefox which can read mathml community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they have something to benefit from a browser open to utilizing their ideas and hard work.
...rather than go and write their own new web browser, ibm decided to trust in the openness of the mozilla community, which accepted ibm's significant contributions.
... that's the great thing about the open firefox community model and source code license -- anyone can contribute, and everyone benefits.
Links and Resources
here are some useful links for those interested in web accessibility as well as open source accessibility.
... html advanced validator (firefox extension) by marc gueury this advanced html validator (based on w3c tidy and on opensp for sgml validation - just like w3c html validator) is a free, powerful, versatile, extended html validator.
... open source assistive technology projects nonvisual desktop access open source screen reader for windows, written in python.
... lsr open source screen reader for linux, written in python orca open source screen reader for linux, written in python accessibility for desktop environments gnome accessibility - gnome accessibility project kde accessibility project - an equally important toolkit on linux apple accessibility - moving forward with os x.
What to do and what not to do in Bugzilla
you should look at all the open bugs you've reported (see the "my bugs" link at the bottom of every bugzilla page) at least every two months and test whether they still exist.
...when marking it wfm you should tell the bug reporter that they should reopen the bug if they can still see it with a recent build.
...if there are only a few comments in the bug, it may be reopened only if the original reporter provides more info, or confirms someone else's steps to reproduce.
...in this case the bug should be resolved and another bug should be opened.
Creating Sandboxed HTTP Connections
rvice;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null); once the nsiuri has been created, a nsichannel can be generated from it using nsiioservice's newchannelfromuri method: // get a channel for that nsiuri var channel = ioservice.newchannelfromuri(uri); to initiate the connection, the asyncopen method is called.
... channel.asyncopen(listener, null); http notifications the above mentioned listener is a nsistreamlistener, which gets notified about events such as http redirects and data availability.
...classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null); // get a channel for that nsiuri gchannel = ioservice.newchannelfromuri(uri); // get an listener var listener = new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scriptableinputstream = components.classes["@mozilla.org/s...
... 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.
Debugging a hang on OS X (Archived)
creating the sample on mac os x 10.5 (xcode < 4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... when it's done parsing the data, click the "show text report" button; a new window will open with a couple of rows with stacktraces for all the threads in the sampled application.
... for a more detailed view of the sample data, make sure the sample you just recorded is selected in the “detected hangs” window and click on the “open…” button.
... creating the sample on mac os x 10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.).
HTTP logging
open a new tab and type in "about:networking" into the url bar.
... open a command prompt.
... open a new shell.
... open a command prompt.
Simple SeaMonkey build
debian linux: # this one-liner should install all necessary build deps sudo aptitude install zip mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev libidl-dev mesa-common-dev autoconf2.13 yasm libgtk2.0-dev libdbus-1-dev libdbus-glib-1-dev python-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libpulse-dev ubuntu linux # for ubuntu 12.04 lts (precise pangolin), replace the following line with: sudo apt-get build-dep thunderbird sudo apt-get build-dep seamonkey sudo apt...
...-get install zip unzip mercurial g++ make autoconf2.13 yasm libgtk2.0-dev libglib2.0-dev libdbus-1-dev libdbus-glib-1-dev libasound2-dev libcurl4-openssl-dev libnotify-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel alsa-lib-devel libxt-devel gstreamer-devel gstreamer-plugins-base-devel pulseaudio-libs-devel # 'development tools' is defunct in fedora 19 and above use the following sudo yum groupinstall 'c development tools and libraries' sudo yum group mark install "x software de...
...insert "mac os x install disc 2", then open xcodetools.mpkg.
...after that all should be well.) open a shell window by running: c:\mozilla-build\start-msvc2013.bat.
Simple Sunbird build
ubuntu linux: sudo apt-get build-dep sunbird sudo apt-get install mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel mac: install xcode tools.
... insert "mac os x install disc 2", then open xcodetools.mpkg.
...after that all should be well.) open a shell window by running: c:\mozilla-build\start-msvcx.bat (where x is 8 for vs 2005, and 9 for vs 2008).
... on windows, if you open the command prompt you are usually in your user profile folder which often contains spaces ( c:\documents and settings\...).
Error codes returned by Mozilla APIs
ns_error_file_corrupted (0x8052000b) indicates that an attempt was made to open or access a file that has been corrupted, or that the format of a file is unknown.
...implementations of nsichannel.asyncopen() will commonly return this error if the channel has already been opened (and has not yet been closed).
... ns_error_offline (0x804b0010) ns_error_no_content (0x804b0011) returned from nsichannel.asyncopen() to indicate that ondataavailable will not be called because there is no content available.
...f) ns_error_cache_wait_for_validation (0x804b0040) ns_error_cache_entry_doomed (0x804b0041) ns_error_cache_read_access_denied (0x804b0042) ns_error_cache_write_access_denied (0x804b0043) ns_error_cache_in_use (0x804b0044) ns_error_document_not_cached (0x804b0046) ns_error_net_interrupt (0x804b0047) ns_error_proxy_connection_refused (0x804b0048) ns_error_already_opened (0x804b0049) returned from nsichannel.asyncopen() when trying to open the channel again (reopening is not supported).
Storage access policy: Block cookies from trackers
third-party storage access may be granted to resources that have been classified as tracking resources when a user gesture triggers a pop-up window that has opener access to the originating document.
... when that occurs, there are three possible ways a third-party origin can be granted access: the origin of the resource that is initially loaded in the pop-up window is granted storage access on the opener document.
...if a user interacts with the pop-up window following a redirect, the origin of the content loaded in the pop-up window is given storage access on the opener document.
... scope of storage access when storage access is granted, it is scoped to the origin of the opener document or subdomains of that origin.
Embedding the editor
g session multiple-editor support eliminate specific interdependencies between composer and the xul document, via nsieditoruserinterface create bottleneck for getting to the focussed editor; ensure that focus changes update state move editor ownership to docshell, creating nsieditorframe created the editing session api which copes with collections of editors (or make editor refocussable) open questions where should file open and save logic live?
... it seems that some embedders will want composer open and save file logic, and some won't.
...of course, an embedder should be able to use its own open and save dialogs, and communicate with composer to coordinate the open or save process.
... possible answer the embedder provides open and save dialogs if they want to.
Hacking with Bonsai
at 10:00 am, everyone who is on the hook is available in case the build breaks eventually, the tree builds, and it is re-opened.
... there is a web page, which records if the tree is open or closed what the date stamp of the last known good tree is who is on the hook for the current tree before the tree is opened, the list of checkins that happened when the tree was closed is reviewed to insure that only build related checkins took place.
... before the tree is opened, there is a car pool lane where people who have been off on a branch and need a stable tip to merge in can pull the tip for their merge.
...when the tree is re-opened, the web page is updated and the hook is cleared.
L10n testing with xcode
open the client.xcodeproj file in xcode.
... navigate to the newly opened ios simulator window many strings are accessibility strings and are only revieled when a user hovers their finger over the button.
... navigate to the settings app, open it, and go to general > accessibility.
... press the home button again, navigate to the pane with your firefox for ios localization on it, and reopen firefox.
Fonts for Mozilla 2.0's MathML engine
on most linux distributions and similar open source platforms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or get them from this zip archive.
...they are available under the sil open font license and should be installed for best mathml rendering.
...asana math is also freely available under the sil open font license and has good support for mathematical characters.
...these fonts are opentype postscript fonts, which are supported by most modern operating systems.
Anonymous Shared Memory
this restricts processes that do not inherit the shared memory from opening the file and reading or writing its contents.
... 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); ...
...pr_memunmap(addr); pr_closefilemap(fm); second protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); fmstring = pr_exportfilemapasstring( fm ); addr = pr_memmap(fm); ...
...pr_memunmap(addr); pr_closefilemap(fm); anonymous shared memory functions pr_openanonfilemap pr_processattrsetinheritablefilemap pr_getinheritedfilemap pr_exportfilemapasstring pr_importfilemapfromstring ...
An overview of NSS Internals
it's free and open source software, and many other software projects have decided to use it.
...it will detect and open an existing database, or it can create a new one.
...each layer defines its own functions for the open/close/read/write/poll/select (etc.) functions.
...if you require it in pem format, you could use the openssl pkcs12 command (that's not nss) to convert the pkcs#12 file to pem.
NSS Sample Code Utilities_1
instring++; continue; } outbuf->data[truelen++] = *instring++; } outbuf->data[truelen] = '\0'; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size) { return secsuccess; } } secitem_freeitem(dst, pr_false); dst->data = null; return secfailure; } /* * echooff ...
... print32 nb; char *pwfile = arg; int i; const long maxpwdfilesize = 4096; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the file contents will be the same */ } phrases = port_zalloc(maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfile, pr_rdonly, 0); if (!fd) { fprintf(stderr, "no password file \"%s\" exists.\n", pwfile); port_free(phrases); return null; } nb = pr_read(fd, phrases, maxpwdfilesize); pr_close(fd); if (nb == 0) { fprintf(stderr,"password file contains no data\n"); port_free(phrases); return null; } if (slot) { tokenname...
... rv = secfailure; fprintf(stderr, "\n"); /* set back termio the way it was */ tio.c_lflag = orig_lflag; tio.c_cc[vmin] = orig_cc_min; tio.c_cc[vtime] = orig_cc_time; tcsetattr(fd, tcsaflush, &tio); return rv; } /* * seedfromnoisefile */ secstatus seedfromnoisefile(const char *noisefilename) { char buf[2048]; prfiledesc *fd; print32 count; fd = pr_open(noisefilename, pr_rdonly, 0); if (!fd) { fprintf(stderr, "failed to open 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) { str...
...uct stat stbuf; stat(filename, &stbuf); return stbuf.st_size; } /* * readderfromfile */ secstatus readderfromfile(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; goto cleanup; } if (ascii) { /* first convert ascii to binary */ secitem filedata; char *asc, *body; /* read in ascii data */ rv = filetoitem(&filedata, infile); asc = (char *)filedata.data; if (!asc) { pr_fprintf(pr_stderr, "unable to rea...
Utilities for nss samples
instring++; continue; } outbuf->data[truelen++] = *instring++; } outbuf->data[truelen] = '\0'; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size) { return secsuccess; } } secitem_freeitem(dst, pr_false); dst->data = null; return secfailure; } /* * echooff ...
... print32 nb; char *pwfile = arg; int i; const long maxpwdfilesize = 4096; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the files contents will be the same */ } phrases = port_zalloc(maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfile, pr_rdonly, 0); if (!fd) { fprintf(stderr, "no password file \"%s\" exists.\n", pwfile); port_free(phrases); return null; } nb = pr_read(fd, phrases, maxpwdfilesize); pr_close(fd); if (nb == 0) { fprintf(stderr,"password file contains no data\n"); port_free(phrases); return null; } if (slot) { tokenname...
... rv = secfailure; fprintf(stderr, "\n"); /* set back termio the way it was */ tio.c_lflag = orig_lflag; tio.c_cc[vmin] = orig_cc_min; tio.c_cc[vtime] = orig_cc_time; tcsetattr(fd, tcsaflush, &tio); return rv; } /* * seedfromnoisefile */ secstatus seedfromnoisefile(const char *noisefilename) { char buf[2048]; prfiledesc *fd; print32 count; fd = pr_open(noisefilename, pr_rdonly, 0); if (!fd) { fprintf(stderr, "failed to open 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) { str...
...uct stat stbuf; stat(filename, &stbuf); return stbuf.st_size; } /* * readderfromfile */ secstatus readderfromfile(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; goto cleanup; } if (ascii) { /* first convert ascii to binary */ secitem filedata; char *asc, *body; /* read in ascii data */ rv = filetoitem(&filedata, infile); asc = (char *)filedata.data; if (!asc) { pr_fprintf(pr_stderr, "unable to rea...
NSS_Initialize
the flags parameter is a bitwise or of the following flags: nss_init_readonly - open the databases read only.
... nss_init_nocertdb - don't open the cert db and key db's, just initialize the volatile certdb.
... nss_init_nomoddb - don't open the security module db, just initialize the pkcs #11 module.
... nss_init_forceopen - continue to force initializations even if the databases cannot be opened.
sslintro.html
changes default values for all subsequently opened sockets as long as the application is running (compare with ssl_seturl which only configures the socket that is currently open).
... configuration the configuration portion of an ssl-enabled application typically begins by opening a new socket and then importing the new socket into the ssl environment: pr_newtcpsocket.
... opens a new socket.
...after these tasks have been performed, call nss_shutdown to close the certificate and key databases opened by nss_init, and pr_cleanup to coordinate a graceful shutdown of nspr.
Mozilla Projects
crash reporting firefox ships with an open-source crash reporting system.
... rhino rhino is an open-source implementation of javascript written entirely in java.
... shumway this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of developers currently creating the adobe flash platform.
... it is completely free, open source and can be included in any tool whether open or closed, free or commercial.
Secure Development Guidelines
on initialize the data members of an object in the constructor writing secure code: miscellaneous file i/o a lot can go wrong because a lot can be done with file input and output filenames permissions file handles and descriptors file i/o: filename divided in directories, subdirectories, and the file itself ‘/’ is separator; in windows ‘\’ would work too int openfile(char *file) { handle fh; if (strstr(file, “\”)) return -1; fh = createfilea(file, ...); writefile(fh, data, sizeofdata, null, null); } could be a normal file, directory, device, or link directory traversal (../../../../) file i/o: file permissions should be set correctly be sure not to make world-writable files sensitive files shouldn’t be wo...
...rld readable file i/o: file descriptors and handles could be a race if instances of fh are shared between threads fh inheritence: default in unix, needs to be set in windows int main(int argc, char **argv, char **envp) { int fd = open("/etc/shadow", o_rdwr); setreuid(getuid(), getuid()); excve("/bin/sh", argv, envp); } suid root applications file i/o: file descriptors and handles potential overflows when using select fd_set struct, static length, holds a bitmask of fds manipulated with fd_set, fd_isset, fd_clr and fd_zero macros fd_set’s size depends on the operating system if the os allows opening more fds, then fd_set can hold could overflow fd_set file i/o: file descriptors and handles good solution: dynamically allocate fd_set structs int main(voi...
...d) { int i, fd; fd_set fdset; for( i = 0; i < 2000; i++) { fd = open("/dev/null", o_rdwr); } fd_set(fd, &fdset); } file i/o: race conditions operating on files can often lead to race conditions since the file system is shared with other processes you check the state of a file at one point in time and immediately after the state might have changed most file name operations suffer from these race conditions, but not when performed on file descriptors file i/o: race conditions consider the following example int main(int argc, char **argv) { char *file = argv[1]; int fd; struct stat statbuf; stat(file, &statbuf); if (s_islink(statbuf.st_mode)) { bailout(“symbolic link”); } else if (statbuf.st_uid != getuid) ...
...{ bailout(“you don’t own the file”); } fd = open(file, o_rdwr); write(fd, argv[2], strlen(argv[2])); } file i/o: race conditions previous example contains a race condition the file may change between the call top stat() and open() this opens the possibility of writing arbitrary content to any file race conditions occur when two separate execution flows share a resource and its access is not synchronized properly race condition types include file (previously covered) thread (two threads share a resource but don’t lock it) signal race conditions example char *ptr; void sighandler() { if (ptr) free(ptr); _exit(0); } int main() { signal(sigint, sighandler); ptr = malloc(1000); if (!ptr) ...
XPCOM Stream Guide
MozillaTechXPCOMGuideStreams
there are two ways of getting the input stream: by calling the channel's .open() method for a synchronous read, or by calling the channel's .asyncopen() method with an nsistreamlistener object.
... fileutils.jsm provides apis for getting output streams for files, with the .openfileoutputstream(file, modeflags) and .opensafefileoutputstream(file, modeflags) methods, and for closing those output streams with the .closesafefileoutputstream(inputstream) method.
... zip input and output for getting an input stream from a zip archive, see the nsizipreader interface: // file is an nsifile object mapping to a zip archive var zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); zipreader.open(file); var stream = zipreader.getinputstream("/path/to/zipped/file"); // process the stream // when we don't need the zipreader anymore zipreader.close(); for writing from an input stream to a zip archive, see the nsizipwriter interface: // file is an nsifile object mapping to a zip archive var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstan...
...ce(components.interfaces.nsizipwriter); zipwriter.open(file, ioflags); // stream is the output stream zipwriter.addentrystream("/path/to/zipped/file", modtime, compression, stream, queueforlater); // if queued for later operations, and all operations are queued zipwriter.processqueue(); // when we don't need the zipwriter anymore zipwriter.close(); concatenating input streams var stringstream = components.constructor("@mozilla.org/io/string-input-stream;1", "nsistringinputstream", "setdata"); function buildstream(data) { return new stringstream(data, data.length); } function run_test() { var str1 = buildstream("we "); var str2 = buildstream("will "); var str3 = buildstream("rock "); var str...
nsIAppStartup
boolean createstartupstate( in long awindowwidth, in long awindowheight ); parameters awindowwidth the width to make the initial window(s) opened.
... awindowheight the height to make the initial window(s) opened.
... return value true if a window was opened.
...if there are no windows open and no outstanding calls to enterlastwindowclosingsurvivalarea() this method will exit immediately.
nsIDOMWindowInternal
it provides many of the common functions used in javascript such as alert() or open().
...k() void forward() void home() void stop() void print() void moveto(in long xpos, in long ypos) void moveby(in long xdif, in long ydif) void resizeto(in long width, in long height) void resizeby(in long widthdif, in long heightdif) void scroll(in long xscroll, in long yscroll) nsidomwindow window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring url, in domstring name, in domstring options) nsidomwindow nsisupports aextraargument) void close() void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean backwards, [optional] in boolean wraparound, [optional] in boolean wholeword, [optional] in boolean searchinframes, [optional] in boolean showdialog) domstring atob(in domstring aasciistring) domstring btoa(in domstring abase64data) nsivariant showmodaldialog(in nsivariant aargs, [optional] in domstring aoptions) void postmessage(in domstring messag...
... opener nsidomwindowinternal returns a reference to the window that opened this current window.
nsIFile
void normalize(); file openansifiledesc(in string mode); prfiledescstar opennsprfiledesc(in long flags, in long mode); void renameto(in nsifile newparentdir, in astring newname); void remove(in boolean recursive); void reveal(); void setrelativedescriptor(in nsifile fromfile, in acstring relativedesc); attributes attribute type description director...
... delete_on_close 0x80000000 optional parameter used by opennsprfiledesc methods append() this function is used for constructing a descendant of the current nsifile.
... files that are exclusively opened on win32 will return true if they are normally writable, and files that don't have write permissions will return false.
...the native character encoding is defined as the single-byte character encoding used with the standard fopen function on the host system.
nsIFrameScriptLoader
if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given window for the window message manager, or every frame in every window for the global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call.
... for example: let windowmm = window.messagemanager; windowmm.loadframescript('data:,dump("foo\n");', true); this will load a separate instance of the frame script into every tab open in the window associated with this window message manager.
... as the user opens new tabs in this window, copies of the script will be loaded into these new tabs, as well.
...for example data:,dump("foo\n"); aallowdelayedload boolean if true, this flag means that the frame script will be loaded into any new frames opened after the loadframescript() call, until removedelayedframescript() is called for that script.
nsIMenuBoxObject
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) to get access to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in nsidomkeyevent keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menuitem child of the menu box.
... openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false.
... note: for gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface.
...openmenu() void openmenu( in boolean openflag ); parameters openflag true to open the menu or false to close it.
nsINavHistoryResultObserver
method overview void batching(in boolean atogglemode); void containerclosed(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainerresultnode 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 autf8st...
... containerclosed() obsolete since gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) called when a container node's state changes from opened to closed.
... containeropened() obsolete since gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) called when a container node's state changes from closed to opened.
... void containeropened( in nsinavhistorycontainerresultnode acontainernode ); parameters acontainernode the container node which was opened.
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 nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodelastaddedchanged(in nsinavhistoryresultnode anode...
... methods containerclosed() called when a container node's state changes from closed to opened.
... containeropened() called when a container node's state changes from closed to opened.
... void containeropened( in nsinavhistorycontainerresultnode acontainernode ); parameters acontainernode the container node whose state changed.
nsIPrintingPrompt
setup() - displays a native dialog showprogress() - displays a xul dialog method overview void showpagesetup(in nsiprintsettings printsettings, in nsiobserver aobs); void showprintdialog(in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings); void showprogress(in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen); methods showpagesetup() shows the print progress dialog.
... void showprogress( in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen ); parameters webbrowserprint represents the document to be printed.
... printsettings printsettings for print "job" opendialogobserver an observer that will be notifed when the dialog is opened.
... notifyonopen this indicates that the observer will be notified when the progress dialog has been opened.
nsIScriptableIO
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...the file does not have to exist already; this method simply creates the file reference which may then be passed to the newinputstream() or newoutputstream() method to open the file for reading or writing.
... reopenonrewind: used in conjunction with the seek mode, the file will be reopened when a seek to the beginning of the file is done.
...if used in conjuction with the create mode, an existing file may be opened for appending, or a new file created.
nsISocketTransport
it provides methods to open blocking or non-blocking, buffered or unbuffered streams between two end-point in a ip based network.
... inherits from: nsitransport last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) note: connection setup is triggered by opening an input or output stream, it does not start on its own.
... note: this attribute cannot be changed once a stream has been opened.
...ting_for 0x804b000a status_receiving_from 0x804b0006 connection flags values for the connectionflags attribute constant value description bypass_cache 0 when making a new connection bypass_cache will force the necko dns cache entry to be refreshed with a new call to nspr if it is set before opening the new stream.
Storage
open a connection to the database of your choice - mozistorageconnection.
... opening a connection javascript example of opening my_db_file_name.sqlite in the profile directory: components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); let file = fileutils.getfile("profd", ["my_db_file_name.sqlite"]); let dbconn = services.storage.opendatabase(file); // will also create the file if it does not exist likewise, the c++ would look like this: nscomptr<nsifile> dbfile; rv = ns_getspecialdirectory(ns_app_user_profile_50_dir, getter_addrefs(dbfile)); ns_ensure_success(rv, rv); rv = dbfile->a...
...ppend(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_storage_service_contractid is defined in storage/build/mozstoragecid.h.
...these are a few simple things you can avoid to help make sure this doesn't happen: open more than one connection to the same file with names that aren't exactly the same as determined by strcmp.
Network Monitor - Firefox Developer Tools
opening the network monitor there are a few different ways to open the network monitor: press ctrl + shift + e ( command + option + e on a mac).
...when it first opens, the network monitor does not show request information.
... the just opened tool looks like this: either action causes the network monitor to begin monitoring network activity.
... once the tool is monitoring network requests, the display looks like this: when it is actively monitoring activity, the network monitor records network requests any time the toolbox is open, even if the network monitor itself is not selected.
Tips - Firefox Developer Tools
web console in all panels: esc opens the split console; useful when debugging, or inspecting nodes in the command line: $0 references the currently selected node.
... help opens the mdn page describing the available commands.
... check "disable http cache (when toolbox is open)" in the settings to disable the network cache while debugging network issues.
... storage inspector right-click the column headers to open a menu allowing to toggle the display of the columns.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
loopend: an optional value, in seconds, where looping should end if the loop attribute is true.
...the sample frames, comprising the loop, run from the values loopstart to loopend-(1/samplerate).
...if loopend is less than 0, looping will end at 0.
... if loopend is greater than the duration of the buffer, looping will end at the end of the buffer.
Element - Web APIs
WebAPIElement
element.shadowrootread only returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
... element.openorclosedshadowroot read only returns the shadow root that is hosted by the element, regardless if its open or closed.
... cancel fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog.
... contextmenu fired when the user attempts to open a context menu.
Event.composed - Web APIs
WebAPIEventcomposed
examples in our composed-composed-path example (see it live), we define two trivial custom elements, <open-shadow> and <closed-shadow>, both of which take the contents of their text attribute and insert them into the element's shadow dom as the text content of a <p> element.
... the only difference between the two is that their shadow roots are attached with their modes set to open and closed respectively.
... the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> e...
... the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
Event.composedPath() - Web APIs
examples in our composed-composed-path example (see it live), we define two trivial custom elements, <open-shadow> and <closed-shadow>, both of which take the contents of their text attribute and insert them into the element's shadow dom as the text content of a <p> element.
... the only difference between the two is that their shadow roots are attached with their modes set to open and closed respectively.
... the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> e...
...the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
HTMLDetailsElement: toggle event - Web APIs
the toggle event fires when the open/closed state of a <details> element is toggled.
... bubbles no cancelable no interface event event handler property none default action toggles the open state of the <details> element.
... examples this example logs chapters that are open.
... html <aside id="log"> <b>open chapters:</b> <div data-id="ch1" hidden>i</div> <div data-id="ch2" hidden>ii</div> <div data-id="ch3" hidden>iii</div> </aside> <section id="summaries"> <b>chapter summaries:</b> <details id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune.
HTMLDialogElement - Web APIs
htmldialogelement.open a boolean reflecting the open html attribute, indicating whether the dialog is available for interaction.
... examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the htmldialogelement.showmodal() function.
...confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); 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.addeven...
...tlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
IDBCursor.delete() - Web APIs
WebAPIIDBCursordelete
be aware that you can't call delete() (or idbcursor.update()) on cursors obtained from idbindex.openkeycursor().
... for such needs, you have to use idbindex.opencursor() instead.
... invalidstateerror the cursor was created using idbindex.openkeycursor, is currently being iterated, or has iterated past its end.
...for a complete working example, see our idbcursor example (view example live.) function deleteresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readwrite'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function() { console.log('deleted that mediocre album from 1984.
IDBCursor.update() - Web APIs
WebAPIIDBCursorupdate
be aware that you can't call update() (or idbcursor.delete()) on cursors obtained from idbindex.openkeycursor().
... for such needs, you have to use idbindex.opencursor() instead.
... invalidstateerror the cursor was created using idbindex.openkeycursor, is currently being iterated, or has iterated past its end.
...for a complete working example, see our idbcursor example (view example live.) function updateresult() { list.innerhtml = ''; const transaction = db.transaction(['rushalbumlist'], 'readwrite'); const objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 2050; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; ...
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.
... // 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; db.addeventlistener('abort', () => { console.log('tr...
...ansaction 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.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', 'd...
...ay', { 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(); }; ...
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 conta...
...in 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, 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 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 newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 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); }; ...
IDBDatabase.onversionchange - Web APIs
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer).
...} example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases, and an onversionchange function to notify when a database structure change has occurred.
... request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // 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 }); objectstore.createindex...
...("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specification.
IDBDatabase: versionchange event - Web APIs
the versionchange event is fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested.
... 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 }); 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 = 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: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.create...
...index('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 = event.target.result; db.onversionchange = event => { console.log('the version of this database has changed'); }; }; ...
IDBDatabaseSync - Web APIs
method overview idbobjectstoresync createobjectstore (in domstring name, in domstring keypath, in optional boolean autoincrement) raises (idbdatabaseexception); idbobjectstoresync openobjectstore (in domstring name, in optional unsigned short mode) raises (idbdatabaseexception); void removeobjectstore (in domstring storename) raises (idbdatabaseexception); void setversion (in domstring version); idbtransactionsync transaction (in optional domstringlist storenames, in optional unsigned int timeout) raises (idbdatabaseexception); attributes ...
... openobjectstore() opens the object store with the given name in the connected database using the specified mode.
... idbobjectstoresync openobjectstore ( in domstring name, in optional unsigned short mode ) raises (idbdatabaseexception); parameters name the name of the object store to open.
... returns idbobjectstoresync an object to access the opened object store.
IDBFactorySync - Web APIs
method overview idbdatabasesync open (in domstring name, in domstring description, in optional boolean modifydatabase) raises (idbdatabaseexception); methods open() opens and returns a connection to a database.
... idbdatabasesync open ( in domstring name, in domstring description ) raises (idbdatabaseexception); parameters name the name for the database.
... returns idbdatabasesync an object to access the open database.
... unknown_err if an error occurs while the database is being opened.
IDBIndex.objectStore - Web APIs
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor.
... this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBKeyRange.lowerBound() - Web APIs
syntax var myidbkeyrange = idbkeyrange.lowerbound(lower); var myidbkeyrange = idbkeyrange.lowerbound(lower, open); parameters lower specifies the lower bound of the new key range.
... open optional indicates whether the lower bound excludes the endpoint value.
...we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } ...
IDBKeyRange.upperBound() - Web APIs
syntax var myidbkeyrange = idbkeyrange.upperbound(upper[, open=false]) parameters bound specifies the upper bound of the new key range.
... open indicates whether the upper bound excludes the endpoint value.
...we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } ...
IDBObjectStore.add() - 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().
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.get() - Web APIs
to tell these situations apart, call the opencursor() method with the same key.
... example in the following code snippet, we open a read/write transaction on our database and get one specific record from object store using get() — a sample record with the key "walk dog".
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</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"); // make a request to get a record by key from the object store ...
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); obj...
...ectstorerequest.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: fal...
...se }); 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() - 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.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... 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"], "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.
IDBTransaction: abort event - Web APIs
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.
... // 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'); // 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.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'); // add a listener for `abort` transaction.onabort = (event) => { console.log('transaction was aborted'); }; // abort the transaction transaction.abort(); }; ...
IDBTransaction.db - Web APIs
WebAPIIDBTransactiondb
example in the following code snippet, we open a read/write transaction on our database and add some data to an object store.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"], "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.
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.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"], "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: ' + transaction.erro...
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 c...
...ontain 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.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 = objectstore.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', { uni...
...que: 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
example in the following code snippet, we open a read/write transaction on our database and add some data to an object store.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"], "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.
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.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"], "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: ' + transaction.error...
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.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"], "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: ' + transaction.error...
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.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"], "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: ' + transaction.erro...
IDBTransaction - Web APIs
you should code defensively in case the object is not available anymore: var myidbtransaction = window.idbtransaction || window.webkitidbtransaction || { read_write: "readwrite" }; examples in the following code snippet, we open a read/write transaction on our database and add some data to an object store.
... note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
... this is used a lot below db = dbopenrequest.result; // add the data to the database adddata(); }; function adddata() { // create a new object 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 to add data var transaction = db.transaction(["todolist"], "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.
IDBVersionChangeEvent.newVersion - Web APIs
example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
...// moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database i...
... // this is used a lot later on, for opening transactions and suchlike.
... db = dbopenrequest.result; }; specifications specification status comment indexed database api 2.0the definition of 'newversion' in that specification.
Basic concepts - Web APIs
thus, you cannot execute commands or open cursors outside of a transaction.
... this transaction model is really useful when you consider what might happen if a user opened two instances of your web app in two different tabs simultaneously.
...the only way to change the version is by opening it with a greater version than the current one.
... database connection an operation created by opening a database.
Checking when a deadline is due - Web APIs
don't support html form validation (i have 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 open...
...the next few lines open the database transaction and provide messages to notify the user if this was successful or failed.then an objectstore is created into which the new item is added.
...s (gives an easy numerical value), day of the month (getdate() is needed for this, as getday() returns the day of the week, 1-7), month (returns a number from 0-11, see below), and year (getfullyear() is needed; getyear() is deprecated, and returns a weird value that is not much use to anyone!) var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { next we create another indexeddb objectstore, and use the opencursor() method to open a cursor, which is basically a way in indexeddb to iterate through all the items in the store.
...ation is fired for each item object, its notification property is set to "yes" so this check will not pass on the next iteration, via the following code inside the createnotification() function (read using indexeddb for an explanation): // now we need to update the value of notified to "yes" in this particular data object, so the // notification won't be set off on it again // first open up a tranaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var request = objectstore.get(title); request.onsuccess = function() { // grab the data object returned as the result var data = request.result; // update the notified value in the object t...
MediaSource - Web APIs
mediasource.readystate read only returns an enum representing the state of the current mediasource, whether it is not currently attached to a media element (closed), attached and ready to receive sourcebuffer objects (open), or attached but the stream has been ended via mediasource.endofstream() (ended.) mediasource.duration gets and sets the duration of the current media being presented.
... mediasource.onsourceopen the event handler for the sourceopen event.
...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(); video.play(); ...
... //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); }; specifications specification status comment media source extensionsthe definition of 'mediasource' in that specification.
PerformanceTiming - Web APIs
performancetiming.connectstart read only when the request to open a connection is sent to the network.
... performancetiming.connectend read only when the connection is opened network.
...a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated.
...if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request.
Screen.availHeight - Web APIs
example if your web application needs to open a new window, such as a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
... in the main window, when it's time to open the panels, code like the following is used.
... let palettewindow = window.open("panels.html", "panels", "left=0, top=0, width=200"); the panels window's html, in panels.html, has javascript code of its own, which is executed as soon as the window is created.
... on a windows system, this would function similarly, by opening the window and sizing it vertically so it uses all available vertical space, leaving room for the taskbar and any other interface elements that reserve space.
WebGLRenderingContext.bindBuffer() - Web APIs
opengl es 2.0the definition of 'glbindbuffer' in that specification.
... standard man page of the (similar) opengl es 2 api.
... 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 opengl es 3.0the definition of 'glbindbuffer' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.bindFramebuffer() - Web APIs
opengl es 2.0the definition of 'glbindframebuffer' in that specification.
... standard man page of the opengl api.
... adds: gl.draw_framebuffer and gl.read_framebuffer opengl es 3.0the definition of 'glbindframebuffer' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.bindTexture() - Web APIs
opengl es 2.0the definition of 'glbindtexture' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... adds: gl.texture_3d and gl.texture_2d_array opengl es 3.0the definition of 'glbindtexture' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.blendEquation() - Web APIs
opengl es 2.0the definition of 'glblendequation' in that specification.
... standard man page of the opengl es 2.0 api.
... opengl es 3.0the definition of 'glblendequation' in that specification.
... standard man page of the opengl es 3.0 api.
WebGLRenderingContext.blendEquationSeparate() - Web APIs
opengl es 2.0the definition of 'glblendequationseparate' in that specification.
... standard man page of the opengl es 2.0 api.
... opengl es 3.0the definition of 'glblendequationseparate' in that specification.
... standard man page of the opengl es 3.0 api.
WebGLRenderingContext.bufferData() - Web APIs
opengl es 2.0the definition of 'glbufferdata' in that specification.
... standard man page of the opengl api.
... opengl es 3.0the definition of 'glbufferdata' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.bufferSubData() - Web APIs
opengl es 2.0the definition of 'glbuffersubdata' in that specification.
... standard man page of the opengl es 2 api.
... opengl es 3.0the definition of 'glbuffersubdata' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
opengl es 2.0the definition of 'glcheckframebufferstatus' in that specification.
... standard man page of the opengl api.
... opengl es 3.0the definition of 'glcheckframebufferstatus' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
opengl es 2.0the definition of 'glcompressedteximage2d' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'glcompressedteximage2d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
opengl es 2.0the definition of 'glcompressedtexsubimage2d' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'glcompressedtexsubimage2d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.disable() - Web APIs
opengl es 2.0the definition of 'gldisable' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'gldisable' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.enable() - Web APIs
opengl es 2.0the definition of 'glenable' in that specification.
... standard man page of the opengl es 2.0 api.
... opengl es 3.0the definition of 'glenable' in that specification.
... standard man page of the opengl es 3.0 api.
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
opengl es 2.0the definition of 'glframebufferrenderbuffer' in that specification.
... standard man page of the (similar) opengl api.
... opengl es 3.0the definition of 'glframebufferrenderbuffer' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
opengl es 2.0the definition of 'glframebuffertexture2d' in that specification.
... standard man page of the (similar) opengl es 2 api.
... opengl es 3.0the definition of 'glframebuffertexture2d' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.generateMipmap() - Web APIs
opengl es 2.0the definition of 'glgeneratemipmap' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'glgeneratemipmap' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.getBufferParameter() - Web APIs
opengl es 2.0the definition of 'glgetbufferparameteriv' in that specification.
... standard man page of the (similar) opengl es 2 api.
... opengl es 3.0the definition of 'glgetbufferparameter' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
opengl es 2.0the definition of 'glgetframebufferattachmentparameteriv' in that specification.
... standard man page of the (similar) opengl api.
... opengl es 3.0the definition of 'glgetframebufferattachmentparameteriv' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
opengl es 2.0the definition of 'glgetrenderbufferparameteriv' in that specification.
... standard man page of the (similar) opengl api.
... opengl es 3.0the definition of 'glgetrenderbufferparameteriv' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.getTexParameter() - Web APIs
opengl es 2.0the definition of 'glgettexparameter' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'glgettexparameter' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.getUniform() - Web APIs
opengl es 2.0the definition of 'glgetuniform' in that specification.
... standard man page of the (similar) opengl es 2 api.
... opengl es 3.0the definition of 'glgetuniform' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.getVertexAttrib() - Web APIs
opengl es 2.0the definition of 'glgetvertexattrib' in that specification.
... standard man page of the opengl es 2 api.
... opengl es 3.0the definition of 'glgetvertexattrib' in that specification.
... standard man page of the opengl es 3 api.
WebGLRenderingContext.isEnabled() - Web APIs
opengl es 2.0the definition of 'glisenabled' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'glisenabled' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.renderbufferStorage() - Web APIs
opengl es 2.0the definition of 'glrenderbufferstorage' in that specification.
... standard man page of the opengl es 2 api.
... opengl es 3.0the definition of 'glrenderbufferstorage' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGLRenderingContext.texImage2D() - Web APIs
opengl es 2.0the definition of 'glteximage2d' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'glteximage2d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.texParameter[fi]() - Web APIs
opengl es 2.0the definition of 'gltexparameter' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'gltexparameter' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.texSubImage2D() - Web APIs
opengl es 2.0the definition of 'gltexsubimage2d' in that specification.
... standard man page of the (similar) opengl es 2.0 api.
... opengl es 3.0the definition of 'gltexsubimage2d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
Using WebGL extensions - Web APIs
webgl, like its sister apis (opengl and opengl es), supports extensions.
... oes_ and khr_: extensions that mirror functionality from opengl es (oes) or opengl api extensions approved by the respective architecture review boards (khronos).
... ext_: extensions that mirror other opengl es or opengl api extensions.
...it should also be used for extensions which originated with the opengl es or opengl apis, but whose behavior has been significantly altered.
WebGL model view projection - Web APIs
exercise if that sounds a little abstract, open up the vertex shader and play around with the scale factor and watch how it shrinks vertices more towards the surface.
...if you want to read a full explanation of the math behind it check out some of the following links: opengl projection matrix perspective projection trying to understand the math behind the perspective projection matrix in webgl one important thing to note about the perspective projection matrix used below is that it flips the z axis.
... the reason to flip the z axis is that the clip space coordinate system is a left-handed coordinate system (wherein the z-axis points away from the viewer and into the screen), while the convention in mathematics, physics and 3d modeling, as well as for the view/eye coordinate system in opengl, is to use a right-handed coordinate system (z-axis points out of the screen towards the viewer) .
... view matrix while some graphics libraries have a virtual camera that can be positioned and pointed while composing a scene, opengl (and by extension webgl) does not.
Privileged features - Web APIs
this page lists the windowfeatures parameter of window.open function that requires chrome-privilege in firefox.
...the page is supposed to provide a user interface of its own, usually this feature is used to open xul documents (standard dialogs like the javascript console are opened this way).
... mozilla and firefox users can force new windows to always render the titlebar by setting dom.disable_window_open_feature.titlebar to true in about:config or in their user.js file.
... mozilla and firefox users can force new windows to always have a close button by setting dom.disable_window_open_feature.close to true in about:config or in their user.js file.
font-stretch - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths.
... for truetype or opentype variable fonts, the "wdth" variation is used to implement varying glyph widths.
... formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting a percentage range for font-stretch the following find a local open sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states.
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; } specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
the font-variation-settings css descriptor allows authors to specify low-level opentype or truetype font variations in the @font-face rule.
... syntax /* use the default settings */ font-variation-settings: normal; /* set values for opentype axis names */ font-variation-settings: "xhgt" 0.7; values normal text is laid out using default settings.
... <string> <number> when rendering text, the list of opentype axis names is passed to the text layout engine to enable or disable font features.
... formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment css fonts module level 4the definition of 'font-variation-settings' in that specification.
CSS Fonts - CSS: Cascading Style Sheets
WebCSSCSS Fonts
opentype font features guide font features or variants refer to different glyphs or character styles contained within an opentype font.
...these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings.
... this article provides you with all you need to know about using opentype font features in css.
... variable fonts guide variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
font-variant-ligatures - CSS: Cascading Style Sheets
they correspond to the opentype values liga and clig.
...they correspond to the opentype values dlig.
...they correspond to the opentype values hlig.
...these values correspond to the opentype values calt.
quotes - CSS: Cascading Style Sheets
WebCSSquotes
the quotes css property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the css content property.
... syntax /* keyword value */ quotes: none; quotes: auto; /* <string> values */ quotes: "«" "»"; /* set open-quote and close-quote to the french quotation marks */ quotes: "«" "»" "‹" "›"; /* set two levels of quotation marks */ /* global values */ quotes: inherit; quotes: initial; quotes: unset; values none the open-quote and close-quote values of the content property produce no quotation marks.
... [<string> <string>]+ one or more pairs of <string> values for open-quote and close-quote.
...that's the question!</q> css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; } result auto quotes for most browsers, the default value of quotes is auto (firefox 70+), or the browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
Live streaming web audio and video - Developer guides
opus opus is a royalty-free and open format that manages to optimize quality at various bit-rates for different types of audio.
... gstreamer gstreamer is an open source cross-platform multimedia framework that allows you to create a variety of media-handling components, including streaming components.
...you can also integrate with python's twisted framework or use something like flumotion (open source streaming software).
... icecast the icecast server is an open source technology for streaming media.
HTML attribute: accept - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provid...
... examples when set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type.
... regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.
...(many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
WebHTMLElementdialog
open indicates that the dialog is active and can be interacted with.
... when the open attribute is not set, the dialog shouldn't be shown to the user.
... examples simple example <dialog open> <p>greetings, one and all!</p> </dialog> advanced example this example opens a pop-up dialog box that contains a form, when the "update details" button is clicked.
...d="updatedetails">update details</button> </menu> <output aria-live="polite"></output> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
<input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers.
...opens a date picker or numeric wheels for year, month, day when active in supporting browsers.
...opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.
... depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a <select> but allows for non-listed values.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
clicking the <summary> element toggles the state of the parent <details> element open and closed.
...when the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.
... basic example a simple example showing the use of <summary> in a <details> element: <details open> <summary>overview</summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $75.30</li> <li>due date: 5/6/19</li> </ol> </details> summaries as headings you can use heading elements in <summary>, like this: <details open> <summary><h4>overview</h4></summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $75.30</li> <li>due date: 5/6/19...
... html in summaries this example adds some semantics to the <summary> element to indicate the label as important: <details open> <summary><strong>overview</strong></summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $75.30</li> <li>due date: 5/6/19</li> </ol> </details> specifications specification status comment html living standardthe definition of '<summary>' in that specification.
Common MIME types - HTTP
ows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup lan...
...on/json .jsonld json-ld format application/ld+json .mid .midi musical instrument digital interface (midi) audio/midi audio/x-midi .mjs javascript module text/javascript .mp3 mp3 audio audio/mpeg .mpeg mpeg video video/mpeg .mpkg apple installer package application/vnd.apple.installer+xml .odp opendocument presentation document application/vnd.oasis.opendocument.presentation .ods opendocument spreadsheet document application/vnd.oasis.opendocument.spreadsheet .odt opendocument text document application/vnd.oasis.opendocument.text .oga ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg application/ogg .
...opus opus audio audio/opus .otf opentype font font/otf .png portable network graphics image/png .pdf adobe portable document format (pdf) application/pdf .php hypertext preprocessor (personal home page) application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .rar rar archive application/vnd.rar .rtf rich text format (rtf) application/rtf .sh bourne shell script application/x-sh .svg scalable vector graphics (svg) image/svg+xml .swf small web format (swf) or adobe flash document application/x-s...
...sport stream video/mp2t .ttf truetype font font/ttf .txt text, (generally ascii or iso 8859-n) text/plain .vsd microsoft visio application/vnd.visio .wav waveform audio format audio/wav .weba webm audio audio/webm .webm webm video video/webm .webp webp image image/webp .woff web open font format (woff) font/woff .woff2 web open font format (woff) font/woff2 .xhtml xhtml application/xhtml+xml .xls microsoft excel application/vnd.ms-excel .xlsx microsoft excel (openxml) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xml xml application/xml if not readable from casual users (rfc 302...
HTTP headers - HTTP
WebHTTPHeaders
connection management connection controls whether the network connection stays open after the current transaction finishes.
... keep-alive controls how long a persistent connection should stay open.
... cross-origin-opener-policy (coop) prevents other domains from opening/controlling a window.
... x-download-options the x-download-options http header indicates that the browser (internet explorer) should not display the option to "open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application.
An overview of HTTP - HTTP
WebHTTPOverview
the default behavior of http/1.0 is to open a separate tcp connection for each http request/response pair.
... http flow when a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps: open a tcp connection: the tcp connection is used to send a request, or several, and receive an answer.
... the client may open a new connection, reuse an existing connection, or open several tcp connections to the servers.
...using the eventsource interface, the client opens a connection and establishes event handlers.
Control flow and error handling - JavaScript
the following example opens a file and then executes statements that use the file.
... (server-side javascript allows you to access files.) if an exception is thrown while the file is open, the finally block closes the file before the script fails.
... using finally here ensures that the file is never left open, even if an error occurs.
... openmyfile(); try { writemyfile(thedata); // this may throw an error } catch(e) { handleerror(e); // if an error occurred, handle it } finally { closemyfile(); // always close the resource } if the finally block returns a value, this value becomes the return value of the entire try…catch…finally production, regardless of any return statements in the try and catch blocks: function f() { try { console.log(0); throw 'bogus'; } catch(e) { console.log(1); return true; // this return statement is suspended // until finally block has completed console.log(2); // not reachable } finally { console.log(3); return false; // overwrites the previous "return" console.log(4); // not reachable } // "return false" is executed now...
Planned changes to shared memory - JavaScript
for top-level documents, two headers will need to be set: cross-origin-opener-policy with same-origin as value (protects your origin from attackers) cross-origin-embedder-policy with require-corp as value (protects victims from your origin) with these two headers set, postmessage() will no longer throw for sharedarraybuffer objects and shared memory across threads is therefore available.
...note that setting the cross-origin-resource-policy header to any other value than same-origin opens up the resource to potential attacks, such as spectre.
... note that the cross-origin-opener-policy header limits your ability to retain a reference to popups.
... cross-origin-opener-policy: whatwg/html issue #3740, draft specification.
Authoring MathML - MathML
openoffice and libreoffice have an equation editor (file → new → formula).
...to get the mathml code, save the document as mml and open it with any text editor.
... alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml.
...once you are done, you can directly save your xhtml page and open it in mozilla.
Navigation and resource timings - Web Performance
connectend when the connection is opened network.
...a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated.
... connectstart when the request to open a connection is sent to the network.
...if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
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.
... here, we open a cache with a given name, then add all the files our app uses to the cache, so they are available next time it loads (identified by request url).
...if the file is not in the cache, the app adds it there first before then serving it: self.addeventlistener('fetch', (e) => { e.respondwith( caches.match(e.request).then((r) => { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then((response) => { return caches.open(cachename).then((cache) => { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); here, we respond to the fetch event with a function that tries to find the resource in the cache and return the response if it's there.
... self.addeventlistener('install', (e) => { e.waituntil( caches.open('js13kpwa-v2').then((cache) => { return cache.addall(contenttocache); }) ); }); a new service worker is installed in the background, and the previous one (v1) works correctly up until there are no pages using it — the new service worker is then activated and takes over management of the page from the old one.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
205 stroke-linecap svg, svg attribute the stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
...this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: 216 targetx filters, needsexample, svg, svg attribute the targetx attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image.
... 258 xlink:show deprecated, svg, svg attribute the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors.
...typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.
Compiling a New C/C++ Module to WebAssembly - WebAssembly
it is enabled by default in firefox 52+ and chrome 57+/latest opera (you can also run wasm code in firefox 47+ by enabling the javascript.options.wasm flag in about:config, or chrome (51+) and opera (38+) by going to chrome://flags and enabling the experimental webassembly flag.) note: if you try to open generated html file (hello.html) directly from your local hard drive (e.g.
...open it in your browser and you'll see much the same output as the last example.
...first of all, open up your hello3.html file in a text editor.
... add a <button> element as shown below, just above the first opening <script type='text/javascript'> tag.
Caching compiled WebAssembly modules - WebAssembly
the function starts off by defining some necessary constants: function instantiatecachedurl(dbversion, url, importobject) { const dbname = 'wasm-cache'; const storename = 'wasm-cache'; setting up the database the first helper function contained inside instantiatecachedurl() — opendatabase() — creates an object store for storing wasm modules, and also handles clearing out the database if the dbversion is updated; it returns a promise resolving to the new database.
... function opendatabase() { return new promise((resolve, reject) => { var request = indexeddb.open(dbname, dbversion); request.onerror = reject.bind(null, 'error opening wasm cache database'); request.onsuccess = () => { resolve(request.result) }; request.onupgradeneeded = event => { var db = request.result; if (db.objectstorenames.contains(storename)) { console.log(`clearing out version ${event.oldversion} wasm cache`); db.deleteobjectstore(storename); } console.log(`creating version ${event.newversion} wasm cache`); db.createobjectstore(storename) }; }); } looking up modules in the database our next function — lookupindatabase() — provides a simple promise-based operation for looki...
...we start by trying to open a database, then see if we already have a compiled module with the key url stored in the given db: return opendatabase().then(db => { return lookupindatabase(db).then(module => { if we do, we instantiate it with the given import object: console.log(`found ${url} in wasm cache`); return webassembly.instantiate(module, importobject); }, if not, we compile it from scratch a...
... if opening the database failed (for example due to permissions or quota), we fall back to simply fetching and compiling the module and don't try to store the results (since there is no database to store them into).
WebAssembly Concepts - WebAssembly
webassembly goals webassembly is being created as an open standard inside the w3c webassembly community group with the following goals: be fast, efficient, and portable — webassembly code can be executed at near-native speed across different platforms by taking advantage of common hardware capabilities.
... in a nutshell, the process works as follows: emscripten first feeds the c/c++ into clang+llvm — a mature open-source c/c++ compiler toolchain, shipped as part of xcode on osx for example.
...for a start, emscripten implements popular c/c++ libraries like sdl, opengl, openal, and parts of posix.
...if the application uses opengl, the html also contains a <canvas> element that is used as the rendering target.
Reddit Example - Archive of obsolete content
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.
... icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url) { require("sdk/tabs").open(url); }); this code supplies two content scripts to the panel's constructor in the contentscriptfile option: the jquery library and the script that intercepts link clicks.
... finally, it registers a listener to the user-defined click event which in turn passes the url into the open function of the tabs module.
Content Scripts - Archive of obsolete content
but a content script will not: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscript: "console.log(window.foo);" }) tabs.open(pageurl); console.log: my-addon: null there are good reasons for this insulation.
... first, it means that content scripts don't leak objects to web pages, potentially opening up security holes.
... here's a simple add-on that sends a message to a content script using port: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.on("ready", function(tab) { var worker = tab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); // content-script.js self.port.on("alert", function(message) { window.alert(message); }); the context-menu module doesn't use the communication model described here.
io/byte-streams - Archive of obsolete content
function readbinarydatafromfile (filename) { var fileio = require("sdk/io/file"); var data = null; if (fileio.exists(filename)) { var bytereader = fileio.open(filename, "rb"); if (!bytereader.closed) { data = bytereader.read(); bytereader.close(); } } return data; } function writebinarydatatofile(data, filename) { var fileio = require("sdk/io/file"); var bytewriter = fileio.open(filename, "wb"); if (!bytewriter.closed) { bytewriter.write(data); bytewriter.close(); } } globals constructors bytereader(inputstream) creates a binary input stream that reads bytes from a backing stream.
... you can also create bytereader objects using io/file's open() function.
... you can also create bytewriter objects using io/file's open() function.
Install Manifests - Archive of obsolete content
accepted values are: 1 opens optionsurl in a dialog box 2 options are displayed inside the add-on manager 3 opens optionsurl in a new tab (if the application supports that), or a dialog box optionstype defaults to 1 if there is an optionsurl included in install.rdf or 2 if there is no optionsurl and the file options.xul exists in the root of the add-on.
... <em:optionstype>2</em:optionstype> options can be opened in a new tab since firefox 7.0a1.
... to do so, set optionstype to 3 and set optionsurl to a the path of a page to open.
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.
...for now, just notice the opening part of the binding element: <binding id="person">.
... as a bonus, you should look into the usage of nsifilepicker to open a "open file" dialog in a way that looks native for all systems.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
failure to do so can lead to execution or remote scripts, and in the worst cases to privilege escalation which can leave a user's pc open to remote attack.
...the following two code fragments are roughly equivalent: function clickify(elem, address) { elem.addeventlistener("click", function (event) { openwindow(address) }, false); } function clickify(elem, address) { elem.onclick = function (event) { openwindow(address) }; } multiple attributes sometimes there is a need for event listeners to appear as attributes in the dom.
... in these cases, multiple attributes should be used, one for each variable: function clickify(elem, address) { elem.setattribute("href", address); elem.setattribute("onclick", "openwindow(this.getattribute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number.
Session store API - Archive of obsolete content
firefox 3.6 knows how to save session store data when the last browser window closes, even if there are still other windows open.
... new windows are opened as required (one for each window that was saved in the session store), and cookies and the list of recently closed tabs are restored.
...in the latter case, a tabopen event is sent.
Signing an XPI - Archive of obsolete content
you can get a free certificate for open-source developers from unizeto certum, in 2010 it is a certum level iii ca.
... here are some current issuers: comodo instant-ssl code signing digi-sign digi-code geotrust code signing thawte code signing (owned by verisign) unizeto certum code-signing (free certificates for open-source authors) verisign code signing you will need to apply for a code signing certificate and satisfy the issuer's identity verification procedures.
... open a command prompt (ensure the paths to the nss tools are set as described above) in the codesigning folder, install the issuer ca certificates, and check they have been added correctly.
Supporting search suggestions in search plugins - Archive of obsolete content
firefox supports search suggestions in opensearch plugins; as the user types in the search bar, firefox queries the url specified by the search plugin to fetch live search suggestions.
... see creating opensearch plugins for firefox to learn more about how to implement a search plugin.
...this enhancement request - the handling of a selected suggestion, namely calling of a full specified url as proposed in the opensearch standard - is tracked in bug 386591.
Localizing an extension - Archive of obsolete content
create a properties file the first thing we do is create a property file for the literal strings used by the javascript code in stockwatcher2.js: changestring=chg: openstring=open: lowstring=low: highstring=high: volumestring=vol: the stockwatcher2.properties file shown above maps five keys (changestring, openstring, lowstring, highstring, and volumestring) to the corresponding text in english.
...we add to refreshinformation() the following code: var stringsbundle = document.getelementbyid("string-bundle"); var changestring = stringsbundle.getstring('changestring') + " "; var openstring = stringsbundle.getstring('openstring') + " "; var lowstring = stringsbundle.getstring('lowstring') + " "; var highstring = stringsbundle.getstring('highstring') + " "; var volumestring = stringsbundle.getstring('volumestring') + " "; this code gets a reference to the string bundle element we added to stockwatcher2.xul by calling document.getelementbyid(), specifying the id "string-bund...
...then we replace any occurrences of the literal strings with the appropriate variables: samplepanel.tooltiptext = changestring + fieldarray[4] + " | " + openstring + fieldarray[5] + " | " + lowstring + fieldarray[6] + " | " + highstring + fieldarray[7] + " | " + volumestring + fieldarray[8]; localizing the description in install.rdf see localizing extension descriptions.
Images, Tables, and Mysterious Gaps - Archive of obsolete content
and there you have it-- spaces opening up where none have ever been seen before.
... now there's all kinds of space unexpectedly opening up.
... looking forward to a fix thanks to mozilla's thorough implementation of css2, the problem of inline images in table cells forcing open unwanted space has come to the attention of the css working group.
Source Navigator - Archive of obsolete content
if this is your first time to open source navigator, the big white box on the left of the dialog should contain no lines.
... using source navigator (more later) opening a project open a terminal.
...choose the project file that you've just created and then click "open...".
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
or_iid); // get the window watcher service nsiwindowwatcher windowwatcher = (nsiwindowwatcher)servicemanager.getservicebycontractid("@mozilla.org/embedcomp/window-watcher;1", nsiwindowwatcher.ns_iwindowwatcher_iid); // set the window creator (from step 6) windowwatcher.setwindowcreator(windowcreator); // create the root xul window: nsidomwindow win = windowwatcher.openwindow(null, "chrome://your-app/content/window.xul", "mywindow", "chrome,resizable,centerscreen", null); // set this as the active window windowwatcher.setactivewindow(win); // hand over the application to xpcom/xul, this will block: appstartup.run(); here is an example of a locationprovider that works : public class locationprovider implements iappfilelocprovider {...
... nsieventqueueservice eventqueueservive = (nsieventqueueservice)servicemanager.getservicebycontractid("@mozilla.org/event-queue-service;1",nsieventqueueservice.ns_ieventqueueservice_iid); // next, we want to get the ui thread, since we want to open a window.
... windowproxy.openwindow(null, chromeuri, name, "centerscreen", null); for more information, please see xulplanet's documentation of nsiproxyobjectmanager this was taken from injecting events onto xpcom’s ui thread ...
Basics - Archive of obsolete content
blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
...methods open(urlstring)opens a new tab in your browser with a defined url.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); ...
Tabs - Archive of obsolete content
ArchiveMozillaJetpackUITabs
blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
...methods open(urlstring)opens a new tab in your browser with a defined url.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
New Security Model for Web Services - Archive of obsolete content
more-complex access lists could be created to try to establish, with finer granularity, which domains are to be accessible or permitted from which other domains, but this requires extensive management which at best is quite error-prone for the end user and easily opens holes in a firewall that do not directly hurt the user who reconfigured his browser to try to access some external service but hurts the owners of other services behind the firewall.
...but the big problem with this is that the typical browser user really does not either understand or pay the consequences if he inadvertently opens a hole in his company's firewall.
...the access is disabled by default, and there is nothing the user needs to do to open access, and nothing that can go wrong to make a hole in his firewall.
Creating XPI Installer Modules - Archive of obsolete content
package creation overview this tutorial describes the following sequence of steps for creating a new package: developing the resources organizing the resources creating the contents.rdf file making the barley install script creating a xpi you can examine (or install!) the package described here by downloading the barley xpi file and using a zip unarchiver[zip] to open it.
...while you are developing these resources and before you have made them a package of their own, you can test the basic layout and functionality by opening barley.xul from within mozilla by using file -> open.
...the archive, named barley.xpi, should contain the following two files: barley.jar install.js this zip file, when opened from mozilla using file -> open, will initialize its own installation and display a message like the following: when you click ok, mozilla installs the new package.
button.type - Archive of obsolete content
the user may click anywhere on the button to open and close the menu.
...unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed.
... panel similar to the menu type, this opens a popup.
onpopuphidden - Archive of obsolete content
this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden.
...this results in the method repeatedly called as the user runs the mouse up and down the menu opening the sub-menus.
... you can test for the current popup actually being hidden with: <menupopup id="top" onpopuphidden="if(this.state != 'open'){console.log('the onpopuphidden method of id=top was called.');};" > ...
panel.flip - Archive of obsolete content
« xul reference home flip type: string normally, when a popup opens near the edge of the screen, it flips over to open on the opposite side of the anchor, so that it doesn't extend off the screen.
... for example, if the menu doesn't have room to open downward, it flips to open upward instead; this is a vertical flip.
... horizontal flipping doesn't normally happen, since this would cause menus to open in strange places.
XUL Events - Archive of obsolete content
attribute: oncommandupdate contextmenu this event is sent to an element when the user requests to open the context menu for the element.
... attribute: onpopuphiding popupshowing this event is sent to a popup just before it is popped open.
... attribute: onpopupshowing popupshown this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.
Uploading and Downloading Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
IO - Archive of obsolete content
ArchiveMozillaXULFileGuideIO
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...open and save dialogs you can show a dialog to the user to allow them to select a file to open or enter a filename for saving.
... for details about this, see open and save dialogs.
findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached.
... open( mode ) return type: no return value opens the findbar using the specified mode, which should be one of find_normal, find_typeahead, or find_links.
... this opens the findbar, focuses the edit field for the search term, and selects its contents.
MenuModification - Archive of obsolete content
also, need replace newmenu.label= "new" by newmenu.setattribute("label", "new"); (all when creating from bootstrap.js in a bootstrapped addon) the addsubmenu function is called during the popupshowing event, which will be fired when an attempt to open the menu is made.
...otherwise, a new submenu would be added every time the menu is opened, which is clearly not desirable.
... menu.appenditem("open", ""); menu.removeitemat(menu.itemcount - 1); the itemcount property holds the number of items within the menu.
state - Archive of obsolete content
ArchiveMozillaXULPropertystate
« xul reference state type: string this read only property indicates whether the popup is open or not.
... open: the popup is open and visible on screen.
... showing: a request has been made to open the popup, but it has not yet been shown.
Template and Tree Listeners - Archive of obsolete content
for instance, the observer may have an ontoggleopenstate method which will be called when the user opens or closes a row.
...for instance, the ontoggleopenstate method of any observers will be called before the tree item is opened.
... after the observers have finished, the tree builder opens the row and adds any child rows inside.
Adding Labels and Images - Archive of obsolete content
if the text needs to wrap, you can place the text content inside opening and closing tags as in the following example: example 2 : <label>this is some longer text that will wrap onto several lines.</label> as with html, line breaks and extra whitespace are collapsed into a single space.
...example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button to be focused.
...as with the label element, you can either use the value attribute for a single line of text or place text or xhtml content inside opening and closing description tags for longer blocks of text.
Adding Methods to XBL-defined Elements - Archive of obsolete content
methods are the functions of objects, such as window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open().
...here are some examples: <constructor> if (this.childnodes[0].getattribute("open") == "true"){ this.loadchildren(); } </constructor> <destructor action="savemyself(this);"/> the next section shows how to add event handlers to xbl-defined elements.
More Menu Features - Archive of obsolete content
bmenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <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.
... <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <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 ...
...the three dots after open search and save search are the usual way that you indicate to the user that a dialog will open when selecting the command.
The Chrome URL - Archive of obsolete content
when you open a chrome url, mozilla looks through its list of installed packages and tries to locate the jar file or directory that matches the package name and part.
...some dialog boxes may not work right, however, as they may be expecting arguments to be supplied from the window that opened them.
...this is convenient since all a user needs to know is the package name to be able to open the application.
Toolbars - Archive of obsolete content
two buttons will be added, an open button and a save button.
... presumably, they would allow the user to save search results and re-open them later.
... <vbox flex="1"> <toolbox> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="open"/> <toolbarbutton id="savesearch" label="save"/> </toolbar> </toolbox> <tabbox> a toolbar with two buttons has been added here.
XUL accessibility guidelines - Archive of obsolete content
do not specifically code them to open on a click of the right mouse button.
... initial dialog focus the initial focus in a xul dialog (i.e., the focus when the dialog is first opened) should always be on a specific control, not on the dialog itself.
...the title is often the first thing spoken by a screen reader when an application is opened or activated.
XUL Event Propagation - Archive of obsolete content
/www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this f...
...he menu is handling an event raised by one of the menu items, then the menu should be able to identify the raising element and take the appropriate action, as in the following example, where a javascript function determines which menuitem was selected and responds appropriately: <script> function docmd(el) { v = el.getattribute("value"); if (v == "new") alert("new clicked"); else if (v == "open") alert("open clicked"); else alert("close clicked"); } </script> ...
... <menu class="menu" value="file" oncommand="docmd(event.target)"> <menupopup> <menuitem oncommand="alert('new item alert')" value="new" /> <menuitem value="open" /> <menuitem oncommand="alert('close handler')" value="close" /> </menupopup> </menu> ...
colorpicker - Archive of obsolete content
attributes disabled, color, onchange, preference, tabindex, type properties accessibletype, color, disabled, open, tabindex, value examples <colorpicker/> attributes disabled type: boolean indicates whether the element is disabled or not.
... open type: boolean returns true if the popup for a button-type colorpicker is open.
... set this property to true to open the popup or false to close the popup.
datepicker - Archive of obsolete content
attributes disabled, firstdayofweek, readonly, type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, monthleadingzero, open, readonly, tabindex, value, year, yearleadingzero examples <datepicker type="grid" value="2007-03-26"/> attributes disabled type: boolean indicates whether the element is disabled or not.
... open type: boolean for popup type datepickers, specifies whether the popup is open.
... set this property to open or close the popup.
tabbrowser - Archive of obsolete content
}) return type: tab element opens a new tab that loads a page with the specified url.
...}) return type: tab element opens a new tab that loads a page with the specified url.
...this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background.
toolbar - Archive of obsolete content
the chromeclass-toolbar class may be used to create a toolbar where its visibility depends on the toolbar flag when opening the window with the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() method.
...paceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes chromeclass-toolbar when this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the window.open method.
tree - Archive of obsolete content
ArchiveMozillaXULtree
rdinal="1"/> <splitter class="tree-splitter" ordinal="2"/> <treecol id="mytree2-treecol1" flex="1" label="column b" persist="width" ordinal="3"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="1"/> <treecell label="a"/> </treerow> </treeitem> <!-- make sure to set container="true" --> <treeitem container="true" open="true"> <treerow> <treecell label="2"/> <treecell label="b"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="2a"/> <treecell label="ba"/> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> attributes disabled type: boolean indicates whether t...
...this is used to hold which tree items are open and which items are collapsed.
... this information will be remembered for the next time the xul file is opened.
treeitem - Archive of obsolete content
attributes container, empty, label, open, uri examples (example needed) attributes container type: boolean set to true if the element is to act as a container which can have child elements.
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
... the open attribute is not present if the menu is closed.
MacFAQ - Archive of obsolete content
note that in order to copy the framework while keeping the relative soft-links in the framework, do something like: % ( cd dist ; gnutar cf - xul.framework | ( cd /library/frameworks ; gnutar xf - )) installing your application your application must be installed as a xulrunner app before you can open it.
...opening your application for ordinary work, you can just navigate via finder to /applications/(vendor)/(name).app and open the application.
... taking advantage of the core code "openurl" from "nscommandlineservicemac.cpp", you'll see that it looks for "browser.chromeurl" before defaulting to navigator.xul, and this is called when an xulrunner app is already running, so: create a default preference of "browser.chromeurl" that points to your new "hiddenwindow" as such: "chrome://myxul/content/hiddenwindow.xul" next take the code below and drop it in, to create the hiddenwin...
Mozprocess - Archive of obsolete content
mozprocess utilizes and extends subprocess.popen to these ends.
...processhandler utilizes a contained subclass of subprocess.popen, process, which does the brunt of the process management.
...todo document improvements over subprocess.popen.kill ...
2006-10-13 - Archive of obsolete content
annoying firefox 2 save dialog instead of open/save ones.
... user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can type in the installation directory.
... firefox 2.0 should re-implement modal window.open to support web 2.0 user would like the option to show pop-up windows, using window.open(), from inside untrusted script, to be re-implemented.
Extentsions FAQ - Archive of obsolete content
the ietab (opens ie in a firefox tab) should be able do this if you set it to always open "file://*" urls in an ie tab.
... is it possible to open the url in a new tab?
...if you turn off the xul cache you don't even need to restart to see changes, simply open a new window.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
spidermonkey is the code name for the first ever javascript engine, an open source c implementation which can be found embedded in leading software products such as mozilla firefox, adobe acrobat, and aptana jaxer.
... importpackage( java.net ); // connect to the remote resource var u = new url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default xml namespace = "http://purl.org/rss/1.0/"; var dc ...
...mozilla browser engine engine that powers mozilla firefox, which includes spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and web standards.
RDF in Mozilla FAQ - Archive of obsolete content
where do i find information on open directory ("dmoz")?
...start at http://www.dmoz.org/ for more information on the open directory.
... the open directory dataset is available as a (huge) rdf/xml dump.
XUL Parser in Python - Archive of obsolete content
this is another hard-coded thing i have to open up.
...i guess you could get a modify date from the files as you open them.
...but mozilla's upcoming support for languages like perl and python will really open up the mozilla platform to tools and approaches of this kind--and make now a good time to start thinking about how these various technologies will be put together.
Index - Game development
11 techniques for game development games, guide this page lists essential core techniques for anyone wanting to develop games using open web technologies.
...webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
... 23 glsl shaders beginner, glsl, opengl, shader, texture shader, three.js, vertex shader shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c.
Game distribution - Game development
this includes hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like google play or the ios app store.
... if you're working on a side project just for fun, then leaving the source open will benefit those who would like to learn from what you've created.
... electron — known as atom shell — is an open-sourced and cross-platform tool from github.
Building up a basic demo with PlayCanvas editor - Game development
click diffuse, then select the colored box next to the color label — it will open a color wheel.
... now click on the play arrow in the top right corner of the scene to launch and render the scene — it will be opened in a separate browser tab.
...create a coneanimation.js file and double click it to open it in the editor.
Debugging CSS - Learn web development
load this up in a new tab if you want to follow along, and open up your devtools as described in the article linked above.
...if you incorrectly closed an element, for instance opening an <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the html in the dom will correctly close the open <h2> with an </h2>.
...a color picker will open up and you can try out some different colors; these will update in real time on the page.
How do you set up a local testing server? - Learn web development
remote files throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the html file, dragging and dropping it into the browser window, or choosing file > open...
... the problem with testing local files some examples won't run if you open them as local files.
... open your command prompt (windows)/ terminal (macos/ linux).
Advanced form styling - Learn web development
ent to generate a little down arrow, and put it in the right place using positioning: .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } the second, slightly more major issue is that you don't have control over the box that appears containing the options when you click on the <select> box to open it.
... the only problem with file pickers is that the button provided that you press to open the file picker is completely unstyleable — it can't be sized or colored, and it won't even accept a different font.
...so you could hide the actual from input using something like this: input[type="file"] { height: 0; padding: 0; opacity: 0; } and then style the label to act like a button, which when pressed will open the file picker as expected: label[for="file"] { box-shadow: 1px 1px 3px #ccc; background: linear-gradient(to bottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-align: center; line-height: 1.5; } label[for="file"]:hover { background: linear-gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the result of the above css sty...
CSS basics - Learn web development
(if you haven't been following our project, pause here to read dealing with files and html basics.) open your index.html file.
...it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage.
... html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment.
The web and web standards - Learn web development
"open" standards one of the key aspects of web standards, which timbl and the w3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing.
... because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing.
... don't break the web another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e.
Video and Audio APIs - Learn web development
exploring the html open the html index file.
... exploring the css now open the css file and have a look inside.
... next, let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; position: relative; content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; } first of all, at the top o...
JavaScript object basics - Learn web development
while working with this example you should have your developer tools javascript console open and ready to type in some commands.
...try entering the following line below the javascript code that's already in your file, then saving and refreshing: const person = {}; now open your browser's javascript console, enter person into it, and press enter/return.
...the live version will give you a blank screen, but that's ok — again, open your devtools and try typing in the above commands to see the object structure.
Starting our Svelte Todo list app - Learn web development
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/02-starting-our-todo-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development mode.
... create a file named src/components/todos.svelte with the following content: <h1>svelte to-do list</h1> change the title element in public/index.html to contain the text svelte to-do list: <title>svelte to-do list</title> open src/app.svelte and replace its contents with the following: <script> import todos from './components/todos.svelte' </script> <todos /> in development mode, svelte will issue a warning in the browser console when specifying a prop that doesn't exist in the component; in this case we have a name prop being specified when we instantiate the app component inside src/main.js, which isn't u...
... background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } with our markup styled, everything now looks better: the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: 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.
Handling common accessibility problems - Learn web development
you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
...next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button.
... safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each item on a webpage checkbox.
Deploying our app - Learn web development
open the package.json file in your project's root directory, and find the scripts property.
... go to your package.json file and open it up.
...o that it contains the following test and build commands: "scripts": { … "test": "node tests/*.js", "build": "npm run test && parcel build src/index.html" } now of course we need to add the test to our codebase; create a new directory in your root directory called tests: mkdir tests inside the new directory, create a test file: cd tests touch nasa-feed.test.js open this file, and add the contents of nasa-feed.test.js to it: this test uses the axios package to fetch the data feed we want to test; to install this dependency, run the following command: npm install --save-dev axios we need to manually install axios because parcel won't help us with this dependency.
Embedding API for Accessibility
al", "none", "once" moz 0.8 applets setboolpref("browser.accept.applets", acceptapplets); no scripts setboolpref("browser.accept.scripts", acceptscripts); no popup windows // 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.windowin...
...ternal.open","noaccess"); // override popping up new windows on target=anything user_pref("browser.block.target_new_window", true); // override popup windows at beginning of new page load (blocks most popup advertisements) user_pref("dom.disable_open_during_load", true); moz 0.8 client side redirects setboolpref("browser.accept.redirects", acceptredirects); no content refreshes setboolpref("browser.accept.refreshes", acceptrefreshes); no plugin content ...
... open issue: accessibility settings per url a powerful possibility is that we design an interface for setting certain preferences based on the url.
Application cache implementation overview
loading a top level document from offline cache this happens in nshttpchannel::opencacheentry().
...then, nsicacheservice is asked to open nsicachesession with store_offline policy and the given client id.
...when found, channel is open for it (+onprogress event is invoked).
Creating reftest-based unit tests
tory where you save firefox's source code and run: ./mach reftest if you want to run a particular set of reftests, pass the path as an argument: ./mach reftest path/from/sourcedir/reftest.list and to run a single reftest just pass the path to the test file (not the reference file): ./mach reftest path/from/sourcedir/reftest-name.html there is no reftest equivalent to mach mochitest --keep-open, but temporarily adding the reftest-wait class to a test (or disabling the script that removes it) will keep it open longer.
... step 2 open a terminal window.
...presumably, one was supposed to open the pages with a browser and look at them and see if they look right.
Contributing to the Mozilla code base
the mozilla community prides itself on being an open, accessible, and friendly community for new participants.
...we're always looking for ways to improve this process: making mozilla more open, accessible, and easier to participate with.
...you've fixed your very first bug, and the open web is stronger for it.
Linux compatibility matrix
rhel 6 2.6.32 2.12 2.28 2.24 n/a 0.32 4.4 4.4 3.4 n/a nov 2010 nov 2020 rhel 7 3.10 2.17 2.42 2.24 3.14 0.32 4.8.5 4.8 3.4 n/a jun 2014 jun 2024 rhel 8 4.18 2.28 2.56 2.24 3.22.30 0.36 8.3.1 8.3.1 8.0 3.6 may 2019 may 2031 opensuse 11.4 2.6.37 2.11 2.28 2.22 3.0 0.20 4.5 4.5 n/a n/a mar 2011 jul 2015 opensuse 12.1 3.1 2.14 2.30 2.24 3.2 0.22 4.6 4.6 2.9 n/a nov 2011 may 2013 opensuse 12.2 3.4 2.15 2.32 2.24 3.4 0.24 4.7 4.7 3.1 n/a jul 2012 jan 2014 opensuse 12.3 3.7 2.17 2.34 ...
... 2.24 3.6 0.28 4.7 4.7 3.2 n/a mar 2013 sep 2014 opensuse 13.1 3.11 2.18 2.38 2.24 3.10 0.30 4.8.1 4.8 3.3 n/a nov 2013 jan 2016 opensuse 13.2 3.16 2.19 2.42 2.24 3.14 0.32 4.8.3 4.8, 4.9 3.5 n/a nov 2014 jan 2017 opensuse leap 15.0 4.12 2.26 2.54 2.24 3.22 0.34 7.3 7.3 5.0 3.6 may 2018 nov 2019 opensuse leap 15.1 4.12 2.26 2.54 2.24 3.22 0.34 8.2 7.4, 8.2 5.0, 7.0 3.6 may 2019 nov 2020 opensuse leap 42.1 4.1 2.19 2.44 2.24 3.16 0.32 5.2 4.8, 5.2 3.7 3.4 nov 2015 may 2017 opensuse leap 42.2 4.4 2.22 2.48 2.24 3.20 0.34 ...
... 5.3 4.8, 5.3, 6.1 3.8 3.4 nov 2016 jan 2018 opensuse leap 42.3 4.4 2.22 2.48 2.24 3.20 0.34 7.1 4.8, 5.3, 6.2, 7.1 3.8 3.4 jul 2017 jun 2019 debian 10 4.19 2.28 2.58 2.24 3.24 0.36 8.3 8.3 6.0, 7.0 3.7 jul 2019 jun 2023 / jun 2025 (lts) debian 6 2.6.32 2.11 2.24 2.20 n/a 0.16 4.4 4.1, 4.3, 4.4 2.7 3.1 feb 2011 may 2014 / feb 2016 (lts) debian 7 3.2 2.13 2.32 2.24 3.4 0.26 4.7 4.4, 4.6, 4.7 3.0 3.2 may 2013 apr 2016 / may 2018 (lts) debian 8 3.16 2.19 2.42 2.24 3.14 0.32 4.9 4.8, 4.9 3.4, 3.5, 4.0 3.4 apr 2015 jun 2018 / jun 2020 (lts) debian 9 4...
Multiple Firefox profiles
from profile manager inside firefox if you already have firefox instance running, you can open another profile from the integrated profile manager on any platform: type about:profiles into the browser url search bar.
... linux if firefox is already included in your linux distribution, or if you have installed firefox with the package manager of your linux distribution: open a terminal emulator or your shell’s command prompt: alt-f2 if you use gnome shell or kde plasma, consult your desktop environment documentation for other environments.
... here is a complete example terminal command from steps 2-3: /applications/firefox.app/contents/macos/firefox -profile /users/suzie/library/application\ support/firefox/profiles/r99d1z7c.default if the profile manager window does not open, firefox may have been running in the background, even though it was not visible.
Frame script loading and lifetime
ifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call.
... for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this window, and all new tabs opened afterwards.
... if allowdelayedload is false, the script will only be loaded into frames which are open when the call was made.
How to get a stacktrace for a bug report
the crash reporter should now submit the crash report and firefox should open again.
...firefox should open a list of ids for your submitted crash reports.
... ubuntu: instructions from the ubuntu team opensuse: general instructions from opensuse fedora: capturing stack traces gentoo: debugging using gdb ...
Add-on Manager
for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function browseropenaddonsmgr which is available on chrome window of "navigator:browser" type.
... read more about it at this topic here on mozilla add-ons forum :: how to open an add-on's preference panel?
... and also here mdn :: inline options - opening inline options in add-on manager.
PopupNotifications.jsm
method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
...for most use cases, the value of this parameter should be date.now() plus an offset indicating the amount of time the notification should be kept open (for example, date.now() + 30000 for 30 seconds).
...setting this property will make the prompt display a "learn more" link that, when clicked, opens the url in a new tab.
Bootstrapping a new locale
safemode.dtd browser.dtd safebrowsing browser.properties sanitize.dtd credits.dtd search.properties enginemanager.dtd searchbar.dtd enginemanager.properties setdesktopbackground.dtd feeds shellservice.properties history sidebar migration tabbrowser.dtd openlocation.dtd tabbrowser.properties openlocation.properties as a localizer, you are responsible for localizing each of the ".dtd" and ".properties" in *all* of the sub-directories found in your ab-cd directory.
...untrusted connection in the example above), like so (example for polish): <!entity certerror.pagetitle "niezaufane połączenie"> once you have translated all the <!entity> strings in this file, you should save your work and open the next .dtd or .property file.
... ls dist/install you can open that file in firefox and check it out.
Localizing XLIFF files for iOS
translating the xliff file open the firefox-ios.xliff file in your favorite text editor.
...open the file in firefox to have it run a validity check and correct any errors it might yell about.
... push your commit into the github repo: git push kick up your feet, pop open a cold beer (or soda), and pat yourself on the back for doing something new, different, and exciting!
MathML Torture Test
it compares the rendering by the xetex engine using the default latin modern math font against the mathml rendering by your browser using the default math font, or an alternative opentype math fonts.
... to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher.
... you may also try this test page for mathematical opentype fonts which instead relies on web fonts.
DMD
$ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[5222] opened /tmp/dmd-1414556492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list...
... if you see the "opened" line, it tells you where the file was saved.
... adb shell am start -n org.mozilla.fennec_$username/.app trigger use the existing memory-report dumping hook: adb shell am broadcast -a org.mozilla.gecko.memory_dump in logcat, you should see output similar to this: i/dmd (20731): opened /storage/emulated/0/download/memory-reports/dmd-default-20731.json.gz for writing ...
browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.
... type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the background, focus stays on the current tab.
... false (default) new tab with search results will be opened in the foreground.
Dynamic Library Linking
nking types these data types are defined for dynamic library linking: prlibrary prstaticlinktable library linking functions the library linking functions are: pr_setlibrarypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding symbols defined in the main executable program pr_loadlibrary cannot open a handle that references the main executable program.
...for more information, consult the man pages for ld and dlopen (or shl_load on hp-ux) for unix, and the loadlibrary documentation for win32.
...these systems typically use dlopen to load a dynamic library.
NSPR Error Handling
pr_directory_open_error the directory could not be opened.
... pr_proc_desc_table_full_error the process' table for holding open file descriptors is full.
... pr_sys_desc_table_full_error the system's table for holding open file descriptors has been exceeded.
NSS API Guidelines
header files always include what they need; the files are protected against double inclusion (and even double opening by the compiler).
... open, close functions open functions should have a corresponding close function.
... open and close function are not reference counted, like init and shutdown functions.
NSS Key Functions
seckey_getdefaultkeydb seckey_destroyprivatekey seckey_getdefaultkeydb returns a handle to the default key database opened by nss_init.
...description nss_init opens the certificate, key, and security module databases that you specify for use with nss.
... seckeykeydbhandle returns a handle to the key database opened by nss_init.
sslkey.html
seckey_getdefaultkeydb seckey_destroyprivatekey seckey_getdefaultkeydb returns a handle to the default key database opened by nss_init.
... description nss_init opens the certificate, key, and security module databases that you specify for use with nss.
... seckeykeydbhandle returns a handle to the key database opened by nss_init.
Necko Interfaces Overview
channel is used to download the resource once) download initiated via nsichannel::asyncopen method can be canceled via nsirequest::cancel method at anytime after invocation of asyncopen method nsiprotocolhandler a service that manages a protocol, identified by it's uri scheme (eg.
... http) maps uri string to nsiuri instance via newuri method creates nsichannel instance from nsiuri instance via newchannel method nsistreamlistener : nsirequestobserver implemented by the consumer of a nsichannel instance passed to nsichannel::asyncopen method nsirequestobserver::onstartrequest - notifies start of async download nsistreamlistener::ondataavailable - notifies presence of downloaded data nsirequestobserver::onstoprequest - notifies completion of async download, possibly w/ error nsiloadgroup : nsirequest attribute of a nsirequest channel impl adds itself to its load group during invocation of asyncopen channel impl removes itself from its load group when download completes load groups in gecko own all channels used to load a particular page (until the channels c...
...omplete) all channels owned by a load group can be canceled at once via the load group's nsirequest::cancel method nsitransport represents a physical connection, such as a file descriptor or a socket used directly by protocol handler implementations (as well as by mailnews and chatzilla) synchronous i/o methods: openinputstream, openoutputstream asynchronous i/o methods: asyncread, asyncwrite nsitransport::asyncread takes a nsistreamlistener parameter original document information author(s): darin fisher last updated date: december 10, 2001 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Rhino history
now rhino is part of mozilla's open-source repository.
...however the licensees of rhino have now agreed to release all of rhino to open source, including class file generation.
... since its release to open source, rhino has found a variety of uses and an increasing number of people have contributed to the code.
Split object
the script in a might have opened tb by calling window.open, which returns a direct reference to tb's window.
...but then the page that called window.open could use a with statement to inject that window into its scope chain, gaining access to that window's privileges.
...the outer window object is the object returned by window.open.
Handling Mozilla Security Bugs
the mozilla project is a public software development project, and thus we have an inherent bias towards openness.
...however, this is offset by the fact that the person reporting a bug has visibility into the activities (if any) being taken to address the bug, and has the power to open the bug report for public scrutiny.
...as with other parts of the mozilla project, participation in the mozilla security-related activities will be open to both independent volunteers and to employees of the various corporations and other organizations involved with mozilla.
Feed content access API
] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a string, then parsing that string using its parsefromstring() method.
...that code looks like this: feedtestresultlistener.prototype = { handleresult: function(result) { var feed = result.doc; feed.queryinterface(components.interfaces.nsifeed); // open a new window var win = window.open("", "feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = it...
...this opens a new window containing the feed contents, with each item's title a clickable link that takes you to the article itself.
places.sqlite Database Troubleshooting
open a terminal window and navigate to the work folder.
... then open an sqlite shell: my_work_folder> sqlite3 places.sqlite-corrupt sqlite> pragma integrity_check; if the result is ok, this guide won't help; stop here and please file a bug.
... sqlite> .exit open a new shell for the new database: my_work_folder> sqlite3 places.sqlite sqlite> pragma integrity_check; if the result is not ok, the file cannot be recovered; stop here and please file a bug.
The Publicity Stream API
[is this still doable?] the javascript library should be included from: https://myapps.mozillalabs.com/jsapi/publicity.js all apis related to open web applications are accessed under the navigator.apps object.
... activity is an object, formatted as per the fixme: deadlinkactivity streams open specification.
... onsuccess will be called with a single argument: a json list of the current user's socially relevant app activity in the fixme: deadlinkactivity streams open specification.
Starting WebLock
the following snippet adjusts the thefile object representing that file: nsembedcstring filename("weblock.txt"); appdir->appendnative(filename); manipulating files with nsifile once you have an nsifile object pointing to the file that you're interested in, you can open it and read its contents into memory.
...e = do_queryinterface(thefile); if (!localfile) return -1; prbool exists; rv = thefile->exists(&exists); if (ns_failed(rv)) return -1; char *buf = null; if (exists) { // determine file size: pruint32 fs, numread; print64 filesize; rv = thefile->getfilesize(&filesize); if (ns_failed(rv)) return -1; // converting 64 bit value to unsigned int ll_l2ui(fs, filesize); file* openfile; rv = localfile->openansifiledesc("rw", &openfile); if (ns_failed(rv)) return -1; char *buf = (char *)malloc((fs+1) * sizeof(char)); if (!buf) return -1; numread = fread(buf, sizeof(char), fs, openfile); if (numread != fs) // do something useful.
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Using XPCOM Components
the contractual arrangements that xpcom enforces open up the way to binary interoperability - to being able to access, use, and reuse xpcom components at runtime.
...when you open a component on the left, you can see the interfaces it implements along with a list of the methods provided by each interface.
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
nsICachingChannel
the value of this attribute should be set before opening the channel.
... load_only_if_modified 1 << 31 this load flag controls what happens when a document would be loaded from the cache to satisfy a call to asyncopen.
...a stream listener can check isfromcache() to determine if the asyncopen will actually result in data being streamed.
nsIChannelEventSink
note: vetoing the redirect simply means that newchannel will not be opened.
...this channel is not opened yet.
...this channel is not opened yet.
nsIContentViewer
void loadcomplete(in unsigned long astatus); void loadstart(in nsisupports adoc); void move(in long ax, in long ay); void open(in nsisupports astate, in nsishentry ashentry); void pagehide(in boolean isunload); boolean permitunload([optional] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only!
...eters astatus missing description exceptions thrown missing exception missing description loadstart() void loadstart( in nsisupports adoc ); parameters adoc missing description exceptions thrown missing exception missing description move() void move( in long ax, in long ay ); parameters ax missing description ay missing description open() attaches the content viewer to its dom window and docshell.
... void open( in nsisupports astate, in nsishentry ashentry ); parameters astate a state object that might be useful in attaching the dom window.
nsIDOMNSHTMLDocument
changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); obsolete since gecko 14.0 domstr...
...void captureevents( in long eventflags ); parameters eventflags clear() used to reset a document to blank, but deprecated since gecko 1.0 and provided for compatibility with netscape 4.x; use open() and close() instead.
...open() nsidomdocument open( in acstring acontenttype, in boolean areplace ); parameters acontenttype the content type of the new document.
nsIExternalProtocolService
-nickolay <pre> // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"].getservice(components.interfaces.nsiioservice); var uritoopen = ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("tlcxp")) { // handler for http:// urls exists } else { // suppress external-load warning for standard browser schemes pref("network.protocol-handler.ex...
...for example, a non-exposed protocol would not be loaded by the application in response to a link click or a x-remote openurl command.
...this parameter may be ultimately passed nsiuriloader.openuri() in the case of a web handler, and awindowcontext is null or not present, web handlers will fail.
nsILocalFileMac
obsolete since gecko 1.9.2 boolean ispackage(); void launchwithdoc(in nsilocalfile adoctoload, in boolean alaunchinbackground); void opendocwithapp(in nsilocalfile aapptoopenwith, in boolean alaunchinbackground); void setfiletypeandcreatorfromextension(in string aextension); obsolete since gecko 1.9.2 void setfiletypeandcreatorfrommimetype(in string amimetype); obsolete since gecko 1.9.2 attributes attribute type description bundledisplayname astring returns the display name of the application bundle (usually the human ...
... opendocwithapp() open the document that this file points to with the given application.
... void opendocwithapp( in nsilocalfile aapptoopenwith, in boolean alaunchinbackground ); parameters aapptoopenwith the application with which to open the document.
nsIMsgMessageService
es(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in string acharsetoverride, out nsiuri aurl); void openattachment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow am...
... openattachment() downloads and opens an attachment.
... void openattachment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); parameters acontenttype the content type of the attachment afilename the name of the attachment.
nsINavHistoryResultViewObserver
inherits from: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); const...
... ontoggleopenstate() called when an item is opened or closed.
... void ontoggleopenstate( in long index ); parameters index the item being toggled.
nsIPluginHost
the caller is responsible for opening the channel.
... it may or may not be already opened when this function is called.
...a handler is, default application that should open or deal with this file.
nsIProgressEventSink
the channel will begin passing notifications to the progress event sink after its asyncopen method has been called.
... acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen().
... acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen().
nsIWebBrowserChrome
this flag is only meaningful if chrome_openas_chrome is set; content windows should not be dependent.
... chrome_openas_dialog 1073741824 represent special cases.
... chrome_openas_chrome 2147483648 represent special cases.
nsIXULWindow
constants constant value description lowestz 0 loweredz 4 the z level of an independent window opened with the "alwayslowered" chrome flag.
... raisedz 6 the z level of an independent window opened with the "alwaysraised" chrome flag.
...if arelative is null then relative to the screen of the opener window if it was initialized by passing it to nswebshellwindow::initialize.
Performance
all you need to do is use services.storage.opendatabase(file).
... some features (virtual tables, full text indexes) are not compatible with shared cache - then you need to use services.storage.openunshareddatabase(file), which doesn't share the cache.
... see mozistorageservice.opendatabase().
Troubleshooting XPCOM components registration
in dependency walker, open the options menu and select configure module search order....
... after clicking ok in the top right, check for any missing dependencies using file -> open -> firefox.exe (or equivalent).
...open the profile menu and select start profiling....
Xptcall Porting Status
<font color="white">done</font> openvms alpha colin r.
... blake <colin@theblakes.com> colin says this is passing all the tests on openvms alpha!
...i am not sure how much of the code can be used for openvms alpha and/or digital unix.
XUL Overlays
MozillaTechXULOverlays
<menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> </menupopup> </menu> ...
...<menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> <menuitem name="super stream player"/> </menupopup> </menu> ...
...the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.
Adding items to the Folder Pane
must persist over sessions text (attribute) the text to display in the tree level (attribute) the level in the tree to display the item at open (rw, attribute) whether or not this container is open children (attribute) an array of child items also conforming to this spec getproperties (function) a call from getrowproperties or getcellproperties for this item will be passed into this function command (function) this function will be called when the item is double-clicked for our example extension, two different types of folde...
...first, our "numbers" container looks like this: let containerrow = { _numbers: 3, id: "numbers-main-container", text: "numbers", level: 0, open: false, _children: null, get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) this._children.push(new numberrow(i)); } return this._children; }, getproperties: function gne_getprops() { // put your css attributes here }, command: function gne_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservic...
...e) .alert(window, null, this.text); } }; second, our child items (the numbers 1, 2, and 3) are copies of the following prototype: function numberrow(anumber) { this._number = anumber; } numberrow.prototype = { get id() { return "numbers-child-row-" + this._number; }, get text() { return this._number; }, level: 1, open: false, children: [], getproperties: function gne_kid_getprops() {}, // no-op command: function gne_kid_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(window, null, this.text); } }; putting it all tog...
Using Objective-C from js-ctypes
let lib = ctypes.open(ctypes.libraryname("objc")); function definition is the more tricky part.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let id = ctypes.structtype("objc_object").ptr; let sel = ctypes.structtype("objc_selector").ptr; let bool = ctypes.signed_char; let lib = ctypes.open(ctypes.libraryname("objc")); let objc_getclass = lib.declare("objc_getclass", ctypes.default_abi, id, ctypes.char.ptr); let sel_registername = lib.declare("sel_registername", ctypes.default_abi, sel, ctypes.char.ptr); let objc_msgsend = lib.declare("objc_msgsend", ctypes.default_abi, id, id, sel, "...
... */ // apple docs :: working with blocks - https://developer.apple.com/library/ios/documentation/cocoa/conceptual/programmingwithobjectivec/workingwithblocks/workingwithblocks.html var _nsconcreteglobalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcreteglobalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#271 /** * the "block descriptor" is a static singleton struct.
Accessibility Inspector - Firefox Developer Tools
accessing the accessibility inspector when you first open any of the other developer tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester).
... print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility tab and selecting print to json: when you do, you will get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary.
...e detailed below: context menu options an extra context menu option is added, both for the general context menu on the web page when right/ctrl + clicking a ui feature, and the html pane of the page inspector when right/ctrl + clicking a dom element: when you choose the inspect accessibility properties/show accessibility properties context menu options, the accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.
UI Tour - Firefox Developer Tools
download file opens a file dialog so you can save the file locally.
... outline view the outline view shows a tree for navigating the currently open file.
... right-clicking in the call stack pane opens a context menu with the following items: restart frame restarts execution at the beginning of the current frame.
Edit fonts - Firefox Developer Tools
to access it: open the page inspector.
...the descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet.
... variable fonts, or opentype font variations, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file.
Examine and edit CSS - Firefox Developer Tools
link to css file at the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the style editor.
...(this calculated value is exactly the same as what getcomputedstyle would return.) you can tab through the styles to select them, and you can find more information about each property — pressing f1 on a selected property will open up its mdn reference page.
...you can tab through the filenames/line numbers; pressing enter/return will open up the relevant file at that point in the style editor.
Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scratch and apply them to the page import existing stylesheets and apply them to the page to open the style editor choose the "style editor" option from the "web developer" menu (which is a submenu in the "tools" menu on the mac).
... from firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab.
...you need to reopen the editor for the change to take effect.
Firefox Developer Tools
the core tools you can open the firefox developer tools from the menu by selecting tools > web developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos.
... opens the menu that includes docking options, the ability to show or hide the split console, and developer tools settings.
... download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab.
Cache - Web APIs
WebAPICache
use cachestorage.open() to open a specific named cache object and then call any of the cache methods to maintain the cache.
...(see selective caching live) the code uses cachestorage.open() to open any cache objects with a content-type header that starts with font/.
... console.log('deleting out of date cache:', cachename); return caches.delete(cachename); } }) ); }) ); }); self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.open(current_caches.font).then(function(cache) { return cache.match(event.request).then(function(response) { if (response) { // if there is an entry in the cache for event.request, then response will be defined // and we can just return it.
Clients - Web APIs
WebAPIClients
clients.openwindow() opens a new browser window for a given url and returns a promise for the new windowclient.
... addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
... client.focus(); chatclient = client; break; } } // if we didn't find an existing chat window, // open a new one: if (!chatclient) { chatclient = await clients.openwindow('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe definition of 'clients' in that specification.
console - Web APIs
WebAPIConsole
for example: console.log("failed to open the specified link") this page documents the methods available on the console object and gives a few usage examples.
...clicking the object name opens more information about it in the inspector.
...the console.groupcollapsed() method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.
GlobalEventHandlers.oncontextmenu - Web APIs
examples disabling context menus this snippet prevents context menus from opening in the window.
... html <p>try opening the context menu.
... is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu.
HTMLDialogElement.close() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the showmodal() method.
...confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); 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.addeven...
...tlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.returnValue - Web APIs
examples the following example displays a button to open a <dialog> containing a form via the showmodal() method.
... <menu> <button>cancel</button> <button>confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if (dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } function handleuserinput(returnvalue) { if (returnvalue === 'cancel' || returnvalue == null) { // user canceled the dialog, do nothing } else if (returnvalue === 'confirm') { // user chose a favorite a...
...nimal, do something with it } } // “update details” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.show() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the show() method.
...confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); 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.addeven...
...tlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standardthe definition of 'show()' in that specification.
IDBDatabase.close() - Web APIs
WebAPIIDBDatabaseclose
syntax idbdatabase.close(); example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // opening a database.
... // create event handlers for both success and failure of dbopenrequest.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += "<li>database initialised.</li>"; // store the result of opening the database in the db variable.
... db = dbopenrequest.result; // now let"s close the database again!
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // 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 obje...
...ctstore.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('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose 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.create...
...: '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; db.onclose = () => { console.log('database connection closed'); }; }; ...
IDBDatabase.name - Web APIs
WebAPIIDBDatabasename
example this example shows a database connection being opened, the resulting idbdatabase object being stored in a db variable, and the name property then being logged.
... // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // this line will log the name of the database, which should be "todolist" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBDatabase.onerror - Web APIs
note: consider using idbopendbrequest.onsuccess instead (see idbrequest.onsuccess, where it is inherited from).
...} example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
... dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // 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 }); objectstore.createindex("...
IDBDatabaseException - Web APIs
not_found_err 3 the operation failed because the requested database object could not be found; for example, an object store did not exist but was being opened.
... ver_err 12 a request to open a database with a version lower than the one it already has.
... this can only happen with idbopendbrequest.
IDBFactory.deleteDatabase() - Web APIs
the method returns an idbopendbrequest object immediately, and performs the deletion operation asynchronously.
... when deletedatabase() is called, any other open connections to this particular database will get a versionchange event.
... optionsnon-standard in gecko, since version 26, you can include a non-standard optional storage parameter that specifies whether you want to delete a permanent (the default value) indexeddb, or an indexeddb in temporary storage (aka shared pool.) return value a idbopendbrequest on which subsequent events related to this request are fired.
IDBIndex.count() - Web APIs
WebAPIIDBIndexcount
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBIndex.get() - Web APIs
WebAPIIDBIndexget
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBIndex.getKey() - Web APIs
WebAPIIDBIndexgetKey
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...iew the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBIndex.isAutoLocale - Web APIs
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compa...
IDBIndex.keyPath - Web APIs
WebAPIIDBIndexkeyPath
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBIndex.locale - Web APIs
WebAPIIDBIndexlocale
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>'...
IDBIndex.multiEntry - Web APIs
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBIndex.name - Web APIs
WebAPIIDBIndexname
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor() — this works the same as opening a cursor directly on an idbobjectstore using opencursor() except that the returned records are sorted based on the index, not the primary key.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBIndex.unique - Web APIs
WebAPIIDBIndexunique
example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database.
... we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle...
IDBKeyRange.lower - Web APIs
WebAPIIDBKeyRangelower
here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
... we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value.
... a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } ...
IDBKeyRange.upper - Web APIs
WebAPIIDBKeyRangeupper
here we declare keyrangevalue = idbkeyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true).
... we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value.
... a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } ...
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().
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.clear() - Web APIs
example in the following code snippet, we open a read/write transaction on our database and clear all the current data out of the object store using clear().
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</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"); // make a request to clear all the data out of the object store var objectstorer...
IDBObjectStore.delete() - Web APIs
example in the following code snippet, we open a read/write transaction on our database and delete one specific record out of our object store using delete() — a sample record with the key "walk dog".
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</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"); // make a request to delete the specified record out of the...
IDBObjectStore.deleteIndex() - Web APIs
example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
... for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = this.result; // run the displaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain ...
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().
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
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().
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
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().
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
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().
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // 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"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
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('min...
...utes', '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 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 }); }; openrequest.onsuccess = (event) => { console.log('database opened successfully!'); }; ...
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 }); objectsto...
...re.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 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 re...
Navigator.registerProtocolHandler() - Web APIs
the navigator method registerprotocolhandler() lets web sites register their ability to open or handle particular url schemes (aka protocols).
... for example, this api lets webmail sites open mailto: urls, or voip sites open tel: urls.
... otherwise, the scheme must be one of the following: bitcoin geo im irc ircs magnet mailto mms news nntp openpgp4fpr sip sms smsto ssh tel urn webcal wtai xmpp example if your site is burgers.example.com, you can register a protocol handler for it to handle web+burger: links, like so: navigator.registerprotocolhandler("web+burger", "https://burgers.example.com/?burger=%s", "burger handler"); this creates a handler that le...
NotificationAction - Web APIs
here a service worker shows a notification with a single "archive" action, allowing users to perform this common task from the notification without having to open the website.
... the user can also click the main body of the notification to open their inbox instead.
... self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...
RTCDataChannel.onclose - Web APIs
example in this sample from a hypothetical instant messaging client, a data channel is created, then handlers for the open and close events are set up to enable and disable user interface objects based on the state of the channel.
... this way, the message entry field and the send button are only enabled for use when the connection is actually open.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("messagechannel")}}; dc.onopen = function(event) { document.getelementbyid("messagebox").disabled = false; document.getelementbyid("sendbutton").disabled = false; }; dc.onclose = function(event) { document.getelementbyid("messagebox").disabled = true; document.getelementbyid("sendbutton").disabled = true; } /* now negotiate the connection, etc...
RTCDataChannel - Web APIs
this event is sent to the channel when a message is received from the other peer.onopen the rtcdatachannel.onopen property is an eventhandler which specifies a function to be called when the open event is fired; this is a simple event which is sent when the data channel's underlying data transport—the link over which the rtcdatachannel's messages flow—is established or re-established.methodsalso inherits methods from: eventtargetclose()the rtcdatachannel.close() method closes t...
... open sent to the onopen event handler when the data channel is first opened, or when an existing data channel's underlying connection re-opens.
... example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel' in that specification.
RTCDataChannelEvent - Web APIs
these events sent to an rtcpeerconnection when its remote peer is asking to open an rtcdatachannel between the two peers.
...just listen for the datachannel event to be received by the rtcpeerconnection and when you receive it, use the rtcdatachannelevent.channel property to gain access to the data channel which has been opened.
... pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } see a simple rtcdatachannel sample for another, more complete, example of how to use data channels.
RTCIceTcpCandidateType - Web APIs
values "active" the transport will try to open an outbound connection but won't receive inoming connection requests.
... "passive" the transport will receive incoming connection requests but won't try to open an outbound connection.
... "so" the transport will try to open a connection simultaneously with its peer.
RTCPeerConnection.ondatachannel - Web APIs
at the time this event is received, the rtcdatachannel it indicates may not yet actually be open.
... be sure to wait for the "open" event to be fired on the new rtcdatachannel before using it.
... example pc.ondatachannel = function(ev) { console.log('data channel is created!'); ev.channel.onopen = function() { console.log('data channel is open and ready to be used.'); }; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.ondatachannel' in that specification.
Using server-sent events - Web APIs
receiving events from the server the server-sent event api is contained in the eventsource interface; to open a connection to the server to begin receiving events from it, create a new eventsource object with the url of a script that generates the events.
... when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6).
...this limit is per browser + domain, which means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com (per stackoverflow).
ShadowRoot.mode - Web APIs
WebAPIShadowRootmode
the mode property of the shadowroot specifies its mode — either open or closed.
... syntax var mode = shadowroot.mode value a value defined in the shadowrootmode enum — either open or closed.
... examples let customelem = document.queryselector('my-shadow-dom-element'); let shadow = customelem.shadowroot; // another way to check whether the shadow root is open; it will return null if not if(shadow) { // if it is open, close it to stop people stealing our secrets!
USBDevice - Web APIs
WebAPIUSBDevice
usbdevice.opened read only indicates whether a session has been started with a paired usb device.
... usbdevice.close() returns a promise that resolves when all open interfaces are released and the device session has ended.
... usbdevice.open() returns a promise that resolves when a device session has started.
WebGL2RenderingContext.texStorage2D() - Web APIs
possible values: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_a1 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui unlike opengl 3.0, webgl 2 doesn't support the following etc2 and eac compressed texture formats (see section 5.37 in the webgl 2 spec).
... opengl es 3.0the definition of 'gltexstorage2d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGLRenderingContext.depthRange() - Web APIs
unlike opengl, webgl requires znear and zfar values to be clamped to the range 0 to 1.
... opengl es 2.0the definition of 'gldepthrangef' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.lineWidth() - Web APIs
the webgl spec, based on the opengl es 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined.
... opengl es 2.0the definition of 'gllinewidth' in that specification.
... standard man page of the opengl api.
Lifetime of a WebRTC session - Web APIs
one peer can output a data object that can be printed out, physically carried (on foot or by carrier pigeon) to another device, entered into that device, and a response then output by that device to be returned on foot, and so forth, until the webrtc peer connection is open.
... information exchanged during signaling there are three basic types of information that need to be exchanged during signaling: control messages used to set up, open, and close the communication channel, and to handle errors.
... only once signaling has been successfully completed can the true process of opening the webrtc peer connection begin.
Using WebRTC data channels - Web APIs
the rtcdatachannel object is returned immediately by createdatachannel(); you can tell when the connection has been made successfully by watching for the open event to be sent to the rtcdatachannel.
... 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.
WebSocket.readyState - Web APIs
the connection is not yet open.
... 1 open the connection is open and ready to communicate.
... 3 closed the connection is closed or couldn't be opened.
Using the Web Animations API - Web APIs
meet the web animations api the web animations api opens the browser’s animation engine to developers and manipulation by javascript.
... this api was designed to underlie implementations of both css animations and css transitions, and leaves the door open to future animation effects.
...which vignette players are presented with depends on how far along alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door.
Web Animations API Concepts - Web APIs
the web animations api opens up so many possibilities!
... timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline, which started when the page was opened.
...it opens up the browser’s rendering engine for building animation development tools like timelines.
Migrating from webkitAudioContext - Web APIs
the example below shows old code which downloads an audio file over the network, and then decoded it using createbuffer(): var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is relatively si...
...mple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful.
...instead of having code like this: var source = context.createbuffersource(); source.looping = true; you can change it to respect the last version of the specification: var source = context.createbuffersource(); source.loop = true; note, the loopstart and loopend attributes are not supported in webkitaudiocontext.
Using the Web Speech API - Web APIs
the web speech api provides two distinct areas of functionality — speech recognition, and speech synthesis (also known as text to speech, or tts) — which open up interesting new possibilities for accessibility, and control mechanisms.
... to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome.
... to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome, or firefox os.
Using Web Workers - Web APIs
shared worker spawning a new shared worker is pretty much the same as with a dedicated worker, but with a different constructor name (see index.html and index2.html) — each one has to spin up the worker using code like the following: var myworker = new sharedworker('worker.js'); one big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).
... note: when using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.
...setting up this message handler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to port.start() is not actually needed, as noted above.
Window.sessionStorage - Web APIs
a page session lasts as long as the browser is open, and survives over page reloads and restores.
... opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
... opening multiple tabs/windows with the same url creates sessionstorage for each tab/window.
Using the link role - Accessibility
this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology.
... opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on.
...e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
ARIA: button role - Accessibility
a button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information.
...for example, if clicking the button opens a dialog, the focus should move to the dialog.
... if the button closes a dialog, focus should returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element.
font-weight - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wght" variation is used to implement varying weights.
...valuenormalcomputed valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the following finds a local open sans font or import it, and allows using the font for normal font weights.
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; } specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification.
@font-feature-values - CSS: Cascading Style Sheets
the @font-feature-values css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype.
...a stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the opentype values ss02, ss04, ss12, and ss01.
... note that values higher than 99 are valid, but don't map to any opentype values and are ignored.
Variable fonts guide - CSS: Cascading Style Sheets
variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
... if you have set values using font-variation-settings and want to change one of those values, you must redeclare all of them (in the same way as when you set opentype font features using font-feature-settings).
... resources w3c css fonts module 4 specification (editor’s draft) w3c github issue queue microsoft open type variations introduction microsoft opentype design-variation axis tag registry wakamai fondue (a site that will tell you what your font can do via a simple drag-and-drop inspection interface) axis praxis (the original variable fonts playground site) v-fonts.com (a catalog of variable fonts and where to get them) font playground (another playground for variable fonts with some very unique...
HTML5 - Developer guides
WebGuideHTMLHTML5
designed to be usable by all open web developers, this reference page links to numerous resources about html5 technologies, classified into several groups based on their function.
... multimedia: making video and audio first-class citizens in the open web.
... webgl webgl brings 3d graphics to the web by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements.
Index - Developer guides
WebGuideIndex
there are a number of possible scenarios: 39 svg-in-opentype draft, fonts, guide, needscontent the svg-in-opentype work is currently in the hands of the mpeg group.
... 41 the web open font format (woff) fonts, needsmobilebrowsercompatibility, woff woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations.
...this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
Printing - Developer guides
open and automatically close a popup window when finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script t...
...ype="text/javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
... you can also try changing the code to use <code>beforeprint</code> to see the difference.</p> <p><a href="javascript: popuponclick()">open popup window</a></p> </body> </html> view live examples print an external page without opening it if you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: htmliframeelement), automatically removing it after the user prints its contents.
The Unicode Bidirectional Text Algorithm - Developer guides
there are two sets of control characters; one set opens the override, and another restores the original directionality.
... you must always follow each opening character with an appropriate closing character.
... override (rlo) u+202e &#x202e; <bdo dir="rtl"> overrides the bidi algorithm and displays the embedded characters in reverse memory order, from right to left closing unicode bidi algorithm control characters character code point html entity markup equivalent description pop directional formatting (pdf) u+202c &#x202c; closing whatever opening tag used the dir attribute used for rle or lre </bdo> used for rlo or lro pop directional isolate (pdi) u+2069 &#x2069; closing whatever opening tag used the dir attribute used for rli, lri, or fsi ...
User input and controls - Developer guides
this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
... the following is a set of recommendations and best practices for using such tools in open web apps.
... contenteditable in open web apps any dom element can be made directly editable using the contenteditable attribute.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and 3d graphics on the web.
... here are some sample colors in hsl notation: table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; border-spacing: 0; border-collapse: collapse; } th, td { border: 1px solid black; padding:4px 6px; text-align: left; } th { background-color: hsl(0, 0%, 75%); } <table> <thead> <tr> <th scope="col">color in hsl notation</th> <th scope="col">example</th> </tr> </thead> <tbody> <tr> <td><code>hsl(90deg, 100%, 50%)</code></td> ...
...upon opening paletton, we see: next, we enter our color's hex code (d79c7a) into the "base rgb" box at the bottom-left corner of the tool: we now see a monochromatic palette based on the color we picked from the mars photo.
HTML attribute reference - HTML: Hypertext Markup Language
open <details> indicates whether the details will be shown on page load.
... sandbox <iframe> stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows).
... target <a>, <area>, <base>, <form> specifies where to open the linked document (in the case of an <a> element) or where to display the response recieved (in the case of a <form> element) title global attribute text to be displayed in a tooltip when hovering over the element.
<dl>: The Description List element - HTML: Hypertext Markup Language
WebHTMLElementdl
examples single term and description <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> multiple terms, single description <dl> <dt>firefox</dt> <dt>mozilla firefox</dt> <dt>fx</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> single term, multiple descriptions <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
... regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.
...(many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
89 <details>: the details disclosure element disclosure box, disclosure widget, element, html, html interactive elements, reference, web, details the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... 227 link types: noopener attribute, html, link types, reference the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
... 228 link types: noreferrer attribute, html, link types, reference the noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.
MIME types (IANA media types) - HTTP
ype: 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; padding: 0; font-family: "open sans", "helvetica --3d6b6a416f9b5-- importance of setting the correct mime type most web servers send unrecognized resources as the application/octet-stream mime type.
...avoid using application/octet-stream as most browsers do not allow defining a default behavior (like "open in word") for this generic mime type.
... a specific type like application/vnd.mspowerpoint lets users open such files automatically in the presentation software of their choice.
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
code of this sort might be used in javascript deployed on foo.example: const xhr = new xmlhttprequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('get', url); xhr.onreadystatechange = somehandler; xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds: get /resources/public-data/ http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14;...
... the following is an example of a request that will be preflighted: const xhr = new xmlhttprequest(); xhr.open('post', 'https://bar.other/resources/post-here/'); xhr.setrequestheader('x-pingother', 'pingpong'); xhr.setrequestheader('content-type', 'application/xml'); xhr.onreadystatechange = handler; xhr.send('<person><name>arun</name></person>'); the example above creates an xml body to send with the post request.
...content on foo.example might contain javascript like this: const invocation = new xmlhttprequest(); const url = 'http://bar.other/resources/credentialed-content/'; function callotherdomain() { if (invocation) { invocation.open('get', url, true); invocation.withcredentials = true; invocation.onreadystatechange = handler; invocation.send(); } } line 7 shows the flag on xmlhttprequest that has to be set in order to make the invocation with cookies, namely the withcredentials boolean value.
CSP: sandbox - HTTP
allow-modals allows the page to open modal windows.
... allow-popups allows popups (like from window.open, target="_blank", showmodaldialog).
... allow-popups-to-escape-sandbox allows a sandboxed document to open new windows without forcing the sandboxing flags upon them.
HTTP Public Key Pinning (HPKP) - HTTP
openssl rsa -in my-rsa-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64 openssl ec -in my-ecc-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64 openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 openssl x509 -in my-certificate.crt -pub...
...key -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 the following command will extract the base64 encoded information for a website.
... openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 example hpkp header public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
Introduction - JavaScript
companies can use the open standard language to develop their implementation of javascript.
... to open the web console (ctrl+shift+i on windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "developer ▶ web console".
... hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' + yourname); } greetme('world'); /* end of your code */ })(); press cmd+enter or ctrl+enter (or click the run button) to watch it unfold in your browser!
<mfenced> - MathML
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.
... open a string for the opening delimiter.
... examples the last separator is repeated (,) sample rendering: rendering in your browser: a b c d e <math> <mfenced open="{" close="}" separators=";;,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math> all excess is ignored (,) sample rendering: rendering in your browser: a b c d e <math> <mfenced open="[" close="]" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math> specifications the <mfen...
Codecs used by WebRTC - Web media technologies
this is due to a change in google play store requirements that prevent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections.
... other audio codecs codec name browser compatibility g.722 chrome, firefox, safari ilbc[1] chrome, safari isac[2] chrome, safari [1] internet low bitrate codec (ilbc) is an open-source narrow-band codec developed by global ip solutions and now google, designed specifically for streaming voice audio.
... [2] the internet speech audio codec (isac) is another codec developed by global ip solutions and now owned by google, which has open-sourced it.
points - SVG: Scalable Vector Graphics
WebSVGAttributepoints
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space.
... note: a polyline is an open shape, meaning the last point is not connected to the first point.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
xlink:show - SVG: Scalable Vector Graphics
the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors.
... only one element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace animatable no new this value specifies that the referenced resource is opened in a new window or tab.
... replace this value specifies that the referenced resource is opened in the same window or tab.
Same-origin policy - Web security
via the window.open() mechanism).
... cross-origin script api access javascript apis like iframe.contentwindow, window.parent, window.open, and window.opener allow documents to directly reference each other.
... window.opener read only.
Types of attacks - Web security
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
...open wifi networks are a typically means of executing this attack.
... alternatively, if the parent domain does not use http strict-transport-security with includesubdomains set, a user subject to an active mitm (perhaps connected to an open wifi network) could be served a response with a set-cookie header from a non-existent sub-domain.
Using shadow DOM - Web Components
this takes as its parameter an options object that contains one option — mode — with a value of open or closed: let shadow = elementref.attachshadow({mode: 'open'}); let shadow = elementref.attachshadow({mode: 'closed'}); open means that you can access the shadow dom using javascript written in the main page context, for example using the element.shadowroot property: let myshadowdom = mycustomelem.shadowroot; if you attach a shadow root to a custom element with mode: closed set, you won't be...
... if you are attaching a shadow dom to a custom element as part of its constructor (by far the most useful application of the shadow dom), you would use something like this: let shadow = this.attachshadow({mode: 'open'}); when you've attached a shadow dom to an element, manipulating it is a matter of just using the same dom apis as you use for the regular dom manipulation: let para = document.createelement('p'); shadow.appendchild(para); // etc.
... creating the shadow root we first attach a shadow root to the custom element: // create a shadow root let shadow = this.attachshadow({mode: 'open'}); creating the shadow dom structure next, we use some dom manipulation to create the element's internal shadow dom structure: // create spans let wrapper = document.createelement('span'); wrapper.setattribute('class', 'wrapper'); let icon = document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info = document.createelement('span'); info.set...
simple-prefs - Archive of obsolete content
{ "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.
... { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory picker and stores the full path and name of the directory selected.
High-Level APIs - Archive of obsolete content
tabs open, manipulate, and access tabs, and receive tab events.
... windows enumerate and examine open browser windows, open new windows, and listen for window events.
dev/panel - Archive of obsolete content
with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox toolbar which enables the user to open it: you specify the panel's content and behavior using html, css, and javascript.
... when the user opens a panel and the panel is created, the framework calls the panel's setup method.
frame/utils - Archive of obsolete content
usage module exports create function that takes the nsidomdocument of a privileged document and creates a browser element in its documentelement: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,foo'); let frame = create(window.document); optionally create can be passed set of options to configure created frame even further.
... execution of scripts may easily be enabled: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,top'); let frame = create(window.document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); } globals functions create(document, options) creates a xul browser element in a privileged document.
ui/frame - Archive of obsolete content
var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: (e) => { console.log("new city: " + e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); from add-on to all frames to send a message from the add-on code to all frames, attached to all open browser windows, you can use frame.postmessage().
... events attach this event is emitted whenever a new frame instance is constructed and the browser has started to load its document: for example, when the user opens a new browser window, if that window has a toolbar containing this frame.
jpm - Archive of obsolete content
add the following line to the end of the file $home/.profile to add it to your path permanently (as the file .profile is executed every time a new terminal is opened): export path="$home/node_modules/.bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm after installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands.
... opens every file in there whose name starts with "test-".
Adding a Button to the Toolbar - Archive of obsolete content
create a directory called "data", mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png then open the file called "index.js" in the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handl...
...eclick(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
Creating Event Targets - Archive of obsolete content
then open "index.js" and add the following code: var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { console.log("added ", bookmarkser...
... open "bookmarks.js" and replace its contents with this code: var { emit } = require("sdk/event/core"); var { eventtarget } = require("sdk/event/target"); var { class } = require("sdk/core/heritage"); var { merge } = require("sdk/util/object"); var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bo...
Listen for Page Load - Archive of obsolete content
this add-on attaches a script to all open tabs.
...you can listen for a number of other tab events, including open, close, and activate.
Developing for Firefox Mobile - Archive of obsolete content
now open up a command shell.
...the easiest way is probably to copy the signed xpi somewhere on the device: adb push my-addon.xpi /mnt/sdcard/ then open firefox mobile and type this into the address bar: file:///mnt/sdcard/my-addon.xpi the browser should open the xpi and ask if you want to install it.
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.
...in particular, the pagemod constructor takes several additional options to control its behavior: by default, content scripts are not attached to any tabs that are already open when the page-mod is created, and are attached to iframes as well as top-level documents.
Modifying the Page Hosted by a Tab - Archive of obsolete content
then open any web page in the browser window, and click the button .
... learning more to learn more about working with tabs in the sdk, see the open a web page tutorial, the list open tabs tutorial, and the tabs api reference.
Using third-party modules (jpm) - Archive of obsolete content
open "index.js" and replace it with this: var menuitems = require("menuitem"); var menuitem = menuitems.menuitem({ id: "clickme", menuid: "menu_toolspopup", label: "click me!", oncommand: function() { console.log("clicked"); }, insertbefore: "menu_pageinfo" }); now run the add-on: jpm run -b nightly you should see a new menu item in the tools menu labeled "click me!".
...to show the menu bar, click on the open menu icon and select "customize".
Tutorials - Archive of obsolete content
interact with the browser open a web page open a web page in a new browser tab or window using the tabs module, and access its content.
... get the list of open tabs use the tabs module to iterate through the currently open tabs, and access their content.
Downloading Files - Archive of obsolete content
if you want to open a login prompt, you can use the default prompt by calling the window watcher's getnewauthprompter() method.
... function getimagefromurl(url) { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var channel = ioserv.newchannel(url, 0, null); var stream = channel.open(); if (channel instanceof components.interfaces.nsihttpchannel && channel.responsestatus != 200) { return ""; } var bstream = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bstream.setinputstream(stream); var size = 0; var file_data = ""; while(size = bstream.available()) { file_data += b...
Post data to window - Archive of obsolete content
preprocessing post data the apostdata argument of the (global) loaduri(), opendialog(), and (tab)browser.loaduriwithflags() methods expects the post data in the form of an nsiinputstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimeinputstream.
... posting data to the current tab there is a convenience method in global scope (in firefox, chrome://browser/content/browser.js): loaduri(auri, areferrer, apostdata, aallowthirdpartyfixup); posting data to a new window window.opendialog('chrome://browser/content', '_blank', 'all,dialog=no', auri, aflags, areferrer, apostdata); ...
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.
... void viewsource(aobject); methods viewsource opens a viewer to the source code for some document or uri.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
then open the generated header file for your interface from /mozilla/$(moz_objdir)/dist/include/.
...just displaying a new menu item that opens a "hello, world!" dialog box would be already be a great exercise to get warmed up with.
Listening to events in Firefox extensions - Archive of obsolete content
domlinkhandler the domlinkhandler object is called by the domlinkadded event in order to detect any rss feeds, site icons, or opensearch plugins for the web site.
... pageshoweventhandlers the pageshoweventhandlers() function is called by the pageshow event and is used to populate the character set menu and update the ui elements associated with any detected feeds or opensearch plugins for the website.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 1: xml syntax <elementname someattribute="somevalue"> content </elementname> as shown in listing 1, xml uses elements, which consist of an opening tag, a closing tag, and content.
...attributes can also be added to opening tags, each with a value.
Adding menus and submenus - Archive of obsolete content
menu items are not dynamically updated while they are open.
...on other systems you would be able to see the item update itself without having to close the menu and then reopen.
Getting Started with Firefox Extensions - Archive of obsolete content
if you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice').
...issue the following command to unzip the file on linux or mac os x: unzip xulschoolhello1.xpi -d xulschoolhello1 on windows, you can change the file extension from xpi to zip, or open the file directly, then unzip it, using a zip tool.
Performance best practices in extensions - Archive of obsolete content
improving startup performance extensions are loaded and run whenever a new browser window opens.
... that means every time a window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view.
Extensions support in SeaMonkey 2 - Archive of obsolete content
differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox.
... <menuitem label="menuitem"/> </menupopup> </window> instead 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.
Firefox addons developer guide - Archive of obsolete content
certainly appendix 2 doesn't care what version of firefox you're using, since it's just about open source software licenses.
...ub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add previous/next at the end of each chapter questions: opensource appendix.
Case Sensitivity in class and id Names - Archive of obsolete content
we have discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of browsers that don't fully support open standards.
...thus, the mozilla team, committed to following open standards as closely as possible, implemented both class and id names as case-sensitive values.
Source code directories overview - Archive of obsolete content
.png, .gif), allowing drop-in java virtual machines (called oji, for "open java interface"), supporting plug-ins and reading various compression formats (e.g.
...rdf stands for "resource description framework" which is an open standard.
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
optional: open the above .def file and change "nprt" to the filename of your dll as vs sees it (without "np", if you decided to rename later) optional: edit the .rc file and and the top of npp_gate.cpp for the description, mimetype, file extension etc.
...8.3?) and copy it in mozilla's "plugins" folder start mozilla and open about:plugins to verify the plugin is detected open the file "test.html" and begin testing.
Conclusion - Archive of obsolete content
future directions for development of the tutorial and/or coursework: in addition to build status, tinderbox also tells you if the cvs tree is open or closed for check-ins.
... how would you use javascript to determine whether the tree is open or closed and css to style the icon accordingly?
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http.
...we use new to create a new instance of it, set the instance's onload property to updatetinderboxstatus(), the function we want to execute when the document finishes loading, call its open method with the type of http request we want to make and the url of the document to retrieve, and then call its send method to send the request.
Error Console - Archive of obsolete content
the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens.
...in firefox, the error console can be opened from the tools menu or by ctrl-shift-j.
Code snippets - Archive of obsolete content
to access a chrome-privileged console, open an about page (like about:about) then open a web console via the web developer menu.
... open a mail client.
Simple Storage - Archive of obsolete content
the object can also be forced to reload its data from disk by calling jetpack.storage.simple.open(), although the data comes loaded automatically.
...open()as described above, the jetpack.storage.simple object is automatically populated when a feature is loaded, but a feature may force the object to read from disk by calling jetpack.storage.simple.open().
Simple Storage - Archive of obsolete content
the object can also be forced to reload its data from disk by calling jetpack.storage.simple.open(), although the data comes loaded automatically.
...open()as described above, the jetpack.storage.simple object is automatically populated when a feature is loaded, but a feature may force the object to read from disk by calling jetpack.storage.simple.open().
Mozilla Application Framework - Archive of obsolete content
flexible licensing with three licenses to choose from (mpl, lgpl, and gpl) so you can develop both open source and proprietary applications and combine the mozilla framework with other libraries.
... mozilla has been ported to more than a dozen platforms including windows (95, 98, nt, 2000, xp, ce), mac os x, linux, solaris, beos, openvms, os/2, aix, and hp-ux.
Running Tamarin acceptance tests - Archive of obsolete content
also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/display/flexsdk/flex+sdk.
Running Tamarin performance tests - Archive of obsolete content
also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
The life of an HTML HTTP request - Archive of obsolete content
[note: passes nswebshell.mobserver as nsistreamobserver and the webshell as nsicontentviewercontainer to the docloader.] (2) the document loader calls ns_openuri with the url to begin transfering the requested file.
...startlayout is called quite early in the parsing process, for html it's called in nshtmlcontentsink::openbody() (among other places).
Venkman Internals - Archive of obsolete content
for example, the "open windows" view shows the browser's windows.
... venkman-utils.js defines the dd debug dump and friends windowrecord representation of the open windows.
XTech 2006 Presentations - Archive of obsolete content
to help migration an open source js2-to-js compiler is being developed, making js2 a reality in 2006.
... converging rich-client and web application development with mozilla xulrunner (open office format) - benjamin smedberg this presentation demonstrates the convergence of rich-client and web application development and discuss application deployment using mozilla xulrunner.
accesskey - Archive of obsolete content
for example, when an accesskey of an 'open' label is 'a', the generated label will be 'open (a)'.
...this allows a label of 'open…' with an accesskey of 'a', to have a generated label of 'open (a)…'.
statedatasource - Archive of obsolete content
this is used to hold which tree items are open and which items are collapsed.
... this information will be remembered for the next time the xul file is opened.
toolbarbutton.type - Archive of obsolete content
the user may click anywhere on the button to open and close the menu.
...unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed co...
...ialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex selt...
Accessing Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...the file object has a nsifile.create() method which may be used to create an empty file, or you can open a writing stream and write to the file.
Introduction to XUL - Archive of obsolete content
applications, for instance, will have preconceived notions of what to do when they receive an "open file" command.
... an "open" button is simply a button.
List of commands - Archive of obsolete content
monkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas browser:back browser:editpage browser:find browser:findagain browser:findprev browser:forward browser:home browser:managebookmark browser:open browser:openfile browser:print browser:printpreview browser:savepage browser:searchinternet browser:sendpage browser:uploadfile cmd_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_find cmd_bm_import cmd_bm_managefolder cmd_bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_newseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow ...
...sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_textzoomenlarge cmd_textzoomreduce cmd_textzoomreset cmd_undo cmd_viewcomponentbar cmd_viewlinktoolbar cmd_viewlinktoolbar_false cmd_viewlinktoolbar_maybe cmd_viewlinktoolbar_...
loadOneTab - Archive of obsolete content
}) return type: tab element opens a new tab that loads a page with the specified url.
...this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background.
triggerNode - Archive of obsolete content
« xul reference triggernode type: nsidomnode this read-only property holds the dom node that generated the event triggering the opening of the popup.
... the value is null if the popup isn't open.
Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi custom...
... lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scr...
Notes - Archive of obsolete content
implementing an nsicommandlinehandler on windows may trigger a bug that causes an error message ("windows cannot find the file specified") to be displayed when opening external links (like from a shortcut or from an external application).
... deleting the "(default)" values in the following registry keys will fix this: hkey_classes_root\http\shell\open\ddeexec hkey_classes_root\https\shell\open\ddeexec you can also do this from within your xpcom component using windows registry interface.
Custom toolbar button - Archive of obsolete content
open the file in firefox (for example, by dragging it and dropping it in firefox, or by choosing file – open file...
... to open the javascript console, choose tools – web developer- browser console, and enable js.
Accesskey display rules - Archive of obsolete content
e.g., when an accesskey of "open" is 'a', the generated label will be "open (a)".
...i.e., when an accesskey of "open…" is 'a', the generated label will be "open (a)…".
Adding Buttons - Archive of obsolete content
<button id="find-button" label="find"/> note: firefox does not allow you to open chrome windows from web pages, so the view links in the tutorial will open in normal browser windows.
...if you open the file in mozilla, you should get something like the image shown here.
Adding Event Handlers - Archive of obsolete content
you can embed the script code directly in the xul file in between the opening and closing script tags but it is much better to include code in a separate file as the xul window will load slightly faster.
...add the line below just after the opening window tag and before any elements.
Broadcasters and Observers - Archive of obsolete content
example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
...the result is that both the button and the checkbox will have the same label 'open'.
Creating a Skin - Archive of obsolete content
mozilla composer provides some icons for open and save buttons, which we'll just use here to save time.
... #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image.
Popup Menus - Archive of obsolete content
the exact way that a context menu is opened varies on each platform.
...also note that it is possible to open context menus without using the mouse, for example by pressing the menu key on a keyboard.
Simple Menu Bars - Archive of obsolete content
example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> </toolbox> here, a simple menu bar is created using the menubar element.
... label the text to appear on the menu item, such as open or save.
Splitters - Archive of obsolete content
the syntax of a splitter is as follows: <splitter id="identifier" state="open" collapse="before" resizebefore="closest" resizeafter="closest"> the attributes are as follows: id the unique identifier of the splitter.
...set this to open, the default, to have the split panel initially open, or set it to collapsed to have one of the panels shrunk down (collapsed) and the other occupying all of the space.
Using Remote XUL - Archive of obsolete content
<?php header('content-type: application/vnd.mozilla.xul+xml'); ?> <!-- xul markup starts here --> note that you don't need a web server for this tutorial; you can load the document you create on your computer via a "file" url or the "open file" function of your browser.
...we have a menu bar with menus and buttons, and we can press the buttons, open the menus, and select their items.
Using the Editor from XUL - Archive of obsolete content
something, somewhere, tells mozilla to open the composer window.
... as well as making the editor (which happens via nseditorshell::doeditormode()) we also hook up various listeners and observers for ui updating and user interaction, and store a file specifier for the document we opened.
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
...p) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_list: el_list[name] = {} for attr,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for...
XUL accessibility tool - Archive of obsolete content
once the tool window has loaded, select either a local file, web url, or currently open window from the file menu to generate a xul report for that document.
... new features: (aaronlev) automatically test any new windows as they are opened.
XUL controls - Archive of obsolete content
pressing the button opens the menu.
... <toolbarbutton type="menu-button" label="open"> <menupopup> <menuitem label="open changed files"/> <menuitem label="open all"/> </menupopup> </toolbarbutton> more information about this type of menu toolbarbutton element.
label - Archive of obsolete content
ArchiveMozillaXULlabel
href type: string defines a url to open when this element is clicked.
... text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press.
prefpane - Archive of obsolete content
the uri will be opened using the help viewer when the help button is pressed.
... </prefpane> <script type="application/javascript" src="chrome://myext/content/script0.js"> <script type="application/javascript" src="chrome://myext/content/script1.js"> </prefwindow> when opening a dialog with multiple panes you must include the toolbar feature in the call to opendialog, for example: window.opendialog("chrome://example/content/prefwin.xul", "", "chrome,toolbar"); related prefwindow preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... mac os x open the .pkg file within the installer and follow the directions.
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... mac os x open the .pkg file within the installer and follow the directions.
XULRunner 1.9.1 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... mac os x open the .pkg file within the installer and follow the directions.
XULRunner 1.9.2 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... mac os x open the .pkg file within the installer and follow the directions.
XULRunner 1.9 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... mac os x open the .pkg file within the installer and follow the directions.
XULRunner 2.0 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... mac os x open the .pkg file within the installer and follow the directions.
Specifying Startup Chrome Window - Archive of obsolete content
specifying a single instance main window by default, each time the user launches the application xulrunner opens the window specified by toolkit.defaultchromeuri.
... specifying window features by default, the main window is opened as a resizeable, non-dialog chrome window.
toolkit.defaultChromeFeatures - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: "chrome,dialog=no,all" example: pref("toolkit.defaultchromefeatures", "chrome,resizable=no,dialog=no"); the toolkit.defaultchromefeatures preference allows simple xulrunner-based applications to specify what features are passed to window.open() when the main application window is opened.
... see also: xulrunner:specifying startup chrome window, dom:window.open, toolkit.defaultchromeuri, toolkit.singletonwindowtype.
toolkit.defaultChromeURI - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.defaultchromeuri", "chrome://myapp/content/"); the toolkit.defaultchromeuri preference allows simple xulrunner-based applications to open a new window when the application is launched.
... the preference specifies the uri of a chrome window to be opened.
toolkit.singletonWindowType - Archive of obsolete content
preference type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.singletonwindowtype", "xulmine"); by default, the toolkit.defaultchromeuri preference will cause xulrunner to open a new main application window each time an application is invoked.
...if such a window is found, it will be re-used, otherwise a new window will be opened.
Gecko Compatibility Handbook - Archive of obsolete content
gecko is an embeddable browser, developed as part of the mozilla open source project and based on w3 standards rather than the proprietary approaches of the past.
...this way you can test your site on the aol client from behind your firewall, provided that your network administrators will open these ports.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - october 13, 2006 - october 20, 2006 announcements content filtering, manipulation, and control in firefox 3 an open invitation from myk melez to contribute to the brainstorming of new features for firefox 3 and future firefox releases.
...jesper kristensen pointed the requester here change download action for .rdp files on windows and os x a question regarding enabling firefox to associate .rdp files with microsoft remote desktop client so that the correct application opens the files automatically.
2006-10-06 - Archive of obsolete content
problem looping c_opensession problem in thunderbird christian bongiorno has run into a problem developing a pkcs11 module for a new card.
... thunderbird is continuously repeating 7 functions including c_opensession which accesses the card that he is developing.
2006-12-01 - Archive of obsolete content
server side spidermonkey juicescript is an open source version of a server side javascript.
... http://www.whitebeam.org is an example of open source server side javascript.
NPAnyCallbackStruct - Archive of obsolete content
at the time the plug-in is called, the browser has already opened the file and written postscript for other parts of the page.
... when the plug-in is done, it should leave the file open, as the browser can continue to write additional postscript data to the file.
NPPrintCallbackStruct - Archive of obsolete content
at the time the plug-in is called, the browser has already opened the file and written postscript for other parts of the page.
... when the plug-in is done, it should leave the file open, so the browser can continue to write additional postscript data to the file.
Vulnerabilities - Archive of obsolete content
website vulnerabilities owasp or open web security project is a non-profit charitable organization focused on improving the security of software and web applications.
... according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
Solaris 10 Build Prerequisites - Archive of obsolete content
provides build tools needed by some open-source projects (eg gnome).
...% svn co svn+ssh://anon at svn dot opensolaris dot org/svn/jds/spec-files/branches/gnome-2-20 5.
Browser Feature Detection - Archive of obsolete content
document.url true true true document.body true true true document.images true true true document.applets true true true document.links true true true document.forms true true true document.anchors true true true document.cookie true true true document.open() true true true document.close() true true true document.write() true true true document.writeln() true true true document.getelementbyid() true true true document.getelementsbyname() true true true dom css 1 support for properties/methods in document.body.style name firefox 1.
...: 'referrer', 'supported': false}, {name: 'domain', 'supported': false}, {name: 'url', 'supported': false}, {name: 'body', 'supported': false}, {name: 'images', 'supported': false}, {name: 'applets', 'supported': false}, {name: 'links', 'supported': false}, {name: 'forms', 'supported': false}, {name: 'anchors', 'supported': false}, {name: 'cookie', 'supported': false}, {name: 'open', 'supported': false}, {name: 'close', 'supported': false}, {name: 'write', 'supported': false}, {name: 'writeln', 'supported': false}, {name: 'getelementbyid', 'supported': false}, {name: 'getelementsbyname', 'supported': false} ], 'domcore2': [ {name: 'doctype', 'supported': false}, {name: 'implementation', 'supported': false}, {name: 'documentelement', 'supported': false}, ...
CSS - Archive of obsolete content
ArchiveWebCSS
however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
... this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
XForms Select Element - Archive of obsolete content
this attribute, when set to 'open', allows the user to provide free entry to the list.
... possible values are open and closed, default is closed.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
first, there is the problem of authors who open a named anchor but do not close it.
...consider the effects of the following rule: a:hover {color: red;} in a document with an unclosed named anchor, any text that follows the anchor's open tag will be colored red (unless another css rule intervenes).
RDF in Fifty Words or Less - Archive of obsolete content
and fundamentally, there's no reason that you shouldn't be able to treat these as "bookmarks" as well, grouping them together into folders as you please, or maybe even creating "smart" folders that, when you open them, dynamically generate their contents by running common search that you define.
...say that one of my bookmark "folders" is really a pointer to my email inbox: when i open that folder, voilà!
Archive of obsolete content
.htaccess ( hypertext access ) file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other.
... archived open web documentation the documentation listed below is archived, obsolete material about open web topics.
Introduction to game development for the Web - Game development
as we like to say, "the web is the platform." let's take a look at the core of the web platform: function technology audio web audio api graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you'r...
...this is a web-supported implementation of opengl es 2.0.
Building up a basic demo with A-Frame - Game development
open the a-frame documentation in a separate tab — it is useful to refer to.
...looking around would give an impression of being inside an open sky, a wooden barn — wherever you like!
Building up a basic demo with Three.js - Game development
open the three.js documentation in a separate tab — it is useful to refer to.
...try saving the file and opening it in your browser.
Create the Canvas and draw on it - Game development
all the javascript code we will write in this tutorial will go between the opening <script> and closing </script> tags.
...add the following below your opening <script> tag.
2D maze game with device orientation - Game development
you can check it out on github where it’s open sourced, read the online documentation and go through the big collection of examples.
... you can open the index file in your favourite browser to launch the game and try it.
Plug-in Development Overview - Gecko Plugin API Reference
also, the windows version information for the plug-in dll will be used to determines the mime types, file extensions, file open template, plug-in name, and description.
... for this the version stamp of the embedded resource of the plug-in dll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
Fork - MDN Web Docs Glossary: Definitions of Web-related terms
forks are often seen in free and open source software development.
... learn more various "well-known" forks linux distributions node.js and io.js (which have been merged together back) libreoffice, a fork of openoffice ...
Gonk - MDN Web Docs Glossary: Definitions of Web-related terms
gonk is the lower-level operating system of firefox os and consists of a linux kernel (based on the android open source project (aosp)) and userspace hardware abstraction layer (hal).
... the kernel and several of the userspace libraries are common open-source projects: linux, libusb, bluez, and so forth.
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
they open it, read it, eventually modify it, and then repackage the letter and only then send it to whom you intended to sent the letter for.
... the original recipient would then mail you a letter back, and the mailman would again open the letter, read it, eventually modify it, repackage it, and give it to you.
Specification - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of describing the web, the term "specification" (often shortened to simply "spec") generally means a document describing a language, technology, or api which makes up the complete set of open web technologies.
... learn more general knowledge specification on wikipedia technical reference open web platform specifications ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
parent = xinclude.parentnode; try { netscape.security.privilegemanager.enableprivilege('universalxpconnect universalbrowserread'); // necessary with file:///-located files trying to reach external sites if (href !== null) { var response, responsetype; var request = new xmlhttprequest(); request.open('get', href, false); request.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); request.setrequestheader('cache-control', 'no-cache'); if (accept) { request.setrequestheader('accept', accept); } if (acceptlanguage) { request.setreq...
... } // need to make a whole new request apparently since cannot convert the encoding after receiving it (to know what the encoding was) var request2 = new xmlhttprequest(); request2.overridemimetype('text/plain; charset='+encodingtype); request2.open('get', href, false); request2.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); request2.setrequestheader('cache-control', 'no-cache'); request2.send(null); response = request2[responsetype]; // update the response for processing ...
WAI-ARIA basics - Learn web development
open them both in a text editor and have a look at how the code works.
... first of all, add a paragraph just above the opening <form> tag, like the one below, and mark both the form <label>s with an asterisk.
Sizing items in CSS - Learn web development
this is the collapsed border on the element — there is no content to hold it open.
...open the example, resize the browser window, and observe what happens to the size of the box and text.
Fundamental text and font styling - Learn web development
font-feature-settings: switch various opentype font features on and off.
... playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p { } </textarea> <h2>out...
How do you make sure your website works properly? - Learn web development
open firefox's network tool (tools ➤ web developer ➤ network) and reload the page: there's the problem, that "404" at the bottom.
... open the console (tools ➤ web developer ➤ web console) and reload the page: in this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover javascript in another series of articles).
How much does it cost to do something on the Web? - Learn web development
some of them, like microsoft visual studio, can cost hundreds, or thousands of dollars; though visual studio express is free for individual developers or open source projects.
...likewise, video-editing software can be free (pitivi, openshot for linux, imovie for mac), less than $100 (adobe premiere elements), or several hundred dollars (adobe premiere pro, avid media composer, final cut pro).
How do you upload your files to a web server? - Learn web development
open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider (the service that will host our http web server) is a fictitious company "example hosting provider" whose urls look like this: mypersonalwebsite.examplehostingprovider.net.
... we have just opened an account and received this info from them: congratulations for opening an account at example hosting provider.
Example 1 - Learn web development
nd: #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; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for active state open state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">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: re...
... 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-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #fff; } result for open state ...
HTML text fundamentals - Learn web development
however, when you open the document in your browser, you'll see that the text appears as a big chunk!
...doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page.
Adding vector graphics to the Web - Learn web development
how to include svg code inside your html you can also open up the svg file in a text editor, copy the svg code, and paste it into your html document — this is sometimes called putting your svg inline, or inlining svg.
... how to embed an svg with an <iframe> you can open svg images in your browser just like webpages.
HTML table basics - Learn web development
LearnHTMLTablesBasics
save and open your code in a browser to see the improvement.
...<col> elements are specified inside a <colgroup> container just below the opening <table> tag.
General asynchronous programming concepts - Learn web development
aragraph 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.
... main thread: task a --> task c worker thread: expensive task b with this in mind, have a look at simple-sync-worker.html (see it running live), again with your browser's javascript console open.
Introduction to events - Learn web development
first, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser.
...let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) it is also available live below: this is a pretty simple example that shows and hides a <div> with a <video> element inside it: <button>display video</button> <div class="hidden"> <video> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your brow...
Functions — reusable blocks of code - Learn web development
open the example up in a browser and in your text editor.
... open the javascript console in your browser developer tools.
Introduction to web APIs - Learn web development
the following code provides a simple example of how this would be used: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.responsetype = 'json'; request.send(); request.onload = function() { const superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } note: you can see this code in action in our ajax.html example (see it live also).
... the first five lines specify the location of the resource we want to fetch, create a new instance of a request object using the xmlhttprequest() constructor, open an http get request to retrieve the specified resource, specify that the response should be sent in json format, then send the request.
Manipulating documents - Learn web development
try opening this up in your browser — it is a very simple page containing a <section> element inside which you can find an image, and a paragraph with a link inside.
...open it and have a look — you'll see that we've got a <div> element covering a small part of the screen, which has got a background tile applied to it.
Basic math in JavaScript — numbers and operators - Learn web development
open in new window in the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case.
...p> const btn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine') { btn.textcontent = 'stop machine'; txt.textcontent = 'the machine has started!'; } else { btn.textcontent = 'start machine'; txt.textcontent = 'the machine is stopped.'; } } open in new window you can see the equality operator being used just inside the updatebtn() function.
What is JavaScript? - Learn web development
the google maps api and openstreetmap api allows you to embed custom maps into your website, and other such functionality.
... open the file in your web browser and in your text editor.
Introduction to the server side - Learn web development
open two or three different products.
... note: visit a newspaper site that has a subscription model and open a bunch of tabs (e.g.
Getting started with Ember - Learn web development
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.
... now run the following command to place the common todomvc css inside your app: npm install --save-dev todomvc-app-css todomvc-common next, find the ember-cli-build.js file inside the todomvc directory (it's right there inside the root) and open it in your chosen code editor.
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.
...run this command in your terminal, taking care that you're in the root directory of your app: touch src/components/form.js src/components/filterbutton.js the <form /> open components/form.js and do the following: import react at the top of the file, like we did in todo.js.
Componentizing our Svelte app - Learn web development
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/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
Creating our first Vue component - Learn web development
open the file in your code editor.
... open up app.vue again.
Handling common JavaScript problems - Learn web development
this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
... note: try opening up your javascript console now and running navigator.useragent, to see what you get returned.
Introducing a complete toolchain - Learn web development
introducing our case study the toolchain that we are creating in this article will be used to build and deploy a mini site that lists data (taken from one of nasa's open apis) concerning potentially hazardous space objects that threaten our existence on earth!
... start off by opening your terminal, and navigating to a place that you'll be able to find and get to easily.
Package management basics - Learn web development
open it up and it should look something like this: { "name": "parcel-experiment", "version": "1.0.0", "description": "a simple npm package to learn about using npm", "main": "index.js", "scripts": { "test": "echo \"error: no test specified\" && exit 1" }, "author": "chris mills", "license": "isc" } so this is the config file that defines your package.
...open it up, and its scripts member should look like this: "scripts": { "test": "echo \"error: no test specified\" && exit 1", }, update it so that it looks like this, and save the file: "scripts": { "test": "echo \"error: no test specified\" && exit 1", "dev": "parcel serve index.html" }, we’ve added a custom dev command as an npm script.
Accessibility information for UI designers and developers
links vs buttons to keep your interface in line with user expectations, use links for interactions that go somewhere (on the current page or another page) and buttons for interactions that do something (like submit a form or open an overlay).
... 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.
Gecko info for Windows accessibility vendors
event_menupopupstart and event_menupopupend are fired when xul menus are opened or closed.
...for example, "open\tctrl+o" role_tooltip xul: <tooltip> or tooltiptext attribute role_application default role of root object of application dhtml: role="wairole:application" accname() exposes the <title> of the current pane.
Accessible Toolkit Checklist
alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable.
... lists and combo boxes when a list is tabbed to, select the first item if nothing else is already selected f4, alt+down or alt+up toggle a combo box open and closed escape closes combo box if it was open (be careful not to have it cancel entire dialog) up/down arrow key navigation.
A bird's-eye view of the Mozilla framework
an application such as the browser may have one or more open documents accessible via dom apis.
... in the diagram above, each horizontal line extending from an object and terminated by an open circle indicates an interface to the object.
Creating MozSearch plugins
firefox 2 uses a simplified form of the opensearch format for storing search plugins.
...for creating search plugins for installation from the web, see creating opensearch plugins for firefox the plugin file the mozsearch format is similar to the opensearch format.
How Mozilla's build system works
you are encouraged to open config.status to have a look!
... open files.
Firefox and the "about" protocol
ontributors 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 provides 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 privacy protections report consisting of enhanced tracking protection, firefox monitor and firefox lockwise data about:restartrequired a page users are sent to when firefox requires a restart due to an update about:reader indicates a web pa...
Embedding Tips
watch for changes in nsiuricontentlistener::onstarturiopen().
...the nsiwindowcreator::createchromewindow method will be called whenever gecko needs to open a new window.
HTML parser threading
parsers created using document.open()) don't have an nshtml5streamparser instance.
...the tree builder snapshot contains a copy of the tree builder stack, a copy of the list of open formatting elements and copies of various fields that define the tree builder state.
Implementing Download Resuming
(it is possible to pass an empty string as the id; however, this means that you have no assurance that the file remained unchanged) now, you can open the channel as usual (using nsichannel.asyncopen() in the common case) and write to the file in the ondataavailable notifications.
... you may want to use nsisimplestreamlistener to simplify this task; to get progress notifications, you can implement nsiprogresseventsink and set an interface requester as the notificationcallbacks of the channel that gives out such an event sink (this needs to be done before calling asyncopen).
Webapps.jsm
the webapps.jsm modules exposes the domapplicationregistry, which is responsible for managing all of the open web apps.
...dmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _computefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpackage: function(azipfile, aapp, aislocalfileinstall) _opensignedpackage: function(ainstallorigin, amanifesturl, azipfile, acertdb) _readpackage: function(aoldapp, anewapp, aislocalfileinstall, aisupdate,) _checksignature: function(aapp, aissigned, aislocalfileinstall) _saveetag: function(aisupdate, aoldapp, areq...
JavaScript code modules
openlocationlasturl.jsm provides access to the last url opened using the "open location" option in the file menu.
... webapps.jsm provides an interface to manage open web apps.
Localization content best practices
for example, a do you want to open the page?
... alias :l10n the :l10n alias on bugzilla (community@localization.bugs) is followed by some localizers and it could be cc'd to gather opinions from the wider l10n community (no point in opening needinfo or requiring actions from this alias).
SVN for Localizers
brief intro to svn svn (abbreviation for subversion) is a free and open source repository tool we use to manage the localized mozilla web pages.
... open the files you want to translate with your favorite text editor.
Profiling with Xperf
just make sure you set the symbol paths before enabling "load symbols" and before opening a summary view.
...if you change it within the program, you'll have to close all summary tables and reopen them for it to pick up the new symbol path data.
Reporting a Performance Problem
recording can be done by clicking on the toolbar icon to open its panel.
... the data will open in a new tab.
TraceMalloc
tracemallocopenlogfile(filename) - open a new log file and return its log file descriptor (or -1 on error).
... tracemallocchangelogfd(logfd) - change the current log file to the one identified by logfd, returning the previous fd (so you can maintain a number of open files; keep their fds in a js array!).
Phishing: a short definition
after verifying username and password, the user is prompted to open the otp app and enter the corresponding 6-digit code, representing a hashed version of the secret key and a nonce - potentially time-based.
...unfortunately, some users still feel it's too tedious unlocking a phone, opening the otp app, and manually typing a few digits each time a provider requests a new token.
Preference reference
trols whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser...
....urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
Preferences system
usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string.
...example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
Patches and pushes
for references on how each tag functions, visit the opensearch wiki page and the mozsearch wiki page.
...once attached and labeled as a patch, open the attachment details.
Profile Manager
the profile will be backed up, and the backup will appear under the backups column in the main display: to restore a profile: select the backup in the main display, open the context menu, and choose "restore".
... to delete a backup: select the backup in the main display, open the context menu, and choose "delete".
Creating a Cookie Log
enabling cookie logging windows open a command prompt (this is under programs or programs/accessories in normal installations of windows).
... run firefox by typing "./firefox" and pressing enter mac os x open terminal.app, which is located in the /applications/utilities folder (these instructions are for bash, the default shell in mac os x 10.3 and higher; if you use something else, you probably know how to modify these instructions already).
I/O Functions
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_readdir pr_closedir pr_m...
... 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 p...
PRDir
syntax #include <prio.h> typedef struct prdir prdir; description the opaque structure prdir represents an open directory in the file system.
... the function pr_opendir opens a specified directory and returns a pointer to a prdir structure, which can be passed to pr_readdir repeatedly to obtain successive entries (files or subdirectories in the open directory).
PRFileDesc
a file descriptor used to represent any open file, such as a normal file, an end point of a pipe, or a socket (end point of network communication).
...otherwise, you use functions such as pr_open and pr_newtcpsocket to obtain a file descriptor, which you should treat as an opaque structure.
PR_AttachSharedMemory
attaches a memory segment previously opened with pr_opensharedmemory and maps it into the process memory space.
... syntax #include <prshm.h> nspr_api( void * ) pr_attachsharedmemory( prsharedmemory *shm, printn flags ); /* define values for pr_attachsharedmemory(...,flags) */ #define pr_shm_readonly 0x01 parameters the function has these parameters: shm the handle returned from pr_opensharedmemory.
PR_NewTCPSocket
syntax #include <prio.h> prfiledesc* pr_newtcpsocket(void); returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened ipv4 tcp socket.
...new code should use pr_opentcpsocket instead, which allows the address family (ipv4 or ipv6) of the new tcp socket to be specified.
PR_NewUDPSocket
syntax #include <prio.h> prfiledesc* pr_newudpsocket(void); returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly opened udp socket.
...new code should use pr_openudpsocket instead, which allows the address family (ipv4 or ipv6) of the new udp socket to be specified.
PR_ReadDir
syntax #include <prio.h> prdirentry* pr_readdir( prdir *dir, prdirflags flags); parameters the function has the following parameters: dir a pointer to a prdir object that designates an open directory.
... see also pr_opendir ...
PR_TransmitFile
flags one of the following flags: pr_transmitfile_keep_open indicates that the socket will be kept open after the data is sent.
... the enumeration prtransmitfileflags, used in the flags parameter, is defined as follows: typedef enum prtransmitfileflags { pr_transmitfile_keep_open = 0, pr_transmitfile_close_socket = 1 } prtransmitfileflags; ...
NSS Sample Code Sample_2_Initialization of NSS
info *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and...
... should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
Initialize NSS database - sample 2
info *slot, prbool retry, void *arg) { file *input; file *output; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and...
... should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
PKCS11 Implement
session management c_opensession the nss calls c_opensession whenever it initializes a token and keeps the session open as long as possible.
...the nss opens a separate session for each part of a multipart encryption (bulk encryption).
FC_CloseSession
name fc_closesession - close a session opened between an application and a token.
... return value examples see also fc_opensession ...
FC_GetSessionInfo
syntax ck_rv fc_getsessioninfo( ck_session_handle hsession, ck_session_info_ptr pinfo ); parameters hsession [in] the open session handle.
... return value examples see also fc_closesession, nsc_opensession ...
Rhino and BSF
the bean scripting framework (or bsf) was originally developed by ibm and now published as open source as a project at the apache software foundation.
... this framework has been embedded in a number of open source projects, including the xsl processor xalan and the xml/java build tool ant.
Shumway
this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of developers currently creating the adobe flash platform.
...you may wish to do this before opening your swf file.
SpiderMonkey Build Documentation
refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an executable named js in the directory build-release/dist/bin.
... the mozillabuild batch file you used to open your shell (e.g.
Index
4 foss guide, spidermonkey feel free to add your own spidermonkey-based open source projects (and if necessary add categories)!
...that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
JSAPI User Guide
the word javascript may bring to mind features such as event handlers (like onclick), dom objects, window.open, and xmlhttprequest.
...whenever javascript code does something like window.open("http://www.mozilla.org/"), it is accessing a global property, in this case window.
Signing Mozilla apps for Mac OS X
once you have that you can do the following to create your id: open the developer certificate utility.
...you can find it by running this command in the terminal: openssl x509 -text -noout -inform der -in devloperid_application.cer | grep subject putting it all together, you'll wind up using a command similar to the one below to sign your app.
Animated PNG graphics
MozillaTechAPNG
ave no other chunks in between them from 0.8 removed crcs for ihdr and plte from actl the actl fctl and adat are now not copy safe, renamed them to actl, fctl and adat from 0.9 split render_op into dispose_op and blend_op from 0.10 no changes test encoder and sample images sample images are available from the apng implementation page at http://littlesvr.ca/apng/ an encoder (open source) is available in versions of the gecko engine starting with version 1.9 alpha 4.
... an application (open source) using the mozilla encoder to assemble apngs available here: http://littlesvr.ca/apng/apngedit.html see also portable network graphics (png) specification (second edition) extensions to the png specification, version 1.2.0 graphics interchange format 89a ...
XML Extras
xmlhttprequest.open("ahost") ok file:// documents can access http:// documents but you need to enable universalbrowserread privilege in your scripts - see the javascript security: signed scripts document for more details.
...you cannot open a connection to a different host.
An Overview of XPCOM
the most important use of xpcom is within gecko, an open source, standards compliant, embeddable web browser and toolkit for creating web browsers and other applications.
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Building the WebLock UI
that function uses the opendialog method from the window object and takes the url to the xul file in which the dialog is defined: function loadweblock() { window.opendialog("chrome://weblock/weblock.xul"); } xul the entire user interface of the mozilla browser and all of the applications that go with it, including the mail client, the irc client, and others, have been defined in an xml language called xul.
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Component Internals
xpcom makes for a very open environment.
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Preface
although, xpcom can be used in many environments which are unrelated to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality.
...this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
mozIStorageError
cantopen 14 unable to open the database file.
... notadb 26 the opened file is not a database.
nsIApplicationCache
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries.
...clients can open a session with nsicacheservice.createsession() using this client id and a storage policy of store_offline to access this cache.
nsIApplicationCacheChannel
exceptions thrown ns_error_already_opened if set after calling asyncopen() on the channel.
...exceptions thrown ns_error_already_opened if set after calling asyncopen() on the channel.
nsIAutoCompleteInput
minresultsforpopup unsigned long specifies a minimum number of search results that must be available before the autocomplete popup will open.
... popupopen boolean indicates whether or not the popup view is already open.
nsICacheEntryInfo
fetchcount long get the number of times the cache entry has been opened.
... lastfetched pruint32 get the last time the cache entry was opened (in seconds since the epoch).
nsICookiePromptService
the nsicookiepromptservice interface is to open a dialog to ask to permission to accept the cookie.
... methods cookiedialog() opens a dialog that asks for permission to accept a cookie.
nsICryptoHash
you will need to create an instance of nsicryptohash, open an input stream from a file, and then update the hash with the file.
...sh of a file: // hardcoded here for convenience var path = "c:\\windows\\notepad.exe"; var f = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); f.initwithpath(path); var istream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(components.interfaces.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = components.classes["@mozilla.org/security/hash;1"] .createinstance(components.interfaces.nsicryptohash); // we want to use the sha256 algorithm ch.init(ch.sha256); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get bin...
nsIDBChangeListener
current events are: dbopened when a pending listener becomes real.
... this can happen when the existing db is force closed and a new one opened.
nsIDOMWindowUtils
imeisopen boolean returns the ime open state.
... true if it's open, otherwise false.
nsIMemoryReporter
for example, the number of tabs currently open.
...for example, the number of times the user has opened a new tab.
nsINavHistoryQueryOptions
asyncenabled boolean when true, the root container node generated by these options and all of its descendant containers are opened asynchronously if they support doing so.
... note: currently, only bookmark folder containers support being opened asynchronously.
Component; nsIPrefBranch
remarks registering as a preference observer can open an object to potential cyclical references which will cause memory leaks.
...this insures that shorter lived objects (say one tied to an open window) will not fall into the cyclical reference trap.
nsIPrefBranch2
remarks registering as a preference observer can open an object to potential cyclical references which will cause memory leaks.
...this insures that shorter lived objects (say one tied to an open window) will not fall into the cyclical reference trap.
nsIProtocolHandler
uri_does_not_return_data 1<<11 channels using this protocol never call ondataavailable() on the listener passed to asyncopen(), and therefore do not return any usable data.
... uri_opening_executes_script 1<<13 uris for this protocol execute script when they are opened.
nsISpeculativeConnect
netwerk/base/public/nsispeculativeconnect.idlscriptable lets non-networking code provide hints to the networking layer that an http connection attempt to a particular site is likely to happen soon; this lets the networking layer begin setting up tcp and, if appropriate, ssl handshakes to save time when the connection is actually opened later.
...no obligation is taken on by the implementer, nor is the submitter obligated to actually open the new channel.
nsIXMLHttpRequest
example code this is a simple example code for opening a simple http request from a xul application (like a mozilla extension) without using observers: var req = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('post', "http://www.foo.bar:8080/nietzsche.do", true); req.send('your=data&and=more&stuff=here'); example 2 var {cu: utils, cc: classes, ci: instances} = components; cu.import('resource://gre/m...
... break; } default: services.prompt.alert(null, 'xhr error', 'error fetching package: ' + xhr.statustext + ' [' + ev.type + ':' + xhr.status + ']'); break; } }; let evf = f => ['load', 'error', 'abort'].foreach(f); evf(m => xhr.addeventlistener(m, handler, false)); xhr.mozbackgroundrequest = true; xhr.open('get', url, true); xhr.channel.loadflags |= ci.nsirequest.load_anonymous | ci.nsirequest.load_bypass_cache | ci.nsirequest.inhibit_persistent_caching; xhr.responsetype = "arraybuffer"; //dont set it, so it returns string, you dont want arraybuffer.
nsPIPromptService
eopeningsound obsolete since gecko 1.9.2 the value is 13.
... method overview void dodialog(in nsidomwindow aparent, in nsidialogparamblock aparamblock, in string achromeurl); methods dodialog() opens a dialog.
XPCOM Interface Reference
registrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulrunti...
...mensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfolderflagtypensmsgjunkstatusnsmsgkeynsmsglabelvaluensmsgpriorityvaluensmsgruleactiontypensmsgsearchattribnsmsgsearchopnsmsgsearchscopensmsgsearchtermnsmsgsearchtypevaluensmsgsearchvaluensmsgsearchwidgetvaluenspipromptservice see also interfaces grouped by function ...
nsMsgMessageFlags
elided 0x00000020 indicates whether or not the thread rooted at this message is open or closed in the ui.
... new 0x00010000 indicates whether or not the message is new since the last time the folder was opened.
Using IndexedDB in chrome
(see using indexeddb for an overview.) however, the apis can also be accessed from system-privileged javascript using the components.utils.importglobalproperties() function: components.utils.importglobalproperties(["indexeddb"]); // from here on, it's like using indexeddb from content var req = indexeddb.open("my-database"); // ...
..., and want indexeddb to be available in it, use the wantglobalproperties option in the sandbox constructor: var options = { "wantglobalproperties": ["indexeddb"] } var principal = cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); var sandbox = components.utils.sandbox(principal, options); // the sandbox will have access to indexeddb var sandboxscript = 'var req = indexeddb.open("my-database");'; components.utils.evalinsandbox(sandboxscript, sandbox); before firefox 33, you would access indexeddb from chrome code using the initwindowless method of the nsiindexeddatabasemanager service.
Main Windows
messenger.xul the base mail window that you see when you first open thunderbird is messenger.xul: messenger.xul itself doesn’t contain a lot.
... messagewindow.xul messagewindow.xul is shown when a message is opened.
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.
... $ cd $profile # where $profile is your profile folder $ touch user.js # create the empty javascript file alternatively, open a files window (if you're on ubuntu.
Use SQLite
getservice(ci.mozistorageservice); var dbconnection; if (!dbfile.exists()) dbconnection = this._dbcreate(dbservice, dbfile); else { dbconnection = dbservice.opendatabase(dbfile); } this.dbconnection = dbconnection; }, _dbcreate: function(adbservice, adbfile) { var dbconnection = adbservice.opendatabase(adbfile); this._dbcreatetables(dbconnection); return dbconnection; }, _dbcreatetables: function(adbconnection) { for(var name in this.dbschema.tables) adbconnection.createtable(name, this.dbschema.tables[name]); }, ...
...}; window.addeventlistener("load", function(e) { tbirdsqlite.onload(e); }, false); this is another practical sample on how to handle opendatabase and sql queries on the client side, using in-memory (blob) storage of 2mb: var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executesql('create table if not exists logs (id unique, log)'); tx.executesql('insert into logs (id, log) values (1, "foobar")'); tx.executesql('insert into logs (id, log) values (2, "logmsg")'); msg = '<p>log message created and row inserted.</p>'; document.queryselector('#status').innerhtml = msg; }); db.transaction(function (tx) { tx.executesql('select * from logs', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>found r...
Using COM from js-ctypes
ctypes.default_abi : ctypes.stdcall_abi; // libraries let lib = ctypes.open('ole32.dll'); // types // simple types let byte = ctypes.unsigned_char; let dword = ctypes.unsigned_long; let long = ctypes.long; let lpvoid = ctypes.voidptr_t; let void = ctypes.void_t; let ulong = ctypes.unsigned_long; let ushort = ctypes.unsigned_short; let wchar = ctypes.jschar; // advanced types - based on simple types let hresult = long; let lpcwstr = wchar.ptr; // guess types - these ju...
...this example uses ipropertystore::setvalue to change the system.usermodelapp.id of an open firefox window.
Working with ArrayBuffers
var lib; switch (os.constants.sys.name.tolowercase()) { case 'winnt': case 'winmo': case 'winnt': //windows lib = ctypes.open('msvcrt'); break; case 'darwin': // mac lib = ctypes.open('libc.dylib'); break; case 'freebsd': lib = ctypes.open('libc.so.7'); break; case 'openbsd': lib = ctypes.open('libc.so.61.0'); break; case 'android': case 'sunos': case 'netbsd': case 'dragonfly': lib = ctypes.open('libc.so'); break; ca...
...se 'linux': lib = ctypes.open('libc.so.6'); break; case 'gnu/kfreebsd': lib = ctypes.open('libc.so.0.1'); break; default: //assume unix try { lib = ctypes.open(ctypes.libraryname('c')); } catch (ex) { throw new error('i dont know where to memcpy is defined on your operating system, "' + os.constants.sys.name + '"'); lib.close(); } } try { var memcpy = lib.declare('memcpy', os.constants.sys.name.tolowercase().indexof('win') == 0 ?
Library
the library object represents a native library loaded by the ctypes open() method.
...this would be done like this: var objc = ctypes.open(ctypes.libraryname('objc')); objc.declare('_nsconcreteglobalblock', ctypes.voidptr_t); see also ...
js-ctypes
documentation if you are brand new to js-ctypes, and have no idea about it, the pages you should read first is - ctypes.open followed by standard os libraries.
... using js-ctypes ctypes.open custom native file standard os libraries finding window handles working with data working with arraybuffers declaring types declaring and calling functions declaring and using callbacks type conversion memory management chromeworker js-ctypes reference a reference guide to the js-ctypes api.
Plug-in Development Overview - Plugins
also, the windows version information for the plug-in dll will be used to determines the mime types, file extensions, file open template, plug-in name, and description.
... for this the version stamp of the embedded resource of the plug-in dll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
Streams - Plugins
the open stream is converted from normal mode to seek mode in an effort to pass the plug-in data that was already on the way, rather than just discarding it.
...it remains open until the plug-in closes it by calling npn_destroystream, or until the instance is destroyed.
Preferences System
usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string.
...example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
DOM Inspector FAQ - Firefox Developer Tools
inspect chrome document inspect application chrome, including open xul windows, e.g., the browser window.
...instead, get the xul document to load as you normally would (e.g., by invoking commands or opening windows via standard application use), then locate it in the inspect chrome document menu.
DOM Property Viewer - Firefox Developer Tools
to enable it, open the developer tool settings and check the "dom" box under "default firefox developer tools".
... opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w keyboard shortcut.
Search - Firefox Developer Tools
you can use the up and down arrows to move through the list, and return to open the file you want: searching within a file to search for a particular substring in the file currently loaded into the source pane, press control + f (or command + f on a mac) while the source pane is focused.
... searching in all files you can also search for a string in all of the files included in the currently opened project.
Step through code - Firefox Developer Tools
step in: advance to the next line in the function, unless on a function call, in which case enter the function being called step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging.
...the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result.
Debugger keyboard shortcuts - Firefox Developer Tools
to use a remapped key as a standard function key, hold the function key down as well (so to open the profiler, use shift + function + f5).
... note: before firefox 66, the combination ctrl + shift + s on windows and linux or cmd + opt + s on macos would open/close the debugger.
Using the Debugger map scopes feature - Firefox Developer Tools
open the example page and then open the debugger using tools > web developer > debugger (or press ctrl + i and then select the debugger).
... the debugger opens the file "increment.js" so you can view the original code.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "browser" from the "environment" menu.
...lt.textcontent = content; return elt; }; } var divfactory = makefactory('div'); var spanfactory = makefactory('span'); function divsandspans() { for (i = 0; i < 10; i++) { var div = divfactory('div #' + i); div.appendchild(spanfactory('span #' + i)); document.body.appendchild(div); } } function dodivsandspans() { divsandspans(); } </script> open the browser console (menu button > developer > browser console), and then evaluate the expression demotrackallocations() in the browser console.
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.
... save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”.
Basic operations - Firefox Developer Tools
opening the memory tool before firefox 50, the memory tool is not enabled by default.
... to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default.
Inspecting web sockets - Firefox Developer Tools
clicking on a web socket request opens the usual sidebar to reveal additional details.
... columns in the response pane in the response pane, you can choose to show the following information about each frame: data size time opcode maskbit finbit the data and time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the table header.
Work with animations - Firefox Developer Tools
further information about animation compositing if you open animation-inspector-compositing.html and click the red rectangle, a simple opacity animation will start.
...if you click the icon you get a visual editor for the curve, enabling you to drag p1 and p2, and see the results in the page: this feature uses open source code from lea verou’s cubic-bezier.com.
Animating CSS properties - Firefox Developer Tools
there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording.
... open up the first recording.
Storage Inspector - Firefox Developer Tools
cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.
... opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut.
Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
... keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is active.
Web Audio Editor - Firefox Developer Tools
opening the web audio editor the web audio editor is not enabled by default in firefox 32.
... to enable it, open the developer tool settings and check "web audio".
Web console keyboard shortcuts - Firefox Developer Tools
command windows macos linux open the web console ctrl + shift + k cmd + opt + k ctrl + shift + k search in the message display pane ctrl + f cmd + f ctrl + f open the object inspector pane ctrl + click ctrl + click ctrl + click clear the object inspector pane esc esc esc focus on the command line ctrl + shift + k cmd + opt + k ctrl + shift + k clear output ctrl + shift + l ctrl + l from firefox 67: cmd + k ctrl + shift + l command line interpreter these shortcuts apply when you're in the command line interpreter.
... move to the beginning of the line home ctrl + a ctrl + a move to the end of the line end ctrl + e ctrl + e execute the current expression enter return enter add a new line, for entering multiline expressions shift + enter shift + return shift + enter autocomplete popup these shortcuts apply while the autocomplete popup is open: command windows macos linux choose the current autocomplete suggestion tab tab tab cancel the autocomplete popup esc esc esc move to the previous autocomplete suggestion up arrow up arrow up arrow move to the next autocomplete suggestion down arrow down arrow down arrow page up through autocomplet...
Rich output - Firefox Developer Tools
the right-arrow key opens the details of an object and the left-arrow key closes open objects.
...click on the arrow next to the request and a details panel will open that is equivalent to the headers panel in the network monitor tool.
Web Console remoting - Firefox Developer Tools
veconsoleapi": true|false } getcachedmessages(types, onresponse) the webconsoleclient.getcachedmessages(types, onresponse) method sends the following packet to the server: { "to": "conn0.console9", "type": "getcachedmessages", "messagetypes": [ "pageerror", "consoleapi" ] } the getcachedmessages packet allows one to retrieve the cached messages from before the web console was open.
... private browsing the browser console can be used while the user has private windows open.
AudioBufferSourceNode.loop - Web APIs
when the time specified by the loopend property is reached, playback continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio track and put it into an audiobuffersourcenode.
... you can run the full example live (or view the source.) function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data"...
AudioContext.createMediaStreamDestination() - Web APIs
after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from the blob.
...top recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs, and open it.
Blob - Web APIs
WebAPIBlob
a link to open that object url is created.
... function typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.createelement('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link); result click the link in the example to see the browser decode the object url.
Bluetooth.referringDevice - Web APIs
the bluetooth.referringdevice attribute of the bluetooth interface returns a bluetoothdevice if the current document was opened in response to an instruction sent by this device and null otherwise.
... syntax bluetooth.referringdevice value a bluetoothdevice, if the document was opened in response to an instruction sent by this device and null otherwise.
Bluetooth - Web APIs
WebAPIBluetooth
bluetooth.referringdevice read only returns a reference to the device, if any, from which the user opened the current page.
... for example, an eddystone beacon might advertise a url, which the user agent allows the user to open.
CSSStyleSheet.insertRule() - Web APIs
sheet_proto.insertrule = function(selectorandrule){ // first, separate the selector from the rule a: for (var i=0, len=selectorandrule.length, isescaped=0, newcharcode=0; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 123)) { // 123 = "{".charcodeat(0) // secondly, find the last closing bracket var openbracketpos = i, closebracketpos = -1; for (; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 125)) { // 125 = "}".charcodeat(0) closebracketpos = i; } isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } if (closebracketpos === -1) break...
... /*else*/ return originalinsertrule.call( this, // the sheet to be changed selectorandrule.substring(0, openbracketpos), // the selector selectorandrule.substring(closebracketpos), // the rule arguments[3] // the insert index ); } // works by if the char code is a backslash, then isescaped // gets flipped (xor-ed by 1), and if it is not a backslash // then isescaped gets xored by itself, zeroing it isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } // else, there is no unescaped bracket return originalinsertrule.call(this, selectorandrule, "", arguments[2]); }; } })(cssstylesheet.prototype); specificati...
Cache.add() - Web APIs
WebAPICacheadd
this consists of calling cachestorage.open to create a new cache, then using cache.add to add an asset to it.
... this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); }) ); }); specifications specification status comment service workersthe definition of 'cache: add' in that specification.
Cache.addAll() - Web APIs
WebAPICacheaddAll
this consists of calling cachestorage.open to create a new cache, then using addall() to add a series of assets to it.
... this.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/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'cache: addall' in that specification.
Cache.put() - Web APIs
WebAPICacheput
if not, open the v1 cache using open(), put the default network request in the cache using cache.put() and return a clone of the default network request using return response.clone().
... var response; var cachedresponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); specifications specification status comment service workersthe definition of 'cache: put' in that specification.
CacheStorage.match() - Web APIs
if not, open the v1 cache using open(), put the default network request in the cache using cache.put() and return a clone of the default network request using return response.clone().
...h() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to save clone to put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); } })); }); specifications specification status comment service workersthe definition of 'cachestorage: match' in that specification.
Drawing shapes with canvas - Web APIs
note: when you call fill(), any open shapes are closed automatically, so you don't have to call closepath().
...tx.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.
CustomElementRegistry.define() - Web APIs
// create a class for the element class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create spans var wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span va...
...) { // always call super first in 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...
Document.close() - Web APIs
WebAPIDocumentclose
the document.close() method finishes writing to a document, opened with document.open().
... syntax document.close(); example // open a document to write to it document.open(); // write the content of the document document.write("<p>the one and only content.</p>"); // close the document document.close(); specifications specification status comment html living standardthe definition of 'document.close()' in that specification.
Document.hasFocus() - Web APIs
WebAPIDocumenthasFocus
to test the functionality of hasfocus(), click on the button to open a new window, and try switching between the two pages.
... html <p id="log">awaiting focus check.</p> <button onclick="openwindow()">open a new window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment html living standardthe definition of 'documen...
Document.popupNode - Web APIs
when a popup attached via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on.
...if the popup was opened via the keyboard, the popup node may be set to null.
Element.attachShadow() - Web APIs
this can be one of: open: elements of the shadow root are accessible from javascript outside the root, for example using element.shadowroot: element.shadowroot; // returns a shadowroot obj closed: denies access to the node(s) of a closed shadow root from javascript outside it: element.shadowroot; // returns null delegatesfocus a boolean that, when set to true, specifies behavior ...
... // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.trim().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 e...
Element: auxclick event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onauxclick preventing default actions for the vast majority of browsers that map middle click to opening a link in a new tab, including firefox, it is possible to cancel this behavior by calling preventdefault() from within an auxclick event handler.
... additionally, you may need to avoid opening a system context menu after a right click.
EventTarget.addEventListener() - Web APIs
s usage html <div class="outer"> outer, once & none-once <div class="middle" target="_blank"> middle, capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 460px; } .inner1, .inner2 { border: 1px solid purple; color: purple; width: 400px; } javascript co...
... event.preventdefault(); alert('inner1, passive, open new page'); } function nonepassivehandler(event) { event.preventdefault(); //event.stoppropagation(); alert('inner2, none-passive, default, not open new page'); } result click the outer, middle, inner containers respectively to see how the options work.
FileSystemEntry - Web APIs
for example, if your app is in http://www.html5rocks.com, open filesystem:http://www.html5rocks.com/temporary/ in a tab.
... // opening a file system with temporary storage window.requestfilesystem(temporary, 1024*1024 /*1mb*/, function(fs) { fs.root.getfile('log.txt', {}, function(fileentry) { fileentry.remove(function() { console.log('file removed.'); }, onerror); }, onerror); }, onerror); properties this interface provides the following properties.
Using the Geolocation API - Web APIs
if sucessful, the available hyperlink is populated with an openstreetmap.org url that will show their location.
..."_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${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.geolocat...
Geolocation API - Web APIs
if sucessful, the available hyperlink is populated with an openstreetmap.org url that will show their location.
..."_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${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.geolocat...
HTMLCanvasElement.getContext() - Web APIs
this context is only available on browsers that implement webgl version 1 (opengl es 2.0).
...this context is only available on browsers that implement webgl version 2 (opengl es 3.0).
HTMLDetailsElement - Web APIs
htmldetailselement.open is a boolean reflecting the open html attribute, indicating whether or not the element’s contents (not counting the <summary>) is to be shown to the user.
... toggle fired when the open/closed state of a <details> element is toggled.
HTMLDialogElement: cancel event - Web APIs
the cancel event fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog.
... bubbles no cancelable yes interface event event 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.addeventlistene...
File drag and drop - Web APIs
function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.items) { // use datatransferitemlist interface to access the file(s) for (var i = 0; i < ev.datatransfer.items.length; i++) { // if dropped items aren't files, reject them if (ev.datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('...
... function dragoverhandler(ev) { console.log('file(s) in drop zone'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); } see also html drag and drop api drag operations html5 living standard: drag and drop ...
Ajax navigation example - Web APIs
"&" + sviewkey + "=" + sviewmode : "").slice(1)).replace(rendqstmark, ""); } function getpage (spage) { if (bisloading) { return; } oreq = new xmlhttprequest(); bisloading = true; oreq.onload = ajaxload; oreq.onerror = ajaxerror; if (spage) { opageinfo.url = filterurl(spage, null); } oreq.open("get", filterurl(opageinfo.url, "json"), true); oreq.send(); oloadingbox.parentnode || document.body.appendchild(oloadingbox); } function requestpage (surl) { if (history.pushstate) { bupdateurl = true; getpage(surl); } else { /* ajax navigation is not supported */ location.assign(surl); } } ...
...attachevent("onload", init) : (onload = init); // public methods this.open = requestpage; this.stop = abortreq; this.rebuildlinks = init; })(); for more information, please see: working with the history api.
IDBCursor.request - Web APIs
WebAPIIDBCursorrequest
examples when you open a cursor, the request property is then available on that cursor object, to tell you what request object the cursor originated from.
... for example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition of 'request' in that specif...
IDBCursorSync - Web APIs
not_allowed_err if the underlying index or object store does not support updating the record because it is open in the read_only or snapshot_read mode, or if an index record cannot be changed because the underlying index is auto-populated.
... remove() deletes the record at the cursor's position, without changing the cursor's position void delete ( ) raises (databaseexception); exceptions this method can raise an idbdatabaseexception with the following code: not_allowed_err if the underlying index or object store does not support updating the record because it is open in the read_only or snapshot_read mode.
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the databas...
...this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be // an object that looks like { ['my-store-name'] } console.log(db.objectstorenames); }; specifications specification status comment indexed database api 2.0the definition of 'objectstorenames' in that specification.
IDBDatabase.onabort - Web APIs
}; example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
... dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // 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 }); objectstore.createindex("no...
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variab...
...this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be "4" console.log(db.version); }; specifications specification status comment indexed database api 2.0the definition of 'version' in that specification.
IDBKeyRange.only() - Web APIs
WebAPIIDBKeyRangeonly
we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its optional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } ...
IDBObjectStore.put() - Web APIs
if the record is successfully stored, then a success event is fired on the returned request object with the result set to the key for the stored record, and the transaction set to the transaction in which this object store is opened.
...for a full working example, see our to-do notifications app (view example live.) const title = "walk dog"; // open up a transaction as usual const objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the result const data = objectstoretitlerequest.result; // update the notified...
IDBRequest.error - Web APIs
WebAPIIDBRequesterror
versionerror if you try to open a database with a version lower than the one it already has.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the do-do list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the obj...
IDBRequest.source - Web APIs
WebAPIIDBRequestsource
if no source exists (such as when calling indexeddb.open), it returns null.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified v...
IDBVersionChangeEvent.oldVersion - Web APIs
when the opened database doesn't exist yet, the value of oldversion is 0.
... example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
Browser storage limits and eviction criteria - Web APIs
this will cause storage initialization to fail; for example, open() will fire an error event.
...once the global limit for temporary storage is reached (more on the limit later), we try to find all currently unused origins (i.e., ones with no tabs/apps open that are keeping open datastores).
KeyboardEvent: code values - Web APIs
0084 "intlyen" "intlyen" 0x0085 "osleft" "osleft" 0x0086 "osright" "osright" 0x0087 "contextmenu" "contextmenu" 0x0088 "browserstop" "cancel" 0x0089 "again" "" 0x008a "props" "" 0x008b "undo" "undo" 0x008c "select" "" 0x008d "copy" "copy" 0x008e "open" "" 0x008f "paste" "paste" 0x0090 "find" "" 0x0091 "cut" "cut" 0x0092 "help" "help" 0x0093 "unidentified" "" 0x0094 "launchapp2" "" 0x0095, 0x0096 "unidentified" "" 0x0097 "wakeup" "" 0x0098 "launchapp1" "" 0x0099 ~ 0x00a2 "unidentified" "" ...
...numpadcomma" 0x007a "lang1" 0x007b "lang2" 0x007c "intlyen" 0x007d "metaleft" 0x007e "metaright" 0x007f "contextmenu" 0x0080 "browserstop" 0x0081 "again" 0x0082 "props" 0x0083 "undo" 0x0084 "select" 0x0085 "copy" 0x0086 "open" 0x0087 "paste" 0x0088 "find" 0x0089 "cut" 0x008a "help" 0x008b ~ 0x008d "unidentified" 0x008e "sleep" 0x008f "wakeup" 0x0090 "launchapp1" 0x0091 ~ 0x009b "unidentified" 0x009c "browserfavorites" 0x009d "unidentified" 0x009...
MediaDevices.ondevicechange - Web APIs
gin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div class="left"> <h2>audio devices:</h2> <ul class="devicelist" 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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float...
...the first is in the getusermedia() promise's fulfillment handler, to initially fill out the list when the stream is opened.
MediaSource.addSourceBuffer() - Web APIs
invalidstateerror the mediasource is not in the "open" readystate.
.../ 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(); video.play(); ...
MediaSource.duration - Web APIs
invalidstateerror mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
... their sourcebuffer.updating property is true.) example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); mediasource.duration = 120; video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.endOfStream() - Web APIs
return value undefined exceptions exception explanation invalidstateerror mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
.../ 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(); video.play(); ...
MediaSource.readyState - Web APIs
open: the source is attached to a media element and ready to receive sourcebuffer objects.
...the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.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(); video.play(); ...
MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement ...
...result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement ...
MediaStreamConstraints.video - Web APIs
html content <p>click the start button below to begin the demonstration.</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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getel...
...a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getel...
Using Navigation Timing - Web APIs
html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the result looks like this: the values listed are for the <iframe> in which the sample is presented.
msSaveBlob - Web APIs
this method behaves in the same way as navigator.mssaveoropenblob() except that this disables the file open option.
... notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header, where x-download-options removes the file open button from the browser file download dialog: content-length: <blob.size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> x-download-options: noopen specifications not part of any specifications.
OffscreenCanvas.getContext() - Web APIs
this context is only available on browsers that implement webgl version 1 (opengl es 2.0).
...this context is only available on browsers that implement webgl version 2 (opengl es 3.0).
performance.now() - Web APIs
WebAPIPerformancenow
starting with firefox 79, high resolution timers can be used if you cross-origin isolate your document using the cross-origin-opener-policy and cross-origin-embedder-policy headers: cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp these headers ensure a top-level document does not share a browsing context group with cross-origin documents.
... coop process-isolates your document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
PerformanceTiming.connectEnd - Web APIs
the legacy performancetiming.connectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the connection is opened network.
...a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated.
RTCDataChannel.readyState - Web APIs
"open" the underlying data transport has been established and data can be transferred bidirectionally across it.
... example var datachannel = peerconnection.createdatachannel("file transfer"); var sendqueue = []; function sendmessage(msg) { switch(datachannel.readystate) { case "connecting": console.log("connection not open; queueing: " + msg); sendqueue.push(msg); break; case "open": sendqueue.foreach((msg) => datachannel.send(msg)); break; case "closing": console.log("attempted to send message while closing: " + msg); break; case "closed": console.log("error!
RTCIceCandidate.protocol - Web APIs
example this code snippet examines the value of protocol to decide if it should look at the value of tcptype to see if it's a simultaneous-open (s-o) candidate.
... if (candidate.protocol == "tcp") { if (candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.protocol' in that specification.
RTCPeerConnection.addTrack() - Web APIs
here's an example showing a function that uses getusermedia() to obtain a stream from a user's camera and microphone, then adds each track from the stream to the peer connection, without specifying a stream for each track: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track); } } the result is a set of tracks being sent to the remote peer, with no stream associations.
... for example, consider this function that an application might use to begin streaming a device's camera and microphone input over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.srcobject = stream; this sets the video element's current ...
RTCPeerConnection.createDataChannel() - Web APIs
examples this example shows how to create a data channel and set up handlers for the open and message events to send and receive messages on it (for brievity, the example assumes onnegotiationneeded is set up).
... // offerer side var pc = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat"); channel.onopen = function(event) { channel.send('hi you!'); } channel.onmessage = function(event) { console.log(event.data); } // answerer side var pc = new rtcpeerconnection(options); pc.ondatachannel = function(event) { var channel = event.channel;  channel.onopen = function(event) { channel.send('hi back!'); } channel.onmessage = function(event) { console.log(event.data); } } alternatively, more symmetrical out-of-band negotiation can be used, using an agreed-upon id (0 here): // both sides var pc = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat", {negotiated: true, id: 0}); channel.onopen = function(event) { channel.send('hi!'); } ...
RTCPeerConnection: datachannel event - Web APIs
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.
... this same code can also instead use the rtcpeerconnection interface's ondatachannel event handler property, like this: pc.ondatachannel = ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'datachannel' in that specification.
SVGAElement.target - Web APIs
the svgaelement.target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.
... syntax mylink.target = 'value'; value an svganimatedstring indicating the ending resource target that opens the document when the link is activated.
ServiceWorkerGlobalScope: notificationclick event - Web APIs
cancelable no interface notificationevent event handler onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick eve...
...nt handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
ShadowRoot - Web APIs
you can retrieve a reference to an element's shadow root using its element.shadowroot property, provided it was created using element.attachshadow() with the mode option set to open.
... shadowroot.mode read only the mode of the shadowroot — either open or closed.
SourceBuffer.abort() - Web APIs
exceptions exception explanation invalidstateerror the mediasource.readystate property of the parent media source is not equal to open, or this sourcebuffer has been removed from the mediasource.
...in lines 92-101, the seek() function is defined — note that abort() is called if mediasource.readystate is set to open, which means that it is ready to receive new source buffers — at this point it is worth aborting the current segment and just getting the one for the new seek position (see checkbuffer() and getcurrentsegment().) specifications specification status comment media source extensionsthe definition of 'abort()' in that specification.
SourceBuffer - Web APIs
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(); video.play(); ...
... //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); } function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); } specifications specification status comment media source extensionsthe definition of 'sourcebuffer' in that specification.
URLSearchParams.set() - Web APIs
line #44: tries to automatically open a new window/tab with the generated url (when uncommented).
...ars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specification status comment urlthe definition of 'set()' in that specification.
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
opengl es 3.0the definition of 'gldrawbuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.beginQuery() - Web APIs
opengl es 3.0the definition of 'glbeginquery' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.beginTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glbegintransformfeedback' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.bindBufferBase() - Web APIs
opengl es 3.0the definition of 'glbindbufferbase' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.bindBufferRange() - Web APIs
opengl es 3.0the definition of 'glbindbufferrange' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.bindSampler() - Web APIs
opengl es 3.0the definition of 'glbindsampler' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glbindtransformfeedback' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.bindVertexArray() - Web APIs
opengl es 3.0the definition of 'glbindvertexarray' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.blitFramebuffer() - Web APIs
opengl es 3.0the definition of 'glblitframebuffer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
opengl es 3.0the definition of 'glclearbuffer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.clientWaitSync() - Web APIs
opengl es 3.0the definition of 'glclientwaitsync' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
opengl es 3.0the definition of 'glcompressedtexsubimage3d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGL2RenderingContext.copyBufferSubData() - Web APIs
opengl es 3.0the definition of 'glcopybuffersubdata' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
opengl es 3.0the definition of 'glcopytexsubimage3d' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.createQuery() - Web APIs
opengl es 3.0the definition of 'glgenqueries' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.createSampler() - Web APIs
opengl es 3.0the definition of 'glgensamplers' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.createTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glgentransformfeedbacks' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.createVertexArray() - Web APIs
opengl es 3.0the definition of 'glgenvertexarrays' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.deleteQuery() - Web APIs
opengl es 3.0the definition of 'gldeletequeries' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.deleteSampler() - Web APIs
opengl es 3.0the definition of 'gldeletesamplers' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.deleteSync() - Web APIs
opengl es 3.0the definition of 'gldeletesync' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
opengl es 3.0the definition of 'gldeletetransformfeedbacks' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.deleteVertexArray() - Web APIs
opengl es 3.0the definition of 'gldeletevertexarrays' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.drawArraysInstanced() - Web APIs
opengl es 3.0the definition of 'gldrawarraysinstanced' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.drawBuffers() - Web APIs
opengl es 3.0the definition of 'gldrawbuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
opengl es 3.0the definition of 'gldrawelementsinstanced' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.drawRangeElements() - Web APIs
opengl es 3.0the definition of 'gldrawrangeelements' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.endQuery() - Web APIs
opengl es 3.0the definition of 'glendquery' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.endTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glendtransformfeedback' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.fenceSync() - Web APIs
opengl es 3.0the definition of 'glfencesync' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
opengl es 3.0the definition of 'glframebuffertexturelayer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
opengl es 3.0the definition of 'glgetactiveuniformblockname' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
opengl es 3.0the definition of 'glgetactiveuniformblockiv' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getActiveUniforms() - Web APIs
opengl es 3.0the definition of 'glgetactiveuniformsiv' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getFragDataLocation() - Web APIs
opengl es 3.0the definition of 'glgetfragdatalocation' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getIndexedParameter() - Web APIs
opengl es 3.0the definition of 'glget' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
opengl es 3.0the definition of 'glgetinternalformativ' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getQuery() - Web APIs
opengl es 3.0the definition of 'glgetqueryiv' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getQueryParameter() - Web APIs
opengl es 3.0the definition of 'glgetqueryobjectuiv' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getSamplerParameter() - Web APIs
opengl es 3.0the definition of 'glgetsamplerparameter' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getSyncParameter() - Web APIs
opengl es 3.0the definition of 'glgetsynciv' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
opengl es 3.0the definition of 'glgettransformfeedbackvarying' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
opengl es 3.0the definition of 'glgetuniformblockindex' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.getUniformIndices() - Web APIs
opengl es 3.0the definition of 'glgetuniformindices' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
opengl es 3.0the definition of 'glinvalidateframebuffer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
opengl es 3.0the definition of 'glinvalidatesubframebuffer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.isQuery() - Web APIs
opengl es 3.0the definition of 'glisquery' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.isSampler() - Web APIs
opengl es 3.0the definition of 'glissampler' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.isSync() - Web APIs
opengl es 3.0the definition of 'glissync' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.isTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glistransformfeedback' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.isVertexArray() - Web APIs
opengl es 3.0the definition of 'glisvertexarray' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glpausetransformfeedback' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.readBuffer() - Web APIs
opengl es 3.0the definition of 'glreadbuffer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
opengl es 3.0the definition of 'glrenderbufferstoragemultisample' in that specification.
... standard man page of the (similar) opengl es 3 api.
WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glresumetransformfeedback' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.texImage3D() - Web APIs
opengl es 3.0the definition of 'glteximage3d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGL2RenderingContext.texStorage3D() - Web APIs
opengl es 3.0the definition of 'gltexstorage3d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGL2RenderingContext.texSubImage3D() - Web APIs
opengl es 3.0the definition of 'gltexsubimage2d' in that specification.
... standard man page of the (similar) opengl es 3.0 api.
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
opengl es 3.0the definition of 'gltransformfeedbackvaryings' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
opengl es 3.0the definition of 'gluniform' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.uniformBlockBinding() - Web APIs
opengl es 3.0the definition of 'gluniformblockbinding' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
opengl es 3.0the definition of 'gluniformmatrix' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.vertexAttribDivisor() - Web APIs
opengl es 3.0the definition of 'glvertexattribdivisor' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.vertexAttribI4[u]i[v]() - Web APIs
opengl es 3.0the definition of 'glvertexattribi' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
opengl es 3.0the definition of 'glvertexattribpointer' in that specification.
... standard man page of the (similar) opengl api.
WebGL2RenderingContext.waitSync() - Web APIs
opengl es 3.0the definition of 'glwaitsync' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.activeTexture() - Web APIs
opengl es 2.0the definition of 'glactivetexture' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.attachShader() - Web APIs
opengl es 2.0the definition of 'glattachshader' in that specification.
... standard opengl man page.
WebGLRenderingContext.bindAttribLocation() - Web APIs
opengl es 2.0the definition of 'glbindattriblocation' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.bindRenderbuffer() - Web APIs
opengl es 2.0the definition of 'glbindrenderbuffer' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.blendColor() - Web APIs
opengl es 2.0the definition of 'glblendcolor' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.blendFunc() - Web APIs
opengl es 2.0the definition of 'glblendfunc' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
opengl es 2.0the definition of 'glblendfunc' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.clear() - Web APIs
opengl es 2.0the definition of 'glclear' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.clearColor() - Web APIs
opengl es 2.0the definition of 'glclearcolor' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.clearDepth() - Web APIs
opengl es 2.0the definition of 'glcleardepthf' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.clearStencil() - Web APIs
opengl es 2.0the definition of 'glclearstencil' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.colorMask() - Web APIs
opengl es 2.0the definition of 'glcolormask' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.compileShader() - Web APIs
opengl es 2.0the definition of 'glcompileshader' in that specification.
... standard opengl man page.
WebGLRenderingContext.copyTexImage2D() - Web APIs
opengl es 2.0the definition of 'glcopyteximage2d' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.copyTexSubImage2D() - Web APIs
opengl es 2.0the definition of 'glcopytexsubimage2d' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.createBuffer() - Web APIs
opengl es 2.0the definition of 'glgenbuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.createFramebuffer() - Web APIs
opengl es 2.0the definition of 'glgenframebuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.createProgram() - Web APIs
opengl es 2.0the definition of 'glcreateprogram' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.createRenderbuffer() - Web APIs
opengl es 2.0the definition of 'glgenrenderbuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.createShader() - Web APIs
opengl es 2.0the definition of 'glcreateshader' in that specification.
... standard opengl man page.
WebGLRenderingContext.createTexture() - Web APIs
opengl es 2.0the definition of 'glgentextures' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.cullFace() - Web APIs
opengl es 2.0the definition of 'glcullface' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.deleteBuffer() - Web APIs
opengl es 2.0the definition of 'gldeletebuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.deleteFramebuffer() - Web APIs
opengl es 2.0the definition of 'gldeleteframebuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.deleteProgram() - Web APIs
opengl es 2.0the definition of 'gldeleteprogram' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.deleteRenderbuffer() - Web APIs
opengl es 2.0the definition of 'gldeleterenderbuffers' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.deleteShader() - Web APIs
opengl es 2.0the definition of 'gldeleteshader' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.deleteTexture() - Web APIs
opengl es 2.0the definition of 'gldeletetextures' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.depthFunc() - Web APIs
opengl es 2.0the definition of 'gldepthfunc' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.depthMask() - Web APIs
opengl es 2.0the definition of 'gldepthmask' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.detachShader() - Web APIs
opengl es 2.0the definition of 'gldetachshader' in that specification.
... standard opengl man page.
WebGLRenderingContext.disableVertexAttribArray() - Web APIs
opengl es 2.0the definition of 'gldisablevertexattribarray' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.drawArrays() - Web APIs
opengl es 2.0the definition of 'gldrawarrays' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.drawElements() - Web APIs
opengl es 2.0the definition of 'gldrawelements' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
opengl es 2.0the definition of 'glenablevertexattribarray' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.finish() - Web APIs
opengl es 2.0the definition of 'glfinish' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.flush() - Web APIs
opengl es 2.0the definition of 'glflush' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.frontFace() - Web APIs
opengl es 2.0the definition of 'glfrontface' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getActiveAttrib() - Web APIs
opengl es 2.0the definition of 'glgetactiveattrib' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getActiveUniform() - Web APIs
opengl es 2.0the definition of 'glgetactiveuniform' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getAttachedShaders() - Web APIs
opengl es 2.0the definition of 'glgetattachedshaders' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.getAttribLocation() - Web APIs
opengl es 2.0the definition of 'glgetattriblocation' in that specification.
... standard main page of the opengl api.
WebGLRenderingContext.getError() - Web APIs
opengl es 2.0the definition of 'glgeterror' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getParameter() - Web APIs
opengl es 2.0the definition of 'glget' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.getProgramInfoLog() - Web APIs
opengl es 2.0the definition of 'glgetprograminfolog' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getProgramParameter() - Web APIs
opengl es 2.0the definition of 'glgetprogramiv' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
opengl es 2.0the definition of 'glgetshaderinfolog' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getShaderParameter() - Web APIs
opengl es 2.0the definition of 'glgetshaderiv' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
opengl es 2.0the definition of 'glgetshaderprecisionformat' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.getShaderSource() - Web APIs
opengl es 2.0the definition of 'glgetshadersource' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.getUniformLocation() - Web APIs
opengl es 2.0the definition of 'glgetuniformlocation' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.getVertexAttribOffset() - Web APIs
opengl es 2.0the definition of 'glgetvertexattribpointerv' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.hint() - Web APIs
opengl es 2.0the definition of 'glhint' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.isBuffer() - Web APIs
opengl es 2.0the definition of 'glisbuffer' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.isFramebuffer() - Web APIs
opengl es 2.0the definition of 'glisframebuffer' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.isProgram() - Web APIs
opengl es 2.0the definition of 'glisprogram' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.isRenderbuffer() - Web APIs
opengl es 2.0the definition of 'glisrenderbuffer' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.isShader() - Web APIs
opengl es 2.0the definition of 'glisshader' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.isTexture() - Web APIs
opengl es 2.0the definition of 'glistexture' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.linkProgram() - Web APIs
opengl es 2.0the definition of 'gllinkprogram' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.polygonOffset() - Web APIs
opengl es 2.0the definition of 'glpolygonoffset' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.readPixels() - Web APIs
opengl es 2.0the definition of 'glreadpixels' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.sampleCoverage() - Web APIs
opengl es 2.0the definition of 'glsamplecoverage' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.scissor() - Web APIs
opengl es 2.0the definition of 'glscissor' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.shaderSource() - Web APIs
opengl es 2.0the definition of 'glshadersource' in that specification.
... standard man page of the (similar) opengl api.
WebGLRenderingContext.stencilFunc() - Web APIs
opengl es 2.0the definition of 'glstencilfunc' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
opengl es 2.0the definition of 'glstencilfuncseparate' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.stencilMask() - Web APIs
opengl es 2.0the definition of 'glstencilmask' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
opengl es 2.0the definition of 'glstencilmaskseparate' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.stencilOp() - Web APIs
opengl es 2.0the definition of 'glstencilop' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
opengl es 2.0the definition of 'glstencilopseparate' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
opengl es 2.0the definition of 'gluniform' in that specification.
... standard main page of the opengl api.
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
opengl es 2.0the definition of 'gluniform' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.useProgram() - Web APIs
opengl es 2.0the definition of 'gluseprogram' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.validateProgram() - Web APIs
opengl es 2.0the definition of 'glvalidateprogram' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
opengl es 2.0the definition of 'glvertexattrib' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
opengl es 2.0the definition of 'glvertexattribpointer' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext.viewport() - Web APIs
opengl es 2.0the definition of 'glviewport' in that specification.
... standard man page of the opengl api.
WebGLRenderingContext - Web APIs
the webglrenderingcontext interface provides an interface to the opengl es 2.0 graphics rendering context for the drawing surface of an html <canvas> element.
... if you require a webgl 2.0 context, see webgl2renderingcontext; this supplies access to an implementation of opengl es 3.0 graphics.
Adding 2D content to a WebGL context - Web APIs
the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors.
... view the complete code | open this demo on a new page matrix utility operations matrix operations might seem complicated but they are actually pretty simple if you take them one step at a time.
Getting started with WebGL - Web APIs
next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an html canvas in browsers that support it without the use of plug-ins.
... view the complete code | open this demo on a new page ...
WebRTC connectivity - Web APIs
tcp candidate types tcp candidates (that is, candidates whose protocol is tcp) can be of these types: active the transport will try to open an outbound connection but won't receive incoming connection requests.
... so the transport will try to simultaneously open a connection with its peer.
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.
... traversal using relays around nat (turn) is meant to bypass the symmetric nat restriction by opening a connection with a turn server and relaying all information through that server.
WebSocket.send() - Web APIs
WebAPIWebSocketsend
exceptions thrown invalid_state_err the connection is not currently open.
... note: gecko's implementation of the send() method differs somewhat from the specification in gecko 6.0; gecko returns a boolean indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in gecko 8.0.
Web Video Text Tracks Format (WebVTT) - Web APIs
example 12 - karaoke style text 1 00:16.500 --> 00:18.500 when the moon <00:17.500>hits your eye 1 00:00:18.500 --> 00:00:20.500 like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie 1 00:00:20.500 --> 00:00:21.500 that's <00:00:21.000>amore the following tags are the html tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).
...steps are given below: open a notepad.
Inputs and input sources - Web APIs
for example, a button might open an options menu used to configure the application.
... while that menu is open, inputs that would otherwise control the avatar might be instead applied to controlling the menu's interface.
Example and tutorial: Simple synth keyboard - Web APIs
tion 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; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-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; padding: 0 6px 0 0; } .settingsbar { padding-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; } .right span { vertical-align: middle; } .right input { vertical-...
Using the Web Storage API - Web APIs
the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
... localstorage does the same thing, but persists even when the browser is closed and reopened.
Web Storage API - Web APIs
web storage concepts and usage the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
... localstorage does the same thing, but persists even when the browser is closed and reopened.
Obsolete features - Web APIs
this page lists the obsolete windowfeatures parameter of window.open function.
... mozilla and firefox users can force new windows to always render the personal toolbar/bookmarks toolbar by setting dom.disable_window_open_feature.personalbar to true in about:config or in their user.js file.
Window.print() - Web APIs
WebAPIWindowprint
opens the print dialog to print the current document.
... in most browsers, this method will block while the print dialog is open.
Window.window - Web APIs
WebAPIWindowwindow
another reason, is that without this property you wouldn't be able to write, for example, "window.open('http://google.com/')".
... you'd have to use "open('http://google.com/')" instead.
XDomainRequest.send() - Web APIs
sends an xdomainrequest which has previously been opened calling xdomainrequest.open().
... example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest - Web APIs
methods xdomainrequest.open() opens the request, specifing the method (get/post) and url.
... example if(window.xdomainrequest){ var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.onprogress = function () { //progress }; xdr.ontimeout = function () { //timeout }; xdr.onerror = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout...
XMLHttpRequest.response - Web APIs
you may attempt to request the data be provided in a specific format by setting the value of responsetype after calling open() to initialize the request but before calling send() to send the request to the server.
... var url = 'somepage.html'; //a local page function load(url, callback) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate === 4) { callback(xhr.response); } } xhr.open('get', url, true); xhr.send(''); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.send() - Web APIs
example: get var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); xhr.onload = function () { // request finished.
...}; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/server', true); //send the proper header information along with the request xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { // call a function when the state changes.
XMLHttpRequest.statusText - Web APIs
if the request's readystate is in unsent or opened state, the value of statustext will be an empty string.
... example var xhr = new xmlhttprequest(); console.log('0 unsent', xhr.statustext); xhr.open('get', '/server', true); console.log('1 opened', xhr.statustext); xhr.onprogress = function () { console.log('3 loading', xhr.statustext); }; xhr.onload = function () { console.log('4 done', xhr.statustext); }; xhr.send(null); /** * outputs the following: * * 0 unsent * 1 opened * 3 loading ok * 4 done ok */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.timeout - Web APIs
using a timeout with an asynchronous request in internet explorer, the timeout property may be set only after calling the open() method and before calling the send() method.
... example var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); xhr.timeout = 2000; // time in milliseconds xhr.onload = function () { // request finished.
Web Accessibility: Understanding Colors and Luminance - Accessibility
the "l" in the hsl color space is sometimes referred to as "luminosity," other times as "lightness." even something seemingly simple like naming common colors can be open to debate.
... newer technologies, such as opengl and direct3d incorporate support for the srgb gamma curve, although some articles for opengl reference use of rgba rather than srgb.
:target - CSS: Cascading Style Sheets
WebCSS:target
html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <div class="lightbox" id="example1"> <figure> <a href="#" class="close"></a> <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... quisque quis 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; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .cl...
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
l(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); values <url> [ format( <string># ) ]?
...| local( <family-name> ) ]#where <family-name> = <string> | <custom-ident>+ examples specifying font resources using url() and local() @font-face { font-family: examplefont; src: local(example font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype"); } specifications specification status comment css fonts module level 3the definition of 'src' in that specification.
Syntax - CSS: Cascading Style Sheets
WebCSSSyntax
css declaration blocks declarations are grouped in blocks, that is in a structure delimited by an opening brace, '{' (u+007b left curly bracket), and a closing one, '}' (u+007d right curly bracket).
... blocks sometimes can be nested, so opening and closing braces must be matched.
Viewport concepts - CSS: Cascading Style Sheets
what if a dynamic keyboard pops open on a phone?
...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.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
menulist-button div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened.
... treetwistyopen firefox removed in firefox 64.
font-stretch - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths.
... html <div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-s...
font-weight - CSS: Cascading Style Sheets
bolder lighter 100 400 100 200 400 100 300 400 100 400 700 100 500 700 100 600 900 400 700 900 400 800 900 700 900 900 700 common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names (see the opentype specification): value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal (regular) 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) 950 extra black (ultra black) variabl...
... for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths.
hanging-punctuation - CSS: Cascading Style Sheets
first an opening bracket or quote at the start of the first formatted line of an element hangs.
... formal definition initial valuenoneapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ first | [ force-end | allow-end ] | last ] examples setting opening and closing quotes to hang html <p>“lorem ipsum dolor sit amet, consectetur adipiscing elit.
list-style-type - CSS: Cascading Style Sheets
一萬一千一百一十一 upper-armenian * example disclosure-open symbol indicating that a disclosure widget such as <details> is opened.
... defines using @counter-style the usual style types: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open and disclosure-closed.
max-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max-block-size with horizontal and vertical text in this example, the same text (the opening sentences from herman melville's novel moby-dick) is presented in both the horizontal-tb and vertical-rl writing modes.
... .standard-box { padding: 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.
Developer guides
the web open font format (woff) woff (web open font format) is a font file format that is free for anyone to use on the web.
...this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnextid
imagine the web author opens the document for further editing.
...when opening the document, the next editor finds and reads this <nextid n="z8"> tag, and now knows to give the first of these new sections the name of z8 in the table of contents, and z14 to the content body.
<noembed>: The Embed Fallback element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnoembed
this element was deprecated in html 4.01 and above in favor of placing fallback content between the opening and closing tags of an <object> element.
...use <object> instead, with fallback content between the opening and closing tags of the element.
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding:4px 6px; } while we add a font property to the <table> element here to set a more visually-appealing typeface (or an an abominable sans-serif typeface, depending on your personal opinion), the interesting part is the second style here, where we style <tr>...
... the table and base styles table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; border-spacing: 0; border-collapse: collapse; } here we've added the border-spacing and border-collapse properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders.
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element.
... <!-- using multiple sources as fallbacks for a video tag --> <!-- 'elephants dream' by orange open movie project studio, licensed under cc-3.0, hosted by archive.org --> <!-- poster hosted by wikimedia --> <video width="620" controls poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/elephants_dream_s5_both.jpg" > <source src="https://archive.org/download/elephantsdream/ed_1024_512kb.mp4" type="video/mp4"> <source src="https://archive.org/download/elephantsdream/ed_h...
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
text content use html text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags.
... element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
contextmenu - HTML: Hypertext Markup Language
he "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
... i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
Reason: CORS request not HTTP - HTTP
local file security in firefox 68 when a user opened a page using a file:/// uri in firefox 67 and earlier, the origin of the page was defined as the directory from which the page was opened.
... in response to cve-2019-11730, firefox 68 and later define the origin of a page opened using a file:/// uri as unique.
CORS errors - HTTP
WebHTTPCORSErrors
these steps may help you do so: navigate to the web site or web app in question and open the developer tools.
... the reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.
Connection - HTTP
the connection general header controls whether or not the network connection stays open after the current transaction finishes.
... any comma-separated list of http headers [usually keep-alive only] indicates that the client would like to keep the connection open.
Index - HTTP
WebHTTPHeadersIndex
21 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes.
...there are three main cases this header is used: 97 sec-websocket-accept draft, http, needscompattable, needscontent, reference, sec-websocket-accept, websockets, header the sec-websocket-accept header is used in the websocket opening handshake.
HTTP Messages - HTTP
WebHTTPMessages
in http/1.1, and earlier versions of the protocol, these messages were openly sent across the connection.
...several connections need opening on the same server: and warm tcp connections are more efficient than cold ones.
Proxy Auto-Configuration (PAC) file - HTTP
open-sourcing netscape eventually lead to firefox itself.
...these utilities are found in many other open-source systems including chromium.
Proxy servers and tunneling - HTTP
there are likely hundreds of thousands of open forward proxies on the internet.
...it starts two-way communications with the requested resource and can be used to open a tunnel.
try...catch - JavaScript
the code opens a file and then executes statements that use the file; the finally-block makes sure the file always closes after it is used even if an exception was thrown.
... openmyfile(); try { // tie up a resource writemyfile(thedata); } finally { closemyfile(); // always close the resource } examples nested try-blocks first, let's see what happens with this: try { try { throw new error('oops'); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "finally" // "outer" "oops" now, if we already caught the exception in the inner try-block by adding a catch-block try { try { throw new error('oops'); } catch (ex) { console.error('inner', ex.message); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "inner" "oops" // "finally" and now, let's rethrow the error.
JavaScript shells - JavaScript
es6console.com - an open-source javascript console to test ecmascript 2015 code inside the browser.
... jsconsole.com -- an open-source javascript console with the ability to easily link to particular expressions javascript shell (web page) - also available as part of the extension developer's extension jash: javascript shell - a dhtml based shell that gives you command line access to a web page.
MathML attribute reference - MathML
lquote <ms> the opening quote character (depends on dir) to enclose the content.
... open <mfenced> a string for the opening delimiter.
<semantics> - MathML
content mathml or openmath.
..."mathml-content", "mathml-presentation", "application/openmath+xml", "image/png") cd the content dictionary that contains the annotation key symbol.
Web media technologies
guides overview of media technology on the web a general look at the open web technologies and apis that provide support for audio and video playback, manipulation, and recording.
... webgl webgl provides an opengl es compatible api on top of the existing canvas api, making it possible to do powerful 3d graphics on the web.
Animation performance and frame rate - Web Performance
there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the performance tool, and make a recording.
... open up the first recording.
Performance fundamentals - Web Performance
in the context of open web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
...developers draw to canvases using either a familiar 2d drawing api, or webgl, a "close to the metal" binding that mostly follows opengl es 2.0.
Add to Home screen - Progressive web apps (PWAs)
tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser ui around it.
...when you open the app, it will appear in its own window: if the user selects cancel, the state of the app goes back to how it was before the button was clicked.
Progressive web app structure - Progressive web apps (PWAs)
r gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); last of all, the service worker fetches content from the cache if it is available there, providing offline functionality: self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) {...
... console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); the javascript data the games data is present in the data folder in a form of a javascript object (games.js): var games = [ { slug: 'lost-in-cyberspace', name: 'lost in cyberspace', author: 'zosia and bartek', twitter: 'bartaz', website: '', github: 'github.com/bartaz/lost-in-cyberspace' }, { slug: 'vernissage', name: 'vernissage', ...
Introduction to progressive web apps - Progressive web apps (PWAs)
some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like open graph, which provides a format for specifying similar metadata in the html <head> block using <meta> tags.
... installability a core part of the web app experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.
The building blocks of responsive design - Progressive web apps (PWAs)
narrow screen/mobile layout we then have a narrow screen layout, designed to fit the bill for a mobile app/open web app experience.
...we opened up the brick.js file and wrapped the whole lot in the following: if (window.matchmedia("(max-width: 480px)").matches) { // the whole of brick.js goes here!
Structural overview of progressive web apps - Progressive web apps (PWAs)
self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); with that done, we implement the service worker's fetch event handler; its job is to return the contents of the specified file, either from the cache or by loading it over the network (caching it upon doing so): self.addeventlist...
...ener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); auxiliary javascript file: games.js the games data for this app example is provided in a javascript source file called games.js.
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozil...
...la.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
Getting started - SVG: Scalable Vector Graphics
then open the file in firefox.
...if your server is not configured to send the correct headers with the svg files it serves, then firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.
Tools for SVG - SVG: Scalable Vector Graphics
inkscape offers state-of-the-art vector drawing, and it's open source.
... apache batik url: xmlgraphics.apache.org/batik/ batik is a set of open source tools under the roof of the apache software foundation.
Web security
ensuring that your website or open web application is secure is critical.
... certificate transparency certificate transparency is an open framework designed to protect against and monitor for certificate misissuances.
Using custom elements - Web Components
// create a shadow root this.attachshadow({mode: 'open'}); // sets and returns 'this.shadowroot' // create (nested) span elements const wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); const icon = wrapper.appendchild(document.createelement('span')); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); // insert icon from defined attribute or default icon const img = icon.appendchild(document.createe...
...the custom element looks like this: <custom-square l="100" c="red"></custom-square> the class constructor is really simple — here we attach a shadow dom to the 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.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0764543814 michael kay is a member of the w3c xsl working group and the developer of his own open-source xslt processor, saxon.
...von xsl programmers: http://www.zvon.org/o_html/group_xsl.html jeni's xslt pages index: http://www.jenitennison.com/xslt/ xmlpitstop.com stylesheet center: http://www.xmlpitstop.com/default.asp?datatype=ssc xsl tutorial index: http://www.nwalsh.com/docs/tutorials/xsl/ other cover pages extensible stylesheet language (xsl): http://www.oasis-open.org/cover/xsl.html xsl-list subscribe: http://www.mulberrytech.com/xsl/xsl-list/ archives: http://www.biglist.com/lists/xsl-list/archives/ the xsl-list is a very active general mailing list, hosted by mulberry technologies mozilla.dev.tech.xslt google groups: http://groups.google.com/group/mozilla.dev.tech.xslt this is a newsgroup that discusses nets...
Web technology for developers
the open web presents incredible opportunities for developers.
... accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology referencexml: extensible markup languagexpathxslt: ex...
Loading and running WebAssembly code - WebAssembly
again, assuming our module is called simple.wasm: create a new xmlhttprequest() instance, and use its open() method to open a request, setting the request method to get, and declaring the path to the file we want to fetch.
... the final code looks like this: request = new xmlhttprequest(); request.open('get', 'simple.wasm'); request.responsetype = 'arraybuffer'; request.send(); request.onload = function() { var bytes = request.response; webassembly.instantiate(bytes, importobject).then(results => { results.instance.exports.exported_func(); }); }; note: you can see an example of this in action in xhr-wasm.html.
Navigator.mozNotification - Archive of obsolete content
permissions when using notifications in an open web app, be sure to add the desktop-notification permission in your manifest file: "permissions": { "desktop-notification": {} } usage notes in firefox 22+, the instantiation of a new notification should be done with the notification object by calling new notification(title, options).
Communicating With Other Scripts - Archive of obsolete content
e a page-mod that will attach "content-script.js" to the target web page, and will then load the target web page: var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event cont...
Cross-domain Content Scripts - Archive of obsolete content
<!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("get", url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary = getsummary(jsonresponse); var element = document.getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstperiods.period[0].paragraph[0].$; } finally, we nee...
self - Archive of obsolete content
if you do this, the data is available to the content script in the options property of self: // main.js const tabs = require("sdk/tabs"); tabs.open({ url: "./page.html", onready: function(tab) { tab.attach({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); // content-script.js alert(self.options.a); port you can use port to receive messages from, and send messages to, the main add-on code.
Communicating using "port" - Archive of obsolete content
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(): emit a message.
SDK and XUL Comparison - Archive of obsolete content
security if they're not carefully designed, firefox add-ons can open the browser to attack by malicious web pages.
Guides - Archive of obsolete content
contributor's guide getting started learn how to contribute to the sdk: getting the code, opening/taking a bug, filing a patch, getting reviews, and getting help.
addon-page - Archive of obsolete content
after this, the page loaded from "data/index.html" will not contain navigational elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
core/promise - Archive of obsolete content
lets see the implementation of readasync that we used in several of the examples above: const { defer } = require('sdk/core/promise'); function readasync(url) { var deferred = defer(); let xhr = new xmlhttprequest(); xhr.open("get", url, true); xhr.onload = function() { deferred.resolve(xhr.responsetext); }; xhr.onerror = function(event) { deferred.reject(event); }; xhr.send(); return deferred.promise; } so defer returns an object that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise.
event/core - Archive of obsolete content
for example, the tabs module emits an open event when a new tab is opened.
net/xhr - Archive of obsolete content
this can probably be done most securely by white-listing the protocols that can be used in the url passed to the open() method, and limiting them to http:, https:, and possibly a special scheme that can be used to access the add-on's packaged, read-only resources.
places/favicon - Archive of obsolete content
let { getfavicon } = require("sdk/places/favicon"); // string example getfavicon("http://mozilla.org").then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); // tab example require("sdk/tabs").open({ url: "http://mozilla.org", onready: function (tab) { getfavicon(tab).then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); } }); // an optional callback can be provided to handle // the promise's resolve and reject states getfavicon("http://mozilla.org", function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/...
remote/child - Archive of obsolete content
events attach triggered when a new content frame is opened (for example, the user opened a new tab).
ui/toolbar - Archive of obsolete content
note that since there is only one toolbar for the whole browser, opening another browser window does not cause this event to be emitted again.
cfx to jpm - Archive of obsolete content
activation you need to call cfx activate before you can use cfx, and this only works in the current command shell: if you open a new shell you have to call activate again.
Add a Context Menu Item - Archive of obsolete content
pressing the key selects the option when the context menu is open: 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);' + '});', accesskey: "l", onmessage: function (selectiontext) ...
Implementing the widget - Archive of obsolete content
main.js now in the lib directory open main.js and add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), con...
Overview - Archive of obsolete content
working with the dom we'll use two page-mods to interact with the doms of pages that the user has opened.
Logging - Archive of obsolete content
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!
Localization - Archive of obsolete content
once you've installed it, open the add-on manager, and you'll see a new button labeled "update l10n" next to each add-on you've installed: click the button and you'll be prompted for a new .properties file for that add-on.
Add-on SDK - Archive of obsolete content
interact with the browser open web pages, listen for pages loading and list open pages.
Alerts and Notifications - Archive of obsolete content
e error on platforms that don't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-watcher;1'] .getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, 'chrome://global/content/alerts/alert.xul', '_blank', 'chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly).
HTML to DOM - Archive of obsolete content
for that matter, we're going to load our html document first: var request = xmlhttprequest(); request.open("get", "http://example.org/file.html", false); request.send(null); our next step is to create the document object that will represent the dom into which we'll insert our newly-retrieved html: var doc = document.implementation.createhtmldocument("example"); doc.documentelement.innerhtml = request.responsetext; after this any manipulation that we might want to do will be something as simple as...
Miscellaneous - Archive of obsolete content
,c'); } }, addcertificate: function(certname, certtrust) { var certdb = cc["@mozilla.org/security/x509certdb;1"].getservice(ci.nsix509certdb2); var scriptablestream=cc["@mozilla.org/scriptableinputstream;1"].getservice(ci.nsiscriptableinputstream); var channel = gioservice.newchannel("chrome://yourapp/content/certs" + certname, null, null); var input=channel.open(); scriptablestream.init(input); var certfile=scriptablestream.read(input.available()); scriptablestream.close(); input.close(); var begincert = "-----begin certificate-----"; var endcert = "-----end certificate-----"; certfile = certfile.replace(/[\r\n]/g, ""); var begin = certfile.indexof(begincert); var end = certfile.indexof(endcert); ...
Rosetta - Archive of obsolete content
e.insertbefore(ocompiled, obaton); } function reqerror (oerror) { throw new urierror("the script " + oerror.target.src + " is not accessible."); } function reqsuccess () { createscript(this.refscript, this); } function getsource (oscript) { var oreq = new xmlhttprequest(); oreq.onload = reqsuccess; oreq.onerror = reqerror; oreq.refscript = oscript; oreq.open("get", oscript.src, true); oreq.send(null); } function parsescript (oscript) { if (oscript.hasattribute("type") && !rignoremimes.test(oscript.getattribute("type").tolowercase())) { oscript.hasattribute("src") ?
Scrollbar - Archive of obsolete content
example assumes a structure like this: app/chrome/chrome.manifest app/chrome/skin/global/ copy the scrollbars.css from xulrunner/chrome/classic.jar/skin/classic/global to app/chrome/skin/global/scrollbars.css open the app/chrome/chrome.manifest and add: skin app-global standard/1.0 skin/global/ override chrome://global/skin/xulscrollbars.css chrome://app-global/skin/scrollbars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx.
Tree - Archive of obsolete content
expanding/collapsing all tree nodes to expand all tree nodes: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree...
Code snippets - Archive of obsolete content
window code opening and manipulating windows toolbar toolbar related code sidebar sidebar related code forms forms related code xml code used to parse, write, manipulate, etc.
Deploying a Plugin as an Extension - Archive of obsolete content
now we can open the xpi in firefox and it will get installed.
Extension Packaging - Archive of obsolete content
users can download xpi files from a website, or from a local file, and install by opening it, or dragging it into the extension manager window.
Extension Theming Guidelines - Archive of obsolete content
this is a set of guidelines on how to control the look and feel of your extension while leaving it open for styling by custom themes.
Extension Versioning, Update and Compatibility - Archive of obsolete content
there are also gnu ports for win (besides usual suspects like cygwin), which are good for non-interactive use: sha256sum file there is also md5deep, which is cross platform: sha256deep file openssl also generates hashes for you: openssl sha256 file if you're on windows, hashtab is a shell extension...
Offering a context menu for form controls - Archive of obsolete content
n() { let settargetoriginal = nscontextmenu.prototype.settarget; components.utils.reporterror(settargetoriginal); nscontextmenu.prototype.settarget = function(anode, arangeparent, arangeoffset) { settargetoriginal.apply(this, arguments); if (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run when the window is opened up, works by replacing the settarget() routine for the prototype of nscontextmenu with one that forces the context menu to display if the target of the menu is a form control.
Chapter 1: Introduction to Extensions - Archive of obsolete content
undo closed tabs button adds a toolbar button to re-open the most recently closed tabs to the history menu.
Appendix A: Add-on Performance - Archive of obsolete content
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.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
keep in mind that the user could have set multiple firefox windows to open at startup, so there's a race condition on which window will run the first run code.
Appendix D: Loading Scripts - Archive of obsolete content
const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest", "open"); function loadscript(name, context) { // create the sandbox let sandbox = components.utils.sandbox(context, { sandboxprototype: context, wantxrays: false }); // get the caller's filename let file = components.caller.stack.filename; // strip off any prefixes added by the sub-script loader // and the trailing filename let directory = file.replace(...
Introduction - Archive of obsolete content
firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.
Local Storage - Archive of obsolete content
there are two paths you can take when creating the local database you'll be using for your extension: generate the database file (through mozistorageservice.opendatabase(), all tables (through mozistorageconnection.createtable(), and initial data when your extension starts up for the first time.
Observer Notifications - Archive of obsolete content
if there are 2 firefox windows open, the observer will be notified in both and the alerts will show up on both.
Signing an extension - Archive of obsolete content
in the options window, open the advanced panel, then select the encryption tab.
Adding preferences to an extension - Archive of obsolete content
ar output = httprequest.responsetext; if (output.length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " + fieldarray[5] + " | " + "low: " + fieldarray[6] + " | " + "high: " + fieldarray[7] + " | " + "vol: " + fieldarray[8]; } } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } } note that we use stockwatcher.tickersymbol here ins...
Creating reusable content with CSS and XBL - Archive of obsolete content
copy and paste the content from here: /*** xbl demonstration ***/ [anonid="square"] { width: 20em; height: 20em; border: 2px inset gray; } [anonid="button"] { margin-top: 1em; padding: .5em 2em; } open the document in your browser and press the button.
XML data - Archive of obsolete content
ng: 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 km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the document in your browser: oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth: 3,900 m .
XUL user interfaces - Archive of obsolete content
open the document in your mozilla browser and use the interface.
CSS3 - Archive of obsolete content
the choice of glyphs with specific opentype features via the css font-feature-settings property.
JXON - Archive of obsolete content
alert((new xmlserializer()).serializetostring(newdoc)); }; var oreq = new xmlhttprequest(); oreq.onload = reqlistener; oreq.open("get", "example.xml", true); oreq.send(); jxon.build syntax jxon.build(document[, verbosity[, freeze[, nesteattributes]]]) jxon.build description returns a javascript object based on the given xml document.
MMgc - Archive of obsolete content
alternately, you can open the mmgc namespace in your c++ source so that you can refer to the objects more concisely: using namespace mmgc; ...
cert_override.txt - Archive of obsolete content
since there is no way to add easily an exception in a xulrunner 1.9 project, you can open the page in firefox, accept the certificate, then copy the cert_override.txt to the xulrunner application profile.
Environment variables affecting crash reporting - Archive of obsolete content
moz_crashreporter_fulldump store full application memory in the minidump, so you can open it in a microsoft debugger.
Monitoring WiFi access points - Archive of obsolete content
the onerror() method simply opens an alert that displays the error code received.
Same-origin policy for file: URIs - Archive of obsolete content
this load can occur through a subframe, link, location set, call to window.open(), or the like.
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
build it it is quite simple to build the control locate the pluginhostctrl directory: open pluginhostctrl.dsp build "win32 debug" or another target open some of the test files under pluginhostctrl\tests in internet explorer to verify the control has built and registered correctly.
Automated testing tips and tricks - Archive of obsolete content
todo: check example code in to the tree somewhere how to quit the browser on all platforms window.close() of the last open window does not quit the application on mac http://people.mozilla.com/~davel/scripts/ - look at quit.js and quit.xul install manifest file in appdir/chrome to map chrome://tests/content to directory containing quit.js and quit.xul example: content tests file:///users/davel/work/tests/ start app with command line flag -chrome chrome://tests/content/quit.xul how to create a new profile from the command line first, use the -createprofile command line flag to add a profile entry to profiles.ini and populate the new profile directory with a prefs.js file firefox-bin -createprofile "testprofile ${profi...
Structure of an installable bundle - Archive of obsolete content
/searchplugins/*.xml mozsearch and opensearch plugins firefox 2 and greater /dictionaries/*.{aff|dic} myspell dictionaries firefox 2 and greater of course, an extension need not (and normally won't) have all of these directories.
Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
Finding the code to modify - Archive of obsolete content
open the navigator.xul file in a text editor.
Tinderbox - Archive of obsolete content
while it isn't difficult to load the tinderbox web page or sidebar, it would be useful to have an even quicker way to check tinderbox that doesn't require going to a web page, changing sidebars, or even having the sidebar open.
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).
Creating a Microsummary - Archive of obsolete content
xpath checker will open a new window.
Developing New Mozilla Features - Archive of obsolete content
design in the open post your plans to the appropriate newsgroup.
Download Manager preferences - Archive of obsolete content
browser.download.manager.alertonexeopen a boolean value that indicates whether the ui should alert the user about the dangers of opening (executing) an exe.
Drag and Drop - Archive of obsolete content
for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to.
Documentation for BiDi Mozilla - Archive of obsolete content
the implementation is based on ibm's international components for unicode (icu), which was chosen after comparing and testing the available open-source implementations.
Helper Apps (and a bit of Save As) - Archive of obsolete content
nsexternalapphandler::onstoprequest set a flag that we're done, then do whatever the user wants if the user has decided (save to disk and open in helper are the current options the user has).
Content - Archive of obsolete content
execute callbacks when certain pages are opened siteboost allows a jetpack to empower a domain with extended abilities beyond those native to web pages ...
Enabling Experimental Jetpack Features - Archive of obsolete content
var list = jetpack.future.list();console.log(list); open the firebug console to view.
Enabling - Archive of obsolete content
var list = jetpack.future.list(); console.log(list); open the firebug console to view.
Settings - Archive of obsolete content
the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page.
Settings - Archive of obsolete content
the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page.
Enabling Experimental Jetpack Features - Archive of obsolete content
ArchiveMozillaJetpackdocsMetaFuture
var list = jetpack.future.list(); console.log(list); open the firebug console to view.
jspage - Archive of obsolete content
if(this.options.urlencoded&&a=="post"){var c=(this.options.encoding)?"; charset="+this.options.encoding:""; this.headers.set("content-type","application/x-www-form-urlencoded"+c);}if(this.options.nocache){var f="nocache="+new date().gettime();g=(g)?f+"&"+g:f; }var e=b.lastindexof("/");if(e>-1&&(e=b.indexof("#"))>-1){b=b.substr(0,e);}if(g&&a=="get"){b=b+(b.contains("?")?"&":"?")+g;g=null;}this.xhr.open(a.touppercase(),b,this.options.async); this.xhr.onreadystatechange=this.onstatechange.bind(this);this.headers.each(function(m,l){try{this.xhr.setrequestheader(l,m);}catch(n){this.fireevent("exception",[l,m]); }},this);this.fireevent("request");this.xhr.send(g);if(!this.options.async){this.onstatechange();}return this;},cancel:function(){if(!this.running){return this; }this.running=false;this.xhr.
statusBar - Archive of obsolete content
example jetpack.statusbar.append({ html: 'hello <i>world</i>!', onready: function(widget){ $(widget).click(function(){ jetpack.tabs.open("http://www.jogkey.de"); }); } }); ...
Jetpack - Archive of obsolete content
get started visit the getting started tutorial download the add-on sdk (formerly called the jetpack sdk) documentation check out the documentation, including tutorials, examples, guides, and api reference join the jetpack community follow jetpack on the mozilla add-ons blog report a bug check out the open bugs discuss jetpack grab the source code join us in #jetpack on irc.mozilla.org ...
Measuring add-on startup performance - Archive of obsolete content
to test with about:startup, you should set up a new firefox profile, install this add-on, and then open and quit firefox repeatedly.
Message Summary Database - Archive of obsolete content
this allows us to store watch/ignore information on a thread object, and avoids having to generate threading information whenever a folder is open.
Plug-n-Hack Get Involved - Archive of obsolete content
while this project has been started by the mozilla security team and has been validated with firefox and owasp zap, this is an open project and we welcome involvement from anyone, especially people working on other browsers and security tools.
Plug-n-Hack - Archive of obsolete content
implementing the above features in firefox and the tools that we work on and support gives our team an advantage, however we believe that opening up such capabilities to all browsers and all security tools is much more useful for security researchers and application developers and testers.
Bundles - Archive of obsolete content
the bundle can hold additional resources currently limited to: application ini settings application icon script for the application chrome, not the web content installing a bundle when prism opens a webapp bundle it will unpack it into the webapps/{webapp-id} folder.
Extensions - Archive of obsolete content
using this dialog, a user just launches a webapp and opens the add-ons dialog.
FAQ - Archive of obsolete content
ArchiveMozillaPrismFAQ
it lets users start web applications from their desktop, start menu, and dock, and it opens those applications in their own window separate from a web browser and without the browser interface (back and forward buttons, location bar, etc.).
Installer - Archive of obsolete content
this means that when you double-click or launch a *.webapp file, prism is launched and automatically opens the web application.
Prism - Archive of obsolete content
community blog posts prism forum #prism on irc.mozilla.org goodies bundle library contributing source code in svn bugzilla (for bugs and suggestions) open bugs, enter new bug build documentation related topics xulrunner ...
Proxy UI - Archive of obsolete content
selecting "proxy configuration..." opens the preferences panel to "advanced > proxies" (tbdescribed: changing the prefs values).
Frequently Asked Questions - Archive of obsolete content
why am i asked to choose a program to open svg files?
SXSW 2007 presentations - Archive of obsolete content
the open web - brendan eich brendan eich discusses the various issues related to the openness of the web and web standards, and explains mozilla's position on the subject.
Safely loading URIs - Archive of obsolete content
if you're doing anything else (passing a uri string to some other api like window.open or <img src="">, passing a uri object to an api that loads uri objects, etc.) use whichever method best fits the data you can get your hands on.
Merging TraceMonkey Repo - Archive of obsolete content
for each unresolved file (with a u next to it), open the file and find the conflict markers that look like <<<<<<.
Standalone XPCOM - Archive of obsolete content
./nstestsample: error in loading shared libraries: libxpcom.so: cannot open shared object file: no such file or directory ld_library_path not set.
Abc Assembler Tests - Archive of obsolete content
* * the original code is [open source virtual machine.].
Tamarin Acceptance Test Template - Archive of obsolete content
* * the original code is [open source virtual machine.].
The Download Manager schema - Archive of obsolete content
preferredapplication text the preferred application to use to open the file after the download is complete.
Binding Implementations - Archive of obsolete content
this is an open issue.
Elements - Archive of obsolete content
</html:b><children/></content> </binding> </bindings> you can view the result by opening helloworld.html in firefox.
Using XPInstall to Install Plugins - Archive of obsolete content
an xpinstall template we have provided you with a template for an install script which you might want to open in another tab or window.
execute - Archive of obsolete content
example f = getfolder("program", "mytexteditor.exe"); err = file.execute(f, "myfile.txt"); // indicates that 'myfile.txt' will be // opened in the editor ...
refreshPlugins - Archive of obsolete content
method of install object syntax int refreshplugins( [ areloadpages ] ); parameters the refreshplugins method has the following parameter: areloadpages areloadpages is an optional boolean value indicating whether you want to reload the open web pages after you have refreshed the plug-in list.
Learn XPI Installer Scripting by Example - Archive of obsolete content
first, a quick scan of the contents of the xpi file (which you can open using with any unzip utility) reveals the following high-level directory structure: install.js bin\ chrome\ components defaults\ icons\ plugins\ res\ note that this high-level structure parallels the directory structure of the installed browser very closely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the sam...
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
norestorefocus - Archive of obsolete content
« xul reference home norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened.
closemenu - Archive of obsolete content
single the menu the item is contained within is closed, but the parent menus remain open.
command - Archive of obsolete content
example <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> see also command element, oncommand and commandset ...
enablehistory - Archive of obsolete content
enablehistory new in thunderbird 1requires seamonkey 2.0 type: boolean if true, an arrow button will appear on the end of the textbox which, when pressed, will open a dropdown menu of all available results.
helpURI - Archive of obsolete content
the uri will be opened using the help viewer when the help button is pressed.
href - Archive of obsolete content
ArchiveMozillaXULAttributehref
« xul reference home href type: string defines a url to open when this element is clicked.
icon - Archive of obsolete content
ArchiveMozillaXULAttributeicon
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.
lastSelected - Archive of obsolete content
it will be opened by default the next time the preferences dialog is opened.
minresultsforpopup - Archive of obsolete content
new in thunderbird 3requires seamonkey 2.0 a zero value will always open the popup.
noautofocus - Archive of obsolete content
« xul reference home noautofocus type: boolean if false, the default value, the currently focused element will be unfocused whenever the popup is opened or closed.
onpopupshowing - Archive of obsolete content
« xul reference home onpopupshowing type: script code this event is sent to a popup just before it is opened.
onpopupshown - Archive of obsolete content
« xul reference home onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.
persist - Archive of obsolete content
when the window is re-opened, the values of persistent attributes are restored.
reserved - Archive of obsolete content
example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator" oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey &&...
state - Archive of obsolete content
open the content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.
textbox.disablehistory - Archive of obsolete content
« xul reference home disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available results.
textbox.minResultsForPopup - Archive of obsolete content
a zero value will always open the popup unless the textbox is empty.
Working With Directories - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
Getting File Information - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
Moving, Copying and Deleting Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
TOC - Archive of obsolete content
ArchiveMozillaXULFileGuideTOC
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
Menus - Archive of obsolete content
editable text context-openlink opens a link in a new window links context-openlinkintab opens a link in a new tab links context-bookmarklink bookmarks a link links context-savelink saves a link links context-sendlink sends a link in an email links context-copyemail copies an email address mailto: links context-copylink copies a lin...
startFind - Archive of obsolete content
this opens the findbar, focuses the edit field for the search term, and selects its contents.
addTab - Archive of obsolete content
ArchiveMozillaXULMethodaddTab
}) return type: tab element opens a new tab that loads a page with the specified url.
showPopup - Archive of obsolete content
« xul reference home showpopup( element, x, y, popuptype, anchor, align ) deprecated since gecko 1.9 return type: no return value deprecated in favor of openpopup and openpopupatscreen opens a popup element.
Methods - Archive of obsolete content
tatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransie...
MoveResize - Archive of obsolete content
moving a popup once a popup is open, it can be moved using the popup's moveto method.
Tooltips - Archive of obsolete content
<toolbar tooltiptext="file buttons"> <toolbarbutton label="open" tooltiptext="open a file"/> <toolbarbutton label="close"/> </toolbar> the 'open' button has a tooltiptext attribute so will have a tooltip of its own.
anchorNode - Archive of obsolete content
« xul reference anchornode type: nsidomelement this read-only property holds the dom node that was specified as the anchor when opening the popup.
lastSelected - Archive of obsolete content
it will be opened by default the next time the preferences dialog is opened.
chromeclass-toolbar - Archive of obsolete content
« xul reference home chromeclass-toolbar when this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the window.open method.
text-link - Archive of obsolete content
« xul reference home text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press.
Filtering - Archive of obsolete content
this will work in this simple example, but has the disadvantage that the builder won't be able to generate the content lazily only when the popup is opened.
Introduction - Archive of obsolete content
the local store is a datasource which is usually used to hold state information such as window sizes, which columns in a tree are showing, and which tree items are open.
Content Panels - Archive of obsolete content
you could create a wizard interface by opening a different window for each screen.
Input Controls - Archive of obsolete content
if you open this window, you will see something much like that shown in the image.
Install Scripts - Archive of obsolete content
that means that you can call the methods of the window object with the qualifier before it, which means that window.open() can simply be written open().
Introduction - Archive of obsolete content
remote xul application you could also just place xul code on a web server and open it in firefox, as you would any other web page, however this is discouraged and was disabled in firefox 8.
Modifying the Default Skin - Archive of obsolete content
menubar { background-color: red; } if you open any firefox window after making this change, the menu bars will be red.
Progress Meters - Archive of obsolete content
do this by adding the below line to your opening window tag in the findfile.xul.
Scrolling Menus - Archive of obsolete content
t="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> if you try this example, it will first open at full size.
Skinning XUL Files by Hand - Archive of obsolete content
stylesheet syntax to familiarize yourself with the global skin, open up the text file called global.css in the chrome/classic.jar!/skin/classic/global directory of the mozilla application.
Styling a Tree - Archive of obsolete content
open this property is set for rows or cells which are expanded.
Templates - Archive of obsolete content
try adding a bookmark in the browser while you have the example window open.
Tree Box Objects - Archive of obsolete content
the value 'text' indicates the area where the text would be drawn and the value 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn.
Tree Selection - Archive of obsolete content
note that rows nested inside containers that are not open will not be selected.
Trees and Templates - Archive of obsolete content
with hierarchical trees, the children don't get generated until the parent nodes have been opened by the user.
XUL Tutorial - Archive of obsolete content
tyling 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 Visual Studio as your XUL IDE - Archive of obsolete content
if you already have a xml or xul file opened, visual studio will add the menu item xml to the main menu.
XUL Changes for Firefox 1.5 - Archive of obsolete content
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 FAQ - Archive of obsolete content
(the animation effect when you open the preference window will not stop, if a script outside <prefpane> refers any element inside <prefpane>, while initializing the window.
XUL element attributes - Archive of obsolete content
when the window is re-opened, the values of persistent attributes are restored.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
tabpanel see tabbox tabpanels see tabbox tabs see tabbox textbox <label control="inputid"> <!--first name:--> </label> <textbox id='inputid'> tree <tree hidecolumnpicker="true" > <treecols> <treecol label="cats" primary="true"/> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="<!--male-->" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="<!--aramis-->" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="<!--fergus-->" /> </treerow> </treeitem> </treechildren> </treeitem> </...
The Implementation of the Application Object Model - Archive of obsolete content
for example, the open attribute used to indicate whether a node is expanded or collapsed in a tree view is something that is sometimes persistent (in the case of bookmarks) and sometimes not (in the case of mail folders).
command - Archive of obsolete content
see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
commandset - Archive of obsolete content
attributes commandupdater, events, oncommandupdate, targets example <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands.
description - Archive of obsolete content
the text can be set either with the value attribute or by placing text inside the open and close description tags.
menuitem - Archive of obsolete content
single the menu the item is contained within is closed, but the parent menus remain open.
preference - Archive of obsolete content
when instantapply is off (default on windows), this gets and sets the current value of the preference in the currently open dialog.
script - Archive of obsolete content
you should usually put scripts in a separate file pointed to by the src attribute, but you may also place the script inline inside the opening and closing script tags.
splitter - Archive of obsolete content
open the content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.
titlebar - Archive of obsolete content
atekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheigh...
window - Archive of obsolete content
without including the css file at "chrome://global/skin/", the window will not be stylized and will be invisible and glitchy when opened as a dialog.
XUL - Archive of obsolete content
there is a xulrunner application containing the xul periodic table which can be opened with gecko based browsers.
CommandLine - Archive of obsolete content
however, if you'd like to retrieve the latest command line arguments (to open a file for example), a possible solution is to create your own command line handler.
Using SOAP in XULRunner 1.9 - Archive of obsolete content
+ "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapact...
XUL Explorer - Archive of obsolete content
installs latest version: install (windows): xulexplorer-1.0a1pre.en-us.win32.exe 6.6mb install (mac): xulexplorer-1.0a1pre.en-us.mac.dmg 9.3mb install (linux): xulexplorer-1.0a1pre.en-us.linux-i686.tar.bz2 8.4mb contributing source code in svn bugzilla (for bugs and suggestions) open bugs, enter new bug blog posts xul explorer - updated (1.0a1pre) xul explorer 0.4 xul explorer 0.3 xul explorer 0.2 exploring xul ...
nsIContentPolicy - Archive of obsolete content
note: acontext is the new tab/window when a user uses the context menu to open a link in a new tab/window or cmd/ctrl + clicks the link (i.e., acontext is not the tab which the link was on in these cases).
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-11-10 - Archive of obsolete content
discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility.
2006-10-06 - Archive of obsolete content
sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems provide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning.
2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-12-01 - Archive of obsolete content
discussions firefox 2.0 should re-implement modal window.open to support web 2.0 a plea to re-implement the option to show modal windows, using window.open(), from inside an untrusted script.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 14-20, 2006 announcements eudora goes open source both qualcomm and mozilla will participate in enhancing the capabilities and ease of use of both eudora and thunderbird.
2006-11-03 - Archive of obsolete content
he has also created a bug entry on bugzilla with the bug id of opened bug #344854.
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.l10n - october 13, 2006 announcements seamonkey 1.0.5 he-il seamonkey 1.0.5 in hebrew was released a while ago firefox 2 rc2 is out firefox 2 rc2 is out, to download click here sunbird_0_3_release tag being created sunbird_0_3_release tag being created seamonkey 1.1 localization freeze and beta upcoming there are no open blockers left.
2006-11-10 - Archive of obsolete content
latvian pellcheck dictionary for ff2.0 newest openoffice dictionary files for ff 2.0 spell-checker is available.
2006-11-17 - Archive of obsolete content
going to fosdem 2007 fosdem 2007 (free and open source software developers' european meeting), february 24th - 25th.
2006-11-3 - Archive of obsolete content
opening l10n repository on mozilla_1_8_branch for approved check-ins mozilla_1_8_branch is opened for approved check-ins.
2006-10-20 - Archive of obsolete content
feature brainstorming + firefox 3 dria posted a link to the firefox feature brainstorming list (open to everyone).
2006-11-03 - Archive of obsolete content
announcments mozilla scheduled downtime - 11/2/2006, 7pm - 11pm pdt (0300 - 0700 utc) mozilla scheduled downtime - 11/2/2006, 7pm - 11pm pdt (0300 - 0700 utc) opening l10n repository on mozilla_1_8_branch for approved check-ins opening l10n repository on mozilla_1_8_branch for approved check-ins discussion from 50 to 100 locales a discussion on how to make l10n easier and increase the number of locals with which mozilla products ship.
2006-11-03 - Archive of obsolete content
chat with the creator of javascript and mozilla cto brendan eich this tuesday, november 7th at 10am pst (utc-8) traffic xepra wants to know how to open multiple tabs in a new window.
2006-10-20 - Archive of obsolete content
joes noticed that mp3 files are no longer allowed to be opened directly from email attachments in trunk builds of thunderbird and seamonkey.
2006-11-24 - Archive of obsolete content
yet more people disgruntled by ev proposal mozilla, opera and co only tout open standards as it suits them in addition eddy nigg posted an alternative proposal for the use of extended validation certificates ev certificates / another proposal meetings none during this week.
2006-10-13 - Archive of obsolete content
discussions wxmozilla and ff1.5 xpcom problems updating wxmozilla to use it with firefox 1.5.7 browser elements, opening links in a new window using javascript to open window in new window.
External resources for plugin creation - Archive of obsolete content
frameworks and tools there are several open source projects designed to assist with the creation of npapi plugins.
NPN_GetURL - Archive of obsolete content
when the plug-in instance is part of a regular browser window, and it uses a _blank target with a mailto or news url, another blank window is opened along with the mail or news window.
The First Install Problem - Archive of obsolete content
the bugzilla bug open on mozilla and netscape 6.x is bug 44973.
Writing a plugin for Mac OS X - Archive of obsolete content
getting started if you check out the mozilla source code in mac os x, you can simply open basicplugin.xcodeproj in xcode, click build, and you're done.
Plugins - Archive of obsolete content
for example, the adobe reader plugin lets the user open pdf files directly inside the browser, and the quicktime and realplayer plugins are used to play special format videos in a web page.
.htaccess ( hypertext access ) - Archive of obsolete content
file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other.
Common Firefox theme issues and solutions - Archive of obsolete content
#identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when u...
Create Your Own Firefox Background Theme - Archive of obsolete content
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.
Using IO Timeout And Interrupt On NT - Archive of obsolete content
programs should also take care in sharing file descriptors and using io timeout or interrupt on files that need to stay open throughout the process.
Using workers in extensions - Archive of obsolete content
= ""; function refreshinformation() { if (!symbol) { throw "no symbol set!"; } var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed.
Browser Detection and Cross Browser Support - Archive of obsolete content
for more specific gecko recommendations, please see the gecko compatibility handbook gecko although many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.
::-ms-browse - Archive of obsolete content
the ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.
::-ms-expand - Archive of obsolete content
the ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
Using JavaScript Generators in Firefox - Archive of obsolete content
function closegenerator() { settimeout(function() { generator.close(); }, 0); } // our main steps function databaseoperation() { mozindexeddb.open("mytestdatabase").onsuccess = grabevent; var event = yield; var db = event.target.result; if (db.version != "1.0") { db.setversion("1.0").onsuccess = grabevent; event = yield; var transaction = event.transaction; db.createobjectstore("stuff"); transaction.oncomplete = grabevent; yield; } db.transaction(["stuff"]).objectstore("stuff").get("foo").onsuccess = g...
Server-Side JavaScript - Archive of obsolete content
some, like aptana with the open source jaxer server actually embed the entire mozilla firefox browser engine (including spidermonkey) within a web server to enable server-side ajax and server-side dom access in addition to server-side execution of javascript.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
these are enclosed in h3 elements, so the field was pretty wide open in terms of what we could do.
Developing Mozilla XForms - Archive of obsolete content
then open your form that causes problems and have a look on the console.
Troubleshooting XForms Forms - Archive of obsolete content
you can also see the current list of open xforms bugs, or the list of fixed bugs that have not made it to the release versions yet.
XForms Upload Element - Archive of obsolete content
representations the xforms upload element is represented by visually combining three widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only).
Using XForms and PHP - Archive of obsolete content
to get a dom document on php 4 i usually do something like this: $data = $http_raw_post_data; $dom = domxml_open_mem($data); $root = $dom->document_element(); ...
The Business Benefits of Web Standards - Archive of obsolete content
last but not least, use of standards opens the door to xml technologies.
Using the Right Markup to Invoke Plugins - Archive of obsolete content
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.
Web Standards - Archive of obsolete content
this article covers common issues associated with migrating applications to the open source mozilla-based browser.
Common causes of memory leaks in extensions - Extensions
users often only open a single browser window per session and use tabs, in which case the leaked compartments will live for the whole life of the session.
Publishing games - Game development
game distribution provides all you need to know about the ways you can distribute your newly created game into the wild — including hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like google play or the ios app store.
3D collision detection - Game development
we have prepared a live collision detection demo (with source code) that you can take a look at to see such techniques in action — this uses the open-source 3d physics engine cannon.js.
Building up a basic demo with Babylon.js - Game development
opening the babylon.js documentation in a separate tab — it is useful to refer to.
Building up a basic demo with the PlayCanvas engine - Game development
opening the playcanvas documentation in a separate tab — it is useful to refer to.
Building up a basic demo with PlayCanvas - Game development
it is open sourced on github, with an editor available online and good documentation.
GLSL Shaders - Game development
shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c.
Mobile touch controls - Game development
dedicated plugins you could go even further and use dedicated plugins like virtual joystick — this is a paid, official phaser plugin, but you can find free and open source alternatives.
Techniques for game development - Game development
this page lists essential core techniques for anyone wanting to develop games using open web technologies.
Apple Safari - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the open source webkit engine.
Blink - MDN Web Docs Glossary: Definitions of Web-related terms
blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
Bootstrap - MDN Web Docs Glossary: Definitions of Web-related terms
bootstrap is a free, open source html, css, and javascript framework for quickly building responsive websites.
Browsing context - MDN Web Docs Glossary: Definitions of Web-related terms
between browsing context of the same origin, a broadcastchannel can be opened and used.
Cross-site scripting - MDN Web Docs Glossary: Definitions of Web-related terms
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
the united states computer emergency readiness team (us-cert) defines symptoms of denial-of-service attacks to include: unusually slow network performance (opening files or accessing websites) unavailability of a particular website inability to access any website dramatic increase in the number of spam emails received—(this type of dos attack is considered an email bomb) disconnection of a wireless or wired internet connection longterm denial of access to the web or any internet services learn more general knowledge denial-of-service attack ...
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
to see your effective connection type, open the console of the developer tools of a supporting browser and enter the following: navigator.connection.effectivetype; see also: network information api networkinformation networkinformation.effectivetype ...
Element - MDN Web Docs Glossary: Definitions of Web-related terms
a typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.
Gaia - MDN Web Docs Glossary: Definitions of Web-related terms
gaia is implemented entirely with html, css, and javascript, and its only interfaces to the underlying operating system are through open web apis, which the gecko layer implements.
Git - MDN Web Docs Glossary: Definitions of Web-related terms
git is a free, open-source, distributed source code management (scm) system.
Google Chrome - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the chromium open source project.
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
elements are surrounded by matching opening and closing tags.
IETF - MDN Web Docs Glossary: Definitions of Web-related terms
the ietf is open, run by volunteers, and sponsored by the internet society.
IRC - MDN Web Docs Glossary: Definitions of Web-related terms
designed in the late 1980s by jarrko oikarinen, irc uses tcp and is an open protocol.
MathML - MDN Web Docs Glossary: Definitions of Web-related terms
mathml (an xml application) is an open standard for representing mathematical expressions in webpages.
Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms
mozilla firefox is a free open-source browser whose development is overseen by the mozilla corporation.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
navigate-to restricts the urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
OWASP - MDN Web Docs Glossary: Definitions of Web-related terms
owasp (open web application security project) is a non-profit organization and worldwide network that works for security in free software, especially on the web.
PHP - MDN Web Docs Glossary: Definitions of Web-related terms
php (a recursive initialism for php: hypertext preprocessor) is an open-source server-side scripting language that can be embedded into html to build web applications and dynamic websites.
Python - MDN Web Docs Glossary: Definitions of Web-related terms
python is developed under an osi-approved open source license, making it freely usable and distributable, even for commercial use.
RGB - MDN Web Docs Glossary: Definitions of Web-related terms
in opengl, webgl, and glsl the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers.
Ruby - MDN Web Docs Glossary: Definitions of Web-related terms
ruby is an open-source programming language.
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge sql injection on wikipedia explanation of sql injection on owasp (open web application security project) ...
W3C - MDN Web Docs Glossary: Definitions of Web-related terms
it consists of over 350 member-organizations that jointly develop web standards, run outreach programs, and maintain an open forum for talking about the web.
WebAssembly - MDN Web Docs Glossary: Definitions of Web-related terms
wasm) is an open binary programming format that can be run in modern web browsers in order to gain performance and/or provide new features for web pages.
WebGL - MDN Web Docs Glossary: Definitions of Web-related terms
the khronos group maintains webgl, which is based on opengl es 2.0.
Routers - MDN Web Docs Glossary: Definitions of Web-related terms
this middleware module is used for all url functions, as these are given a path to a file that is rendered to open the next page.
WebM - MDN Web Docs Glossary: Definitions of Web-related terms
webm is royalty-free and is an open web video format natively supported in mozilla firefox.
MDN Web Docs Glossary: Definitions of Web-related terms
ce nan nat native navigation directive netscape navigator network throttling nntp node node (dom) node (networking) node.js non-normative normative null nullish value number o object object reference oop opengl openssl opera browser operand operator origin ota owasp p p2p pac packet page load time page prediction parameter parent object parse parser pdf perceived performance percent-encoding php pixe...
What is accessibility? - Learn web development
providing accessible sites is part of the law in some countries, which can open up some significant markets that otherwise would not be able to use your services or buy your products.
CSS values and units - Learn web development
to see this in action you'll have to try the example after opening it in its own browser tab.
Test Your Skills: Fundamental layout comprehension - Learn web development
opening the index.html file in a browser should give you a page with basic styling but no layout, which should look something like the image seen below.
Grids - Learn web development
the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here).
Test your skills: Media Queries and Responsive Design - Learn web development
open this in your browser and you will find a wireframed site which will load in a mobile device in a readable manner.
What is CSS? - Learn web development
for example "i want the main heading on my page to be shown as large red text." the following code shows a very simple css rule that would achieve the styling described above: h1 { color: red; font-size: 5em; } the rule opens with a selector .
Styling links - Learn web development
playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p></textarea> <h2>css input</h2> <textarea id="code" class="css-i...
Styling lists - Learn web development
playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> <li>first, light the candle.</li> <li>next, open the box.</li> <li>finally, place the three magic items in the box, in this exact order, to complete the spell: <ol> <li>the book of spells</li> <...
How do you host your website on Google App Engine? - Learn web development
open google cloud shell.
How do I use GitHub Pages? - Learn web development
you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it.
What is a URL? - Learn web development
the web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.
What software do I need to build a website? - Learn web development
mobile devices cost money, of course, so we suggest taking a look at the open device lab initiative.
Basic native form controls - Learn web development
as you can see from the examples, however, <button> elements let you use html in their content, which is inserted between the opening and closing <button> tags.
HTML forms in legacy browsers - Learn web development
for example, the input of color type looks different in safari, chrome and firefox browser, but the color picker widget is the same in all browsers on a device as it opens up the operating system's native color picker.
How to structure a web form - Learn web development
you can label a <fieldset> by including a <legend> element just below the opening <fieldset> tag.
Other form controls - Learn web development
<textarea> also takes a closing tag, and any default text you want it to contain should be put between the opening and closing tags.
Sending form data - Learn web development
after submitting the form: open the developer tools.
Your first form - Learn web development
to define the default value of an <input> element you have to use the value attribute like this: <input type="text" value="by default this element is filled with this text"> on the other hand, if you want to define a default value for a <textarea>, you put it between the opening and closing tags of the <textarea> element, like this: <textarea> by default this element is filled with this text </textarea> the <button> element the markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form.
Dealing with files - Learn web development
open up your index.html file, and insert the following code into the file exactly as shown.
Publishing your website - Learn web development
you can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your github code, use it, learn from it, and improve on it.
Use JavaScript within a webpage - Learn web development
you can create amazing webpages without javascript, but javascript opens up a whole new level of possibilities.
Document and website structure - Learn web development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body> <!-- he...
Mozilla splash page - Learn web development
adding a video to the main article content just inside the <article> element (right below the opening tag), embed the youtube video found at https://www.youtube.com/watch?v=ojcncvb1olg, using the appropriate youtube tools to generate the code.
From object to iframe — other embedding technologies - Learn web development
fallback content in the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the browser doesn't support the <iframe>.
Video and audio content - Learn web development
in addition, some people simply prefer to avoid restricted software and prefer to use only open formats.
Assessment: Structuring planet data - Learn web development
open your copy of blank-template.html, and start the table off by giving it an outer container, a table header, and a table body.
Making asynchronous programming easier with async and await - Learn web development
keep it open in a separate tab so you can compare and contrast with the new version shown below.
Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes (recursive callbacks) yes (nested callbacks) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome...
Introducing asynchronous JavaScript - Learn web development
let's look at another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); here we create a displayimage() function that ...
Build your own function - Learn web development
now open your browser developer tools on the example page, go to the javascript console and type the line again there, you'll see it appear again!
Third-party APIs - Learn web development
you don't need to fill in a url here: just leave it blank.) open up your starting file, and replace the api key placeholder with your key.
Silly story generator - Learn web development
go to the page containing the raw text and keep this open in a separate browser tab somewhere.
Handling text — strings in JavaScript - Learn web development
i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of backticks.
Object building practice - Learn web development
open the browser's javascript console, and then refresh the page so that the canvas size changes to the smaller visible viewport that remains when the console opens.
What is web performance? - Learn web development
are pop-ups quick to open up, and do they animate smoothly as they do so?
Client-Server Overview - Learn web development
200 ok server: apache x-backend-server: developer1.webapp.scl3.mozilla.com vary: accept,cookie, accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:11:31 gmt keep-alive: timeout=5, max=999 connection: keep-alive x-frame-options: deny allow: get x-cache-info: caching content-length: 41823 <!doctype html> <html lang="en-us" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script>(function(d) { d.classname = d.classname.replace(/\bno-js/, ''); })(document.documentelement);</script> ...
Website security - Learn web development
for a comprehensive listing of website security threats see category: web security exploits (wikipedia) and category: attack (open web application security project).
Ember interactivity: Events, classes and state - Learn web development
add the following line just below the opening export...
Ember resources and troubleshooting - Learn web development
both of these files are generated with sourcemaps, so when you open the vendor.js or {app-name}.js to search for relevant code, when a debugger is placed, the sourcemap will be loaded and the breakpoint will be placed in the pre-transpiled code for easier correlation to your project code.
Introduction to client-side frameworks - Learn web development
start learning ember angular angular is an open-source web application framework led by the angular team at google and by a community of individuals and corporations.
Accessibility in React - Learn web development
ing useeffect() call just above the return statement in the body of todo(), and pass into it a function that logs the words "side effect" to your console: useeffect(() => { console.log("side effect"); }); to illustrate the difference between the main render process and code run inside useeffect(), add another log – put this one below the previous addition: console.log("main render"); now, open the app in your browser.
React interactivity: Events and state - Learn web development
open your javascript console, then click on the checkbox next to eat.
React interactivity: Editing, filtering, conditional rendering - Learn web development
} } return task; }); settasks(editedtasklist); } pass edittask into our <todo /> components as a prop in the same way we did with deletetask: const tasklist = tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} deletetask={deletetask} edittask={edittask} /> )); now open todo.js.
Beginning our React todo list - Learn web development
> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">repeat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">repeat</span> </button> </div> </li> </ul> </div> ); } now open public/index.html and change the <title> element’s text to todomatic.
Adding a new todo form: Vue events, methods, and models - Learn web development
if you open the console, you can see the results of the console.log() we added inside our onsubmit() method.
Focus management with Vue refs - Learn web development
if you open your console, you'll see an error raised along the lines of "can't access property "focus", editbuttonref is undefined".
Implementing feature detection - Learn web development
<script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, try loading your page, and you'll get an idea of how modernizr works for css features.
Git and GitHub - Learn web development
hello world (from github) this is a good place to start — this practical guide gets you to jump right into using github, learning the basics of git such as creating repositories and branches, making commits, and opening and merging pull requests.
Client-side tooling overview - Learn web development
also well-worth looking at is webhint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibility, performance, cross-browser compatibility via mdn's browser compatibility data, security, testing for pwas, and more.
Learn web development
open your computer's command prompt (windows) or terminal (linux, macos).
Chrome Worker Modules
a module is a file, whose filename generally ends with either “.js” or “.jsm”, and designed to be opened through require().
ChromeWorkers and the Chrome worker loader
to complement the open web worker functionality, mozilla has introduced the chromeworker interface, which provides this capability within application chrome.
Accessibility/LiveRegionDevGuide
as always, we're open to questions and suggestions for changes in community forums.
Mozilla accessibility architecture
the first request for an accessible is usually the accessible for document in one of the open windows, and the code in widget/src/gtk2 or widget/src/windows must return this doc accessible.
Information for External Developers Dealing with Accessibility
other useful resources links for those who wish to learn more about web accessibility or open source accessibility.
Accessibility and Mozilla
please check the accessibility help topic for more information.links and resourceshere are some useful links for those interested in web accessibility as well as open source accessibility.mozilla accessibility architecturethis page is maintained by aaron leventhal and by the mozilla accessibility community.
Index
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.
Theme concepts
opera takes an entirely different approach, and microsoft edge themes are not yet open to developers.
Benchmarking
async stacks async stacks no longer impact performance since firefox 78, as bug 1601179 limits async stack capturing to when devtools is opened.
Browser chrome tests
running the browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest -f browser this will launch your build and open a "browser chrome tests" window, and report the results in the ui and to stdout.
Creating a Language Pack
open the xpi file contained in this directory with firefox to see your work.
Debugging JavaScript
web console this is the first place to go when you're debugging a web page; open the web console using the web console option in the web developer menu.
Debugging
debugging specific parts of the mozilla codebase debugging opengl if you're working on code that involves opengl calls, and need to debug it, you can turn on a special opengl debugging mode.
OS TARGET
winnt linux darwin android sunos freebsd openbsd netbsd os2 beos irix64 aix hp-ux dragonfly skyos riscos nto osf1 ...
pymake
type touch .profile using any appropriate text editor open .profile and add the following line in the file (assuming your mozilla-central is at c:/mozilla-central, if not, adjust your path accordingly.) alias pymake=c:/mozilla-central/build/pymake/make.py save your .profile edit and close the shell, then restart the shell.
SVG Guidelines
although this kind of data is supported by the browser, it can only be displayed when the svg is opened in a new tab.
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu.
Communicating with frame scripts
> { target: <div#searchcontainer> } if your code requires access to a window (for example to run window.opendialog), and your message listener is run from somewhere without access to a window (e.g.
Process scripts
for example, if you call the global frame message manager's loadframescript() function, then the script will be loaded separately into all open tabs.
Message manager overview
global message manager the global message manager operates on every <browser> (that is, every open content tab).
Performance best practices for Firefox front-end engineers
a number of tests have been written that exercise various functions of the browser (opening tabs, opening windows) and ensure that we don’t add new uninterruptible reflows accidentally while those actions occur.
Firefox
firefox is an open source project; much of the code is contributed by our huge community of volunteers.
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
to run the demo, the best approach is to clone the github repo locally (or just download it directly if you don't do github), open webide, open the repo as a packaged app, then run it either on a simulator or a real device if you have one.
mozbrowseractivitydone
browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
tedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfindchange
("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsericonchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
reload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadstart
cument.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermetachange
its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserselectionstatechanged
lectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsershowmodalprompt
xample var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
owser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowservisibilitychange
addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
Embedding Mozilla
that means you can embed a web browser inside a third-party application, open channels and streams through the network backend, walk through the dom and so on.
Getting Started with Chat
/msg nick message sends a private message to the specified user /nick nickname change your current nickname nickname: ping get a user's attention (nickname is the name of the user you want the attention of) nickname: pong respond to a user's ping (nickname is the name of the user who wants your attention) /query nickname opens a private chat with the specified user /quit message disconnects you from the current server displaying the message in all connected channels prior to quitting /reload styles some irc clients, colloquy on mac in particular, stop displaying your messages in the channel window.
How Mozilla determines MIME Types
if one of these lookups succeed, this is where the application in the "open with" field comes from, and also where the description of the type comes from.
How to get a process dump with Windows Task Manager
after the hang open windows task manager (ctrl+shift+esc).
How to Report a Hung Firefox
another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-mediator;1"].
Introduction to Layout in Mozilla
ocumentviewerimpl object, which is returned as nsicontentviewer back to the docshell documentviewerimpl creates pres context and pres shell content model construction content arrives from network via nsistreamlistener::ondataavailable parser tokenizes & processes content; invokes methods on nsicontentsink with parser node objects some buffering and fixup occurs here opencontainer, closecontainer, addleaf content sink creates and attaches content nodes using nsicontent interface content sink maintains stack of “live” elements more buffering and fixup occurs here insertchildat, appendchildto, removechildat frame construction content sink uses nsidocument interface to notify of Δs in content model contentappend...
Addon
this is passed to window.opendialog() when presenting the about dialog.
API-provided widgets
possible types are button for simple button widgets (the default) view for buttons that open a panel or subview, depending on where they are placed.
Widget Wrappers
for xul-provided widgets, this is always 'custom' provider the provider type of the widget, id est one of provider_api or provider_xul node reference to the corresponding dom node anchor the anchor on which to anchor panels opened from this node.
FxAccountsOAuthClient.jsm
methods launchwebflow() opens a new tab at the firefox accounts oauth authorization url.
JavaScript OS
os.constants os-related constants, including errors, file opening modes, system configuration, etc.
OS.File.Error
using os.file.error example: finding out whether the problem is due to a file that does not exist try { let file = os.file.open("myfile.txt"); // ...
source-editor.jsm
sourceeditor.events.context_menu "contextmenu" fired when the editor's context menu is invoked, but before it's opened.
Index
32 svn for localizers intro, localization, svn, opensource welcome to the svn tutorial for localizers!
Localizing extension metadata on addons.mozilla.org
create an account and then, using the “basic open-ended question” template, follow the instructions to upload the text of your amo page.
Localizing with Mozilla Translator
you can save your work in progress and reopen it to continue working by selecting view fuzzy from the edit menu.
Localization prerequisites
to verify that they work, open a shell.
Release phase
once attached, open the attachment details.
Translation phase
hacks.mozilla.org for everyone interested in the leading-edge stuff that people are doing with mozilla firefox and the open web.
Localization sign-off reviews
once attached, open the attachment details.
Localization technical reviews
once attached, open the attachment details.
Mozilla Web Developer FAQ
downloadable fonts in truetype and opentype formats (.ttf and .otf) are supported since firefox 3.5.
Mozilla projects on GitHub
opennews the knight-mozilla open news project, helping the journalism/technology community do great work through shared knowledge and code.
GPU performance
apitrace - open source, works ok.
Memory Profiler
using the add-on open the devtools panel or webide.
browser.urlbar.trimURLs
the preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.
Crash reporting
firefox ships with an open-source crash reporting system.
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.
Midas editor module security preferences
open the user.js file from that directory in a text editor.
NSPR build instructions
configure options although nspr uses autoconf, its configure script has two default values that are different from most open source projects.
NSPR's Position On Abrupt Thread Termination
the process abstraction is then responsible for closing all open files and reclaiming all storage that may have been allocated during the process' lifetime.
IPC Semaphores
note: see also named shared memory ipc semaphore functions ipc semaphore functions pr_opensemaphore pr_waitsemaphore pr_postsemaphore pr_closesemaphore pr_deletesemaphore ...
I/O Types
directory type file descriptor types file info types network address types types used with socket options functions type used with memory-mapped i/o offset interpretation for seek functions directory type prdir file descriptor types nspr represents i/o objects, such as open files and sockets, by file descriptors of type prfiledesc.
PRFileInfo
file information structure used with pr_getfileinfo and pr_getopenfileinfo.
PRFileInfo64
file information structure used with pr_getfileinfo64 and pr_getopenfileinfo64.
PRIOMethods
fileinfo get information about an open file.
PR_CloseDir
see also pr_opendir ...
PR_CloseSemaphore
syntax #include <pripcsem.h> nspr_api(prstatus) pr_closesemaphore(prsem *sem); parameter the function has the following parameter: sem a pointer to a prsem structure returned from a call to pr_opensemaphore.
PR_CloseSharedMemory
syntax #include <prshm.h> nspr_api( prstatus ) pr_closesharedmemory( prsharedmemory *shm ); parameter the function has these parameter: shm the handle returned from pr_opensharedmemory.
PR_DeleteSemaphore
syntax #include <pripcsem.h> nspr_api(prstatus) pr_deletesemaphore(const char *name); parameter the function has the following parameter: name the name of a semaphore that was previously created via a call to pr_opensemaphore.
PR_DeleteSharedMemory
syntax #include <prshm.h> nspr_api( prstatus ) pr_deletesharedmemory( const char *name ); parameter the function has these parameter: shm the handle returned from pr_opensharedmemory.
PR_DetachSharedMemory
syntax #include <prshm.h> nspr_api( prstatus ) pr_detachsharedmemory( prsharedmemory *shm, void *addr ); parameters the function has these parameters: shm the handle returned from pr_opensharedmemory.
PR_ExportFileMapAsString
returns prstatus description creates an identifier, as a string, from a prfilemap object previously created with pr_openanonfilemap.
PR_GetFileInfo
to get equivalent information on a file that's already open, use pr_getopenfileinfo.
PR_GetFileInfo64
to get equivalent information on a file that's already open, use pr_getopenfileinfo64.
PR ImportTCPSocket
of course, it is best if you just use pr_opentcpsocket or pr_newtcpsocket.
PR_PostSemaphore
syntax #include <pripcsem.h> nspr_api(prstatus) pr_postsemaphore(prsem *sem); parameter the function has the following parameter: sem a pointer to a prsem structure returned from a call to pr_opensemaphore.
PR_WaitSemaphore
syntax #include <pripcsem.h> nspr_api(prstatus) pr_waitsemaphore(prsem *sem); parameter the function has the following parameter: sem a pointer to a prsem structure returned from a call to pr_opensemaphore.
NSPR
opensuse linux: install one or more of the following via yast or zypper : mozilla-nspr : binary libraries for your platform mozilla-nspr-32bit : binary libraries needed to run 32-bit programs on a 64-bit os mozilla-nspr-devel : files needed (in addition to the above libraries) to compile programs using nspr mozilla-nspr-debuginfo : debug information (including build symbols) for package...
Building NSS
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.
Certificate functions
r cert_keyfromdercrl mxr 3.4 and later cert_makecanickname mxr 3.4 and later cert_mergeextensions mxr 3.10 and later cert_nametoascii mxr 3.2 and later cert_newcertlist mxr 3.2 and later cert_newtempcertificate mxr 3.12 and later cert_nicknamestringsfromcertlist mxr 3.4 and later cert_opencertdbfilename mxr 3.2 and later cert_ocspcachesettings mxr 3.11.7 and later cert_pkixverifycert mxr 3.12 and later cert_removecertlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfail...
FIPS Mode - an explanation
nss was the first open source cryptographic library to be fips certified.
Getting Started With NSS
(this section is still under construction, but there are many contribution opportunities) start by opening a bugzilla account at bugzilla.mozilla.org if you don't have one.
JSS 4.4.0 Release Notes
.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8.
NSS_3.12_release_notes.html
bug 391292: shared database implementation slow bug 391294: shared database implementation really slow on network file systems bug 392521: automatic shared db update fails if user opens database r/w but never supplies a password bug 392522: integrity hashes must be updated when passwords are changed.
NSS 3.15.1 release notes
bug 875601 - secmod_closeuserdb/secmod_openuserdb fails to reset the token delay, leading to spurious failures.
NSS 3.25 release notes
:36:d2:4c:1c:b9:95:3a:06:65:39:b1:15:82:dc:48:7b:48:33 cn = certplus root ca g1 sha-256 fingerprint: 15:2a:40:2b:fc:df:2c:d5:48:05:4d:22:75:b3:9c:7f:ca:3e:c0:97:80:78:b0:f0:ea:76:e5:61:a6:c7:43:3e cn = certplus root ca g2 sha-256 fingerprint: 6c:c0:50:41:e6:44:5e:74:69:6c:4c:fb:c9:f8:0f:54:3b:7e:ab:bb:44:b4:ce:6f:78:7c:6a:99:71:c4:2f:17 cn = opentrust root ca g1 sha-256 fingerprint: 56:c7:71:28:d9:8c:18:d9:1b:4c:fd:ff:bc:25:ee:91:03:d4:75:8e:a2:ab:ad:82:6a:90:f3:45:7d:46:0e:b4 cn = opentrust root ca g2 sha-256 fingerprint: 27:99:58:29:fe:6a:75:15:c1:bf:e8:48:f9:c4:76:1d:b1:6c:22:59:29:25:7b:f4:0d:08:94:f2:9e:a8:ba:f2 cn = opentrust root ca g3 sha-256 fingerprint: b7:c3:62:31:70:6e:81:0...
NSS 3.37 release notes
nss supports opening sql databases in read-only mode.
NSS 3.39 release notes
92d57b5177abd7ac1037958356d1e094518be5f2 the following ca certificates had the websites trust bit disabled: cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad826a90f3457d460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 27995829fe6a7515c1bfe848f9c4761db16c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f5709a410f75b6292 bug...
NSS 3.41 release notes
sha-256 fingerprint: a6c51e0da5ca0a9309d2e4c0e40c2af9107aae8203857fe198e3e769e343085c cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad826a90f3457d460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 27995829fe6a7515c1bfe848f9c4761db16c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f5709a410f75b6292 bugs fixed in nss 3.41 ...
NSS 3.44 release notes
- lib/freebl/crypto_primitives.c assumes a big endian machine 1532384 - in nss test certificates, use @example.com (not @bogus.com) 1538479 - post-handshake messages after async server authentication break when using record layer separation 1521578 - x25519 support in pk11pars.c 1540205 - freebl build fails with -dnss_disable_chachapoly 1532312 - post-handshake auth doesn't interoperate with openssl 1542741 - certutil -f crashes with segmentation fault 1546925 - allow preceding text in try comment 1534468 - expose chacha20 primitive 1418944 - quote cc/cxx variables passed to nspr 1543545 - allow to build nss as a static library 1487597 - early data that arrives before the handshake completes can be read afterwards 1548398 - freebl_gtest not building on linux/mac 1548722 - fix some...
NSS 3.45 release notes
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 ...
NSS 3.47 release notes
ed 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 aarch64_be while building freebl/gcm bug 1385039 - build nspr tests as part of nss continuous integration bug 1581391 - fix build on openbsd/arm64 after bug #1559012 bug 1581041 - mach-commands -> mach-completion bug 1558313 - code bugs found by clang scanners.
NSS 3.51 release notes
ison of integers of different signs: 'int' and 'unsigned long' in security/nss/lib/freebl/ecl/ecp_25519.c:88 bug 1609751 - add test for mp_int clamping bug 1582169 - don't attempt to read the fips_enabled flag on the machine unless nss was built with fips enabled bug 1431940 - fix a null pointer dereference in blake2b_update bug 1617387 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable 'getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.51 compatibility nss 3.51 shared librarie...
NSS Sample Code sample6
once keys are generated, it can be opened without read-write * subsequently (nss_init).
nss tech note3
netscape has its own openly defined cert type extension, which can be used to explicitly set the cert type in any cert.
NSS Third-Party Code
compiled in sqlite [/lib/sqlite] berkleydb [/lib/dbm] zlib [/lib/zlib] libjar [/lib/jar] fiat-crypto, ring [lib/freebl/ecl] used for tests gtest [/gtests] downloaded by certain test tooling tlsfuzzer [/tests/tlsfuzzer] bogo tests [/tests/bogo] boringssl, openssl [/tests/interop] ...
Notes on TLS - SSL 3.0 Intolerant Servers
) domino-go-webserver/4.6.2.6 (and perhaps some later versions) ibm_http_server/1.3.6.3 or earlier (* update to 1.3.6.4) ibm_http_server/1.3.12.1 or earlier (* update to 1.3.12.2) java web server 2 osu/3.2 - decthreads http server for openvm stronghold/2.2 webmail v.
PKCS11 module installation
using the firefox preferences to install pkcs #11 modules save the pkcs #11 module to a permanent location on your local computer open the firefox preferences dialog.
FC_GetOperationState
syntax ck_rv fc_getoperationstate( ck_session_handle hsession, ck_byte_ptr poperationstate, ck_ulong_ptr puloperationstatelen ); parameters hsession [in] handle of the open session.
FC_GetTokenInfo
ulsessioncount: number of sessions that this application currently has open with the token ulrwsessioncount: number of read/write sessions that this application currently has open with the token hardwareversion: hardware version number, for example, 8.3 (major=0x08, minor=0x03), which are the version numbers of the certificate and key databases, respectively.
FC_InitToken
ckr_token_write_protected we don't have a reference to the key database (we failed to open the key database or we have released our reference).
FC_Initialize
nss_nodb_init(""), which initializes nss with no databases: "configdir='' certprefix='' keyprefix='' secmod='' flags=readonly,nocertdb,nomod db,forceopen,optimizespace " mozilla firefox initializes nss with this string (on windows): "configdir='c:\\documents and settings\\wtc\\application data\\mozilla\\firefox\\profiles\\default.7tt' certprefix='' keyprefix='' secmod='secmod.db' flags=optimizespace manufacturerid='mozilla.org' librarydescription='psm internal crypto services' cryptotokendescription='generic crypto services' dbtokendescription=...
FC_SetOperationState
syntax ck_rv fc_setoperationstate( ck_session_handle hsession, ck_byte_ptr poperationstate, ck_ulong uloperationstatelen, ck_object_handle hencryptionkey, ck_object_handle hauthenticationkey ); parameters hsession [in] handle of the open session.
NSC_InitToken
slot 1 doesn't have a key database.) we don't have a reference to the key database (we failed to open the key database or we have released our reference).
FIPS mode of operation
general-purpose functions fc_getfunctionlist fc_initialize fc_finalize fc_getinfo slot and token management functions fc_getslotlist fc_getslotinfo fc_gettokeninfo fc_waitforslotevent fc_getmechanismlist fc_getmechanisminfo fc_inittoken fc_initpin fc_setpin session management functions fc_opensession fc_closesession fc_closeallsessions fc_getsessioninfo fc_getoperationstate fc_setoperationstate fc_login fc_logout object management functions these functions manage certificates and keys.
NSS environment variables
pkcs #11 module logger 3.6 nss_default_db_type string ("dbm", "sql", or "extern") determines the default database type to open if the app does not specify.
NSS functions
r cert_keyfromdercrl mxr 3.4 and later cert_makecanickname mxr 3.4 and later cert_mergeextensions mxr 3.10 and later cert_nametoascii mxr 3.2 and later cert_newcertlist mxr 3.2 and later cert_newtempcertificate mxr 3.12 and later cert_nicknamestringsfromcertlist mxr 3.4 and later cert_opencertdbfilename mxr 3.2 and later cert_ocspcachesettings mxr 3.11.7 and later cert_pkixverifycert mxr 3.12 and later cert_removecertlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfail...
NSS tools : certutil
-x force the key and certificate database to open in read-write mode.
NSS tools : modutil
-nocertdb do not open the certificate or key databases.
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode 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...
troubleshoot.html
if the build fails early on the gmakein coreconf try updating your cvs tree with -p: cd mozilla cvs update -p building a 32-bit version on a 64-bit may fail with: /usr/include/features.h:324:26: fatal error: bits/predefs.h: no such file or directory in this case remember to set use_64=1 testing nss the ssl stress test opens 2,048 tcp connections in quick succession.
NSS reference
secmod_loadusermodule secmod_unloadusermodule secmod_closeuserdb secmod_openuserdb pk11_findcertfromnickname pk11_findkeybyanycert pk11_getslotname pk11_gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc ssl functions based on "ssl functions" in the ssl reference and "ssl functions" and "deprecated ssl functions" in nss public functions.
sslcrt.html
description this function is useful for determining whether the default certificate database has been opened.
ssltyp.html
certcertdbhandle an opaque handle structure for open certificate databases.
NSS Tools
many tools implement private versions of pkcs11init(), opencertdb(), etc.
NSS Tools modutil
-nocertdb do not open the certificate or key databases.
NSS Tools pk12util
error codes pk12util can return the following values: 0 - no error 1 - user cancelled 2 - usage error 6 - nls init error 8 - certificate db open error 9 - key db open error 10 - file initialization error 11 - unicode conversion error 12 - temporary file creation error 13 - pkcs11 get slot error 14 - pkcs12 decoder start error 15 - error read from import file 16 - pkcs12 decode error 17 - pkcs12 decoder verify error 18 - pkcs12 decoder validate bags error 19 - pkcs12 decoder import bags error 20 - key db conversion version 3 to version 2 e...
NSS Tools ssltap
description the ssltap command opens a socket on a rendezvous port and waits for an incoming connection from the client side.
certutil
-x force the key and certificate database to open in read-write mode.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
-nocertdb do not open the certificate or key databases.
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error ...
Rhino Debugger
opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files.
Download Rhino
license rhino is open source.
Rhino license
rhino is available under open source licenses.
Rhino shell
readurl(url [, charactercoding]) open an input connection to the given string url, read all its bytes and convert them to a string using the specified character coding or default character coding if explicit coding argument is not given.
Rhino
rhino is an open-source implementation of javascript written entirely in java.
Rebranding SpiderMonkey (1.8.5)
using your favorite editor open up the file named makefile for editing.
FOSS
feel free to add your own spidermonkey-based open source projects (and if necessary add categories)!
Hacking Tips
/* open your png viewer with the result of iongraph */ this gdb instrumentation is supposed to work with debug builds, or with optimized build compiled with --enable-jitspew configure flag.
Bytecode Descriptions
(a jsop::poplexicalenv is always emitted at the end of the block, and extra copies are emitted on "exit slides", where a break, continue, or return statement exits the scope.) the script's jsscript::scopenotes() must identify exactly which instructions begin executing in this scope.
SpiderMonkey Internals
jsdhash uses open addressing.
SpiderMonkey 52
that will open a small window in the bottom left with a line like "artifact uploaded:mozjs-52.x.y.tar.bz2".
SpiderMonkey releases
that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
Setting up CDT to work on SpiderMonkey
step 3 - index all the code to let cdt know about the build, it has to invoke make itself (or, as is done in the guide for the whole mozilla codebase on mdn, read a log of the build), which can be setup with these simple steps: open the project's properties by selecting its root and clicking "properties" in the "file" menu and select "c/c++ build".
TPS Tab Lists
tion/crossweave/raw-file/2d9aca9585b6/pages/page1.html", title: "crossweave test page 1", profile: "profile1" }, { uri: "data:text/html,<html><head><title>hello</title></head><body>hello</body></html>", title: "hello", profile: "profile1" } ]; tab lists and phase actions tabs cannot be modified or deleted, only added or verified with the following functions: tabs.add - opens the specified tabs in the browser window.
TPS Tests
note: be prepared not to use your computer for 15 or so minutes after starting a full run of tps, as it will open and close a fairly large number of firefox windows.
Zest
it is completely free, open source and can be included in any tool whether open or closed, free or commercial.
Redis Tips
this document is a collection of some examples and tips for using redis, the open-source data structure server.
The Rust programming language
rust is a new open-source systems programming language created by mozilla and a community of volunteers, designed to help developers create fast, secure applications which take full advantage of the powerful features of modern multi-core processors.
Setting up an update server
open them and find this line: #defines['disable_updater_authenticode_check'] = true.
AT APIs Support
open komodo - platform for building developer environments miro - a free, open source internet tv and video player any xulrunner application (songbird media player, etc.) extensions to other xul apps (e.g.
Mork
MozillaTechMork
mork is a database file format invented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be released open source.
History Service Design
only the first level of a node is usually filled, internal nodes or queries will populate themselves when opened.
Using the Places history service
break; } in case the database is locked by a third party process and cannot be opened, a "places-database-locked" notification is fired, in such a case the service won't be able to initialize.
Avoiding leaks in JavaScript XPCOM components
consider the example of bug 170022 (which also demonstrates a leak via a global variable, fixed later in bug 231266): const observer = { observe: function(subject, topic, data) { if (topic != "open-new-tab-request" || subject != window) return; delayedopentab(data); } }; const service = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); service.addobserver(observer, "open-new-tab-request", false); in this example, there is a similar cycle between observe and service.
Creating the Component Code
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Finishing the Component
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Packaging WebLock
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Resources
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Setting up the Gecko SDK
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Using XPCOM Utilities to Make Things Easier
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
Creating XPCOM components
this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later.
How To Pass an XPCOM Object to a New Window
getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/debug.xul", "debug history", "chrome,centerscreen,resizable", myobject); note in this example that myobject is passed to the openwindow() method; you can pass any xpcom object (or any other value, for that matter) in this way.
Development
list of open javaxpcom bugs open a new javaxpcom bug checkins within the last month ...
nsIRegistry
rs.openwellknownregistry(2); // 2 signifies the applicationregistry, if i understand right var st = rs.enumerateallsubtrees(2); // 2 signifies "common", see libreg source (reg.h) for info now you have an nsienumerator that can report the subtrees.
imgILoader
this must already be opened before this method is called, and there must have been no ondataavailable calls for it yet.
mozIRegistry
open issues we have identified two open issues, neither of which appear to be so hard that it we won't be able to solve them in a timely fashion: if and when we remove what is currently a static binding of clsids, there will be the risk that required clsids won't be present.
mozIStorageAggregateFunction
sample code both of the following code samples assume that the variable dbconn is an opened mozistorageconnection.
mozIStorageFunction
sample code both of the following code samples assume that the variable dbconn is an opened mozistorageconnection.
DefaultKeyBinding
« nsiaccessible page summary provides localized string of global keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o).
nsIAccessible
defaultkeybinding provides localized string of global keyboard accelerator for default action, such as ctrl+o for open file.
nsIAccessibleEvent
event_acceleratorchange 0x8012 event_menustart 0x0004 event_menuend 0x0005 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b event_contexthelpstart 0x000c event_contexthelpend 0x000d event_dragdropstart 0x000e event_dragdropend 0x000f event_dialogstart 0x0010 event_dialogend 0x0011 event_scrollingstart 0x0012 event_scrollingend 0x0013 event_minimizestart 0x0016 event_minimizeend 0x0017 event_atk_property_change 0x0100 event_atk_selection_change 0x0101 event_atk_text_change 0x0102 event_atk_text_selection_change 0x0103 event_atk_text_caret_move 0x0104 ...
nsIBadCertListener2
targetsite the site name that was used to open the current connection.
nsICacheService
as a result, devices excluded by the storage policy will not be searched when opening entries from the returned session.
nsICommandLine
preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example).
nsICommandLineHandler
if this handler finds arguments that it understands, it should perform the appropriate actions (such as opening a window), and remove the arguments from the command-line array.
nsIDialogCreator
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 opendialog(in unsigned long atype, in acstring aname, in acstring afeatures, in nsidialogparamblock aarguments, [optional] in nsidomelement aframeelement); constants constant value description unknown_dialog 0 generic_dialog 1 select_dialog 2 methods opendialog() void opendialog( in unsigned long atype, in acstring aname, in acstring afeatures, in nsidialogparamblock aarguments, in nsidomelement aframeelement optional ); parameters atype aname afeatures aarguments aframeelement optional ...
nsIDocShell
violates the xpcom interface guidelines detacheditorfromwindow() disconnects this docshell's editor from its window, and stores the editor data in the open document's session history entry.
nsIFileView
mn type is size unless an appropriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex="1" primary="true"/> <treecol id="lastmodifiedcolumn" label="date" flex="1"/> <treecol id="size" label="size" flex="1"/> </treecols> <treechildren/> </tree> <script> var dir="/home/"; //the directory to be opened var ftree = document.getelementbyid("ftree"); //the xul tree element var lfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); lfile.initwithpath(dir); // open the directory var fview = components.classes["@mozilla.org/filepicker/fileview;1"] .createinstance(components.interfaces.nsifileview); //create an instanc...
nsIHttpChannelInternal
channelisfordownload boolean external handlers may set this to true to notify the channel that it is open on behalf of a download.
nsILoginManagerPrompter
the prompt will be associated with this window (or, if a notification bar is being used, topmost opener in some cases).
nsIMsgAccount
exceptions thrown ns_error_already_opened if it is called more then once removeidentity() removes an identity from this account.
nsIMsgWindow
openfolder nsimsgfolder this is used to track the folder currently open in the ui.
nsIMsgWindowCommands
void selectmessage( in acstring messageuri ); parameters messageuri the uri of the message to open.
nsINavHistoryResult
note: keep in mind that you need to open containers for their results to be valid.
nsINavHistoryService
it declares that the given uri is being opened as a result of following a bookmark.
nsIPushSubscription
mozilla.org/scriptsecuritymanager;1"] .getservice(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); function sendsubscriptiontoserver(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request.open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base64-encode the key and authentication secret.
nsISHistory
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in an embedded browser environment, the nsiwebbrowser object creates an instance of session history for each open window.
nsISSLErrorListener
targetsite the site name that was used to open the current connection.
nsISearchEngine
constants search engine type constants constant value description type_mozsearch 1 type_sherlock 2 type_opensearch 3 search engine data type constants constant value description data_xml 1 data type is xml data_text 2 data type is text.
nsIServerSocketListener
the transport is in the connected state, and read/write streams can be opened using the normal nsitransport api.
nsISocketTransportService
void attachsocket( in prfiledescptr afd, in nsasockethandlerptr ahandler ); parameters afd open file descriptor of the socket to control.
nsIUploadChannel
the upload stream may only be set prior to the invocation of asyncopen on the channel.
nsIWebBrowserPersist
it must not be opened yet.
nsIWebContentHandlerRegistrar
can bypass this by opening about:config and setting preference of gecko.handlerservice.allowregisterfromdifferenthost to true.
nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen().
nsIXULRuntime
browsertabsremoteautostart boolean if true, browser tabs may be opened by default in a different process from the main browser ui.
nsIXULTemplateBuilder
if false, the element's contents are only generated if it's open.
nsIZipReaderCache
if the zip reader for the given file is not in the cache, a new nsizipreader is opened (see nsizipreader.open()).
NS_ASSERTION
in a debug build the failure text is written to console (stderr), into the nspr debug log, and on windows a dialog box is opened.
Setting HTTP request headers
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.
XPCOM ABI
to retrieve the abi of your firefox or thunderbird, open the error console (accessible through tools | error console) and evaluate the following javascript code: components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime) .xpcomabi if either the cpu architecture or the c++ compiler are unknown, the application wouldn't have an xpcom abi string and attempts to get it will result in error ns_e...
XPIDL
a method that opens a file should almost certainly have its result checked.) this property will cause moz_must_use to be added to the generated function declarations, which means certain compilers (e.g.
Mozilla technologies
r extension authors to access rss and atom feeds.life after xul: building firefox interfaces with htmlthis page gathers technical solutions to common problems encountered by teams shipping html-based interfaces inside firefox.morkmork is a database file format invented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be released open source.
Cached compose window FAQ
if the user opens (but never sends or closes compose windows), this trick will not apply to them.
Events
compose-send-message a message gets sent compose-window-close a compose window gets closed compose-window-init a compose window has been opened compose-window-reopen a cached compose window has been reopened.
Mail event system
in this example, there is a dialog open that shows properties for this folder including the message count.
Building a Thunderbird extension 1: introduction
thunderbird is a community managed open-source email application.
Building a Thunderbird extension 3: install manifest
open the file called install.rdf that you created at the top of your extension's directory hierarchy and paste the following text into the file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3550f7...
Access Thunderbird Window Areas
an alternative to these methods is to directly access the element by it's id as in the detect when a folder opens example.
Access Window
the window object represents the window of the thunderbird application as well as the currently opened tabs.
Add New Tab
var aurl = "chrome://myext/mytab.xul"; let tabmail = getmail3pane().document.getelementbyid("tabmail"); tabmail.opentab("chrometab", { chromepage: aurl }); ...
Tips and Tricks from the newsgroups
scripts from an extension (for example, to create a symlink) get extension metadata call java from thunderbird extensions (also an example here, written for firefox but compatible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageuri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without selecting message repeat image display using css sprites ...
Using the Multiple Accounts API
preference: mail.server.server.max_cached_connections - integer, max number of connections left open to the server preference: mail.server.server.empty_trash_threshhold integer, (should not be imap-specific) max k of wasted diskspace before we purge a folder preference: mail.server.server.delete_model - integer, delete model (move to trash, imap delete, purge immediately, not sure of values) preference: mail.server.server.timeout - integer, number of minutes a connection is id...
Thunderbird
currently one of the most popular open source email clients, it is used by tens of millions of people around the world to bring together all their email accounts, chat, newsgroup and feed reading in a familiar high-productivity environment.
Using tab-modal prompts
n tab modal', 'text goes here', input, 'check text, if no text, checkbox is not shown', check]); //this here is just an alert, showing the values of the prompt prompt.alert.apply(null, ['title not shown in modal', 'user clicked ok: ' + ok + '\n' + 'checked: ' + check.value + '\ninput value: ' + input.value]); note: because the prompts are shown in a tab, if the tab is closed while the prompt is open it will throw an exception.
Using the Mozilla source server
if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line.
js-ctypes reference
working with libraries to load a library, use ctypes.open().
Blocking By Domain - Plugins
the initial contents of the third-party plugin block list are based on disconnect's open source blocklist.
Flash Activation: Browser Comparison - Plugins
a user can click the information icon on the left side of the location bar on any site to open the site information and allow flash on that site: microsoft edge in-page ui is displayed when the site attempts to use flash.
Initialization and Destruction - Plugins
more than one instance of the same plug-in can exist if a single page contains multiple embedded plug-ins, or if several browser windows are open and display the same data type.
Plugin Roadmap for Firefox - Plugins
see also mozilla firefox october 2015 - npapi plugins in firefox july 2016 - reducing adobe flash usage in firefox july 2017 - firefox roadmap for flash end-of-life adobe flash november 2015 - flash, html5 and open web standards july 2017 - flash & the future of interactive content google chrome flash roadmap sep 2013 - saying goodbye to our old friend npapi may 2014 - update on npapi deprecation november 2014 - the final countdown for npapi august 2016 - flash and chrome december 2016 - roll-out plan for html5 by default july 2017 - saying goodbye to flash in chrome microsoft edge and interne...
DOM Inspector - Firefox Developer Tools
you can install the sidebar panel via edit > preferences > advanced > dom inspector, then simply open up the inspector panel and visit a website.
Inspecting web app manifests - Firefox Developer Tools
when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
Debugging service workers - Firefox Developer Tools
when you open the application panel’s service workers view on a page that doesn't have a service worker registered, you'll get the following output shown: this gives you some advice on what to do if you don't have a service worker registered, and were perhaps expecting there to be one registered!
Debug worker threads - Firefox Developer Tools
you can open the javascript file for the worker process and set breakpoints and logpoints just as you can with javascript code running on the main thread.
Debug eval sources - Firefox Developer Tools
this source is then listed in the source list pane, and can be opened and debugged like any other source.
Use watchpoints - Firefox Developer Tools
in the scopes pane on the right side of the debugger user interface, find an object you want to watch, and right-click it to open its context menu.
How to - Firefox Developer Tools
access debugging in add-onsbreaking on exceptionsdebug eval sourcesdisable breakpointsexamine, modify, and watch variableshighlight and inspect dom nodesignore a sourceopen the debuggerpretty-print a minified filesearchset a breakpointset a conditional breakpointset watch expressionsstep through codeuse a source mapuse watchpoints ...
Set a logpoint - Firefox Developer Tools
you can make it easier to see the message by opening a split console under the debugger.
Set an XHR breakpoint - Firefox Developer Tools
to turn on the feature: open the debugger click on "pause on any url" which acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header, enter the url in which you are interested, and press enter.
Set event listener breakpoints - Firefox Developer Tools
using a standard event breakpoint to use an event breakpoint, you open up the javascript debugger, and find and expand the event listener breakpoints section in the right hand column.
Source map errors - Firefox Developer Tools
you may encounter this when trying to open one of the original sources in the debugger.
The Firefox JavaScript Debugger - Firefox Developer Tools
open the debugger pretty-print a minified file search use a source map pause execution you probably want to pause the execution of your code, in order to see what is going on at various points.
Deprecated tools - Firefox Developer Tools
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.
Eyedropper - Firefox Developer Tools
underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
JSON viewer - Firefox Developer Tools
if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting.
Aggregate view - Firefox Developer Tools
let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial createtoolbars() call).
Dominators view - Firefox Developer Tools
taking a snapshot to see what it looks like in the dominators view: load the page enable the memory tool in the settings, if you haven't already open the memory tool check "record call stacks" press the button labeled "make monsters!" take a snapshot switch to the "dominators" view analyzing the dominators tree you'll see the three arrays as the top three gc roots, each retaining about 23% of the total memory usage: if you expand an array, you'll see the objects (monsters) it contains.
Memory - Firefox Developer Tools
the basics opening the memory tool taking a heap snapshot comparing two snapshots deleting snapshots saving and loading snapshots recording call stacks analyzing snapshots the tree map view is new in firefox 48, and the dominators view is new in firefox 46.
Performance Analysis - Firefox Developer Tools
(alternatively, if you have only just opened the network monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.) the network monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache.
Network monitor toolbar - Firefox Developer Tools
save all as har opens a file dialog box so you can save the current contents of the network log as a har file with the extension .har.
Network request details - Firefox Developer Tools
the resend button opens a menu with two items: resend: simply resends the request.
Page inspector 3-pane mode - Firefox Developer Tools
you just need to have the relevant tab open to see the effect.
Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swatch next to them: clicking the swatch opens a filter editor: the filter editor lists each of the effects performed by that filter on a separate line.
Edit Shape Paths in CSS - Firefox Developer Tools
activate / deactivate the shape path editor the shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector.
Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
Select and highlight elements - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
Animation inspector example: CSS transitions - Firefox Developer Tools
e">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); 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#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.
Animation inspector example: Web Animations API - Firefox Developer Tools
ipple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ ...
How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
Page inspector keyboard shortcuts - Firefox Developer Tools
show/hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current css file in style editor (computed view only, when more information is shown for a property and a css file reference is focused).
UI Tour - Firefox Developer Tools
click the name of the property to open the reference article for that property on mdn web docs.
Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts ...
Paint Flashing Tool - Firefox Developer Tools
using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page.
How to - Firefox Developer Tools
open the performance tools to open the performance tools: press shift + f5 select "performance" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
Performance - Firefox Developer Tools
how to basic tasks: open the tool, create, save, load, and configure recordings components of the performance tool frame rate understand your site's overall responsiveness.
Responsive Design Mode - Firefox Developer Tools
on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is...
IndexedDB - Firefox Developer Tools
note: the data shown in an indexeddb database is a snapshot of the data as it was when you opened the storage inspector tool.
Taking screenshots - Firefox Developer Tools
this is useful if you want to pop open a menu or invoke a hover state for the screenshot.
View Source - Firefox Developer Tools
to activate view source: context-click in the page and select view page source press ctrl + u on windows and linux, or cmd + u on macos the command opens a new tab with the source for the current page.
Web Console Helpers - Firefox Developer Tools
in fact, this page you're reading right now has one, so you can open up the web console and try this right now.
Web Console UI Tour - Firefox Developer Tools
in firefox 71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode.
Web Console - Firefox Developer Tools
opening the web console you open the web console from a menu or with a keyboard shortcut: choose web console from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press the ctrl+shift+k (command+option+k on os x) keyboard shortcut.
AudioBufferSourceNode.playbackRate - Web APIs
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; ...
AudioBufferSourceNode.start() - Web APIs
the default value, 0, will begin playback at the beginning of the audio buffer, and offsets past the end of the audio which will be played (based on the audio buffer's duration and/or the loopend property) are silently clamped to the maximum value allowed.
AudioBufferSourceNode - Web APIs
audiobuffersourcenode.loopend optional a floating-point number indicating the time, in seconds, at which playback of the audiobuffer stops and loops back to the time indicated by loopstart, if loop is true.
AudioContext() - Web APIs
in particular, the specification doesn't indicate a maximum or minimum number of audio contexts that must be able to be open at the same time, so this is left up to the browser implementations to decide.
AudioProcessingEvent - Web APIs
er source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scri...
Background Tasks API - Web APIs
css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 16px; } .logbox { margin-top: 16px; width: 400px; height:500px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0 6px 4px; height: 22px; background-color: lightblue; border-bottom: 1px solid black; border-radius: 6px 6px 0 0; } #log { font: 12px "co...
BaseAudioContext.createConvolver() - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with decoding audio data" + e.err...
BaseAudioContext.createScriptProcessor() - Web APIs
er source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scri...
BaseAudioContext.decodeAudioData() - Web APIs
// then we put the buffer into the source function getdata() { source = audioctx.createbuffersource(); var request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.loop = true; }, function(e){ console.log("error with decoding audio data" + e.err); }); }...
CSSPseudoElement - Web APIs
(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.
Using the CSS Typed Object Model - Web APIs
open up this example in codepen or jsfiddle, and change some features.
Cache.delete() - Web APIs
WebAPICachedelete
examples caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { someuiupdatefunction(); }); }) specifications specification status comment service workersthe definition of 'cache: delete' in that specification.
Cache.keys() - Web APIs
WebAPICachekeys
examples caches.open('v1').then(function(cache) { cache.keys().then(function(keys) { keys.foreach(function(request, index, array) { cache.delete(request); }); }); }) specifications specification status comment service workersthe definition of 'cache: keys' in that specification.
Cache.match() - Web APIs
WebAPICachematch
if (event.request.method === 'get' && event.request.headers.get('accept').indexof('text/html') !== -1) { console.log('handling fetch event for', event.request.url); event.respondwith( fetch(event.request).catch(function(e) { console.error('fetch failed; returning offline page instead.', e); return caches.open(offline_cache).then(function(cache) { return cache.match(offline_url); }); }) ); } }); specifications specification status comment service workersthe definition of 'cache match' in that specification.
Cache.matchAll() - Web APIs
WebAPICachematchAll
examples caches.open('v1').then(function(cache) { cache.matchall('/images/').then(function(response) { response.foreach(function(element, index, array) { cache.delete(element); }); }); }) specifications specification status comment service workersthe definition of 'cache: matchall' in that specification.
CacheStorage.has() - Web APIs
WebAPICacheStoragehas
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.
A basic ray-caster - Web APIs
open in new window why?
Basic usage of canvas - Web APIs
other contexts may provide different types of rendering; for example, webgl uses a 3d context based on opengl es.
Client.url - Web APIs
WebAPIClienturl
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status co...
Clients.get() - Web APIs
WebAPIClientsget
examples self.clients.get(id).then(function(client) { self.clients.openwindow(client.url); }); specifications specification status comment service workersthe definition of 'get()' in that specification.
Clients.matchAll() - Web APIs
WebAPIClientsmatchAll
examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.length ; i++) { if (clientlist[i].url === 'index.html') { clients.openwindow(clientlist[i]); // or do something else involving the matching client } } }); specifications specification status comment service workersthe definition of 'clients: matchall' in that specification.
CloseEvent - Web APIs
1001 going away the endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.
console.log() - Web APIs
WebAPIConsolelog
please be warned that if you log objects in the latest versions of chrome and firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.
ConvolverNode.buffer - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with decoding audio data" + e.err...
ConvolverNode.normalize - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with decoding audio data" + e.err...
Credential Management API - Web APIs
openid connect is an example of such a framework.
CustomElementRegistry.get() - Web APIs
examples customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } }) // return a reference to the my-paragraph constructor let ctor = customelements.get('my-paragraph'); specifications specification status comment html living standardthe definition of 'customelements.get()' in that specification.
CustomElementRegistry - Web APIs
) { // always call super first in 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...
DOMException - Web APIs
versionerror an attempt was made to open a database using a lower version than the existing version (no legacy code value and constant name).
Detecting device orientation - Web APIs
(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.
Document: drag event - Web APIs
ropzone") { 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 defini...
Document.timeline - Web APIs
WebAPIDocumenttimeline
this timeline is unique to each document and persists for the lifetime of the document including calls to document.open().
Document.writeln() - Web APIs
WebAPIDocumentwriteln
this is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml mime type.
Document - Web APIs
WebAPIDocument
document.open() opens a document stream for writing.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
for example, if you have a reference to a parent node and want to affect its first element child using node.firstchild, if there is a rogue whitespace node just after the opening parent tag you will not get the result you are expecting.
EXT_shader_texture_lod - Web APIs
the ext_shader_texture_lod extension is part of the webgl api and adds additional texture functions to the opengl es shading language which provide the shader writer with explicit control of lod (level of detail).
EffectTiming.fill - Web APIs
WebAPIEffectTimingfill
</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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 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 for our purposes is the css that styles the "box" element that we'll be animating.
EffectTiming.iterations - Web APIs
examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web ...
Element: contextmenu event - Web APIs
the contextmenu event fires when the user attempts to open a context menu.
Element.getElementsByTagName() - Web APIs
example // check the status of each data cell in a table const table = document.getelementbyid('forecast-table'); const cells = table.getelementsbytagname('td'); for (let cell of cells) { let status = cell.getattribute('data-status'); if (status === 'open') { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagname()' in that specification.
EventSource: error event - Web APIs
the error event of the eventsource api is fired when a connection with an event source fails to be opened.
EventSource.readyState - Web APIs
possible values are: 0 — connecting 1 — open 2 — closed examples var evtsource = new eventsource('sse.php'); console.log(evtsource.readystate); note: you can find a full example on github — see simple sse demo using php.
ExtendableEvent.waitUntil() - Web APIs
example using waituntil() within a service worker's install event: addeventlistener('install', event => { const precache = async () => { const cache = await caches.open('static-v1'); return cache.addall([ '/', '/about/', '/static/styles.css' ]); }; event.waituntil(precache()); }); specifications specification status comment service workersthe definition of 'waituntil()' in that specification.
ExtendableEvent - Web APIs
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...
FederatedCredential.protocol - Web APIs
openidconnect).
FederatedCredential - Web APIs
openid connect is an example of a federated identity provider framework.
FetchEvent - Web APIs
const cache = await caches.open('dynamic-v1'); const cachedresponse = await cache.match(event.request); if (cachedresponse) { // if we found a match in the cache, return it, but also // update the entry in the cache in the background.
FileError - Web APIs
WebAPIFileError
for example, a file did not exist but was being opened.
FileException - Web APIs
for example, a file did not exist but was being opened.
FileSystemDirectoryEntry - Web APIs
function onfs(fs){ fs.root.getdirectory('documents', {create:true}, function(directoryentry){ //directoryentry.isfile === false //directoryentry.isdirectory === true //directoryentry.name === 'documents' //directoryentry.fullpath === '/documents' }, onerror); } // opening a file system with temporary storage window.requestfilesystem(temporary, 1024*1024 /*1mb*/, onfs, onerror); properties this interface has no properties of its own, but inherits properties from its parent interface, filesystementry.
FileSystemEntrySync - Web APIs
for example, if your app is in http://ww.html5rocks.com, open filesystem:http://www.html5rocks.com/temporary/ in a tab.
FormDataEvent.formData - Web APIs
ject, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdata' in that specification.
FormDataEvent - Web APIs
ject, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdataevent' in that specification.
GlobalEventHandlers.onanimationcancel - Web APIs
"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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 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, let's take a look at the styles for the box that we're animating.
GlobalEventHandlers.onanimationend - Web APIs
y"> 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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 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, let's take a look at the styles for the box that we're animating.
GlobalEventHandlers.onanimationiteration - Web APIs
iv 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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 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, let's take a look at the styles for the box that we're animating.
GlobalEventHandlers.onanimationstart - Web APIs
y"> 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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 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, let's take a look at the styles for the box that we're animating.
GlobalEventHandlers.onformdata - Web APIs
ct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'onformdata' in that specification.
GlobalEventHandlers.onpointerdown - Web APIs
#target { width: 400px; height: 30px; text-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below.
HTMLAreaElement - Web APIs
htmlareaelement.target is a domstring that reflects the target html attribute, indicating the browsing context in which to open the linked resource.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
var netutilcallback = function() { return function(result) { if (!components.issuccesscode(result)) { alert('failed to create icon'); } else { alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
HTMLDialogElement: close event - Web APIs
bubbles no cancelable no interface event event handler 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 (typ...
HTMLElement.hidden - Web APIs
.panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; } result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in tha...
HTMLFormElement: formdata event - Web APIs
ject, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); the onformdata version would look like this: formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhand...
HTMLImageElement.alt - Web APIs
otherwise, readers will find it open by default, which is not the intent here.
HTMLImageElement.complete - Web APIs
examples consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image.
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; padding: 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 javascript string object method repla...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
there are specific circumstances in which this sharing of an event loop among windows with a common origin is possible, such as: if one window opened the other window, they are likely to be sharing an event loop.
Drag Operations - Web APIs
for example, when a link is dragged to a web page, firefox will open the link.
IDBCursor.advance() - Web APIs
WebAPIIDBCursoradvance
for a complete working example, see our idbcursor example (view example live.) function advanceresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications ...
IDBCursor.continue() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification s...
IDBCursor.continuePrimaryKey() - Web APIs
example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.
IDBCursor.key - Web APIs
WebAPIIDBCursorkey
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificatio...
IDBCursor.primaryKey - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; speci...
IDBCursor.source - Web APIs
WebAPIIDBCursorsource
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifica...
IDBCursor - Web APIs
WebAPIIDBCursor
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification st...
IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificat...
IDBCursorWithValue - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification s...
IDBDatabase.createObjectStore() - Web APIs
example // let us open our database var request = window.indexeddb.open("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open().
IDBDatabase.deleteObjectStore() - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IDBDatabase.onclose - Web APIs
this can happen, for example, when the application is shut down or access to the disk the database is stored on is lost while the database is open.
IDBEnvironment - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open("todolist"); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; }; } browser compatibility the compatibility table on this page is generated from structured data.
IDBKeyRange.includes() - Web APIs
idbkeyrange.prototype.includes = idbkeyrange.prototype.includes || function(key) { var r = this, c; if (r.lower !== undefined) { c = indexeddb.cmp(key, r.lower); if (r.loweropen && c <= 0) return false; if (!r.loweropen && c < 0) return false; } if (r.upper !== undefined) { c = indexeddb.cmp(key, r.upper); if (r.upperopen && c >= 0) return false; if (!r.upperopen && c > 0) return false; } return true; }; specification specification status comment indexed database api draftthe definition of 'includes()' in that specificat...
IDBLocaleAwareKeyRange - Web APIs
examples function displaydata() { var keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.lname + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.fname + '&lt;/td&gt;' ...
IDBMutableFile - Web APIs
methods mutablefile.open() returns a lockedfile object to read or write the associated file safely.
IDBObjectStore.getAll() - Web APIs
this method produces the same result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you either call the opencursor() method with the same key.
IDBObjectStore.getAllKeys() - Web APIs
this method produces the same result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you need to call the opencursor() method with the same key.
IDBObjectStore.getKey() - Web APIs
example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.
IDBRequest.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified ...
IDBRequest.onsuccess - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified ...
IDBRequest.readyState - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified ...
IDBRequest.result - Web APIs
WebAPIIDBRequestresult
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified ...
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...
IDBVersionChangeRequest.setVersion() - Web APIs
the new way is to define the version in the idbdatabase.open() method and create and delete object stores in the onupgradeneeded event handler associated with the returned request.
IDBVersionChangeRequest - Web APIs
the new way to do it is to use the idbopendbrequest interface which has now the onblocked handler and the newly needed onupgradeneeded one.
InstallEvent - Web APIs
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); }) ); }); specifica...
Timing element visibility with the Intersection Observer API - Web APIs
body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as t...
Intersection Observer API - Web APIs
: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; 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; padding: 2px; text-align: center; } .topleft { left: 2px; top: 2px; } .topright { right: 2px; top: 2px; } .bottomleft { bottom: 2px; left: 2px; } .bottomright { bottom: 2px; right: 2px; } let ob...
LockedFile - Web APIs
properties lockedfile.filehandle read only the filehandle object from which the lock was opened.
MSCandidateWindowShow - Web APIs
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 candidatewindowshowhan...
MediaDevices.getUserMedia() - Web APIs
first, getusermedia() must always get user permission before opening any media gathering input such as a webcam or microphone.
MediaSource.MediaSource() - Web APIs
/ 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); } ...
MediaSource.activeSourceBuffers - Web APIs
example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is ...
MediaSource.isTypeSupported() - Web APIs
/ 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(); video.play(); ...
MediaSource.sourceBuffers - Web APIs
example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //con...
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; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; ...
Media Session API - Web APIs
the aim of this is allowing users to know what's playing, and to control it, without opening the specific page that launched it.
Media Source API - Web APIs
there are numerous available free and open source tools for transcoding content and preparing it for use with dash, dash file servers, and dash client libraries written in javascript.
Capabilities, constraints, and settings - Web APIs
</div> <div class="rightside"> <h3>actual audio settings:</h3> <textarea id="audiosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float...
MouseEvent.metaKey - Web APIs
on windows, for example, this key may open the start menu.
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
.box { width: 400px; height: 250px; border: 2px solid darkblue; background-color: blue; color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status comment css object model (cssom) view modulethe definition of 'pagex' in that specification.
Navigator.msLaunchUri() - Web APIs
the user can choose to not see the prompt after the first instance for a particular protocol and automatically open the app or service without a user intervention.
Navigator.sendBeacon() - Web APIs
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.
Node.firstChild - Web APIs
WebAPINodefirstChild
<p id="para-01"> <span>first span</span> </p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags.
Node.getRootNode() - Web APIs
WebAPINodegetRootNode
t> // works on chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #document console.log(child.getrootnode().nodename); // #document // create a shadowroot var shadowroot = shadowhost.attachshadow({mode:'open'}); shadowroot.innerhtml = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowchild">content</div>'; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shado...
Node.isConnected - Web APIs
WebAPINodeisConnected
examples standard dom a standard dom example: let test = document.createelement('p'); console.log(test.isconnected); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all;...
Node.nextSibling - Web APIs
WebAPINodenextSibling
after the closing tag of an element and before the opening tag of the next).
Notification.onclick - Web APIs
examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.preventdefault(); // prevent the browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of...
NotificationEvent.action - Web APIs
example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification.
NotificationEvent.notification - Web APIs
console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specifica...
NotificationEvent - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specifica...
OfflineAudioContext.startRendering() - Web APIs
github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function...
OfflineAudioContext - Web APIs
github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function...
PaymentRequestEvent - Web APIs
methods openwindow() opens the specified url in a new window, if and only if the given url is on the same origin as the calling page.
performance.clearResourceTimings() - Web APIs
example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearresourcetimings()")...
PerformanceTiming.connectStart - Web APIs
the legacy performancetiming.connectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network.
PerformanceTiming.requestStart - Web APIs
if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request.
Pinch zoom gestures - Web APIs
<body onload="init();" style="touch-action:none"> <div id="target">touch and hold with 2 pointers, then pinch in or out.<br/> the background color will change to pink if the pinch is opening (zoom in) or changes to lightblue if the pinch is closing (zoom out).</div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly invol...
ProgressEvent - Web APIs
var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification.
PushEvent.data - Web APIs
WebAPIPushEventdata
nt.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 'data' in that specification.
PushEvent - Web APIs
WebAPIPushEvent
ta.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 self.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 'pushevent' in that specification.
PushManager.subscribe() - Web APIs
example this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
PushManager - Web APIs
example this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
Web Push API Notifications best practices - Web APIs
after a few failed attempts to get your attention, they send you an email, and your email app produces a push notification that successfully alerts you, even though your mail web app is not open.
RTCConfiguration.iceServers - Web APIs
examples the configuration below opens a new peer connection, specifying two servers for the ice agent to use for negotiation.
RTCDTMFSender.toneBuffer - Web APIs
in this example, we would send "*" to request access to the vm system, then, after a pause, send a "1" to start playback of voicemail messages, then after a pause, dial "5555" as a pin number to open the messages.
RTCDataChannel.close() - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); dc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function ( console.log("datachannel close"); }; // now negotiate the connection and so forth...
RTCDataChannelEvent.channel - Web APIs
pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent.channel' in that specification.
RTCIceCandidatePairStats.currentRoundTripTime - Web APIs
this information may come from ongoing stun connectivity checks as well as from consent requests made when the connection was initially being opened.
RTCIceCandidatePairStats - Web APIs
this may be based upon requests that were involved in confirming permission to open the connection.
RTCPeerConnection.close() - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); pc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.close()' in that specification.
RTCPeerConnection.removeTrack() - Web APIs
exceptions invalidstateerror the connection is not open.
RTCPeerConnection.sctp - Web APIs
example var pc = new rtcpeerconnection(); var channel = pc.createdatachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerc...
RTCPeerConnection.setLocalDescription() - Web APIs
deprecated exceptions when using the deprecated callback-based version of setlocaldescription(), the following exceptions may occur: invalidstateerror the connection's signalingstate is "closed", indicating that the connection is not currently open, so negotiation cannot take place.
RTCPeerConnection.setRemoteDescription() - Web APIs
exceptions when using the deprecated callback-based version of setremotedescription(), the following exceptions may occur: invalidstateerror the connection's signalingstate is "closed", indicating that the connection is not currently open, so negotiation cannot take place.
RTCPeerConnection - Web APIs
negotiationneeded sent to the rtcpeerconnection when negotiation or renegotiation of the ice connection needs to be performed; this can happen both when first opening a connection as well as when it's neccessary to adapt to changing network conditions.
RTCPeerConnectionIceErrorEvent.address - Web APIs
examples this example creates a handler for icecandidateerror events which creates human readable messages describing the local network interface for the connection as well as the ice server that was being used to try to open the connection, then calls a function to display those as well as the event's errortext property's contents.
RTCRtpTransceiver.setCodecPreferences() - Web APIs
when preparing to open an rtcpeerconnection, you can change the codec parameters from the user agent's default configuration by calling setcodecparameters() before calling either rtcpeerconnection.createoffer() or createanswer().
RTCSctpTransport.state - Web APIs
connected the connection is open for data transmission.
RTCSctpTransport - Web APIs
properties also inherits properties from: eventtarget rtcsctptransport.maxchannelsread only an integer value indicating the maximum number of rtcdatachannels that can be open simultaneously.
Using the Resource Timing API - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits...
format - Web APIs
string font format examples of common extensions truedoc-pfr truedoc™ portable font resource .pfr embedded-opentype embedded opentype .eot type-1 postscript™ type 1 .pfb, .pfa truetype truetype .ttf opentype opentype, including truetype open .ttf truetype-gx truetype with gx extensions - speedo speedo - intellifont intellifont - example myglyph.format = "truedoc-pfr"; specifications specific...
ScriptProcessorNode.bufferSize - Web APIs
er source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptn...
ScriptProcessorNode.onaudioprocess - Web APIs
er source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scri...
ScriptProcessorNode - Web APIs
er source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptn...
Selection.rangeCount - Web APIs
html <table> <tr><td>a.1<td>a.2 <tr><td>b.1<td>b.2 <tr><td>c.1<td>c.2 javascript window.setinterval(function () { console.log(window.getselection().rangecount); }, 1000); result open your console to see how many ranges are in the selection.
ServiceWorkerGlobalScope: contentdelete event - Web APIs
self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); you can also set up the event handler using the serviceworkerglobalscope.ondelete property: self.oncontentdelete = (event) => { ...
ServiceWorkerGlobalScope: install event - Web APIs
celable no interface extendableevent event handler property serviceworkerglobalscope.oninstall examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/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.j...
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); specifications specification status comment unknownthe definition of 'contentdelete' in that specification.
ServiceWorkerGlobalScope.oninstall - Web APIs
}; examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/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.j...
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specificat...
ServiceWorkerGlobalScope.onpush - Web APIs
nt.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.
ServiceWorkerRegistration.pushManager - Web APIs
examples this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
Service Worker API - Web APIs
having modified network requests, wide open to man in the middle attacks would be really bad.
ShadowRoot.innerHTML - Web APIs
examples let customelem = document.queryselector('my-shadow-dom-element'); let shadow = customelem.shadowroot; shadow.innerhtml = '<strong>this element should be more important!</strong>'; specifications this property is not defined by any specifications yet; see this open spec issue to specify it.
SharedWorkerGlobalScope.onconnect - Web APIs
the onconnect property of the sharedworkerglobalscope interface is an event handler representing the code to be called when the connect event is raised — that is, when a messageport connection is opened between the associated sharedworker and the main thread.
SharedWorkerGlobalScope - Web APIs
sharedworkerglobalscope.onconnect is an eventhandler representing the code to be called when the connect event is raised — that is, when a messageport connection is opened between the associated sharedworker and the main thread.
SourceBuffer.changeType() - Web APIs
usage notes if the parent mediasource is in its "ended" readystate, calling changetype() will transition the media source to the "open" readystate and fire a simple event named sourceopen at the parent media source.
Storage Access API - Web APIs
for example, a caller could open a pop-up window from the resolved promise without triggering firefox’s pop-up blocker.
USBDevice.claimInterface() - Web APIs
async function connectdevice(usbdevice) { await usbdevice.open(); if (usbdevice.configuration === null) await usbdevice.selectconfiguration(1); await usbdevice.claiminterface(0); } specifications specification status comment webusbthe definition of 'claiminterface()' in that specification.
USBDevice.close() - Web APIs
WebAPIUSBDeviceclose
the close() method of the usbdevice interface returns a promise that resolves when all open interfaces are released and the device session has ended.
USBDevice.configuration - Web APIs
async function connectdevice(usbdevice) { await usbdevice.open(); if (usbdevice.configuration === null) await usbdevice.selectconfiguration(1); await usbdevice.claiminterface(0); } specifications specification status comment webusbthe definition of 'configuration' in that specification.
VTTCue - Web APIs
WebAPIVTTCue
; video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle to view the live sample.
WebGL2RenderingContext - Web APIs
the webgl2renderingcontext interface provides the opengl es 3.0 rendering context for the drawing surface of an html <canvas> element.
Basic scissoring - Web APIs
scissoring is a distinct stage in the webgl/opengl graphics pipeline (it occurs after color clearing, but before color masking).
Clearing with colors - Web APIs
this is why webgl/opengl is often called a state machine.
Animating objects with WebGL - Web APIs
view the complete code | open this demo on a new page « previousnext » ...
Animating textures in WebGL - Web APIs
view the complete code | open this demo on a new page ...
Creating 3D objects using WebGL - Web APIs
view the complete code | open this demo on a new page « previousnext » ...
Lighting in WebGL - Web APIs
view the complete code | open this demo on a new page exercises for the reader obviously, this is a simple example, implementing basic per-vertex lighting.
Using shaders to apply color in WebGL - Web APIs
onst normalize = false; const stride = 0; const offset = 0; gl.bindbuffer(gl.array_buffer, buffers.color); gl.vertexattribpointer( programinfo.attriblocations.vertexcolor, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexcolor); } view the complete code | open this demo on a new page « previousnext » ...
Using textures in WebGL - Web APIs
view the complete code | open this demo on a new page cross-domain textures loading of webgl textures is subject to cross-domain access controls.
WebGL tutorial - Web APIs
webgl enables web content to use an api based on opengl es 2.0 to perform 3d rendering in an html <canvas> in browsers that support it without the use of plug-ins.
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
create the signaling and peer connections first, the signaling channel needs to be opened and the rtcpeerconnection needs to be created.
Taking still photos with WebRTC - Web APIs
the error callback is called if opening the stream doesn't work.
Using DTMF with WebRTC - Web APIs
dialing once the connection is open our design requires that when the connection is established, we immediately send the dtmf string.
WebSocket: close event - Web APIs
given that you have a variable called examplesocket that refers to an opened websocket, this handler would handle the situation where the socket has been closed.
Writing a WebSocket server in C# - Web APIs
pt> // http://www.websocket.org/echo.html var button = document.queryselector("button"), output = document.queryselector("#output"), textarea = document.queryselector("textarea"), // wsuri = "ws://echo.websocket.org/", wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("click", onclickbutton); websocket.onopen = function (e) { writetoscreen("connected"); dosend("websocket rocks"); }; websocket.onclose = function (e) { writetoscreen("disconnected"); }; websocket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<span class=error>error:</span> " + e.data...
The WebSocket API (WebSockets) - Web APIs
the websocket api is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
you can visualize this by holding your arm out in front of you with your hand open, palm down.
Fundamentals of WebXR - Web APIs
opengl (and thus webgl by extension) does not directly offer a camera view, using a library that simulates one on your behalf can make your job much, much easier, especially when building code that allows free movement through your virtual world.
WebXR permissions and security - Web APIs
if the user's intent to open an inline xr presentation is not well understood, the request is denied.
Starting up and shutting down a WebXR session - Web APIs
with the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.
Controlling multiple parameters with ConstantSourceNode - Web APIs
, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now ...
Functions and classes available to Web Workers - Web APIs
28 (28) (yes) (yes) (yes) server-sent events allows a server to push data to a web page at any point, after a connection has been opened to it.
Window.confirm() - Web APIs
WebAPIWindowconfirm
example if (window.confirm("do you really want to leave?")) { window.open("exit.html", "thanks for visiting!"); } produces: notes the following text is shared between this article, dom:window.prompt and dom:window.alert dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.customElements - Web APIs
nts; customelementregistry.define('my-custom-element', mycustomelement); however, it is usually shortened to something like the following: customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
Window.defaultStatus - Web APIs
example <html> <body onload="window.defaultstatus='hello!';"/> <button onclick="window.confirm('are you sure you want to quit?');">confirm</button> </body> </html> notes to set the status once the window has been opened, use window.status.
window.dump() - Web APIs
WebAPIWindowdump
if you don't have one already, closing the application and re-opening it with the command line parameter -console should create the console or use -attach-console to use the existing console.
Window.name - Web APIs
WebAPIWindowname
syntax string = window.name; window.name = string; example <script> // open a tab with a specific browsing context name const othertab = window.open("url1", "_blank"); if (othertab) othertab.name = "other-tab"; </script> <a href="url2" target="other-tab">this link will be opened in the other tab.</a> notes the name of the window is used primarily for setting targets for hyperlinks and forms.
Window.pageYOffset - Web APIs
css iframe { width: 620px; height: 450px; border: 1px solid black; } #info { margin-top: 20px; font: 16px "open sans", "helvetica", "arial"; } result the result follows.
Window: pageshow event - Web APIs
"persisted" : "not persisted"; console.log('event:', event.type, '-', ispersisted); break; default: console.log('event:', event.type); break; } }; events.foreach(eventname => window.addeventlistener(eventname, eventlogger) ); html <p>open the console and watch the output as you navigate to and from this page.
Window.prompt() - Web APIs
WebAPIWindowprompt
i'm a scorpio too!"); } // there are many ways to use the prompt feature sign = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text entered in the input field is returned.
Window.sidebar - Web APIs
WebAPIWindowsidebar
issearchproviderinstalled(descriptionurl) indicates if a specific search provider (opensearch) is installed.
Window: unload event - Web APIs
bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
WindowClient.focus() - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specificat...
WindowClient.focused - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.openwindow('/'...
WindowClient.visibilityState - Web APIs
example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilitystate' in that specification.
WindowClient - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { client.focus(); break; } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications ...
WindowEventHandlers.onbeforeprint - Web APIs
these events are raised before the print dialog window is opened.
WindowEventHandlers.onunload - Web APIs
note: browsers equipped with pop-up blockers will ignore all window.open() method calls in onunload event handler functions.
WindowOrWorkerGlobalScope.caches - Web APIs
this.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/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.
WindowOrWorkerGlobalScope.crossOriginIsolated - Web APIs
this value is dependant on any cross-origin-opener-policy and cross-origin-embedder-policy headers present in the response.
WindowOrWorkerGlobalScope.indexedDB - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open('todolist'); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; } } specifications specification status comment indexed database api draftthe definition of 'indexeddb' in that specification.
XDomainRequest.abort() - Web APIs
syntax xdr.abort(); example var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.send(); xdr.abort(); specification not part of any specification.
XDomainRequest.onerror - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onerror = function(){ //handle error } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.onload - Web APIs
syntax xdr.onload = funcref; example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.onprogress - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onprogress = function(){ //handle partial response with xdr.responsetext } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.ontimeout - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.ontimeout = function(){ //handle timeout } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
fingerprint = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: connection status: succeeded security info: ...
XMLHttpRequest() - Web APIs
the object must be prepared by at least calling open() to initialize it before calling send() to send the request to the server.
XMLHttpRequest.abort() - Web APIs
var xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest: abort event - Web APIs
stener('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', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipw...
XMLHttpRequest: error event - Web APIs
stener('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', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipw...
XMLHttpRequest.getAllResponseHeaders() - Web APIs
var request = new xmlhttprequest(); request.open("get", "foo.txt", true); request.send(); request.onreadystatechange = function() { if(this.readystate == this.headers_received) { // get the raw header string var headers = request.getallresponseheaders(); // convert the header string into an array // of individual headers var arr = headers.trim().split(/[\r\n]+/); // create a map of header names to values var he...
XMLHttpRequest.getResponseHeader() - Web APIs
var client = new xmlhttprequest(); client.open("get", "unicorns-are-teh-awesome.txt", true); client.send(); client.onreadystatechange = function() { if(this.readystate == this.headers_received) { var contenttype = client.getresponseheader("content-type"); if (contenttype != my_expected_type) { client.abort(); } } } specifications specification status comment xmlhttprequestthe definition of ...
XMLHttpRequest: load event - Web APIs
stener('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', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipw...
XMLHttpRequest: loadend event - Web APIs
stener('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', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipw...
XMLHttpRequest: loadstart event - Web APIs
stener('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', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipw...
XMLHttpRequest.mozBackgroundRequest - Web APIs
note: this property must be set before calling open().
XMLHttpRequest.onreadystatechange - Web APIs
examples const xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.responsetext); } else { // oh no!
XMLHttpRequest.overrideMimeType() - Web APIs
// interpret the received data as plain text req = new xmlhttprequest(); req.overridemimetype("text/plain"); req.addeventlistener("load", callback, false); req.open("get", url); req.send(); specifications specification status comment xmlhttprequestthe definition of 'overridemimetype()' in that specification.
XMLHttpRequest: progress event - Web APIs
stener('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', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipw...
XMLHttpRequest.responseText - Web APIs
example var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); // if specified, responsetype must be empty string or "text" xhr.responsetype = 'text'; xhr.onload = function () { if (xhr.readystate === xhr.done) { if (xhr.status === 200) { console.log(xhr.response); console.log(xhr.responsetext); } } }; xhr.send(null); specifications specification status comment ...
XMLHttpRequest.responseType - Web APIs
xmlhttprequests are asynchronous by default; they are only placed in synchronous mode by passing false as the value of the optional async parameter when calling open().
XMLHttpRequest.responseURL - Web APIs
example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/test', true); xhr.onload = function () { console.log(xhr.responseurl); // http://example.com/test }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.responseXML - Web APIs
example var xhr = new xmlhttprequest; xhr.open('get', '/server'); // if specified, responsetype must be empty string or "document" xhr.responsetype = 'document'; // force the response to be parsed as xml xhr.overridemimetype('text/xml'); xhr.onload = function () { if (xhr.readystate === xhr.done && xhr.status === 200) { console.log(xhr.response, xhr.responsexml); } }; xhr.send(); specifications specification status ...
XMLHttpRequest.setRequestHeader() - Web APIs
when using setrequestheader(), you must call it after calling open(), but before calling send().
XMLHttpRequest.status - Web APIs
example var xhr = new xmlhttprequest(); console.log('unsent: ', xhr.status); xhr.open('get', '/server'); console.log('opened: ', xhr.status); xhr.onprogress = function () { console.log('loading: ', xhr.status); }; xhr.onload = function () { console.log('done: ', xhr.status); }; xhr.send(); /** * outputs the following: * * unsent: 0 * opened: 0 * loading: 200 * done: 200 */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest: timeout event - Web APIs
bubbles no cancelable no interface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification.
XMLHttpRequest.withCredentials - Web APIs
example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onabort - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('** the request was aborted'); }; xmlhttp.send(); //..
XMLHttpRequestEventTarget.onerror - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onload - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XRSession - Web APIs
WebAPIXRSession
to open a webxr session, use the xrsystem interface's requestsession() method.
XRSessionInit - Web APIs
because immersive sessions are required to support the local reference space, any request to open an immersive xrsession is required to obtain explicit or implicit user consent.
XRSessionMode - Web APIs
usage notes the xrsessionmode type indicates the values that can be specified when calling xr.issessionsupported() to determine whether or not the specified session type is supported and available to be used, and by requestsession() to attempt to open a new webxr session.
Web APIs
WebAPI
nownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase idbdatabaseexception idbdatabasesync idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmutablefile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversionchangeevent idbversionchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index inputdevicecapabilities inputevent installevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyf...
ARIA Screen Reader Implementors Guide - Accessibility
live region markup is a complex area which is somewhat open to interpretation.
Using the aria-labelledby attribute - Accessibility
<dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> </dl> example 7: menus in the example below, a popup menu is associated with its label using the aria-labelledby attribute: <div role="menubar"> <div role="menuitem" aria-haspopup="true" id="filemenu">file</div> <div role="menu" aria-labelledby="filemenu"> <div role="menuitem">open</div> <div role="menuitem">save</div> <div role="menuitem">save as ...</div> ...
ARIA: switch role - Accessibility
button.switch { margin: 0; padding: 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 { padding: 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", "ari...
ARIA: dialog role - Accessibility
note that for non-modal dialogs there will have to be a global keyboard shortcut that allows focus to be moved between opened dialogs and the main page.
Web applications and ARIA FAQ - Accessibility
several inspecting and debugging tools exist to help you test aria in action: object inspector on windows accessibility inspector on os x accprobe on linux firebug's dom inspector the accessibility inspector for firebug the audits tab in chrome devtools there are several free or open source screen readers that can be used to do hands-on testing with aria.
HTML To MSAA - Accessibility
xt nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_scrollingstart event_system_scrollingend [possibly important, talk to at vendor] event_system_switchstart event_system_switchend event_system_minimizestart event_system_minimizeend event_object_create [don't implement, watching system generated versions of this event causes assistive technology crashe...
Accessibility documentation index - Accessibility
live region markup is a complex area which is somewhat open to interpretation.
Accessibility Information for Web Authors - Accessibility
html advanced validator (firefox extension) by marc gueury this html validator (based on w3c tidy and on opensp for sgml validation) is a powerful, versatile, extended html validator.
Operable - Accessibility
for example, if you press enter/return on a focused button to open an options window, you should be able to close that window again and return to the main content using the keyboard.
::backdrop - CSS: Cascading Style Sheets
/* backdrop is only displayed when dialog is opened with dialog.showmodal() */ dialog::backdrop { background: rgba(255,0,0,.25); } all full-screen elements are placed in a last-in/first out (lifo) stack in the top layer, which is a special layer in the viewport which is always rendered last (and therefore on top) before drawing the viewport's contents to the screen.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
punctuation includes any unicode character defined in the open (ps), close (pe), initial quote (pi), final quote (pf), and other punctuation (po) classes.
::part() - CSS: Cascading Style Sheets
WebCSS::part
0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.
::slotted() - CSS: Cascading Style Sheets
WebCSS::slotted
tion">occupation missing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif;...
:defined - CSS: Cascading Style Sheets
WebCSS:defined
in this demo we define a very simple trivial custom element: customelements.define('simple-custom', class extends htmlelement { constructor() { super(); let divelem = document.createelement('div'); divelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } ...
:host() - CSS: Cascading Style Sheets
WebCSS:host()
href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { colo...
:host-context() - CSS: Cascading Style Sheets
href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { colo...
:host - CSS: Cascading Style Sheets
WebCSS:host
href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { colo...
@counter-style - CSS: Cascading Style Sheets
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.
display-mode - CSS: Cascading Style Sheets
browser browser the application opens in a conventional browser tab or new window, depending on the browser and platform.
orientation - CSS: Cascading Style Sheets
opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
At-rules - CSS: Cascading Style Sheets
WebCSSAt-rule
(at the candidate recommendation stage, but only implemented in gecko as of writing) @font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — define common names in font-variant-alternates for feature activated differently in opentype.
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; padding-top: 2px; padding-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.
Box-shadow generator - CSS: Cascading Style Sheets
} var outputclass = function outputclass(node) { var topic = node.getattribute('data-topic'); var prop = node.getattribute('data-prop'); var name = node.getattribute('data-name'); var properties = prop.split(' '); classes[topic] = {}; classes[topic].node = node; classes[topic].prop = []; classes[topic].line = []; classes[topic].button = new button(topic); var open_decl = document.createelement('div'); var end_decl = document.createelement('div'); open_decl.textcontent = name + ' {'; end_decl.textcontent = '}'; node.appendchild(open_decl); for (var i in properties) crateoutputnode(topic, properties[i]); node.appendchild(end_decl); } var button = function button(topic) { var button = document.createelement('div'); button.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
grid layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.
Mozilla CSS extensions - CSS: Cascading Style Sheets
scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
background-attachment - CSS: Cascading Style Sheets
either the locks were too large, or the key was too small, but at any rate it would not open any of them.
<custom-ident> - CSS: Cascading Style Sheets
urmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close.
font-family - CSS: Cascading Style Sheets
"open sans", "fira sans", "lucida sans", "lucida sans unicode", "trebuchet ms", "liberation sans", "nimbus sans l", sans-serif.
font-language-override - CSS: Cascading Style Sheets
the string must match a language tag found in the opentype language system.
font-style - CSS: Cascading Style Sheets
for truetype or opentype variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values.
opacity - CSS: Cascading Style Sheets
WebCSSopacity
heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status comment css color module...
unicode-bidi - CSS: Cascading Style Sheets
embed if the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm.
CSS: Cascading Style Sheets
WebCSS
css among the core languages of the open web and is standardized across web browsers according to the w3c specification.
WAI ARIA Live Regions/API Support - Developer guides
as always, we're open to questions and suggestions for changes in community forums.
Adding captions and subtitles to HTML5 video - Developer guides
this example uses an excerpt from the sintel open movie, created by the blender foundation.
Creating a cross-browser video player - Developer guides
working example our example video player displays a clip from an open source movie called tears of steel, and includes typical video controls.
Overview of events and handlers - Developer guides
the function, in turn, would perform whatever action was chosen by the programmer, in this case to open an html alert dialog.
Graphics on the Web - Developer guides
this technology lets you use standard opengl es in web content.
Rich-Text Editing in Mozilla - Developer guides
nt); odoc.appendchild(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.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:...
Making content editable - Developer guides
agraphseparator", false, "div"); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.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:...
Introduction to Web development - Developer guides
jquery fundamentals an open-source reference book featuring detailed introductions to both javascript and jquery for beginners.
Parsing and serializing XML - Developer guides
"error while parsing" : odom.documentelement.nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's responsexml field is a document constructed by parsing the xml.
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
firefox 79+) setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener".
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element.
<base>: The Document Base URL element - HTML: Hypertext Markup Language
WebHTMLElementbase
open graph open graph tags do not acknowledge <base>, and should always have full absolute urls.
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
without labeling, every link will open in the frame that it’s in – the closest parent frame.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
function updatefirst(event) { var p = document.queryselector("p"); if (p) { p.style.color = event.target.value; } } when the color picker is dismissed, indicating that the value will not be changing again (unless the user re-opens the color picker), a change event is sent to the element.
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
the edge week control is somewhat more elaborate, opening up week and year pickers with sliding reels.
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
WebHTMLElementrb
even though <rb> is not an empty element, it is common to just include the opening tag of each element in the source code, so that the ruby markup is less complex and easier to read.
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
WebHTMLElementrp
one <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text.
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
WebHTMLElementrtc
tag omission the closing tag can be omitted if it is immediately followed by a <rb>, <rtc> or <rt> element opening tag or by its parent closing tag.
<slot> - HTML: Hypertext Markup Language
WebHTMLElementslot
examples <template id="element-details-template"> <style> details {font-family: "open sans light", helvetica, arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-size: 120% } h4 { margin: 10px 0 -8px 0; background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } <...
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
default content entered between the opening and closing tags.
<title>: The Document Title element - HTML: Hypertext Markup Language
WebHTMLElementtitle
tag omission both opening and closing tags are required.
accesskey - HTML: Hypertext Markup Language
efox 14 or newer: control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key google chrome alt + shift + key safari n/a opera 15+ alt + key control + alt + key opera 12 shift + esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key accessibility concerns in addition to poor browser support, there are numerous concerns with the accesskey attribute: an accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology functionality.
Link types: noreferrer - HTML: Hypertext Markup Language
the noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.
Microformats - HTML: Hypertext Markup Language
there are open source parsing libraries for most languages for microformats2.
Evolution of HTTP - HTTP
http/1.1 clarified ambiguities and introduced numerous improvements: a connection can be reused, saving the time to reopen it numerous times to display the resources embedded into the single original document retrieved.
Identifying resources on the Web - HTTP
the web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.
Resource URLs - HTTP
for example, if you open the view source page (view page source or view selection source), you will find it requires viewsource.css through a resource: uri.
Browser detection using the user agent - HTTP
never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized.
Access-Control-Allow-Credentials - HTTP
examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status comment fetchthe definition of 'access-control-allow-credentials' in that specification.
Authorization - HTTP
other types: iana registry of authentication schemes authentification for aws servers (aws4-hmac-sha256) <credentials> if the "basic" authentication scheme is used, the credentials are constructed like this: the username and the password are combined with a colon (aladdin:opensesame).
CSP: connect-src - HTTP
examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new websocket("https://not-example.com/"); var es = new eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ...
CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigations by any means including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
Content-Security-Policy - HTTP
navigate-to restricts the urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
Cross-Origin-Embedder-Policy - HTTP
cross-origin-embedder-policy: require-corp cross-origin-opener-policy: same-origin see also the cross-origin-opener-policy header which you'll need to set as well.
Keep-Alive - HTTP
the following identifiers are possible: timeout: indicating the minimum amount of time an idle connection has to be kept opened (in seconds).
Proxy-Authorization - HTTP
<credentials> the credentials are constructed like this: the username and the password are combined with a colon (aladdin:opensesame).
Sec-Fetch-Site - HTTP
directly entering a url in the address bar, opening a bookmark, or draging-and-dropping a file into the browser window.
Sec-WebSocket-Accept - HTTP
the sec-websocket-accept header is used in the websocket opening handshake.
Firefox user agent string reference - HTTP
some of them we have noticed are of the form "nexusone;", "zteopen;", or "open c;" (note that putting space is also discouraged).
Link prefetching FAQ - HTTP
for example, if you load a bookmark group (which opens several tabs), any prefetch requests initiated by one of the bookmarked pages will not begin until all of the tabs finish loading.
CONNECT - HTTP
WebHTTPMethodsCONNECT
it can be used to open a tunnel.
A typical HTTP session - HTTP
WebHTTPSession
opening a connection in http means initiating a connection in the underlying transport layer, usually this is tcp.
HTTP
WebHTTP
http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response.
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
Inheritance and the prototype chain - JavaScript
for the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below javascript code, and run it by pressing the enter/return key.
SyntaxError: unterminated string literal - JavaScript
to fix this error, check if: you have opening and closing quotes (single or double) for your string literal, you have escaped your string literal correctly, your string literal isn't split across multiple lines.
Array.prototype.sort() - JavaScript
apped = list.map(function(el, i) { return { index: i, value: el.tolowercase() }; }) // sorting the mapped array containing the reduced values mapped.sort(function(a, b) { if (a.value > b.value) { return 1; } if (a.value < b.value) { return -1; } return 0; }); // container for the resulting order var result = mapped.map(function(el){ return list[el.index]; }); there is an open source library available called mapsort which applies this approach.
FinalizationRegistry.prototype.unregister() - JavaScript
*/ constructor(filename) { this.#file = file.open(filename); // vvvvv−−−−− held value this.#registry.register(this, label, this.#file); // target −−−−−^^^^ ^^^^^^^^^^−−−−− unregister token } /** * releases resources held by this `thingy` instance.
JSON.parse() - JavaScript
third, we delete all // open brackets that follow a colon or comma or that begin the text.
Promise() constructor - JavaScript
do something asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to provide a function with promise functionality, have it return a promise: function myasyncfunction(url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("get", url) xhr.onload = () => resolve(xhr.responsetext) xhr.onerror = () => reject(xhr.statustext) xhr.send() }); } specifications specification ecmascript (ecma-262)the definition of 'promise constructor' in that specification.
SharedArrayBuffer - JavaScript
for top-level documents, two headers will need to be set to cross-origin isolate your site: cross-origin-opener-policy with same-origin as value (protects your origin from attackers) cross-origin-embedder-policy with require-corp as value (protects victims from your origin) cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker conte...
import - JavaScript
the module: file.js function getjson(url, callback) { let xhr = new xmlhttprequest(); xhr.onload = function () { callback(this.responsetext) }; xhr.open('get', url, true); xhr.send(); } export function getusefulcontents(url, callback) { getjson(url, data => callback(json.parse(data))); } the main program: main.js import { getusefulcontents } from '/modules/file.js'; getusefulcontents('http://www.example.com', data => { dosomethinguseful(data); }); dynamic import this example shows how to load functionality on to a page based on a us...
JavaScript
jsbin js bin is an open-source collaborative web development debugging tool.
display - Web app manifests
browser browser the application opens in a conventional browser tab or new window, depending on the browser and platform.
<mo> - MathML
WebMathMLElementmo
possible values are: prefix, for opening fences.
<ms> - MathML
WebMathMLElementms
lquote the opening quote character (depends on dir) to enclose the content.
MathML documentation index - MathML
WebMathMLIndex
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.
Autoplay guide for media and Web Audio APIs - Web media technologies
that means that the first time the play event is fired, you know your media is being started for the first time after the page is opened.
Recommended Web Performance Timings: How long is too long? - Web Performance
while a slower than 100ms reaction may create a disconnect between the user interaction and the response, a 100 to 200ms transition for a response may help the user notice the response their interaction initiated, such as a menu opening.
Using dns-prefetch - Web Performance
for websites that open connections to many third parties, this latency can significantly reduce loading performance.
Web Performance
in the context of open web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.performance monitoring: rum vs synthetic monitoringsynthetic monitoring and real user monitoring (rum) are two approaches for monitoring and providing insight into web performance.
Privacy, permissions, and information security
web technologies and features used to enforce security and privacy technology or feature description certificate transparency an open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy...
Installing and uninstalling web apps - Progressive web apps (PWAs)
when you tap the web app's icon on the home screen, it opens up in a full screen web environment, without the browser's ui around it.
How to make PWAs installable - Progressive web apps (PWAs)
these technologies allow the app to be launched directly from the device's home screen, rather than the user having to open the browser and then navigate to the site by using a bookmark or typing the url.
Responsive Navigation Patterns - Progressive web apps (PWAs)
the user can flip the menu open and select from the rest of the navigation items.
Web technology reference
the open web is based on a number of technologies which, together, can be used to create everything from simple sites to powerful web applications.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: <percentage>|<length>; animatable: yes stroke-linecap defines the shape to be used at the end of open subpaths when they are stroked.
d - SVG: Scalable Vector Graphics
WebSVGAttributed
examples html,body,svg { height:100% } <svg viewbox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> <!-- an open shape with the last point of the path different to the first one --> <path stroke="red" d="m 5,1 l -4,8 8,0" /> <!-- an open shape with the last point of the path matching the first one --> <path stroke="red" d="m 15,1 l -4,8 8,0 -4,-8" /> <!-- a closed shape with the last point of the path different to the first one --> <path stro...
format - SVG: Scalable Vector Graphics
WebSVGAttributeformat
here is a list of font formats and their strings that can be used as values for this attribute: format string format truedoc-pfr truedoc™ portable font resource embedded-opentype embedded opentype type-1 postscript™ type 1 truetype truetype opentype opentype, including truetype open truetype-gx truetype with gx extensions speedo speedo intellifont intellifont specifications specification status comment scalable vector graphics...
string - SVG: Scalable Vector Graphics
WebSVGAttributestring
the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
stroke-linecap - SVG: Scalable Vector Graphics
the stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
textLength - SVG: Scalable Vector Graphics
css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg.
<clipPath> - SVG: Scalable Vector Graphics
WebSVGElementclipPath
*/ @keyframes openyourheart {from {r: 0} to {r: 60px}} #myclip circle { animation: openyourheart 15s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element.
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
for open shapes, see the <polyline> element.
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.
SVG and CSS - SVG: Scalable Vector Graphics
referenced via <use> elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the document in your svg-enabled browser.
SVG: Scalable Vector Graphics
WebSVG
as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil.
Certificate Transparency - Web security
certificate transparency is an open framework designed to protect against and monitor for certificate misissuances.
How to fix a website with blocked mixed content - Web security
in any case, the best way to know if something is broken in firefox is to download the latest firefox edition, open different pages on your website with the web console open (enable the "security" messages) and see if anything related to mixed content is reported.
Secure contexts - Web security
however, it’s important to note that if a non-secure context causes a new window to be created (with or without specifying noopener), then the fact that the opener was insecure has no effect on whether the new window is considered secure.
Securing your site - Web security
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
Subresource Integrity - Web security
tools for generating sri hashes you can generate sri hashes from the command-line with openssl using a command invocation such as this: cat filename.js | openssl dgst -sha384 -binary | openssl base64 -a or with shasum using a command invocation such as this: shasum -b -a 384 filename.js | awk '{ print $1 }' | xxd -r -p | base64 notes: the pipe-through-xxd step takes the hexadecimal output from shasum and converts it to binary.
Transport Layer Security - Web security
for instance, the names used in openssl and gnutls differ from those in the tls standards.
Tutorials
these resources are created by forward-thinking companies and web developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as creative commons.
Introduction to using XPath in JavaScript - XPath
var req = new xmlhttprequest(); req.open("get", "chrome://yourextension/content/peopledb.xml", false); req.send(null); var xmldoc = req.responsexml; var nsresolver = xmldoc.creatensresolver( xmldoc.ownerdocument == null ?
An Overview - XSLT: Extensible Stylesheet Language Transformations
thus a full example of the opening stylesheet element might look like this.
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory xmlref = document.implementation.createdocument("", "", null); // we want to move a part of the dom from an html document to an xml document.
Basic Example - XSLT: Extensible Stylesheet Language Transformations
figure 6 : example var xslstylesheet; var xsltprocessor = new xsltprocessor(); var mydom; var xmldoc; function init(){ // load the xslt file, example1.xsl var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xsl", false); myxmlhttprequest.send(null); xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); xmldoc = myxmlhttprequest.responsexml; var fragment = xsltprocess...
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
figure 1 : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
Compiling from Rust to WebAssembly - WebAssembly
open this file, and change its contents to look like this: [package] name = "hello-wasm" version = "0.1.0" authors = ["your name <you@example.com>"] description = "a sample project with wasm-pack" license = "mit/apache-2.0" repository = "https://github.com/yourgithubusername/hello-wasm" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" fill in your own repository and use the same i...