Search completed in 0.99 seconds.
Window.window - Web APIs
the
window property of a
window object points to the
window object itself. thus, the following expressions all return the same
window object:
window.
window window.
window.
window window.
window.
window.
window // ... in web pages, the
window object is also a global object. this means: global variables of your script are in fact properties of
window: var global = {data: 0}; alert(global ===
window.global); // displays "true" you can access built-in properties of the
window object without having to type
window. prefix: settimeout("alert('hi!')", 50); // equivalent to using
window.settimeout. alert(
window ===
window.
window); // displays "true" the point of having the
window property refer to the object itself, was likely to make it easy to refer to the global object. otherwise, you'...
...you'd have to use "open('http://google.com/')" instead. ...
...nt to using
window.settimeout. alert(
window ===
window.
window); // displays "true" the point of having the
window property refer to the object itself, was likely to make it easy to refer to the global object. otherwise, you'd have to do a manual var
window = this; assignment at the top of your script. 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. yet another reason to use this property, is for libraries which wish to offer oop-versions, and non-oop versions (especially javascript modules). ...
...And 4 more matches
Finding window handles - Archive of obsolete content
note: starting in gecko 17.0, nsibase
window.nativehandle provides the handle (hwnd [widows], gdk
window* [linux], ns
window* [macosx],...) of a top-level
window, for all plateforms, as a string. when working on
windows platforms, many apis and frameworks require a
window handle (hwnd type). since mozilla tries to be as cross-platform as possible, it can be difficult to get the handle you need. note: starting in gecko 2.0, only the top level browser
window has an hwnd. web content
windows (in tabs) do not have their own hwnds. typically the top level browser
window hwnd has no children, although if there are
windowed plugins (such as flash) visible in the
window, they will have hwnds whose parent is the top level browser
window hwnd. here is some simple code that can get access to mozilla w...
...pically the top level browser
window hwnd has no children, although if there are
windowed plugins (such as flash) visible in the
window, they will have hwnds whose parent is the top level browser
window hwnd. here is some simple code that can get access to mozilla
window handles. this code can be used from external application or from an xpcom component within an extension. ...
...e
windowed plugins (such as flash) visible in the
window, they will have hwnds whose parent is the top level browser
window hwnd. here is some simple code that can get access to mozilla
window handles. this code can be used from external application or from an xpcom component within an extension. ...
...And 95 more matches
Window.open() - Web APIs
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. this can be a path or url to an html page, image file, or any other resource that is supported by the browser. if the empty string ("") is specified as url, a blank page is opened into the targeted browsing context. ...
... this name can be used as the target for the target attribute of <a> or <form> elements. ...
...ame, [
windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded. this can be a path or url to an html page, image file, or any other resource that is supported by the browser. if the empty string ("") is specified as url, a blank page is opened into the targeted browsing context.
windowname optional a domstring specifying the name of the browsing context (
window, <iframe> or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new
window is created and is given the name specified by
windowname. this name can be used as the target for the target attribute of <a> or <form> elements. the name should not contain whitespace. keep in mind that this will not be used as the
window's title. ...
...And 84 more matches
Window - Web APIs
the
window interface represents a
window containing a dom document; the document property points to the dom document loaded in that
window. a
window for a given document can be obtained using the document.defaultview property. a global variable,
window, representing the
window in which the script is running, is exposed to javascript code. the
window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface
window. however, the
window interface is a suitable place to include these items that need to be globally available. many of these are documented in the javascript reference and the dom reference. ...
... a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface
window. however, the
window interface is a suitable place to include these items that need to be globally available. many of these are documented in the javascript reference and the dom reference. in a tabbed browser, each tab is represented by its own
window object; the global
window seen by javascript code running within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall
window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the
window instead. <div id="int...
...n't reasonably pertain to a tab pertains to the
window instead. ...
...And 69 more matches
nsIWindowMediator
xpfe/appshell/public/nsi
windowmediator.idlscriptable the
window mediator is a mozilla component that keeps track of open
windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsi
windowmediator are, enumerating all
windows of a given type and getting the most recent / any
window of a given type. ...
...ndowmediator.idlscriptable the
window mediator is a mozilla component that keeps track of open
windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsi
windowmediator are, enumerating all
windows of a given type and getting the most recent / any
window of a given type. ...
...ow mediator is a mozilla component that keeps track of open
windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsi
windowmediator are, enumerating all
windows of a given type and getting the most recent / any
window of a given type. ...
...And 61 more matches
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 has the ability to load the microsoft®
windows media player™ as an activex control, and thus developers can now build multimedia experiences that script the
windows media player in netscape 7.1, just as they do in internet explorer. netscape 7.1 will work with both the
windows media player 6.4 activex control as well as versions 7 through 9. this article explains how to embed the
windows media player activex control in web pages to support netscape 7.1, how to control the
windows media player activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the
windows operating system. ...
.... this article explains how to embed the
windows media player activex control in web pages to support netscape 7.1, how to control the
windows media player activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the
windows operating system. detecting the right browser like internet explorer, netscape 7.1 and later versions can play
windows media files using the popular
windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. controls such as
windows media player also interact closely with the scripts in a web page. ...
...lorer, netscape 7.1 and later versions can play
windows media files using the popular
windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. controls such as
windows media player also interact closely with the scripts in a web page. netscape 7.1 is the first netscape gecko™ browser to support the
windows media player as an activex control -- previous netscape browsers did not support any activex controls, and thus detecting which versions of netscape support the
windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the
windows media activex control. ...
...And 50 more matches
Working with windows in chrome code
this article describes working with multiple
windows in mozilla chrome code (xul applications and extensions). 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. ...
... <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 second parameter is the
window's name; the name can be used in links or forms as the target attribute. this is different from the user-visible
window title, which is specified using xul. the third, and optional, parameter is a list of special
window features the
window should have. the
window.opendialog function works similarly, but lets you specify optional arguments that can be referenced from the javascript code. it also ...
... the name can be used in links or forms as the target attribute. this is different from the user-visible
window title, which is specified using xul. the third, and optional, parameter is a list of special
window features the
window should have. the
window.opendialog function works similarly, but lets you specify optional arguments that can be referenced from the javascript code. it also handles
window features a little differently, including always assuming the dialog feature is specified. from xpcom components and modules if the
window object is unavailable (for example, when opening a
window from xpcom component code), you might want to use nsi
windowwatcher interface. its parameters are similar to
window.open; in fact,
window.open's implementation calls nsi
windowwatcher's methods. var ww...
...And 48 more matches
windows - Archive of obsolete content
enumerate and examine open browser
windows, open new
windows, and listen for
window events. usage the
windows module provides basic functions for working with browser
windows. 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 browser
windows property, you won't receive any
window events, and you won't be able to open private
windows. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. converting to chrome win...
...te browser
windows. private browser
windows won't appear in the browser
windows property, you won't receive any
window events, and you won't be able to open private
windows. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. converting to chrome
windows to convert from the browser
window objects used in this api to the chrome
window objects used in the
window/utils api, use the viewfor() function exported by the viewfor module. to convert back the other way, from a chrome
window to a browser
window object, use the modelfor() function, exported by the modelfor module. ...
...erting to chrome
windows to convert from the browser
window objects used in this api to the chrome
window objects used in the
window/utils api, use the viewfor() function exported by the viewfor module. to convert back the other way, from a chrome
window to a browser
window object, use the modelfor() function, exported by the modelfor module. ...
...And 46 more matches
nsIWindowWatcher
embedding/components/
windowwatcher/public/nsi
windowwatcher.idlscriptable this interface is the keeper of gecko/dom
windows. it maintains a list of open top-level
windows, and allows some operations on them. inherits from: nsisupports last changed in gecko 0.9.6 usage notes: this component has an active
window property. clients may expect this property to be always current, so to properly integrate this component the application will need to keep it current by setting the property as the active
window changes. this component should not keep a (xpcom) reference to any
windows; the implementation will claim no ownership.
windows must notify this component when they are created or destroyed, so only a weak reference is kept. note that there is no interface for such notifications (not a publi...
...hip.
windows must notify this component when they are created or destroyed, so only a weak reference is kept. note that there is no interface for such notifications (not a public one, anyway). this is taken care of both in mozilla and by common embedding code. embedding clients need do nothing special about that requirement. this component must be initialized at application startup by calling set
windowcreator(). ...
...so only a weak reference is kept. note that there is no interface for such notifications (not a public one, anyway). this is taken care of both in mozilla and by common embedding code. embedding clients need do nothing special about that requirement. this component must be initialized at application startup by calling set
windowcreator(). ...
...And 46 more matches
nsIDOMWindowUtils
dom/interfaces/base/nsidom
windowutils.idlscriptable this interface is a dom utility interface that provides useful dom methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by:
window. ...
... dom/interfaces/base/nsidom
windowutils.idlscriptable this interface is a dom utility interface that provides useful dom methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by:
window. ...
... dom/interfaces/base/nsidom
windowutils.idlscriptable this interface is a dom utility interface that provides useful dom methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by:
window. ...
...And 44 more matches
window/utils - Archive of obsolete content
functions for working with browser
windows. usage private
windows with this module your add-on will see private browser
windows even if it has not explicitly opted into private browsing, so you need to take care not to store any user data derived from private browser
windows. the exception is the
windows() function which returns an array of currently opened
windows. private
windows will not be included in this list if your add-on has not opted into private browsing. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. globals functions getmostrecentbrowser
window() get the topmost browser
window, as an nsidom
window instance. ...
...rivate
windows will not be included in this list if your add-on has not opted into private browsing. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. globals functions getmostrecentbrowser
window() get the topmost browser
window, as an nsidom
window instance. returns nsidom
window: the topmost browser
window. getinnerid(
window) returns the id of the specified
window's current inner
window. this function wraps nsidom
windowutils.currentinner
windowid. parameters
window : nsidom
window the
window whose inner
window we are interested in. returns id: the given
window's id. getouterid(
window) returns the id of the specified
window's outer
window. this function wraps nsido...
... the topmost browser
window. getinnerid(
window) returns the id of the specified
window's current inner
window. this function wraps nsidom
windowutils.currentinner
windowid. parameters
window : nsidom
window the
window whose inner
window we are interested in. returns id: the given
window's id. getouterid(
window) returns the id of the specified
window's outer
window. this function wraps nsidom
windowutils.outer
windowid. parameters
window : nsidom
window the
window whose outer
window we are interested in. returns id: the outer
window's id. ...
...And 30 more matches
prefwindow - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a specialized
window used for preference dialogs. this element should be used in place of the
window tag and should contain one or more prefpane elements. a row of buttons appears across the preference dialog, one for each prefpane. each pane will usually group together a set of related preferences. if there is only one prefpane, the navigation area will be hidden. on platforms where the convention is to apply changes immediately, the preferences are adjusted as soon as the user interface element is changed. on other platforms, the preferences are not applied until the dialog is closed. you can open a preference
window using a
window's opendialog method as with other dialogs. you can pass the i...
...normally, you would not set this attribute as it will be set automatically such that the default pane is the same as the one showing when the preferences dialog was last closed. ...
...such that the default pane is the same as the one showing when the preferences dialog was last closed. more information is available in the preferences system article. important note for xulrunner-based applications: the preferences system - part of the toolkit - still relies on two browser.* preferences. the first one is browser.preferences.instantapply, a boolean preference. the preference
window will not run correctly if you do not set this preference in your application's defaults (see bug 485150 for more information). a true value for this preference makes the preference
window apply immediately the user choices, without waiting for the dialog to close with ok. the second preference is browser.preferences.animatefadein, again a boolean preference. this one can be safely omitted in xul...
...And 27 more matches
Gecko info for Windows accessibility vendors
the base of our support for these products is msaa (microsoft active accessibility), external readonly dom support, and the keyboard api/user interface. definitions here are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applications. gecko is the internal engine that mozilla uses to render any kind of web content. it supports html, xhtml, cascading style sheets (css) and the document object model (dom). ...
...ee is a subset of the dom tree. queryservice() can be used to switch between the interfaces (iaccessible, isimpledomdocument, isimpledomnode and isimpledomtext). if there is no msaa node for a dom node, or vice-versa, queryservice() will return null. anything that is focusable or conveys important information about the structure of the document is exposed in the msaa tree of iaccessibles.
windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use. gecko can render a variety of content, not just html and supports key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, ...
...ot just html and supports key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. embedded clients (support msaa) embedded clients use gecko only in the content
window, at the moment for html and generic xml only. they typically use standard
windows controls for their user interface -- the area outside of the client content
window, plus the context menu. mfcembed testing client: this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine. k-meleon: a light, ultra-fast and more adva...
...And 24 more matches
window - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] describes the structure of a top-level
window. it is the root node of a xul document. it is by default a horizontally oriented box. as it is a box, all box attributes can be used. by default, the
window will have a platform-specific frame around it. to set an icon for the
window, create a platform-specific icon file <
windowid>.ico and/or <
windowid>.xpm and place or install these files into the <mozilla-directory>/chrome/icons/default/ directory. the <
windowid> is the value of the id attribute on the
window. ...
...es can be used. by default, the
window will have a platform-specific frame around it. to set an icon for the
window, create a platform-specific icon file <
windowid>.ico and/or <
windowid>.xpm and place or install these files into the <mozilla-directory>/chrome/icons/default/ directory. the <
windowid> is the value of the id attribute on the
window. this allows you to have a different icon for each
window. without including the css file at "chrome://global/skin/", the
window will not be stylized and will be invisible and glitchy when opened as a dialog. note: starting in gecko 1.9.2, you can detect when a
window is activated or deactivated by watching for the "activate" and "deactivate" events. see
window activation events. more information is available in the xul tutorial. attributes acc...
... when a
window is activated or deactivated by watching for the "activate" and "deactivate" events. see
window activation events. more information is available in the xul tutorial. ...
...And 23 more matches
Accessing the Windows Registry Using XPCOM
introduction when implementing
windows-specific functionality, it is often useful to access the
windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in several mozilla products. the examples in this document are all written in javascript using xpcom. support in firefox 1.5 or newer in firefox 1.5, a new api was added, nsi
windowsregkey, which provides extensive registry functionality. the interface follows the
windows api fairly closely, but with many of the low-level details taken care of for you. if you are writing an extension that only needs to support firefox 1.5 or newer, then you only need to read this section. ...
... 1.5, a new api was added, nsi
windowsregkey, which provides extensive registry functionality. the interface follows the
windows api fairly closely, but with many of the low-level details taken care of for you. if you are writing an extension that only needs to support firefox 1.5 or newer, then you only need to read this section. ...
...ensive registry functionality. the interface follows the
windows api fairly closely, but with many of the low-level details taken care of for you. if you are writing an extension that only needs to support firefox 1.5 or newer, then you only need to read this section. 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.nsi
windowsregkey); 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. first, you must use createinstance() to...
...And 23 more matches
window.postMessage() - Web APIs
the
window.postmessage() method safely enables cross-origin communication between
window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it. normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy").
window.postmessage() provides a controlled mechanism to securely circumvent this restriction (if used properly). broadly, one
window may obtain a reference to another (e.g., via target
window =
window.opener), and then dispatch a messageevent on it with target
window.postmessage(). the receiving
window is then free to handle this event as needed. ...
... the "same-origin policy").
window.postmessage() provides a controlled mechanism to securely circumvent this restriction (if used properly). broadly, one
window may obtain a reference to another (e.g., via target
window =
window.opener), and then dispatch a messageevent on it with target
window.postmessage(). the receiving
window is then free to handle this event as needed. the arguments passed to
window.postmessage() (i.e., the “message”) are exposed to the receiving
window through the event object. syntax target
window.postmessage(message, targetorigin, [transfer]); target
window a reference to the
window that will receive the message. ...
...e(). the receiving
window is then free to handle this event as needed. the arguments passed to
window.postmessage() (i.e., the “message”) are exposed to the receiving
window through the event object. syntax target
window.postmessage(message, targetorigin, [transfer]); target
window a reference to the
window that will receive the message. 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.content
window (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). ...
...And 17 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/some
window.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. if this value is null or empty, the default toolbars of the main
window will be added to the new one, which is rarely what you want. the
window.open page has a detailed description of the features you can use and their values. the following features are very important and you should always keep them in mind: chrome. this can...
... rarely what you want. the
window.open page has a detailed description of the features you can use and their values. the following features are very important and you should always keep them in mind: chrome. this can only be used from the chrome, not from regular html javascript. it indicates that a chrome document is being opened, not a web page. this means that the document defines the whole
window, and not only the inner content area. you should always include it when opening a xul
window or dialog. modal. modal
windows block their parent
window until action is taken on them. an alert
window is an example of this. modal
windows should be avoided when possible because they interrupt the user's browsing and can become annoying very quickly. this feature should only be used when there's no w...
...en opening a xul
window or dialog. modal. modal
windows block their parent
window until action is taken on them. an alert
window is an example of this. modal
windows should be avoided when possible because they interrupt the user's browsing and can become annoying very quickly. this feature should only be used when there's no way to continue without having the user do something. never open modal
windows at startup. resizable. indicates the user can resize the
window or not. in general,
windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content. to open a new dialog, use the function
window.opendialog, an extension of the open function. it allows you to send a set of op...
...And 16 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
syntax var timeoutid = scope.settimeout(function[, delay, arg1, arg2, ...]); var timeoutid = scope.settimeout(function[, delay]); var timeoutid = scope.settimeout(code[, delay]); parameters function a function to be executed after the timer expires. code an alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. this syntax is not recommended for the same reasons that make using eval() a security risk. ...
... to be aware that settimeout() and setinterval() share the same pool of ids, and that cleartimeout() and clearinterval() can technically be used interchangeably. for clarity, however, you should try to always match them to avoid confusion when maintaining your code. it is guaranteed that a timeout id will never be reused by a subsequent call to settimeout() or setinterval() on the same object (a
window or a worker). however, different objects use separate pools of ids. example the following example sets up two simple buttons in a web page and hooks them to the settimeout() and cleartimeout() routines. pressing the first button will set a timeout which calls an alert dialog after two seconds and stores the timeout id for use by cleartimeout(). you may optionally cancel this timeout by pressing...
...after two seconds and stores the timeout id for use by cleartimeout(). you may optionally cancel this timeout by pressing on the second button. html <p>live example</p> <button onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid =
window.settimeout(
window.alert, 2*1000, 'that was really slow!'); } function clearalert() {
window.cleartimeout(timeoutid); } result see also cleartimeout() example. polyfill if you need to pass one or more arguments to your callback function, but need it to work in browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 a...
...And 16 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
syntax var intervalid = scope.setinterval(func, [delay, arg1, arg2, ...]); var intervalid = scope.setinterval(function[, delay]); var intervalid = scope.setinterval(code, [delay]); parameters func a function to be executed every delay milliseconds. the function is not passed any arguments, and no return value is expected. ...
...: passing additional arguments to setinterval() in the first syntax does not work in internet explorer 9 and earlier. if you want to enable this functionality on that browser, you must use a polyfill (see the callback arguments section). return value the returned intervalid is a numeric, non-zero value which identifies the timer created by the call to setinterval(); this value can be passed to
windoworworkerglobalscope.clearinterval() to cancel the timeout. it may be helpful to be aware that setinterval() and settimeout() share the same pool of ids, and that clearinterval() and cleartimeout() can technically be used interchangeably. for clarity, however, you should try to always match them to avoid confusion when maintaining your code. note: the delay argument is converted to a signed 32-bi...
...geably. for clarity, however, you should try to always match them to avoid confusion when maintaining your code. note: the delay argument is converted to a signed 32-bit integer. this effectively limits delay to 2147483647 ms, since it's specified as a signed integer in the idl. examples example 1: basic syntax the following example demonstrates setinterval()'s basic syntax. var intervalid =
window.setinterval(mycallback, 500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are purely optional. console.log(a); console.log(b); } example 2: alternating two colors the following example calls the flashtext() function once a second until the stop button is pressed. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/cl...
...And 15 more matches
Creating a Window - Archive of obsolete content
snext » we're going to be creating a simple find files utility throughout this tutorial. first, however, we should look at the basic syntax of a xul file. creating a xul file an xul file can be given any name but it really should have a .xul extension. ...
...to be creating a simple find files utility throughout this tutorial. first, however, we should look at the basic syntax of a xul file. creating a xul file an xul file can be given any name but it really should have a .xul extension. ...
... file can be given any name but it really should have a .xul extension. the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="findfile-
window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </
window> this
window will not do anything since it doesn't contain any ui elements. those will be added in the next section. in fact, there will not be shown any
window at all. if you want to force the
window to become visible you can add the width and height attribute to the
window tag. here is a line by line breakdown of the code above: <?xml version="1.0"?> this line simply declares that this i...
...And 14 more matches
nsIXULWindow
xpfe/appshell/nsixul
window.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) an nsixul
window is created as part of the creation of a top-level chrome
window. when the
window is destroyed, it will fire a "xul-
window-destroyed" notification through the global observer service. this signals the application in case it needs to quit. ...
.... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) an nsixul
window is created as part of the creation of a top-level chrome
window. when the
window is destroyed, it will fire a "xul-
window-destroyed" notification through the global observer service. this signals the application in case it needs to quit. ...
...om: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) an nsixul
window is created as part of the creation of a top-level chrome
window. when the
window is destroyed, it will fire a "xul-
window-destroyed" notification through the global observer service. this signals the application in case it needs to quit. ...
...And 14 more matches
Windows - Archive of obsolete content
this article offers code snippets demonstrating common tasks you may wish to perform. 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. the simplest way to do that is to use nsi
windowmediator. ...
... this article offers code snippets demonstrating common tasks you may wish to perform. 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. the simplest way to do that is to use nsi
windowmediator. ...
...ode snippets demonstrating common tasks you may wish to perform. 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. the simplest way to do that is to use nsi
windowmediator. ...
...And 13 more matches
NPWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information about the target into which the plug-in instance can draw. ...
... « gecko plugin api reference « plug-in side plug-in api summary contains information about the target into which the plug-in instance can draw. ...
... « gecko plugin api reference « plug-in side plug-in api summary contains information about the target into which the plug-in instance can draw. ...
...And 12 more matches
NPP_SetWindow - Archive of obsolete content
returns if successful, the function returns nperr_no_error. ...
... returns if successful, the function returns nperr_no_error. ...
... returns if successful, the function returns nperr_no_error. ...
...And 10 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. learn how to detect popup controls, how to ask your readers to enable popups for your site and how to get the benefits of popup
windows without using popup
windows. ...
... mozilla and firefox allow users to control most unsolicited attempts to open new
windows such as popup and popunder
windows. learn how to detect popup controls, how to ask your readers to enable popups for your site and how to get the benefits of popup
windows without using popup
windows. ...
... mozilla and firefox allow users to control most unsolicited attempts to open new
windows such as popup and popunder
windows. learn how to detect popup controls, how to ask your readers to enable popups for your site and how to get the benefits of popup
windows without using popup
windows. ...
...And 10 more matches
nsIDOMWindowInternal
dom/interfaces/base/nsidom
windowinternal.idlscriptable this interface is part of a chain of interfaces used to represent a
window in the dom. 66 introduced gecko 1.0 deprecated gecko 8.0 inherits from: nsidom
window last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) in gecko 8.0 this interface was merged into the nsidom
window interface. this interface no longer has any members; it exists solely to prevent add-ons that reference it from failing completely. add-ons should be updated to use nsidom
window instead. it provides many of the common functions used in javascript such as alert() or open(). ...
...erbird 7.0 / seamonkey 2.4) in gecko 8.0 this interface was merged into the nsidom
window interface. this interface no longer has any members; it exists solely to prevent add-ons that reference it from failing completely. add-ons should be updated to use nsidom
window instead. it provides many of the common functions used in javascript such as alert() or open(). note: because most of nsidom
windowinternal's functions and attributes are well documented in
window, those articles are linked to rather than re-documented. however, they are not guaranteed to document all available arguments (i.e. see
window.prompt). method overview firefox 3.5 note the prompt() and find() methods changed in firefox 3.5 to make all their parameters optional; in previous versions, all parameters were require...
...d blur() void back() 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) nsidom
window 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) nsidom
window nsisupports aextraargument) void close() ...
...And 10 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
step is to create an overlay for the document containing the toolbar you wish to enhance. explaining overlays is beyond the scope of this tutorial -- you can read about them in the xul tutorial. to overlay a document, you need to know its uri. you can find a list of uris for the most commonly overlaid documents at the bottom of this page. note: some people overlay chrome://messenger/content/mail
windowoverlay.xul. that should cause the button to appear on all
windows that mail
windowoverlay.xul is applied to (i.e. main
window and view message
window). this needs to be looked into. adding the toolbar button toolkit applications have customizable toolbars; therefore, it's common practice for extensions to add their toolbar buttons to the toolbar palette, rather than adding them directly to the t...
...ery easy. just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the
window (the parent
window of the toolbar you wish to insert a button). see below for the list of common palette ids. class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. set the command to be executed when the button is clicked in the oncommand attribute. if you need to handle middle-click, add this line after the oncommand line. onclic...
... use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image: url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file and the customize toolbar
window. to attach it to the overlay, put this processing instruction (pi) at the top of the overlay file: <?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?> note: the css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. this is very important because the toolbar customization dialog w...
...And 9 more matches
Debugging on Windows
if vc++ and your mozilla application hang shortly after you launch the application under the debugger, see problems loading debug symbols. ways to start the debugger first of all, it's necessary to install a visual studio extension to be able to follow child processes as they are created. firefox, in general, and even in non-e10s mode, does not start the main process directly, it starts it via a launcher process. ...
...oint (and even notifies you that it cannot find their location). microsoft child process debugging power tool allows automatically attaching to child processes, such as web content process, gpu process, etc. enable it by going its configuration menu in "debug > other debugging targets > child process debugging settings", and ticking the box. if you have followed the steps in building firefox for
windows and have a local debug build, you can execute ./mach run --debug from the same command line. it would open visual studio with firefox's run options configured. you can click "start" button to run firefox then, already attached in the debugger. alternatively, if you have generated the visual studio solution, via ./mach build-backend -b visualstudio, opening this solution allows you to run firefo...
...visual c++ debugger for details. ...
...And 9 more matches
nsIDOMWindow
dom/interfaces/base/nsidom
window.idlscriptable this interface is the primary interface for a
window object. it represents a single
window object that may contain child
windows if the document in the
window contains an html frameset document, or if the document contains iframe elements. 66 introduced gecko 1.0 deprecated gecko 44 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) starting with firefox 44, this file is empty as its features were either no longer used or are only available from c++ code; see dom/base/nspidom
window.h for those. while this interface is not officially defined by any standard bodies, it originates from the de-facto dom level 0 standard. ...
...ts last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) starting with firefox 44, this file is empty as its features were either no longer used or are only available from c++ code; see dom/base/nspidom
window.h for those. while this interface is not officially defined by any standard bodies, it originates from the de-facto dom level 0 standard. starting in firefox 3, dom
windows are actually based on nsidom
window2, which is a subclass of nsidom
window that adds some new features to this interface. in gecko 7.0 nsidom
window2 has been merged into this interface. in gecko 8.0 nsidomstorage
window and nsidom
windowinternal have been merged into this interface. method overview nsidomcssstyledeclaration getcomputedstyle(in nsidomelement elt, [optional] in domstring ...
... void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes attribute type description applicationcache nsidomofflineresourcelist get the application cache object for this
window. read only. note: prior to gecko 7.0 this attribute was part of nsidom
window2. document nsidomdocument the document contained in the
window. read only. frames nsidom
windowcollection the child
windows for this
window. read only. native code only! globalstorage nsidomstoragelist global storage, accessible by domain. read only. note: prior to gecko 8.0 th...
...And 9 more matches
MSCandidateWindowShow - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. mscandidate
windowshow fires immediately after the input method editor (ime) candidate
window is set to appear, but before it renders. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note
windows 8.1 and
windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new
windows ui, this event is supported in
windows 8.1 imes of all languages. syntax ...
...prietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note
windows 8.1 and
windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new
windows ui, this event is supported in
windows 8.1 imes of all languages. syntax event property object.oncandidate
windowshow = handler; addeventlistener method object.addeventlistener("mscandidate
windowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. this event fires after the positioning information of the ime candidate
window has been determined. you can obtain the positioning information using the getcand...
...= handler; addeventlistener method object.addeventlistener("mscandidate
windowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. this event fires after the positioning information of the ime candidate
window has been determined. you can obtain the positioning information using the getcandidate
windowclientrect method, and adjust your layout as needed to avoid any occlusions with the ime candidate
window. web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). ...
...And 9 more matches
Features of a Window - Archive of obsolete content
« previousnext » we've already seen some features of
windows. we'll look at some more in this section. creating another
window you can create a second
window for your application in the same manner as you would create the first one. just create a second xul file with the
window code in it. 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. you can use this reference to call functions of the other
window. the open function takes three argum...
... 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. you can use this reference to call functions of the other
window. the open function takes three arguments. the first is the url of the file you wish to open. the second is an internal name of the
window. the third is a list of display flags. the flag 'chrome' is important to open the
window as a chrome file. if you do not add the 'chrome' flag, the file will open up as the content in a browser
window. ...
...l functions of the other
window. the open function takes three arguments. the first is the url of the file you wish to open. the second is an internal name of the
window. the third is a list of display flags. the flag 'chrome' is important to open the
window as a chrome file. if you do not add the 'chrome' flag, the file will open up as the content in a browser
window. for example: var mywin =
window.open("chrome://findfile/content/findfile.xul", "findfile", "chrome"); specifying the width and height you should have noticed that whenever elements were added to a
window, the
window's width expanded to fit the new elements. the
window is really just a box which is flexible and defaults to vertical orientation. you can also specify the width and height directly on the
window tag. this, of cour...
...And 8 more matches
Windows and menus in XULRunner - Archive of obsolete content
« previousnext » our quest to build a basic desktop application using xulrunner continues. last time i installed xulrunner and built a very simple, bare-bones test application. this time i want to add some of the things common to a desktop application user interface:
windows and dialogs menus and toolbars os common dialogs controls or widgets
windows each
window or dialog should be created in its own xul file. the xul file may also contain other top-level declarations for css and dtd, which i will discuss in a moment. <
window> is the basic
windowing element in xul. it has attributes to set the title/caption as well as to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <
window> element per xul file. here ...
...the css is used to apply formatting to elements, just as it would in html. ...
... element in xul. it has attributes to set the title/caption as well as to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <
window> element per xul file. here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype
window system "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"/> ... </
window> notice the references to css and dtd files. the css is used to apply formatting to elements, just as it would in html. the dtd is used to create entity references so strings for titles and labels are not stored directly in the xul file; this makes upda...
...And 8 more matches
window.cancelAnimationFrame() - Web APIs
other browsers can use something like date.now(). ...
...other browsers can use something like date.now(). ...
...other browsers can use something like date.now(). ...
...And 8 more matches
Window.outerWidth - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...And 8 more matches
Window.screenX - Web APIs
the
window.screenx read-only property returns the horizontal distance, in css pixels, of the left border of the user's browser viewport to the left side of the screen. note: an alias of screenx was implemented across modern browsers in more recent times —
window.screenleft. this was originally supported only in ie but was introduced everywhere due to popularity. syntax left
windowpos =
window.screenx returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. ...
... originally supported only in ie but was introduced everywhere due to popularity. syntax left
windowpos =
window.screenx returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. in this example we are using
window.screenleft/
window.screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...e browser viewport to the left edge of the screen. examples in our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. in this example we are using
window.screenleft/
window.screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...And 8 more matches
Window.screenY - Web APIs
the
window.screeny read-only property returns the vertical distance, in css pixels, of the top border of the user's browser viewport to the top edge of the screen. note: an alias of screeny was implemented across modern browsers in more recent times —
window.screentop. this was originally supported only in ie but was introduced everywhere due to popularity. syntax top
windowpos =
window.screeny returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. ...
...reentop. this was originally supported only in ie but was introduced everywhere due to popularity. syntax top
windowpos =
window.screeny returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using
window.screenleft/
window.screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
... top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using
window.screenleft/
window.screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...And 8 more matches
WindowEventHandlers.onhashchange - Web APIs
if it equals #cool-feature, the script logs a message to the console. ...
...if it equals #cool-feature, the script logs a message to the console. ...
...if it equals #cool-feature, the script logs a message to the console. ...
...And 7 more matches
nsITaskbarWindowPreview
this interface's primary purpose is to let gecko applications take control over parts of the preview; however, certain parts of the preview are not controlled using this interface. ...
...this interface's primary purpose is to let gecko applications take control over parts of the preview; however, certain parts of the preview are not controlled using this interface. ...
...this interface's primary purpose is to let gecko applications take control over parts of the preview; however, certain parts of the preview are not controlled using this interface. ...
...And 6 more matches
Cached compose window FAQ
warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2003. seth spitzer (sspitzer@mozilla.org) what is the "cached" compose
window? ...
... warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2003. seth spitzer (sspitzer@mozilla.org) what is the "cached" compose
window? ...
... warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2003. seth spitzer (sspitzer@mozilla.org) what is the "cached" compose
window? ...
...And 6 more matches
Window.openDialog() - Web APIs
window.opendialog() is an extension to
window.open(). it behaves the same, except that it can optionally take one or more parameters past
windowfeatures, and
windowfeatures itself is treated a little differently. the optional parameters, if present, are bundled up in a javascript array object and added to the newly created
window as a property named
window.arguments. they may be referenced in the javascript of the
window at any time, including during the execution of a load handler. these parameters may be used, then, to pass arguments to and from the dialog
window. the call to opendialog() returns immediately. if you want the call to block until the user has closed the dialog, supply modal as a
windowfeatures parameter. note that this also means the user won't be able to interact w...
...t of the
window at any time, including during the execution of a load handler. these parameters may be used, then, to pass arguments to and from the dialog
window. the call to opendialog() returns immediately. if you want the call to block until the user has closed the dialog, supply modal as a
windowfeatures parameter. note that this also means the user won't be able to interact with the opener
window until he closes the modal dialog. syntax new
window = opendialog(url, name, features, arg1, arg2, ...) new
window the opened
window url the url to be loaded in the newly opened
window. name the
window name (optional). see
window.open() description for detailed information. features see
window.open() for details. arg1, arg2, ... ...
... the opener
window until he closes the modal dialog. syntax new
window = opendialog(url, name, features, arg1, arg2, ...) new
window the opened
window url the url to be loaded in the newly opened
window. name the
window name (optional). see
window.open() description for detailed information. features see
window.open() for details. arg1, arg2, ... the arguments to be passed to the new
window (optional). example var win = opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); notes new features all - initially activates (or deactivates ("all=no")) all chrome (except the behavior flags chrome, dialog and modal). these can be overridden (so "menubar=no,all" turns on all chrome except the menubar.) this feature is explicitly ignored by
window.open(). ...
...And 6 more matches
WindowEventHandlers - Web APIs
the
windoweventhandlers mixin describes the event handlers common to several interfaces like
window, or htmlbodyelement and htmlframesetelement. each of these interfaces can implement additional specific event handlers. note:
windoweventhandlers is a mixin and not an interface; you can't actually create an object of type
windoweventhandlers. properties the events properties, of the form onxyz, are defined on the
windoweventhandlers, and implemented by
window, and workerglobalscope for web workers.
windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised. ...
...vents properties, of the form onxyz, are defined on the
windoweventhandlers, and implemented by
window, and workerglobalscope for web workers.
windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised.
windoweventhandlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised.
windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised. ...
...ent is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised.
windoweventhandlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised.
windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised.
windoweventhandlers.onlanguagechange is an eventhandler representing the code to be called when the languagechange event is raised.
windoweventhandlers.onmessage is an eventhandler representing the code to be called when the message event is raised.
windoweventhandlers.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. ...
...And 6 more matches
Windows SDK versions
mozilla, from time to time, might support building against multiple versions of the
windows sdk as a compatibility/transitional measure. if it does, several features will be disabled if you build with an sdk older than the default, which means that you'll have to specify a non-default sdk version explicitly. quick start follow the instructions for whichever version of visual c++ you're using. visual studio professional 2013 this comes with the
windows 8.1 sdk included. visual studio express 2013 for
windows desktop this comes with the
windows 8.1 sdk included. visual studio professional 2012 this comes with the
windows 8.0 sdk included. visual studio 2012 express for
windows desktop this comes with the
windows 8.0 sdk included. visual c++ 10 (vs2010) professional this comes with the wind...
...indows desktop this comes with the
windows 8.1 sdk included. visual studio professional 2012 this comes with the
windows 8.0 sdk included. visual studio 2012 express for
windows desktop this comes with the
windows 8.0 sdk included. visual c++ 10 (vs2010) professional this comes with the
windows 7 sdk, so you should be all set out of the box. visual c++ 10 (vs2010) express download and install the
windows 7 sdk. older versions some of the older version are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the
windows sdk article. ...
...is comes with the
windows 8.0 sdk included. visual c++ 10 (vs2010) professional this comes with the
windows 7 sdk, so you should be all set out of the box. visual c++ 10 (vs2010) express download and install the
windows 7 sdk. older versions some of the older version are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the
windows sdk article.
windows 8 sdk (official) features that depend on this sdk include: metro firefox front end gamepad api support you can download the sdk from the microsoft download center [web setup]. ...
...And 5 more matches
nsIDOMChromeWindow
dom/interfaces/base/nsidomchrome
window.idlscriptable this interface is implemented on the
window object in chrome. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void begin
windowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdom
window nsibrowserdom
window the related nsibrowserdom
window instance which provides access to yet another layer of utility functions by chrome script. ...
...ecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdom
window nsibrowserdom
window the related nsibrowserdom
window instance which provides access to yet another layer of utility functions by chrome script. it will be null for dom
windows not corresponding to browsers. messagemanager nsichromeframemessagemanager read only. title domstring obsolete since gecko 1.9.1
windowstate unsigned short returns current
window state, the value is one of state_* constants. read only. constants constant value description state_maximized 1 the
window is maximized. state_minimized 2 the
window is minimized. state_normal 3 the ...
...s not corresponding to browsers. messagemanager nsichromeframemessagemanager read only. title domstring obsolete since gecko 1.9.1
windowstate unsigned short returns current
window state, the value is one of state_* constants. read only. constants constant value description state_maximized 1 the
window is maximized. state_minimized 2 the
window is minimized. state_normal 3 the
window is normal. state_fullscreen 4 the
window is in full screen mode. methods begin
windowmove() on some operating systems, we must allow the
window manager to handle
window dragging. this method tells the
window manager to start dragging the
window. ...
...And 5 more matches
nsIMsgWindow
mailnews/base/public/nsimsg
window.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 8 (firefox 8 / thunderbird 8 / seamonkey 2.5) implemented by: @mozilla.org/messenger/msg
window;1. to create an instance, use: msg
window = components.classes["@mozilla.org/messenger/msg
window;1"] .createinstance(components.interfaces.nsimsg
window); in thunderbird the default message
window is stored in the global variable msg
window. ...
... statusfeedback nsimsgstatusfeedback this allows the backend code to send status feedback to the ui. ...
... statusfeedback nsimsgstatusfeedback this allows the backend code to send status feedback to the ui. ...
...And 5 more matches
nsIWindowsRegKey
xpcom/ds/nsi
windowsregkey.idlscriptable this interface is designed to provide scriptable access to the
windows registry system. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) the interface represents a single key in the registry. this interface is highly win32 specific. ...
...y system. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) the interface represents a single key in the registry. this interface is highly win32 specific. ...
...g 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); nsi
windowsregkey 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 astring relpath); void removevalue(in astring name); void startwatching(i...
...And 5 more matches
Window: resize event - Web APIs
the resize event fires when the document view (
window) has been resized. bubbles no cancelable no interface uievent event handler property onresize in some earlier browsers it was possible to register resize event handlers on any html element. it is still possible to set onresize attributes or use addeventlistener() to set a handler on any element. however, resize events are only fired on the
window object (i.e. returned by document.defaultview). only handlers registered on the
window object will receive resize events. there is a proposal to allow all elements to be notified of resize changes. see resize observer to read the draft document, and github issues to read the on-going discussions. ...
...er() to set a handler on any element. however, resize events are only fired on the
window object (i.e. returned by document.defaultview). only handlers registered on the
window object will receive resize events. there is a proposal to allow all elements to be notified of resize changes. see resize observer to read the draft document, and github issues to read the on-going discussions. examples
window size logger the following example reports the
window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
... to be notified of resize changes. see resize observer to read the draft document, and github issues to read the on-going discussions. examples
window size logger the following example reports the
window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
...And 5 more matches
Window.screenLeft - Web APIs
the
window.screenleft read-only property returns the horizontal distance, in css pixels, from the left border of the user's browser viewport to the left side of the screen. note: screenleft is an alias of the older
window.screenx property. screenleft was originally supported only in ie but was introduced everywhere due to popularity. syntax left
windowpos =
window.screenleft returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. ...
...ported only in ie but was introduced everywhere due to popularity. syntax left
windowpos =
window.screenleft returns a number equal to the number of css pixels from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...els from the left edge of the browser viewport to the left edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...And 5 more matches
Window.screenTop - Web APIs
the
window.screentop read-only property returns the vertical distance, in css pixels, from the top border of the user's browser viewport to the top side of the screen. note: screentop is an alias of the older
window.screeny property. screentop was originally supported only in ie but was introduced everywhere due to popularity. syntax top
windowpos =
window.screentop returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. ...
... supported only in ie but was introduced everywhere due to popularity. syntax top
windowpos =
window.screentop returns a number equal to the number of css pixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...ixels from the top edge of the browser viewport to the top edge of the screen. examples in our screenleft-screentop example, you'll see a canvas onto which has been drawn a circle. in this example we are using screenleft/screentop plus
window.requestanimationframe() to constantly redraw the circle in the same physical position on the screen, even if the
window position is moved. ...
...And 5 more matches
WindowProxy - Web APIs
living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
...And 5 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
this information applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone release. none of the registry keys mentioned here are written by browsers before the mozilla 0.9.1 timeframe. ...
...this information applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone release. none of the registry keys mentioned here are written by browsers before the mozilla 0.9.1 timeframe. ...
...e 6.1, 6.2.x, netscape 7.0 (and up), mozilla 1.0, and compuserve 7.0 this section details the suggested mechanism to find out where to install the plugin dll so that it is picked up by mozilla based browsers on the desktop. go to hkey_local_machine\software\mozilla caveat emptor: if the mozilla subkey is not present under hkey_local_machine, look under hkey_current_user\software\mozilla\. on
windows xp and
windows 2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, some mozilla based browsers, such as the netscape 6 installer, write to the hkey_current_user key in addition; this doesn't require administrator privileges. traditionally, hkey_current_user is a copy of everything in hkey_local_machine. the mozilla subkey is written under hkey...
...And 4 more matches
Autodial for Windows NT - Archive of obsolete content
warning: the content of this article may be out of date. it was last updated in 2002. introduction this document is intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way. a brief history of autodial on
windows in the consumer versions of
windows, (
windows 95,
windows 98,
windows me) autodial for all applications is controlled from the control panel, in the internet options applet, under the tab connections. ...
...ument is intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way. a brief history of autodial on
windows in the consumer versions of
windows, (
windows 95,
windows 98,
windows me) autodial for all applications is controlled from the control panel, in the internet options applet, under the tab connections. if you turn on the autodial feature,
windows will automatically dial whenever any application tries to access a network address that can't be reached. technically, this control panel applet (internet options) is part of internet explorer. ...
...ial for all applications is controlled from the control panel, in the internet options applet, under the tab connections. if you turn on the autodial feature,
windows will automatically dial whenever any application tries to access a network address that can't be reached. technically, this control panel applet (internet options) is part of internet explorer. it is not present in early versions of
windows until internet explorer is installed. despite this fact, the feature is triggered by any application that uses networking. starting with
windows nt, and in all nt-based versions (
windows nt,
windows 2000, and
windows xp, including xp home) microsoft has changed the behavior of autodial. for these oss, the autodial options found in the internet options control panel applet only apply to microsoft...
...And 4 more matches
Windows stub installer - Archive of obsolete content
now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/dist/win32_d.obj/install. run the stub installer setup.exe from the install directory. ...
... now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/dist/win32_d.obj/install. run the stub installer setup.exe from the install directory. ...
... now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/dist/win32_d.obj/install. run the stub installer setup.exe from the install directory. ...
...And 4 more matches
windowtype - Archive of obsolete content
« xul reference home
windowtype type: string set to a string which can be used to identify the type of
window. this might be used, for example, to distinguish between a browser
window and an editor
window. some of mozilla's
window handling functions use this attribute to group
windows of the same type together. ...
... « xul reference home
windowtype type: string set to a string which can be used to identify the type of
window. this might be used, for example, to distinguish between a browser
window and an editor
window. some of mozilla's
window handling functions use this attribute to group
windows of the same type together. ...
...
windowtype type: string set to a string which can be used to identify the type of
window. this might be used, for example, to distinguish between a browser
window and an editor
window. some of mozilla's
window handling functions use this attribute to group
windows of the same type together. ...
...And 4 more matches
Window icons - Archive of obsolete content
these icons will override the global icon files, which are located in app_dir/browser/chrome/icons/default. note: the global icons override does not currently work due to bug bug 543490. ...
... these icons will override the global icon files, which are located in app_dir/browser/chrome/icons/default. note: the global icons override does not currently work due to bug bug 543490. ...
... these icons will override the global icon files, which are located in app_dir/browser/chrome/icons/default. note: the global icons override does not currently work due to bug bug 543490. ...
...And 4 more matches
Inner and outer windows
this article will try to explain the concepts of inner and outer
windows. consider that when the user is looking at a document in a browser
window, not only can the document the user is currently viewing change, but the document's contents can change. then add to that the concept of frames, whereby a document in a
window can itself contain other documents, which in turn can contain more documents. in order to represent these levels of complexity, two "types" of
window need to be considered. these don't technically refer to
windows as the user sees them, but rather a perspective on what the user is looking at. ...
...he document's contents can change. then add to that the concept of frames, whereby a document in a
window can itself contain other documents, which in turn can contain more documents. in order to represent these levels of complexity, two "types" of
window need to be considered. these don't technically refer to
windows as the user sees them, but rather a perspective on what the user is looking at.
windows and the bfcache an outer
window is a browsing context; that is, the actual environment in which a document is presented to the user. this may be a
window or a tab, or it might be an <iframe> contained within another document. html5 refers to the outer
window as the
windowproxy. an inner
window represents the actual content being displayed; it's the current view of what the user sees. consider th...
...ache an outer
window is a browsing context; that is, the actual environment in which a document is presented to the user. this may be a
window or a tab, or it might be an <iframe> contained within another document. html5 refers to the outer
window as the
windowproxy. an inner
window represents the actual content being displayed; it's the current view of what the user sees. consider this view of a
window and the browser history: as the user navigates, documents are added to the backward-forward cache (often referred to as the bfcache). these are, in essence, inner
windows. they get displayed in the outer
window, which is contained in the "physical" browser
window. here's the trick, though: the inner
window in essence pretends to be the outer
window. if the document currently being displayed asks...
...And 4 more matches
Components.utils.evalInWindow
ted it is in the content's context, so the caller has to be prepared for the possibility that the content could have redefined behavior (for example, a setter in the script may have been redefined to do something unexpected). this function is made available as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor. syntax var result = components.utils.evalin
window(script,
window); parameters script : string the script to evaluate in the other
window.
window : object the
window in which to evaluate the script. returns the result of evaluating the script. if this is just native (for example, a dom node), then the function relies on xraywrappers to wrap the returned content, otherwise the result is structured-cloned. this does impose some r...
...se some restrictions on the sorts of things that can be returned: in particular, the result can't contain any functions, because functions can't be structured-cloned. ...
...n particular, the result can't contain any functions, because functions can't be structured-cloned. ...
...And 4 more matches
Main Windows
ning to look at it. as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client. things appear confusing for several reasons: much of the code is written to be portable, so instead of duplicating it, its been put in overlays that are loaded over many different types of
windows. some of the code was written based off of early firefox code, but is not exactly the same. you’ll sometimes see reimplementations of things that are already in toolkit, written specially for thunderbird. 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. its main focus is on handling the folderpa...
... sometimes see reimplementations of things that are already in toolkit, written specially for thunderbird. 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. its main focus is on handling the folderpane, threadpane, and the message preview sections shown above. the rest is loaded from overlays: mail
windowoverlay.xul this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript. mailoverlay.xul a really small overlay that only adds a few “new message” and “new card” commands to the menus, along with their ...
...in blue above (where?), this overlay consists of three boxes. two are stacked showing either a brief or expanded view of the headers. the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e. file, edit, view, etc). ...
...And 4 more matches
Window.devicePixelRatio - Web APIs
the devicepixelratio of
window interface returns the ratio of the resolution in physical pixels to the resolution in css pixels for the current display device. this value could also be interpreted as the ratio of pixel sizes: the size of one css pixel to the size of one physical pixel. in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single css pixel. this is useful when dealing with the difference between rendering on a standard display versus a hidpi or retina display, which use more screen pixels to draw the same objects, resulting in a sharper image. ...
...ize of one css pixel to the size of one physical pixel. in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single css pixel. this is useful when dealing with the difference between rendering on a standard display versus a hidpi or retina display, which use more screen pixels to draw the same objects, resulting in a sharper image. you can use
window.matchmedia() to check if the value of devicepixelratio changes (which can happen, for example, if the user drags the
window to a display with a different pixel density). see the example below. syntax value =
window.devicepixelratio; value a double-precision floating-point value indicating the ratio of the display's resolution in physical pixels to the resolution in css pixels. a value of 1 i...
...(76 dpi on some platforms) display, while a value of 2 is expected for hidpi/retina displays. other values may be returned as well in the case of unusually low resolution displays or, more often, when a screen has a higher pixel depth than simply double the standard resolution of 96 or 76 dpi. examples correcting resolution in a <canvas> a <canvas> can appear too blurry on retina screens. use
window.devicepixelratio to determine how much extra pixel density should be added to allow for a sharper image. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels). var size = 200; canvas.style.width = size + "px"; canvas.style.height = size + "px"; // set actual size in memory (scaled to...
...And 4 more matches
Window: popstate event - Web APIs
it changes the current history entry to that of the last page the user visited or, if history.pushstate() has been used to add a history entry to the history stack, that history entry is used instead. bubbles yes cancelable no interface popstateevent event handler property onpopstate the history stack if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object. ...
...ction such as a click on the back or forward button (or calling history.back() or history.forward() in javascript). browsers tend to handle the popstate event differently on page load. chrome (prior to v34) and safari always emit a popstate event on page load, but firefox doesn't. ...
...account that properties like
window.location will already reflect the state change (if it affected the current url), but document might still not. if the goal is to catch the moment when the new document state is already fully in place, a zero-delay settimeout() method call should be used to effectively put its inner callback function that does the processing at the end of the browser event loop:
window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the browser's "back" button or otherwise, the popstate event is near the end of the process to transition to the new location. it happens after the new location has loaded (if needed), displayed, made visible, and so on, after the pageshow event is sent, but before...
...And 4 more matches
Window.scrollY - Web APIs
if the document is rendered on a subpixel-precise device, then the returned value is also subpixel-precise and may contain a decimal component. ...
...if the document is rendered on a subpixel-precise device, then the returned value is also subpixel-precise and may contain a decimal component. ...
...el-precise and may contain a decimal component. if the document isn't scrolled at all up or down, then scrolly is 0. if you need an integer value, you can use math.round() to round it off. in more technical terms, scrolly returns the y coordinate of the top edge of the current viewport. if there is no viewport, the returned value is 0. ...
...And 4 more matches
WindowEventHandlers.onbeforeunload - Web APIs
example this example prompts the user before unloading. ...
... example this example prompts the user before unloading. ...
... example this example prompts the user before unloading. ...
...And 4 more matches
WindowOrWorkerGlobalScope - Web APIs
the
windoworworkerglobalscope mixin describes several features common to the
window and workerglobalscope interfaces. each of these interfaces can, of course, add more features in addition to the ones listed below. note:
windoworworkerglobalscope is a mixin and not an interface; you can't actually create an object of type
windoworworkerglobalscope. properties these properties are defined on the
windoworworkerglobalscope mixin, and implemented by
window and workerglobalscope.
windoworworkerglobalscope.caches read only returns the cachestorage object associated with the current context. this object enables functionality such as storing assets for offline use, and generating custom responses to requests. ...
...pe
windoworworkerglobalscope. properties these properties are defined on the
windoworworkerglobalscope mixin, and implemented by
window and workerglobalscope.
windoworworkerglobalscope.caches read only returns the cachestorage object associated with the current context. this object enables functionality such as storing assets for offline use, and generating custom responses to requests.
windoworworkerglobalscope.crossoriginisolated read only returns a boolean value that indicates whether a sharedarraybuffer can be sent via a
window.postmessage() call.
windoworworkerglobalscope.indexeddb read only provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an idbfactory object. ...
... use, and generating custom responses to requests.
windoworworkerglobalscope.crossoriginisolated read only returns a boolean value that indicates whether a sharedarraybuffer can be sent via a
window.postmessage() call.
windoworworkerglobalscope.indexeddb read only provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an idbfactory object.
windoworworkerglobalscope.issecurecontext read only returns a boolean indicating whether the current context is secure (true) or not (false).
windoworworkerglobalscope.origin read only returns the origin of the global scope, serialized as a string. ...
...And 4 more matches
CanvasRenderingContext2D.drawWindow() - Web APIs
the deprecated, non-standard and internal only canvasrenderingcontext2d.draw
window() method of the canvas 2d api renders a region of a
window into the canvas. the contents of the
window's viewport are rendered, ignoring viewport clipping and scrolling. this api cannot be used by web content. it is synchronous, and as such can't be compatible with fission. if you're using it from an extension, you should switch to tabs.capturetab. if you're writing chrome code, you probably want
windowglobalparent.drawsnapshot from the parent process. syntax void ctx.draw
window(
window, x, y, w, h, bgcolor [, flags]); parameters
window the
window to render. x the x-axis coordinate of the
window. y the y-axis coordinate of the
window. w the width of the
window. h the height of the
window. bgc...
...nt
windowglobalparent.drawsnapshot from the parent process. syntax void ctx.draw
window(
window, x, y, w, h, bgcolor [, flags]); parameters
window the
window to render. x the x-axis coordinate of the
window. y the y-axis coordinate of the
window. w the width of the
window. h the height of the
window. bgcolor a domstring that specifies the color the canvas is filled with before the
window is rendered into it. this color may be transparent/translucent. it is given as a css color string (for example, rgb() or rgba()). notes: if "rgba(0,0,0,0)" is used for the background color, the drawing will be transparent wherever the
window is transparent. top-level browsed documents are usually not transparent because the user's background-color preference is applied, but iframes are tra...
... used for the background color, the drawing will be transparent wherever the
window is transparent. top-level browsed documents are usually not transparent because the user's background-color preference is applied, but iframes are transparent if the page doesn't set a background. if an opaque color is used for the background color, rendering will be faster because we won't have to compute the
window's transparency. flags optional used to better control the draw
window call. flags can be ored together. constant value description draw
window_draw_caret 0x01 show the caret if appropriate when drawing. ...
...And 3 more matches
SourceBuffer.appendWindowEnd - Web APIs
exceptions the following exceptions may be thrown when setting a new value for this property. ...
... exceptions the following exceptions may be thrown when setting a new value for this property. ...
... exceptions the following exceptions may be thrown when setting a new value for this property. ...
...And 3 more matches
SourceBuffer.appendWindowStart - Web APIs
exceptions the following exceptions may be thrown when setting a new value for this property. ...
... exceptions the following exceptions may be thrown when setting a new value for this property. ...
... exceptions the following exceptions may be thrown when setting a new value for this property. ...
...And 3 more matches
Window.pageYOffset - Web APIs
the read-only
window property pageyoffset is an alias for scrolly; as such, it returns the number of pixels the document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of the document is currently aligned with the top edge of the
window's content area. there is slightly better support for pageyoffset than for scrolly in older browsers, but if you're not concerned about browsers more than a handful of years old, you can use either one. the corresponding pagexoffset property, which returns the number of pixels scrolled along the horizontal axis (left and right), is an alias for scrollx. ...
... top edge of the
window's content area. there is slightly better support for pageyoffset than for scrolly in older browsers, but if you're not concerned about browsers more than a handful of years old, you can use either one. the corresponding pagexoffset property, which returns the number of pixels scrolled along the horizontal axis (left and right), is an alias for scrollx. syntax yoffset =
window.pageyoffset; value a floating-point number specifying the number of pixels the document is scrolled vertically within its containing
window. this number is subpixel precise, so it may not be an integer. a value of 0.0 indicates that the
window is not scrolled vertically, and that the top of the document is located at the top edge of the
window's content area. since this property is an alias f...
... example var contenthtml = ` <h2 id="introduction">introduction</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aenean volutpat vitae felis non dictum. ...
...And 3 more matches
Window.prompt() - Web APIs
the
window.prompt() displays a dialog with an optional message prompting the user to input some text. syntax result =
window.prompt(message, default); parameters message optional a string of text to display to the user. can be omitted if there is nothing to show in the prompt
window. default optional a string containing the default value displayed in the text input field. note that in internet explorer 7 and 8, if you do not provide this parameter, the string "undefined" is the default value. return value a string containing the text entered by the user, or null. ...
...ext input field. note that in internet explorer 7 and 8, if you do not provide this parameter, the string "undefined" is the default value. return value a string containing the text entered by the user, or null. ...
...lorer 7 and 8, if you do not provide this parameter, the string "undefined" is the default value. return value a string containing the text entered by the user, or null. example let sign = prompt("what's your sign?"); if (sign.tolowercase() == "scorpio") { alert("wow! 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. if the user clicks ok withou...
...And 3 more matches
Window.scrollTo() - Web APIs
for scrolling elements, see element.scrolltop and element.scrollleft. ...
... for scrolling elements, see element.scrolltop and element.scrollleft. ...
... for scrolling elements, see element.scrolltop and element.scrollleft. ...
...And 3 more matches
Window.scrollX - Web APIs
if the document is rendered on a subpixel-precise device, then the returned value is also subpixel-precise and may contain a decimal component. ...
...if the document is rendered on a subpixel-precise device, then the returned value is also subpixel-precise and may contain a decimal component. ...
... scrolled at all left or right, then scrollx is 0. if you need an integer value, you can use math.round() to round it off. in more technical terms, scrollx returns the x coordinate of the left edge of the current viewport. if there is no viewport, the returned value is 0. example this example checks the current horizontal scroll position of the document. if it's greater than 400 pixels, the
window is scrolled back to the beginning. if (
window.scrollx > 400) {
window.scroll(0,0); } notes the pagexoffset property is an alias for the scrollx property:
window.pagexoffset ==
window.scrollx; // always true for cross-browser compatibility, use
window.pagexoffset instead of
window.scrollx. additionally, older versions of internet explorer (< 9) do not support either property and must be wor...
...And 3 more matches
Window.self - Web APIs
the
window.self read-only property returns the
window itself, as a
windowproxy. it can be used with dot notation on a
window object (that is,
window.self) or standalone (self). the advantage of the standalone notation is that a similar notation exists for non-
window contexts, such as in web workers. by using self, you can refer to the global scope in a way that will work not only in a
window context (self will resolve to
window.self) but also in a worker context (self will then resolve to workerglobalscope.self). example uses of
window.self like the following could just as well be replaced by
window. ...
...on is that a similar notation exists for non-
window contexts, such as in web workers. by using self, you can refer to the global scope in a way that will work not only in a
window context (self will resolve to
window.self) but also in a worker context (self will then resolve to workerglobalscope.self). example uses of
window.self like the following could just as well be replaced by
window. ...
...on exists for non-
window contexts, such as in web workers. by using self, you can refer to the global scope in a way that will work not only in a
window context (self will resolve to
window.self) but also in a worker context (self will then resolve to workerglobalscope.self). example uses of
window.self like the following could just as well be replaced by
window. ...
...And 3 more matches
WindowClient.navigate() - Web APIs
specifications specification status comment service workersthe definition of 'navigate()' in that specification. ...
... specifications specification status comment service workersthe definition of 'navigate()' in that specification. ...
... specifications specification status comment service workersthe definition of 'navigate()' in that specification. ...
...And 3 more matches
File.windowsShortcut - Archive of obsolete content
file.
windowsshortcut in this example, the
windowsshortcut method is used to add a shortcut in the program directory ("program" is a keyword for the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on
windows) to
windows software (misc.exe) that is installed in the "
windows" directory. ...
...e.
windowsshortcut in this example, the
windowsshortcut method is used to add a shortcut in the program directory ("program" is a keyword for the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on
windows) to
windows software (misc.exe) that is installed in the "
windows" directory. ...
...method is used to add a shortcut in the program directory ("program" is a keyword for the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on
windows) to
windows software (misc.exe) that is installed in the "
windows" directory. ...
...And 2 more matches
NPSetWindowCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary note: this structure is only used on unix platforms. contains information about the plug-in's unix
window environment. syntax typedef struct { int32 type; display* display; visual* visual; colormap colormap; unsigned int depth; } npset
windowcallbackstruct; fields the data structure has the following fields: type always contains np_set
window. display standard x toolkit attribute. pointer to the display structure that represents the browser-server connection. visual standard x toolkit attribute. x visual for the plug-in
window or drawable. colormap standard x toolkit attribute. colormap for the plug-in
window or drawable. depth s...
...ains np_set
window. display standard x toolkit attribute. pointer to the display structure that represents the browser-server connection. visual standard x toolkit attribute. x visual for the plug-in
window or drawable. colormap standard x toolkit attribute. colormap for the plug-in
window or drawable. depth standard x toolkit attribute. depth of the plug-in
window or drawable. description callback structures are used to pass platform-specific information. the npset
windowcallbackstruct object, allocated by the browser, contains information required for the ws_info field of an np
window. the npp_set
window() function passes a pointer to this structure to the plug-in. ...
...olkit attribute. depth of the plug-in
window or drawable. description callback structures are used to pass platform-specific information. the npset
windowcallbackstruct object, allocated by the browser, contains information required for the ws_info field of an np
window. the npp_set
window() function passes a pointer to this structure to the plug-in. the structure is valid for the lifetime of the np
window, that is, until npp_set
window() is called again or the instance is destroyed. the type field of this structure always contains np_set
window. the remaining fields are standard x toolkit attributes of the top-level shell
window in the browser
window hierarchy. ...
...And 2 more matches
mozbrowseropenwindow
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropen
window 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. the embedder must use the <iframe> passed in the event.details.frameelement property as the new
window content. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property t...
...cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: url a domstring representing the url of the document loaded within the frameelement property. name a domstring representing the name of the new browser
window. ...
...ls property returns an anonymous javascript object with the following properties: url a domstring representing the url of the document loaded within the frameelement property. name a domstring representing the name of the new browser
window. features a domstring containing features represented by a list of names and values separated by commas. for a complete list of possible features, see
window.open(). frameelement an object representing the new browser <iframe> that will embed the new content. ...
...And 2 more matches
How to get a process dump with Windows Task Manager
introduction when tracking down the causes of process hangs, it is often helpful to obtain a process dump while the process is experiencing a hang. this article describes how to get a process dump with task manager on
windows. (to get a process dump for thunderbird or some other product, substitute the product name where ever you see firefox in these instructions.) caution the memory dump that will be created through this process is a complete snapshot of the state of firefox when you create the file, so it contains urls of active tabs, history information, and possibly even passwords depending on what you are doing when the snapshot is taken. it is advisable to create a new, blank profile to use when reproducing the hang and capturing the memory dump. please ask for help doing this! ...
...hrough this process is a complete snapshot of the state of firefox when you create the file, so it contains urls of active tabs, history information, and possibly even passwords depending on what you are doing when the snapshot is taken. it is advisable to create a new, blank profile to use when reproducing the hang and capturing the memory dump. please ask for help doing this! requirements
windows to get a process dump, you need to be using
windows vista or above. a firefox nightly or release you need a firefox version for which symbols are available from the mozilla symbol server. you can use any official nightly build or released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. creating the ...
...sion of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. creating the dump file ensure that firefox is not already running. run firefox, reproduce the hang start firefox and perform whatever steps are necessary to cause firefox to hang. once the browser hangs, continue with the steps below. ...
...And 2 more matches
Window.captureEvents() - Web APIs
the
window.captureevents() method registers the
window to capture all events of the specified type. syntax
window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... ...
...ur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... ...
...dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... ...
...And 2 more matches
Window.getSelection() - Web APIs
the
window.getselection() method returns a selection object representing the range of text selected by the user or the current position of the caret. syntax selection =
window.getselection(); return value a selection object. when cast to string, either by appending an empty string ("") or using selection.tostring(), this object returns the text selected. when called on an <iframe> that is not displayed (eg. where display: none is set) firefox will return null, whereas other browsers will return a selection object with selection.type set to none. ...
...alue a selection object. when cast to string, either by appending an empty string ("") or using selection.tostring(), this object returns the text selected. when called on an <iframe> that is not displayed (eg. where display: none is set) firefox will return null, whereas other browsers will return a selection object with selection.type set to none. examples function foo() { var selobj =
window.getselection(); alert(selobj); var selrange = selobj.getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like
window.alert() or document.write()), the object's tostring() method is called and the returned value is passed to the function. this can make the object app...
...however, attempting to use a javascript string property or method such as length or substr directly on a selection object will result in an error if it does not have that property or method and may return unexpected results if it does. ...
...And 2 more matches
Window.matchMedia() - Web APIs
return value a new mediaquerylist object for the media query. use this object's properties and events to detect matches and to monitor for changes to those matches over time. usage notes you can use the returned media query to perform both instantanteous and event-driven checks to see if the document matches the media query. ...
...taneous check to see if the document matches the media query, look at the value of the matches property, which will be true if the document meets the media query's requirements. if you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change event to be delivered to the object. ...
...the change event to be delivered to the object. there's a good example of this in the article on
window.devicepixelratio. examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the
window is wider than that. ...
...And 2 more matches
Window.onpaint - Web APIs
specification this is not part of any specification. ...
... specification this is not part of any specification. ...
... specification this is not part of any specification. ...
...And 2 more matches
Window.screen - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...And 2 more matches
Window.stop() - Web APIs
recommendation browser compatibility the compatibility table in this page is generated from structured data. ...
... recommendation browser compatibility the compatibility table in this page is generated from structured data. ...
... recommendation browser compatibility the compatibility table in this page is generated from structured data. ...
...And 2 more matches
Window.toolbar - Web APIs
the
window.toolbar property returns the toolbar object, whose visibility can be toggled in the
window. syntax objref =
window.toolbar example the following complete html example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. ...
...and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. ...
...any of the bars on an existing
window. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. <!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing
window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite");
window.toolbar.visible=!
window.toolbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of the...
...And 2 more matches
Window: unload event - Web APIs
child resource is being unloaded. ...
...) 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). ...
...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). ...
...And 2 more matches
WindowClient.focused - Web APIs
the focused read-only property of the
windowclient interface is a boolean that indicates whether the current client has focus. syntax var myfocused =
windowclient.focused; value a boolean. ...
...whether the current client has focus. syntax var myfocused =
windowclient.focused; value a boolean. ...
... working draft initial definition ...
...And 2 more matches
WindowClient - Web APIs
the
windowclient interface of the serviceworker api represents the scope of a service worker client that is a document in a browsing context, controlled by an active worker. the service worker client independently selects and uses a service worker for its own loading and sub-resources. methods
windowclient inherits methods from its parent interface, client.
windowclient.focus() gives user input focus to the current client.
windowclient.navigate() loads a specified url into a controlled client page. properties
windowclient inherits properties from its parent interface, client.
windowclient.focused read only a boolean that indicates whether the current client has focus.
windowclient.visibilitystate read only indicates the visibility of the current client. this value can be one...
...es the visibility of the current client. this value can be one of "hidden", "visible", or "prerender". ...
... working draft initial definition ...
...And 2 more matches
WindowEventHandlers.onunload - Web APIs
specifications specification status comment html living standardthe definition of 'onunload' in that specification. ...
... specifications specification status comment html living standardthe definition of 'onunload' in that specification. ...
... specifications specification status comment html living standardthe definition of 'onunload' in that specification. ...
...And 2 more matches
WindowOrWorkerGlobalScope.atob() - Web APIs
you can use the btoa() method to encode and transmit data which may otherwise cause communication problems, then transmit it and use the atob() method to decode the data again. for example, you can encode, transmit, and decode control characters such as ascii values 0 through 31. for use with unicode or utf-8 strings, see the note on "unicode strings" in the page for btoa(). syntax var decodeddata = scope.atob(encodeddata); parameters encodeddata a binary string contains an base64 encoded data. return value an ascii string containing decoded data from encodeddata. exceptions domexception (name: invalidcharactererror) throws if encodeddata is not valid base64. ...
...ings, see the note on "unicode strings" in the page for btoa(). syntax var decodeddata = scope.atob(encodeddata); parameters encodeddata a binary string contains an base64 encoded data. return value an ascii string containing decoded data from encodeddata. exceptions domexception (name: invalidcharactererror) throws if encodeddata is not valid base64. ...
...tax var decodeddata = scope.atob(encodeddata); parameters encodeddata a binary string contains an base64 encoded data. return value an ascii string containing decoded data from encodeddata. exceptions domexception (name: invalidcharactererror) throws if encodeddata is not valid base64. ...
...And 2 more matches
Supporting per-window private browsing - Archive of obsolete content
firefox 20 introduced per-
window private browsing mode, in which private user data is stored and accessed concurrently with public user data from another
window. detecting private browsing mode determining whether or not a given dom
window is private is simple: import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.is
windowprivate(
window). you can then take action based on this value, as any data or actions originating from this
window should be considered private. try { // firefox 20+ components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); if (!privatebrowsingutils.is
windowprivate(
window)) { ... } } catch(e) { // pre firefox 20 (if you do not have access to a do...
...e apis some apis (such as nsitransferable and nsiwebbrowserpersist) take nsiloadcontext arguments that are used to determine whether they should be classed as private or not (for example, whether the uri being persisted by saveuri should be added to the permanent download history). to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfrom
window(win), passing a
window object that is related to the content in question. as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant
window is the one that owns the element being targeted by the context menu (element.ownerdocument.defaultview). if some action triggered by a chrome element (such as a button) requires an api that tak...
...elated to the content in question. as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant
window is the one that owns the element being targeted by the context menu (element.ownerdocument.defaultview). if some action triggered by a chrome element (such as a button) requires an api that takes a privacy context, the most relevant
window is the one that contains the chrome element. in some cases, there is no logical
window object to use (such as when data or an action originate from some other source than web content). in these cases, it is permissable to pass null as the argument instead of a real privacy context. however, this can lead to privacy leaks (such as cache and download entries) if not used carefully. clearing any tem...
...ermissable to pass null as the argument instead of a real privacy context. however, this can lead to privacy leaks (such as cache and download entries) if not used carefully. clearing any temporarily-stored private data it is permissable to store private data in non-persistent ways for the duration of a private browsing session. to be notified when such a session ends (i.e., when the last private
window is closed), observe the last-pb-context-exited notification. function pbobserver() { /* clear private data */ } var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(pbobserver, "last-pb-context-exited", false); preventing a private session from ending if there are unfinished transactions involving p...
Windows Install - Archive of obsolete content
windows install example this example shows the installation of a xpi in which user profile information is contained. note the disk space verification, the editing of the
windows registry, the writing to the installation log, and the error checking before either performinstall or cancelinstall is called. // this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spac...
... // subkeys have to exist before values can be put in. var subkey; // the name of the subkey you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. winreg.setrootkey(winreg.hkey_c...
...t in. var subkey; // the name of the subkey you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. ...
... var ftemp = getfolder("temporary"); var fprogram = getfolder("program"); var fren8dot3ini = getwinprofile(ftemp, "ren8dot3.ini"); var binicreated = false; var flongfilepath; var sshortfilepath; if(fren8dot3ini != null) { for(i = 0; i < listlongfilepaths.length; i++) { flongfilepath = getfolder(fprogram, listlongfilepaths[i]); sshortfilepath = file.
windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot3() ; } return(0); } // main var srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.2000110801"); logcomment("...
How To Pass an XPCOM Object to a New Window
a more useful example is available in the source code: toolkit/components/help/content/contexthelp.js#61 if you want to be able to call functions within an xpcom object from a xul
window's code, you can do so if you pass the xpcom object as one of the arguments to the
window creation method. for example: var ww = components.classes["@mozilla.org/embedcomp/
window-watcher;1"]. ...
...e in the source code: toolkit/components/help/content/contexthelp.js#61 if you want to be able to call functions within an xpcom object from a xul
window's code, you can do so if you pass the xpcom object as one of the arguments to the
window creation method. for example: var ww = components.classes["@mozilla.org/embedcomp/
window-watcher;1"]. ...
...onents/help/content/contexthelp.js#61 if you want to be able to call functions within an xpcom object from a xul
window's code, you can do so if you pass the xpcom object as one of the arguments to the
window creation method. for example: var ww = components.classes["@mozilla.org/embedcomp/
window-watcher;1"]. getservice(components.interfaces.nsi
windowwatcher); var win = ww.open
window(null, "chrome://myextension/content/debug.xul", "debug history", "chrome,centerscreen,resizable", myobject); note in this example that myobject is passed to the open
window() method; you can pass any xpcom object (or any other value, for that matter) in this way. ...
... getservice(components.interfaces.nsi
windowwatcher); var win = ww.open
window(null, "chrome://myextension/content/debug.xul", "debug history", "chrome,centerscreen,resizable", myobject); note in this example that myobject is passed to the open
window() method; you can pass any xpcom object (or any other value, for that matter) in this way. to access the xpcom object from the
window's code, you can access the
window.arguments[] array, as shown in the example below: components.utils.reporterror(string(
window.arguments[0])); this will produce output similar to "[xpconnect wrapped nsimyxpcomobject]". ...
Clients.openWindow() - Web APIs
the open
window() 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, open
window() will throw an invalidaccesserror. in firefox, the method is allowed to show popups only when called as the result of a notification click event. 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. as of recently, this also works on chrome for
windows. syntax self.clients.open
window(url).then(function(
windowclient) { // do something with your
windowclient }); parameters url a usvstring representing the url of the client you want to open in the
window. generally this value must be a url ...
...creen. as of recently, this also works on chrome for
windows. syntax self.clients.open
window(url).then(function(
windowclient) { // do something with your
windowclient }); parameters url a usvstring representing the url of the client you want to open in the
window. generally this value must be a url from the same origin as the calling script. return value a promise that resolves to a
windowclient object if the url is from the same origin as the service worker or a null value otherwise. examples // send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registrat...
... body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the
window clients e.waituntil(clients.matchall({ type: '
window' }).then(clientsarr => { // if a
window tab matching the targeted url already exists, focus that; const had
windowtofocus = clientsarr.some(
windowclient =>
windowclient.url === e.notification.data.url ? (
windowclient.focus(), true) : false); // otherwise, open a new tab to the applicable url and focus it. if (!had
windowtofocus)...
...waituntil(clients.matchall({ type: '
window' }).then(clientsarr => { // if a
window tab matching the targeted url already exists, focus that; const had
windowtofocus = clientsarr.some(
windowclient =>
windowclient.url === e.notification.data.url ? (
windowclient.focus(), true) : false); // otherwise, open a new tab to the applicable url and focus it. if (!had
windowtofocus) clients.open
window(e.notification.data.url).then(
windowclient =>
windowclient ?
windowclient.focus() : null); })); }); specifications specification status comment service workersthe definition of 'clients: open
window' in that specification. working draft initial definition. ...
MSCandidateWindowHide - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. mscandidate
windowhide fires after the input method editor (ime) candidate
window closes and is fully hidden. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note
windows 8.1 and
windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new
windows ui, this event is supported in
windows 8.1 imes of all languages. syntax event property object...
...prietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note
windows 8.1 and
windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new
windows ui, this event is supported in
windows 8.1 imes of all languages. syntax event property object.oncandidate
windowhide = handler; addeventlistener method object.addeventlistener("mscandidate
windowhide", handler, usecapture) nbsp; parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
... web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). ...
... web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). ...
MSCandidateWindowUpdate - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. mscandidate
windowupdate fires after the input method editor (ime) candidate
window has been identified as needing to change size, but before any visual updates have rendered. ...
...ge incompatibilities between implementations and the behavior may change in the future. mscandidate
windowupdate fires after the input method editor (ime) candidate
window has been identified as needing to change size, but before any visual updates have rendered. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note
windows 8.1 and
windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new
windows ui, this event is supported in
windows 8.1 imes of all languages. ...
...prietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note
windows 8.1 and
windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new
windows ui, this event is supported in
windows 8.1 imes of all languages. syntax event property object.oncandidate
windowupdate = handler; addeventlistener method object.addeventlistener("mscandidate
windowupdate", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
...new
windows ui, this event is supported in
windows 8.1 imes of all languages. syntax event property object.oncandidate
windowupdate = handler; addeventlistener method object.addeventlistener("mscandidate
windowupdate", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. tan ime candidate
window may be identified as needing to change size for any of the following reasons: as a result of displaying new / changed alternatives or predictions web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). see also microsoft api extensions ime handling guide for gecko ...
Window.closed - Web APIs
the
window.closed read-only property indicates whether the referenced
window is closed or not. syntax const isclosed =
windowref.closed; value a boolean. possible values: true: the
window has been closed. 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. refreshing a previously opened popup...
... 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. refreshing a previously opened popup in this example the function refreshpopup
window() calls the reload() method of the popup's location object to refresh its data. if the popup hasn't been opened yet or the user has closed it a new
window is opened. ...
...r.closed) {
window.opener.location.href = 'http://www.mozilla.org'; } note that popups can only access the
window that opened them. refreshing a previously opened popup in this example the function refreshpopup
window() calls the reload() method of the popup's location object to refresh its data. if the popup hasn't been opened yet or the user has closed it a new
window is opened. ...
...href = 'http://www.mozilla.org'; } note that popups can only access the
window that opened them. refreshing a previously opened popup in this example the function refreshpopup
window() calls the reload() method of the popup's location object to refresh its data. if the popup hasn't been opened yet or the user has closed it a new
window is opened. const popup
window = null; function refreshpopup
window() { if (popup
window && !popup
window.closed) { // popup
window is open, refresh it popup
window.location.reload(true); } else { // open a new popup
window popup
window =
window.open('popup.html', 'data
window'); } } specification specification status comment html living standardthe definition of '
window.closed' in that specification. living standard ...
Window.content - Web APIs
dards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. note: since firefox 57 (initially nightly-only), both the content and _content variants are only available to chrome (privileged) code, and not available to the web anymore. returns a
window object for the primary content
window. this is useful in xul
windows that have a <browser> (or tabbrowser or <iframe>) with type="content-primary" attribute on it — the most famous example is firefox main
window, browser.xul. in such cases, content returns a reference to the
window object for the document currently displayed in the browser. it is a shortcut for browserref.content
window. in unp...
...tribute on it — the most famous example is firefox main
window, browser.xul. in such cases, content returns a reference to the
window object for the document currently displayed in the browser. it is a shortcut for browserref.content
window. in unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content still refers to the
window of the currently selected tab). note: some examples use _content instead of content. the former has been deprecated for a long time, and you should use content in any new code. ...
...s a shortcut for browserref.content
window. in unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content still refers to the
window of the currently selected tab). note: some examples use _content instead of content. the former has been deprecated for a long time, and you should use content in any new code. syntax var
windowobject =
window.content; example executing the following code in a chrome xul
window with a <browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser: content.document.getelementsbytagname("div")[0].style.border = "solid red 1px"; specification none. ...
...t in any new code. syntax var
windowobject =
window.content; example executing the following code in a chrome xul
window with a <browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser: content.document.getelementsbytagname("div")[0].style.border = "solid red 1px"; specification none. see also working with
windows in chrome code when accessing content documents from privileged code, be aware of xpcnativewrappers. ...
Window.crypto - Web APIs
the read-only
window.crypto property returns the crypto object associated to the global object. this object allows web pages access to certain cryptographic related services. although the property itself is read-only, all of its methods (and the methods of its child object, subtlecrypto) are not read-only, and therefore vulnerable to attack by polyfill. although
window.crypto is available on all
windows, the returned crypto object only has one usable feature in insecure contexts: the getrandomvalues() method. in general, you should use this api only in secure contexts. syntax var cryptoobj =
window.crypto ||
window.mscrypto; // for ie 11 value an instance of the crypto interface, providing access to general-purpose cryptography and a strong random-number generator. example this example ...
...eturned crypto object only has one usable feature in insecure contexts: the getrandomvalues() method. in general, you should use this api only in secure contexts. syntax var cryptoobj =
window.crypto ||
window.mscrypto; // for ie 11 value an instance of the crypto interface, providing access to general-purpose cryptography and a strong random-number generator. example this example uses the
window.crypto property to access the getrandomvalues() method. ...
... syntax var cryptoobj =
window.crypto ||
window.mscrypto; // for ie 11 value an instance of the crypto interface, providing access to general-purpose cryptography and a strong random-number generator. example this example uses the
window.crypto property to access the getrandomvalues() method. ...
... recommendation initial definition ...
Window.getAttention() - Web APIs
this may be configurable as well. on macintosh, the icon in the upper right corner of the desktop flashes. the function is disabled for web content. neither gecko nor internet explorer supports this feature now for web content. getattention will still work when used from chrome in a gecko application. specification dom level 0. ...
...this may be configurable as well. on macintosh, the icon in the upper right corner of the desktop flashes. the function is disabled for web content. neither gecko nor internet explorer supports this feature now for web content. getattention will still work when used from chrome in a gecko application. specification dom level 0. ...
...this may be configurable as well. on macintosh, the icon in the upper right corner of the desktop flashes. the function is disabled for web content. neither gecko nor internet explorer supports this feature now for web content. getattention will still work when used from chrome in a gecko application. specification dom level 0. ...
...this may be configurable as well. on macintosh, the icon in the upper right corner of the desktop flashes. the function is disabled for web content. neither gecko nor internet explorer supports this feature now for web content. ...
Window.getComputedStyle() - Web APIs
pseudoeltoptional a string specifying the pseudo-element to match. omitted (or null) for real elements. the returned style is a live cssstyledeclaration object, which updates automatically when the element's styles are changed. ...
... pseudoeltoptional a string specifying the pseudo-element to match. omitted (or null) for real elements. the returned style is a live cssstyledeclaration object, which updates automatically when the element's styles are changed. ...
.... examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the text content of the <p>. html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles =
window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property. however, the two objects have different...
...sed to set styles on that element, or inspect styles directly added to it from javascript manipulation or the global style attribute. the first argument must be an element. non-elements, like a text node, will throw an error. defaultview in many code samples, getcomputedstyle is used from the document.defaultview object. in nearly all cases, this is needless, as getcomputedstyle exists on the
window object as well. it's likely the defaultview pattern was a combination of folks not wanting to write a testing spec for
window and making an api that was also usable in java. use with pseudo-elements getcomputedstyle can pull style info from pseudo-elements (such as ::after, ::before, ::marker, ::line-marker — see the pseudo-element spec). <style> h3::after { content: ' rocks!'; } </s...
Window.getDefaultComputedStyle() - Web APIs
the getdefaultcomputedstyle() method gives the default computed values of all the css properties of an element, ignoring author styling. that is, only user-agent and user styles are taken into account. syntax var style =
window.getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for which to get the computed style. pseudoelt optional a string specifying the pseudo-element to match. must be null (or not specified) for regular elements. return value the returned style is a cssstyledeclaration object. ...
...ntax var style =
window.getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for which to get the computed style. pseudoelt optional a string specifying the pseudo-element to match. must be null (or not specified) for regular elements. return value the returned style is a cssstyledeclaration object. the object is of the same type as the object returned by
window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
... a string specifying the pseudo-element to match. must be null (or not specified) for regular elements. return value the returned style is a cssstyledeclaration object. the object is of the same type as the object returned by
window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
...ple simple example var elem1 = document.getelementbyid("elemid"); var style =
window.getdefaultcomputedstyle(elem1); longer example <style> #elem-container { position: absolute; left: 100px; top: 200px; height: 100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> var elem = document.getelementbyid("elem-container"); var thecssprop =
window.getdefaultcomputedstyle(elem).position; document.getelementbyid("output").innerhtml = thecssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() method can pull style info from pseudo-elements (e.g., ::before or ::after). <style> h3:after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 = document.queryselect...
Window.innerHeight - Web APIs
the read-only innerheight property of the
window interface returns the interior height of the
window in pixels, including the height of the horizontal scroll bar, if present. the value of innerheight is taken from the height of the
window's layout viewport. the width can be obtained using the innerwidth property. syntax let intviewportheight =
window.innerheight; value an integer value indicating the
window's layout viewport height in pixels. the property is read only and has no default value. to change the width of the
window, call one of its resize methods, such as resizeto() or resizeby(). usage notes to obtain the height of the
window minus its horizontal scroll bar and any borders, use the root <html> element's clientheight() property instead. both innerheight and innerwidth are a...
...out viewport height in pixels. the property is read only and has no default value. to change the width of the
window, call one of its resize methods, such as resizeto() or resizeby(). usage notes to obtain the height of the
window minus its horizontal scroll bar and any borders, use the root <html> element's clientheight() property instead. both innerheight and innerwidth are available on any
window or any object that behaves like a
window, such as a tab or frame. ...
...ne of its resize methods, such as resizeto() or resizeby(). usage notes to obtain the height of the
window minus its horizontal scroll bar and any borders, use the root <html> element's clientheight() property instead. both innerheight and innerwidth are available on any
window or any object that behaves like a
window, such as a tab or frame. ...
...var intframeheight = self.innerheight; // will return the height of the frame viewport within the frameset var intframesetheight = parent.innerheight; // will return the height of the viewport of the closest frameset var intouterframesetheight = top.innerheight; // will return the height of the viewport of the outermost frameset fixme: link to an interactive demo here to change the size of a
window, see
window.resizeby() and
window.resizeto(). to get the outer height of a
window, i.e. the height of the whole browser
window, see
window.outerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view modulethe definition of '
window.innerheigh...
Window.innerWidth - Web APIs
the read-only
window property innerwidth returns the interior width of the
window in pixels. this includes the width of the vertical scroll bar, if one is present. more precisely, innerwidth returns the width of the
window's layout viewport. the interior height of the
window—the height of the layout viewport—can be obtained from the innerheight property. syntax let intviewportwidth =
window.innerwidth; value an integer value indicating the width of the
window's layout viewport in pixels. this property is read-only, and has no default value. to change the
window's width, use one of the
window methods for resizing
windows, such as resizeby() or resizeto(). ...
...ined from the innerheight property. syntax let intviewportwidth =
window.innerwidth; value an integer value indicating the width of the
window's layout viewport in pixels. this property is read-only, and has no default value. to change the
window's width, use one of the
window methods for resizing
windows, such as resizeby() or resizeto(). usage notes if you need to obtain the width of the
window minus the scrollbar and borders, use the root <html> element's clientwidth property instead. the innerwidth property is available on any
window or object that behaves like a
window, such as a frame or tab. ...
... for resizing
windows, such as resizeby() or resizeto(). usage notes if you need to obtain the width of the
window minus the scrollbar and borders, use the root <html> element's clientwidth property instead. the innerwidth property is available on any
window or object that behaves like a
window, such as a frame or tab. ...
... working draft initial definition ...
window.location - Web APIs
the
window.location read-only property returns a location object with information about the current location of the document. though
window.location is a read-only location object, you can also assign a domstring to it. this means that you can work with location as if it were a string in most cases: location = 'http://www.example.com' is a synonym of location.href = 'http://www.example.com'. see location for all available properties. syntax var oldlocation = location; location = newlocation; examples basic example alert(location); // alerts "/docs/web/api/
window/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a document will be loaded using the url as if location.assign() had been called with the modified url. note that security se...
...und(_scrolly + (_nodey - _scrolly) * _itframe / nframes); document.documentelement.scrollleft = math.round(_scrollx + (_nodex - _scrollx) * _itframe / nframes); if (_usehash && _itframe === nframes) { location.hash = _bookmark; } _itframe++; } function _chkowner () { if (_isbot) { _isbot = false; return; } if (_scrollid > -1) { clearinterval(_scrollid); _scrollid = -1; } } if (
window.addeventlistener) {
window.addeventlistener("scroll", _chkowner, false); } else if (
window.attachevent) {
window.attachevent("onscroll", _chkowner); } return function (sbookmark, busehash) { var onode = document.queryselector(sbookmark); _scrolly = document.documentelement.scrolltop; _scrollx = document.documentelement.scrollleft; _bookmark = sbookmark; _usehash = busehash === tr...
... recommendation initial definition. ...
... recommendation initial definition. ...
Window: message event - Web APIs
the message event is fired on a
window object when the
window receives a message, for example from a call to
window.postmessage() from another browsing context. ...
...ct when the
window receives a message, for example from a call to
window.postmessage() from another browsing context. ...
....postmessage() from another browsing context. ...
... bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this: const targetframe =
window.top.frames[1]; const targetorigin = 'https://example.org'; const
windowmessagebutton = document.queryselector('#
window-message');
windowmessagebutton.addeventlistener('click', () => { targetframe.postmessage('hello there', targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this:
window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); alternatively the listener could use the onmessage event handler property: wi...
Window.personalbar - Web APIs
returns the personalbar object, whose visibility can be toggled in the
window. syntax objref =
window.personalbar example fixme: https://bugzilla.mozilla.org/show_bug.cgi?id=790023 the following complete html example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. ...
...and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. ...
...any of the bars on an existing
window. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. <!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing
window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite");
window.personalbar.visible = !
window.personalbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibi...
...cript> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of the various toolbars can change the size of the
window rather dramatically, and may affect the layout of your page. specifications specification status comment html living standardthe definition of '
window.personalbar' in that specification. living standard html5the definition of '
window.personalbar' in that specification. recommendation ...
Window.requestAnimationFrame() - Web APIs
the method takes a callback as an argument to be invoked before the repaint. note: your callback routine must itself call requestanimationframe() if you want to animate another frame at the next repaint. you should call this method whenever you're ready to update your animation onscreen. this will request that your animation function be called before the browser performs the next repaint. the number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per w3c recommendation. ...
...ack's workload. this timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs). be sure to always use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens. check the example below for a way to do this. syntax
window.requestanimationframe(callback); parameters callback the function to call when it's time to update your animation for the next repaint. the callback function is passed one single argument, a domhighrestimestamp similar to the one returned by performance.now(), indicating the point in time when requestanimationframe() starts to execute callback functions. return value a long integer value...
...gument, a domhighrestimestamp similar to the one returned by performance.now(), indicating the point in time when requestanimationframe() starts to execute callback functions. return value a long integer value, the request id, that uniquely identifies the entry in the callback list. this is a non-zero value, but you may not make any other assumptions about its value. you can pass this value to
window.cancelanimationframe() to cancel the refresh callback request. example in this example, an element is animated for 2 seconds (2000 milliseconds). the element moves at a speed of 0.1px/ms to the right, so its relative position (in css pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed. the element's final position is 20...
...d('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // `math.min()` is used here to make sure that the element stops at exactly 200px. element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds
window.requestanimationframe(step); } }
window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle. specification specification status comment html living standardthe definition of 'requestanimationframe' in that specification. living standard no change, supersedes the ...
Window.resizeBy() - Web APIs
the
window.resizeby() method resizes the current
window by a specified amount. syntax
window.resizeby(xdelta, ydelta) parameters xdelta is the number of pixels to grow the
window horizontally. ydelta is the number of pixels to grow the
window vertically. example // shrink the
window window.resizeby(-200, -200); notes this method resizes the
window relative to its current size. to resize the
window in absolute terms, use
window.resizeto(). 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. see the compatability table for details on the change. ...
...current size. to resize the
window in absolute terms, use
window.resizeto(). 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. see the compatability table for details on the change. 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. ...
...er 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. see the compatability table for details on the change. 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. // create resizable
window myexternal
window =
window.open("http://myurl.domain", "my
windowname", "resizable"); // resize
window to 500x500 myexternal
window.resizeto(500, 500); // make
window relatively smaller to 400x400 myexternal
window.resizeby(-100, -100); the
window you create must respect the same origin policy. ...
...he
window resizable, you must open it with the "resizable" feature. // create resizable
window myexternal
window =
window.open("http://myurl.domain", "my
windowname", "resizable"); // resize
window to 500x500 myexternal
window.resizeto(500, 500); // make
window relatively smaller to 400x400 myexternal
window.resizeby(-100, -100); the
window you create must respect the same origin policy. if the
window you open is not in the same orgin as the current
window, you will not be able to resize, or access any information on, that
window/tab. specifications specification status comment css object model (cssom) view modulethe definition of '
window.resizeby()' in that specification. working draft ...
Window.showModalDialog() - Web APIs
this feature has been removed. please fix your web sites and applications. this method was removed in chrome 43 and firefox 56. the
window.showmodaldialog() created and displayed a modal dialog box containing a specified html document. syntax returnval =
window.showmodaldialog(uri[, arguments][, options]); returnval holds the returnvalue property as set by the document specified by uri. uri is the url of the document to display in the dialog. arguments is an optional variant containing values passed to the dialog; these are made available in the
window object's
window.dialogarguments property. ...
...default is yes. dialogheight: height the height of the dialog box in pixels. ...
...default is yes. dialogheight: height the height of the dialog box in pixels. dialogleft: left distance of the dialog box from the left edge of the desktop. ...
... the height of the dialog box in pixels. dialogleft: left distance of the dialog box from the left edge of the desktop. dialogwidth: width the width of the dialog box in pixels. dialogtop: top distance of the dialog box from the top edge of the desktop. resizable: {on | off | yes | no | 1 | 0 } if this argument's value is on, yes, or 1, the dialog
window can be resized by the user; otherwise its size is fixed. the default value is no. scroll: {on | off | yes | no | 1 | 0 } if on, yes, or 1, the dialog
window has scroll bars; otherwise its size is fixed. default is no. note: firefox does not implement the dialoghide, edge, status, or unadorned arguments. examples try out showmodaldialog(). notes showmodaldialog() was briefly...
Window.speechSynthesis - Web APIs
after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. ...
...after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. ...
...after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. ...
...enu with them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method. ...
Window.statusbar - Web APIs
the
window.statusbar property returns the statusbar object, whose visibility can be toggled in the
window. syntax objref =
window.statusbar example the following complete html example shows a way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. ...
...usbar example the following complete html example shows a way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. ...
...operty of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing
window. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> // changing bar states on the existing
window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite");
window.statusbar.visible=!
window.statusbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of...
...cript> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of the various toolbars can change the size of the
window rather dramatically, and may affect the layout of your page. specifications specification status comment html living standardthe definition of '
window.statusbar' in that specification. living standard html5the definition of '
window.statusbar' in that specification. recommendation ...
Window: unhandledrejection event - Web APIs
this is useful for debugging and for providing fallback error handling for unexpected situations. bubbles no cancelable yes interface promiserejectionevent event handler property onunhandledrejection usage notes allowing the unhandledrejection event to bubble will eventually result in an error message being output to the console. ...
... event. the event includes two useful pieces of information: promise the actual promise which was rejected with no handler available to deal with the rejection. reason the reason that would have been passed into the rejection handler if one had existed. see catch() for details. basic error logging this example simply logs information about the unhandled promise rejection to the console. ...
...ejection handler if one had existed. see catch() for details. basic error logging this example simply logs information about the unhandled promise rejection to the console.
window.addeventlistener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event listener:
window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; preventing default handling many environments (such as node.js) report unhandled promise rejections to the console by default. you can prevent that from happening by adding a handler for unhandledrejection events that—in addition to any other tasks you wish to perform—calls preventdefault()...
...such as node.js) report unhandled promise rejections to the console by default. you can prevent that from happening by adding a handler for unhandledrejection events that—in addition to any other tasks you wish to perform—calls preventdefault() to cancel the event, preventing it from bubbling up to be handled by the runtime's logging code. this works because unhandledrejection is cancelable.
window.addeventlistener('unhandledrejection', function (event) { // ...your code here to handle the unhandled rejection... // prevent the default handling (such as outputting the // error to the console) event.preventdefault(); }); specifications specification status comment html living standardthe definition of 'unhandledrejection' in that specification. livi...
WindowClient.focus() - Web APIs
the focus() method of the
windowclient interface gives user input focus to the current client and returns a promise that resolves to the existing
windowclient. syntax
windowclient.focus().then(function(
windowclient) { // do something with your
windowclient once it has been focused }); parameters none. return value a promise that resolves to the existing
windowclient. ...
...een focused }); parameters none. return value a promise that resolves to the existing
windowclient. ...
... working draft initial definition. ...
... working draft initial definition. ...
WindowOrWorkerGlobalScope.btoa() - Web APIs
you can use this method to encode data which may otherwise cause communication problems, transmit it, then use the atob() method to decode the data again. for example, you can encode control characters such as ascii values 0 through 31. syntax var encodeddata = scope.btoa(stringtoencode); parameters stringtoencode the binary string to encode. return value an ascii string containing the base64 representation of stringtoencode. exceptions invalidcharactererror the string contained a character that did not fit in a single byte. see "unicode strings" below for more detail. ...
... 0 through 31. syntax var encodeddata = scope.btoa(stringtoencode); parameters stringtoencode the binary string to encode. return value an ascii string containing the base64 representation of stringtoencode. exceptions invalidcharactererror the string contained a character that did not fit in a single byte. see "unicode strings" below for more detail. example const encodeddata =
window.btoa('hello, world'); // encode a string const decodeddata =
window.atob(encodeddata); // decode the string unicode strings the btoa() function takes a javascript string as a parameter. in javascript strings are represented using the utf-16 character encoding: in this encoding, strings are represented as a sequence of 16-bit (2 byte) units. every ascii character fits into the first byte of one...
...tes.buffer)); } const decoded = atob(encoded); const original = frombinary(decoded); console.log(original); // ☸☹☺☻☼☾☿ polyfill you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for browsers that don't support it. specifications specification status comment html living standardthe definition of '
windoworworkerglobalscope.btoa()' in that specification. living standard method moved to the
windoworworkerglobalscope mixin in the latest spec. html 5.1the definition of '
windowbase64.btoa()' in that specification. recommendation snapshot of html living standard. no change. html5the definition of '
windowbase64.btoa()' in that specification. recommendation snapshot of...
... specification. living standard method moved to the
windoworworkerglobalscope mixin in the latest spec. html 5.1the definition of '
windowbase64.btoa()' in that specification. recommendation snapshot of html living standard. no change. html5the definition of '
windowbase64.btoa()' in that specification. recommendation snapshot of html living standard. creation of
windowbase64 (properties where on the target before it). ...
WindowOrWorkerGlobalScope.fetch() - Web APIs
a fetch() promise only rejects when a network error is encountered (which is usually when there’s a permissions issue or similar). ...
... a fetch() promise only rejects when a network error is encountered (which is usually when there’s a permissions issue or similar). ...
...rts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available. the promise resolves to the response object representing the response to your request. the promise does not reject on http errors — it only rejects on network errors. you must use then handlers to check for http errors.
windoworworkerglobalscope is implemented by both
window and workerglobalscope, which means that the fetch() method is available in pretty much any context in which you might want to fetch resources. a fetch() promise only rejects when a network error is encountered (which is usually when there’s a permissions issue or similar). a fetch() promise does not reject on http errors (404, etc.). instead, a then() handler must check the response.ok and/or ...
... you can also use an object literal as headers in init. const myinit = { method: 'get', headers: { 'content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg', myinit); specifications specification status comment fetchthe definition of 'fetch()' in that specification. living standard defined in a
windoworworkerglobalscope partial in the newest spec. fetchthe definition of 'fetch()' in that specification. living standard initial definition credential management level 1 working draft adds federatedcredential or passwordcredential instance as a possible value for init.credentials. ...
Static Analysis for Windows Code under Linux - Archive of obsolete content
we highly recommend you to read the cross compiling manual and the dehydra build manual before you start the following reading. build gcc corss-compiler with plugin support by default gcc does not support plugins. dehydra requires patching gcc such that it can load plugins as shared libraries: # prepare a directory mkdir $home/dehydra cd $home/dehydra #obtain gcc 4.3 sources wget ftp://mirrors.kernel.org/gnu/gcc/gcc...-4.3.0.tar.bz2 tar jxvf gcc-4.3.0.tar.bz2 # get the patches which enable plugins cd gcc-4.3.0/ # create an hg repository. ...
...the correct shared library. so, we should make a linux native compiler with plugin support to make treehydra! this sound crazy, but it may be the only right way to do this. just follow this and this to compile both dehydra and treehydra shared libraries. and these libraries can be used directly with our cross compiler. check the build run: make check_treehydra run static analysis on mozilla
windows code static analysis is hooked into mozilla repository from mozilla 2. you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=browser ac_add_options --host=i686-linux ac_add_options --target=i686-ming...
...ository from mozilla 2. you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=browser ac_add_options --host=i686-linux ac_add_options --target=i686-mingw32 ac_add_options --enable-default-toolkit=cairo-
windows mk_add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on
windows, so we should disable some components to make it buildable with mingw32. ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests ac_add_options --disable-embedding-tests ac_add_options --disable-installer ac_add_options --disable-accessibil...
windowsShortcut - Archive of obsolete content
ashortcutpath a filespecobject representing the absolute path (not including filename) to where the shortcut is to be created. ...
... ashortcutpath a filespecobject representing the absolute path (not including filename) to where the shortcut is to be created. ...
...at atarget requires. aicon a filespecobject representing the absolute path (including fiilename) to a file that contains icons. can be either .ico, .dll, .exe, or any other binary file that contains icons. aiconid index of the icon from aicon to use for this shortcut. returns an integer error code. for a list of possible values, see return codes. example see file.
windowsshortcut in the script examples chapter. ...
Specifying Startup Chrome Window - Archive of obsolete content
main chrome
window in order to specify the main chrome
window of your xulrunner application, you'll need to add a preferences file to your application directory structure and add a preference named toolkit.defaultchromeuri to that file. let's look at the xulmine xulrunner application. it's directory structure is as follows: xulmine ├───chrome ├───components └───defaults └───preferences in defaults/preferences, there is a file named xulmine.js. its contents are: pref("toolkit.defaultchromeuri", "chrome://xulmine/content/xulmine.xul"); the toolkit.defaultchromeuri preference specifies that the xul
window at chrome://xulmine/content/xulmine.xul is the main application
window. ...
......
...ferences, there is a file named xulmine.js. its contents are: pref("toolkit.defaultchromeuri", "chrome://xulmine/content/xulmine.xul"); the toolkit.defaultchromeuri preference specifies that the xul
window at chrome://xulmine/content/xulmine.xul is the main application
window. specifying a single instance main
window by default, each time the user launches the application xulrunner opens the
window specified by toolkit.defaultchromeuri. an application wishing to have only one main
window should set the toolkit.singleton
windowtype preference and specify the
windowtype attribute on the main application
window. specifying
window features by default, the main
window is opened as a resizeable, non-dialog chrome
window. this default can be changed by setting the toolkit.defaultchromefeatures pr...
-moz-window-shadow - Archive of obsolete content
the -moz-
window-shadow css property specifies whether a
window will have a shadow. it only works on mac os x. this property is not standard and from firefox 44 onwards cannot be used on websites anymore. firefox 3 added support for transparent
windows on mac os x. however, for these
windows shadows were turned off and there was no way to turn them on. in firefox 3.5 the default changed, with all
windows having a shadow. this version introduced the -moz-
window-shadow css property to provide a way to turn off unwanted shadows. initial valuedefaultapplies toall elements that create native
windows, e.g. <
window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-
window-shadow property is specified as one of the keyword values listed below. values defau...
... having a shadow. this version introduced the -moz-
window-shadow css property to provide a way to turn off unwanted shadows. initial valuedefaultapplies toall elements that create native
windows, e.g. <
window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-
window-shadow property is specified as one of the keyword values listed below. values default the
window will have a shadow with the default
window shadow style. menu the
window will have the shadow style that's appropriate for menus. tooltip the
window will have the shadow style that's appropriate for tooltips. sheet the
window will have the shadow style that's appropriate for sheet
windows. none the
window won't have a shadow. formal syntax default | menu | tooltip | sheet | none examp...
... the default
window shadow style. menu the
window will have the shadow style that's appropriate for menus. tooltip the
window will have the shadow style that's appropriate for tooltips. sheet the
window will have the shadow style that's appropriate for sheet
windows. none the
window won't have a shadow. ...
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
the :-moz-system-metric(
windows-default-theme) css pseudo-class matches an element if the user is currently using one of the following themes in
windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass). this will exclude
windows classic themes as well as third-party themes. this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero
windows themes and red with other themes. </p> <p id="nondefaultthemes"> this paragraph should have a green backgroun...
...eudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero
windows themes and red with other themes. </p> <p id="nondefaultthemes"> this paragraph should have a green background with
windows classic or third-party themes and red with other themes. ...
... luna/royale/zune/aero
windows themes and red with other themes. </p> <p id="nondefaultthemes"> this paragraph should have a green background with
windows classic or third-party themes and red with other themes. </p> <p id="notsupported">theme detection is not supported.</p> css content #defaultthemes, #nondefaultthemes { background-color: #ffa0a0; } #defaultthemes:-moz-system-metric(
windows-default-theme) { background-color: #a0ffa0; } #nondefaultthemes:not(-moz-system-metric(
windows-default-theme)) { background-color: #a0ffa0; } #notsupported:-moz-system-metric(
windows-default-theme), #notsupported:not(:-moz-system-metric(
windows-default-theme)) { display: none; } specifications not part of any specification. ...
browser.dom.window.dump.file
c:\dump.txt . it will be created if it doesn't exist yet. the line breaks have to be in the argument of the dump function, else successive dump calls will get logged into the same line. ...
...ump.enabled is set to true. changes require an application restart. ...
...troduction: pushed to nightly on 2009-04-24 bugs: bug 489938 values the value holds the file system path for the file in which the content of the
window.dump() calls get written, e.g. c:\dump.txt . it will be created if it doesn't exist yet. ...
nsIDOMWindow2
dom/interfaces/base/nsidom
window2.idlscriptable this interface is the primary interface for a dom
window object. it represents a single
window object that may contain child
windows if the document in the
window contains an html frameset document, or if the document contains <iframe> elements. inherits from: nsidom
window last changed in gecko 1.9 (firefox 3) because nsidom
window is frozen, this interface was introduced in firefox 3 (gecko 1.9) to allow dom
windows to take on new features. dom
windows implement nsidom
window2, which is a subclass of nsidom
window. in gecko 7.0 this interface has been merged into nsidom
window. attributes attribute type description applicationcache nsidomofflineresourcelist the application cache object for this
window. r...
... introduced in firefox 3 (gecko 1.9) to allow dom
windows to take on new features. dom
windows implement nsidom
window2, which is a subclass of nsidom
window. in gecko 7.0 this interface has been merged into nsidom
window. attributes attribute type description applicationcache nsidomofflineresourcelist the application cache object for this
window. read only.
windowroot nsidomeventtarget the
window root for this
window. this is useful for connecting event listeners to this
window as well as every other
window nested in that
window root. not accessible from scripts. read only. ...
...ype description applicationcache nsidomofflineresourcelist the application cache object for this
window. read only.
windowroot nsidomeventtarget the
window root for this
window. ...
nsIWindowsShellService
inherits from: nsishellservice last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview string getregistryentry(in long ahkeyconstant, in string asubkeyname, in string avaluename); obsolete since gecko 1.8 void restorefilesettings(in boolean aforallusers); obsolete since gecko 1.9 void shortcutmaintenance(); attributes attribute type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen. ...
...ion desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen. a rgb value, where (r << 24 | g << 16 | b) obsolete since gecko 1.8 unreadmailcount unsigned long the number of unread mail messages for the current user. read only. constants valid starting keys for the
windows registry. constant value description hkcr 0 hkey_classes_root. obsolete since gecko 1.8 hkcc 1 hkey_current_config. obsolete since gecko 1.8 hkcu 2 hkey_current_user. obsolete since gecko 1.8 hklm 3 hkey_local_machine. obsolete since gecko 1.8 hku 4 hkey_users. obsolete since gecko 1.8 methods getregistryentry() obsolete since gecko 1.8 (firefox 1.5 / thunderbird...
... hkcr 0 hkey_classes_root. obsolete since gecko 1.8 hkcc 1 hkey_current_config. obsolete since gecko 1.8 hkcu 2 hkey_current_user. obsolete since gecko 1.8 hklm 3 hkey_local_machine. obsolete since gecko 1.8 hku 4 hkey_users. obsolete since gecko 1.8 methods getregistryentry() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) retrieves a
windows registry entry value. string getregistryentry( in long ahkeyconstant, in string asubkeyname, in string avaluename ); parameters ahkeyconstant the starting key, using the constants defined above. asubkeyname the sub key to locate. avaluename the value to locate in the sub key. the empty string returns the default value of the sub key. return value the value of the specified sub key/value...
Window: beforeunload event - Web APIs
the document is still visible and the event is still cancelable at this point. bubbles no cancelable yes interface event event handler property onbeforeunload this event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. if the user confirms, the browser navigates to the new page, otherwise it cancels the navigation. according to the specification, to show the confirmation dialog an event handler should call preventdefault() on the event. ...
...turned string in the confirmation dialog, enabling the event handler to display a custom message to the user. however, this is deprecated and no longer supported in most browsers. to combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all. attaching an event handler/listener to
window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's back-forward cache or webkit's page cache. the html specification states that calls to
window.alert(),
window.confirm(), and
window.prompt() methods may be ignored during this event. see the html specification for more details. examples the html specification states that authors shoul...
... event.preventdefault(); // chrome requires returnvalue to be set. ...
Window.close() - Web APIs
the
window.close() method closes the current
window, or the
window on which it was called. 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. note also that close() has no effect when called on
window objects returned by htmliframeelement.content
window. 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(). ...
... when called on
window objects returned by htmliframeelement.content
window. 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(). //global var to store a reference to the opened
window var opened
window; function open
window() { opened
window =
window.open('moreinfo.htm'); } function closeopened
window() { opened
window.close(); } closing the current
window in the past, when you called the
window object's close() method directly, rather than calling close() on a
window instance, the browser closed the frontmost
window, whether your script created that
window or not. this is...
....htm'); } function closeopened
window() { opened
window.close(); } closing the current
window in the past, when you called the
window object's close() method directly, rather than calling close() on a
window instance, the browser closed the frontmost
window, whether your script created that
window or not. this is no longer the case; for security reasons, scripts are no longer allowed to close
windows they didn't open. (firefox 46.0.1: scripts can not close
windows, they had not opened) function closecurrent
window() {
window.close(); } specification specification status comment html living standardthe definition of '
window.close()' in that specification. living standard html5the definition of '
window.close()' in that specification. recommendati...
Window.customElements - Web APIs
the customelements read-only property of the
window interface returns a reference to the customelementregistry object, which can be used to register new custom elements and get information about previously registered custom elements. ...
...w interface returns a reference to the customelementregistry object, which can be used to register new custom elements and get information about previously registered custom elements. ...
...per(); 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. specification specification status comment html living standardthe definition of '
window.customelements' in that specification. living standard initial definition. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for a...
Window: deviceorientation event - Web APIs
t is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the earth coordinate frame. this data is gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...
...orientation sensor about the current orientation of the device as compared to the earth coordinate frame. this data is gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...
...orientation of the device as compared to the earth coordinate frame. this data is gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...
window.dump() - Web APIs
window.dump() prints messages to the (native) console. syntax
window.dump(message); dump(message); parameters message is the string message to log. notes a common use of dump() is to debug javascript. the message passed to dump() is sent to the system console (native console) if the firefox process was started with the -console option. if the -console option was not specified then the output goes to stderr. output from dump() is not sent to the browser console. output can be sent to the browser console using console.log(). privileged code can also use components.utils.reporterror and nsiconsoleservice to log messages to the error console/browser console. ...
...nsole option was not specified then the output goes to stderr. output from dump() is not sent to the browser console. output can be sent to the browser console using console.log(). privileged code can also use components.utils.reporterror and nsiconsoleservice to log messages to the error console/browser console. dump() is also available to xpcom components implemented in javascript, even though
window is not the global object in components. it is also explicitly made available in sandboxes. however, this use of dump is not affected by the preference mentioned below -- it will always be shown. it is therefore advisable to either check this preference yourself or use a debugging preference of your own to make sure you don't send lots of debugging content to a user's console when they might not b...
...on't send lots of debugging content to a user's console when they might not be interested in it at all. note that dump output from xpcom components goes to stderr, while dump called elsewhere will output to stdout. in gecko dump() is disabled by default – it doesn't do anything but doesn't raise an error either. to see the dump output you have to enable it by setting the preference browser.dom.
window.dump.enabled to true. you can set the preference in about:config or in a user.js file. note: this preference is not listed in about:config by default, you may need to create it (right-click the content area -> new -> boolean). on
windows, you will need a console to actually see anything. if you don't have one already, closing the application and re-opening it with the command line parameter -con...
Window.event - Web APIs
the read-only
window property event returns the event which is currently being handled by the site's code. outside the context of an event handler, the value is always undefined. you should avoid using this property in new code, and should instead use the event passed into the event handler function. this property is not universally supported and even when supported introduces potential fragility to your code. note: this property can be fragile, in that there may be situations in which the returned event is not the expected value. in addition,
window.event is not accurate for events dispatched within shadow trees. specifications specification status comment domthe definition of '
window.event' in that specification. living standard initial definition. b...
...to change preferences in firefox, visit about:config.ie full support 4opera full support 7safari full support 1.1webview android full support 1chrome android ...
...to change preferences in firefox, visit about:config.opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support ...
Window.find() - Web APIs
acasesensitive boolean. if true, specifies a case-sensitive search. abackwards boolean. if true, specifies a backward search. awraparound boolean. if true, specifies a wrap around search. awholeword unimplemented boolean. if true, specifies a whole word search. this is not implemented; see bug 481513. asearchinframes boolean. if true, specifies a search in frames. returns true if the string is found; otherwise, false. ...
...boolean. if true, specifies a wrap around search. awholeword unimplemented boolean. if true, specifies a whole word search. this is not implemented; see bug 481513. asearchinframes boolean. if true, specifies a search in frames. returns true if the string is found; otherwise, false. ...
...(text) { alert("string \x22" + text + "\x22 found? " +
window.find(text)); } html <p>apples, bananas, and oranges.</p> <button type="button" onclick='findstring("apples")'>search for apples</button> <button type="button" onclick='findstring("banana")'>search for banana</button> <button type="button" onclick='findstring("orange")'>search for orange</button> result notes in some browsers,
window.find() selects (highlights) the found content on the site. specification this is not part of any specification. ...
Window.frames - Web APIs
returns the
window itself, which is an array-like object, listing the direct sub-frames of the current
window. syntax framelist =
window.frames; framelist is a list of frame objects. it is similar to an array in that it has a length property and its items can be accessed using the [i] notation. framelist ===
window evaluates to true. each item in the
window.frames pseudo-array represents the
window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e.,
window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].content
window). for more details about the returned value, refer to this thread on mozilla.dev.platform. ...
...evaluates to true. each item in the
window.frames pseudo-array represents the
window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e.,
window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].content
window). for more details about the returned value, refer to this thread on mozilla.dev.platform. example var frames =
window.frames; // or // var frames =
window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with each subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status comment html living standardthe definition of '
window.frames' in that specification. living standard html5the definiti...
...; // or // var frames =
window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with each subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status comment html living standardthe definition of '
window.frames' in that specification. living standard html5the definition of '
window.frames' in that specification. recommendation ...
Window.isSecureContext - Web APIs
}); } specifications specification status comment secure contexts candidate recommendation initial definition. ...
... }); } specifications specification status comment secure contexts candidate recommendation initial definition. ...
... }); } specifications specification status comment secure contexts candidate recommendation initial definition. ...
Window: load event - Web APIs
ded, including all dependent resources such as stylesheets and images. this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading. ...
...e dom has been loaded, without waiting for resources to finish loading. ...
...ntrol; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent ='';
window.settimeout(() => {
window.location.reload(true); }, 200); });
window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log...
Window: messageerror event - Web APIs
the messageerror event is fired on a
window object when it receives a message that can't be deserialized. ...
... the messageerror event is fired on a
window object when it receives a message that can't be deserialized. ...
...t receives a message that can't be deserialized. ...
Window.name - Web APIs
gets/sets the name of the
window's browsing context. 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. browsing contexts do not need to have names. it has also been used in some frameworks for providing cross-domain messaging (e.g., sessionvars and dojo's dojox.io.
windowname) as a more secure alternative to jsonp. ...
...ther tab.</a> notes the name of the
window is used primarily for setting targets for hyperlinks and forms. browsing contexts do not need to have names. it has also been used in some frameworks for providing cross-domain messaging (e.g., sessionvars and dojo's dojox.io.
windowname) as a more secure alternative to jsonp. modern web applications hosting sensitive data should, however, not rely on
window.name for cross-domain messaging but instead utilize the postmessage api.
window.name will convert all values to their string representations by using the tostring method. specifications specification status comment html living standardthe definition of '
window.name' in that specification. ...
...owever, not rely on
window.name for cross-domain messaging but instead utilize the postmessage api.
window.name will convert all values to their string representations by using the tostring method. specifications specification status comment html living standardthe definition of '
window.name' in that specification. living standard html5the definition of '
window.name' in that specification. recommendation ...
Window.navigator - Web APIs
the
window.navigator read-only property returns a reference to the navigator object, which has methods and properties about the application running the script. syntax navigatorobject =
window.navigator examples example #1: browser detect and return a string var sbrowser, susrag = navigator.useragent; // the order matters here, and this may report false positives for unlisted browsers. if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/537.36 (khtml, like gecko) samsungbrowser/9.4 chrome/67.0.3396.87 mobile safari/53...
...wser/9.4 chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (
windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (
windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "moz...
... living standard ...
Window.ondragdrop - Web APIs
rack. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. removed in firefox 50, and never implemented in any other browser. use the modern standard html5 drag and drop feature instead. summary an event handler for drag and drop events sent to the
window. syntax
window.ondragdrop = funcref;
window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered. the
window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use addeventlistener. see addeventlistener for details. example fire an alert on dragdrop in this example, an event liste...
...dragdrop = funcref;
window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered. the
window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use addeventlistener. see addeventlistener for details. example fire an alert on dragdrop in this example, an event listener is added to the
window (the event target). if, from an external source, a tab, a link, marked text or a file is dragged and dropped onto this
window, the alert is fired. note how event.stoppropagation(); prevents the browser from loading the dropped tab, link or file. ...
... alert on dragdrop in this example, an event listener is added to the
window (the event target). if, from an external source, a tab, a link, marked text or a file is dragged and dropped onto this
window, the alert is fired. note how event.stoppropagation(); prevents the browser from loading the dropped tab, link or file. <html> <head><title>dragdroptest</title> <script type="text/javascript">
window.addeventlistener("dragdrop", testfunc, false); function testfunc(event) { alert("dragdrop!"); event.stoppropagation(); } </script> </head> <body> i am bodytext </body> </html> specification not part of specification. ...
Window: pagehide event - Web APIs
the pagehide event is sent to a
window when the browser hides the current page in the process of presenting a different page from the session's history. for example, when the user clicks the browser's back button, the current page receives a pagehide event before the previous page is shown. bubbles no cancelable no interface pagetransitionevent event handler property onpagehide examples in this example, an event handler is established to watch for pagehide events and to perform special handling if the page is being persisted for possible reuse. ...
...ton, the current page receives a pagehide event before the previous page is shown. bubbles no cancelable no interface pagetransitionevent event handler property onpagehide examples in this example, an event handler is established to watch for pagehide events and to perform special handling if the page is being persisted for possible reuse. ...
...les in this example, an event handler is established to watch for pagehide events and to perform special handling if the page is being persisted for possible reuse.
window.addeventlistener("pagehide", event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } }, false); this can also be written using the onpagehide event handler property on the
window:
window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification status comment html living standardthe definition of 'pagehide' in that specification. living standard initial specification. html5the definition of 'pagehide' in that specification. recomm...
Window.performance - Web APIs
recommendation defines now() method. ...
... recommendation defines now() method. ...
...line api, the high resolution time api, the navigation timing api, the user timing api, and the resource timing api. syntax performancedata =
window.performance; value a performance object offering access to the performance and timing-related information offered by the apis it exposes. specifications specification status comment high resolution timethe definition of '
window.performance' in that specification. recommendation defines now() method. ...
WindowClient.visibilityState - Web APIs
the visibilitystate read-only property of the
windowclient interface indicates the visibility of the current client. this value can be one of "hidden", "visible", or "prerender". syntax var myvisstate =
windowclient.visibilitystate; value a domstring (see document.visibilitystate for values). ...
... the visibilitystate read-only property of the
windowclient interface indicates the visibility of the current client. this value can be one of "hidden", "visible", or "prerender". syntax var myvisstate =
windowclient.visibilitystate; value a domstring (see document.visibilitystate for values). ...
...e document.visibilitystate for values). 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.open
window) { return clients.open
window('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilitystate' in that specification. working draft initial definition. ...
WindowEventHandlers.onmessage - Web APIs
} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
...} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
...} specifications specification status comment html living standardthe definition of 'onmessage' in that specification. ...
WindowEventHandlers.onpopstate - Web APIs
if the activated history entry was created by a call to history.pushstate(), or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object. note: calling history.pushstate() or history.replacestate() won't trigger a popstate event. ...
...tate event's state property contains a copy of the history entry's state object. note: calling history.pushstate() or history.replacestate() won't trigger a popstate event. the popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same document. ...
...is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same document. syntax
window.onpopstate = funcref; funcref is a handler function. ...
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
syntax scope.cleartimeout(timeoutid) parameters timeoutid the identifier of the timeout you want to cancel. this id was returned by the corresponding call to settimeout(). it's worth noting that the pool of ids used by settimeout() and setinterval() are shared, which means you can technically use cleartimeout() and clearinterval() interchangeably. however, for clarity, you should avoid doing so. example run the script below in the context of a web page and click on the page once. you'll see a message popping up in a second. if you click the page multiple times in one second, the alert only appears once. ...
...e context of a web page and click on the page once. you'll see a message popping up in a second. if you click the page multiple times in one second, the alert only appears once. var alarm = { remind: function(amessage) { alert(amessage); this.timeoutid = undefined; }, setup: function() { if (typeof this.timeoutid === 'number') { this.cancel(); } this.timeoutid =
window.settimeout(function(msg) { this.remind(msg); }.bind(this), 1000, 'wake up!'); }, cancel: function() {
window.cleartimeout(this.timeoutid); } };
window.onclick = function() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown. specifications specification status comment html living stan...
...g) { this.remind(msg); }.bind(this), 1000, 'wake up!'); }, cancel: function() {
window.cleartimeout(this.timeoutid); } };
window.onclick = function() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown. specifications specification status comment html living standardthe definition of '
windoworworkerglobalscope.cleartimeout()' in that specification. living standard method moved to the
windoworworkerglobalscope mixin in the latest spec. html living standardthe definition of 'cleartimeout()' in that specification. living standard ...
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
the microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop. this lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the browser regains control over the execution context, potentially depending on work you need to complete. you can learn more about how to use microtasks and why you might choose to do so in our microtask guide. ...
...ight choose to do so in our microtask guide. the importance of microtasks comes in its ability to perform tasks asynchronously but in a specific order. see using microtasks in javascript with queuemicrotask() for more details. microtasks are especially useful for libraries and frameworks that need to perform final cleanup or other just-before-rendering tasks. queuemicrotask() is exposed on the
windoworworkerglobalscope mixin. syntax scope.queuemicrotask(function); parameters function a function to be executed when the browser engine determines it is safe to call your code. enqueued microtasks are executed after all pending tasks have completed but before yielding control to the browser's event loop. return value undefined. examples self.queuemicrotask(() => { // function conten...
... }); } else { fetch(url).then(res => res.arraybuffer()).then(data => { this._cache[url] = data; this._setdata(data); this.dispatchevent(new event("load")); }); } }; when queuemicrotask() isn't available the code below is basically a monkey-patch for queuemicrotask() for modern engines. it creates a microtask by using a promise that resolves immediately. if (typeof
window.queuemicrotask !== "function") {
window.queuemicrotask = function (callback) { promise.resolve() .then(callback) .catch(e => settimeout(() => { throw e; })); // report exceptions }; } specifications specification status comment html living standardthe definition of 'self.queuemicrotask()' in that specification. living standard initial definitio...
HostWindow - Archive of obsolete content
when the sidebar is displayed, the splitter can be used to change the width or quickly collapse it. the splitter itself cannot be hidden as it is the only ui to show a collapsed sidebar. when not displayed the entire sidebar area, including the splitter are hidden. ...
...when the sidebar is displayed, the splitter can be used to change the width or quickly collapse it. the splitter itself cannot be hidden as it is the only ui to show a collapsed sidebar. when not displayed the entire sidebar area, including the splitter are hidden. ...
Running Windows Debug Builds Downloaded From Tinderbox - Archive of obsolete content
no other packages are necessary. if you are a mozilla employee or contractor, click for more instructions. ...
...ug builds you will often get "this application has failed to start because the application configuration is incorrect..." this is because the debug builds need the msvc80 crt debug dlls. you can see this by looking in at firefox.exe with http://www.dependencywalker.com/. unfortunately these dlls are not redistributable. to get these dlls you only have to install the visual c++ compilers from the
windows vista sdk. no other packages are necessary. if you are a mozilla employee or contractor, click for more instructions. to run tests of the tests package you can, for example, run the reftests as follows: python reftest/runreftest.py --appname=firefox/firefox.exe --utility-path=bin --extra-profile-file=bin/plugins reftest/tests/layout/reftests/reftest.list ...
windowsGetShortName - Archive of obsolete content
summary returns a path that conforms to the
windows 8.3 file naming convention. method of file object syntax string
windowsgetshortname( object localdirspec ) parameters the
windowsregisterserver method has the following parameter: localdirspec a filespecobject representing a directory obtained by getcomponentfolder or getfolder. returns a string with the
windows shortname. if the path already conforms to 8.3, the return value is null. ...
...pec ) parameters the
windowsregisterserver method has the following parameter: localdirspec a filespecobject representing a directory obtained by getcomponentfolder or getfolder. returns a string with the
windows shortname. if the path already conforms to 8.3, the return value is null. ...
windowsRegisterServer - Archive of obsolete content
summary
windowsregisterserver registers installed dlls with the
windows registry. method of file object syntax int
windowsregisterserver( object localdirspec ) parameters the
windowsregisterserver method has the following parameters: localdirspec a filespecobject representing a directory obtained by getcomponentfolder or getfolder. returns an integer error code. for a list of possible values, see return codes. ...
...indowsregisterserver( object localdirspec ) parameters the
windowsregisterserver method has the following parameters: localdirspec a filespecobject representing a directory obtained by getcomponentfolder or getfolder. returns an integer error code. for a list of possible values, see return codes. ...
toolkit.singletonWindowType - Archive of obsolete content
preference type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.singleton
windowtype", "xulmine"); by default, the toolkit.defaultchromeuri preference will cause xulrunner to open a new main application
window each time an application is invoked. the toolkit.singleton
windowtype preference causes xulrunner to search for a
window with the attribute
windowtype as specified in this preference (e.g. <
window windowtype="xulmine"> in our example). if such a
window is found, it will be re-used, otherwise a new
window will be opened. ...
...tion is invoked. the toolkit.singleton
windowtype preference causes xulrunner to search for a
window with the attribute
windowtype as specified in this preference (e.g. <
window windowtype="xulmine"> in our example). if such a
window is found, it will be re-used, otherwise a new
window will be opened. more information on this can be found in bug 317811. ...
-moz-windows-accent-color-in-titlebar - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. the -moz-
windows-accent-color-in-titlebar gecko-only css media feature can be used to apply styles based on whether accent colors are enabled in microsoft
windows titlebars. syntax <integer> in recent
windows versions (e.g., 10), if accent colors are enabled in
window titlebars, this is 1. otherwise it's 0. ...
...details. the -moz-
windows-accent-color-in-titlebar gecko-only css media feature can be used to apply styles based on whether accent colors are enabled in microsoft
windows titlebars. syntax <integer> in recent
windows versions (e.g., 10), if accent colors are enabled in
window titlebars, this is 1. otherwise it's 0. ...
Window.importDialog() - Archive of obsolete content
ture. obsoletethis feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this function was only available in the original, xul-based version of firefox for android, which is no longer supported; for that reason, this function is obsolete and should never be used. 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. asrc the chrome url of the xul dialo...
...portdialog(aparent, asrc, aarguments) newdialog the opened
window aparent the dialog's parent; can be null. asrc the chrome url of the xul dialog. aarguments a javascript object containing data to pass to the dialog. 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. scripts are loaded via an attribute on the <dialog> element, not via the <script> tag. the xul is merged into the existing
window, almost like a xul overlay. because of this, element id and javascript conflicts are possible, just like overlays. so be careful. specification this is not part of ...
Window: devicelight event - Archive of obsolete content
the devicelight event is fired when fresh data is available from a light sensor. note: this event has been disabled by default in firefox 62, behind the device.sensors.ambientlight.enabled preference (bug 1462308). ...
... property type description value read only double (float) the sensor data for ambient light in lux. min read only double (float) the minimum value in the range the sensor detects (if available, 0 otherwise). max read only double (float) the maximum value in the range the sensor detects (if available, 0 otherwise). examples
window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification. candidate recommendation removed from specification ...
-moz-window-dragging
the -moz-
window-dragging css property specifies whether a
window is draggable or not. it only works in chrome code, and only on mac os x. the property was added in firefox 35 to solve intermittent problems related to firefox
windows not being moveable when busy (bug 944836). initial value drag applies to all elements that create native
windows, e.g. <
window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-
window-dragging property is specified as one of the keyword values listed below. values drag the
window is draggable. ...
....g. <
window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-
window-dragging property is specified as one of the keyword values listed below. values drag the
window is draggable. no-drag the
window is not draggable formal syntax drag | no-drag example toolbarpaletteitem { -moz-
window-dragging: no-drag; } specifications this property is not part of any specification. ...
Profiling with the Gecko Profiler and Local Symbols on Windows
in the past you had to need to run mach buildsymbols manually, but this is no longer needed. the profiler automatically reads symbols from the pdb files that are generated during the build process. you probably need a 64 bit build of firefox for this to work, though. it looks like we consume too much memory when creating the symbol table for this to work in 32 bit firefox builds. unfortunately, 32 bit is still the default when building firefox locally. ...
...32 bit firefox builds. unfortunately, 32 bit is still the default when building firefox locally. you need to add the lines ac_add_options --target=x86_64-pc-mingw32 and ac_add_options --host=x86_64-pc-mingw32 to your mozconfig in order to build a 64 bit build of firefox. profiling local talos runs if you would like to use the gecko profiler with a local talos run of a local build of firefox for
windows, you will need to point talos to a zipfile containing breakpad-style symbols for your build. follow the steps below: note: you only need to do this if you're on
windows and you've built firefox yourself. for any official release of firefox (nightly, beta, etc), you do not need to use these steps. make sure you don't have ac_add_options --disable-crashreporter in your firefox .mozconfig file.
nsIDOMStorageWindow
attributes attribute type description globalstorage nsidomstoragelist global storage, accessible by domain. read only. localstorage nsidomstorage local storage for the current browsing context. ...
... attributes attribute type description globalstorage nsidomstoragelist global storage, accessible by domain. read only. localstorage nsidomstorage local storage for the current browsing context. ...
nsIMsgWindowCommands
this could be as a result of clicking on a new mail alert, or by clicking a link to a newsgroup. void selectfolder( in acstring folderuri ); parameters folderuri the uri of the folder to select. ...
...news message list. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the javascript implementation of this used by thunderbird is given here. method overview void selectfolder(in acstring folderuri); void selectmessage(in acstring messageuri); void clearmsgpane(); methods selectfolder() this method is called by the backend to change the folder displayed in the message
window. this could be as a result of clicking on a new mail alert, or by clicking a link to a newsgroup. void selectfolder( in acstring folderuri ); parameters folderuri the uri of the folder to select. selectmessage() this method is called by the backend to change the displayed message. for instance, when deleting attachments, this causes the message to be redisplayed. void selectmessage( in acs...
nsIWindowCreator
embedding/base/nsi
windowcreator.idlscriptable a callback interface used by gecko to create new browser
windows. the application, either mozilla or an embedding app, must provide an implementation of the
window watcher component and notify the
windowwatcher during application initialization. inherits from: nsisupports last changed in gecko 0.9.6 method overview nsiwebbrowserchrome createchrome
window(in nsiwebbrowserchrome parent, in pruint32 chromeflags); methods createchrome
window() create a new
window. gecko will/may call this method, if made available to it, to create new
windows. nsiwebbrowserchrome createchrome
window( in nsiwebbrowserchrome parent, in pruint32 chromeflags ); parameters parent the nsiwebbrowserchrome of the parent
window, if any. null if no parent ...
...owserchrome parent, in pruint32 chromeflags); methods createchrome
window() create a new
window. gecko will/may call this method, if made available to it, to create new
windows. nsiwebbrowserchrome createchrome
window( in nsiwebbrowserchrome parent, in pruint32 chromeflags ); parameters parent the nsiwebbrowserchrome of the parent
window, if any. null if no parent exists. the newly created
window should be made a child/dependent
window of the parent, if any (and if the concept applies to the underlying os). chromeflags chrome features from nsiwebbrowserchrome. return value an nsiwebbrowserchrome for the new
window. see also nsi
windowwatcher for more details. ...
nsIXULBrowserWindow
xpfe/appshell/public/nsixulbrowser
window.idlscriptable provides methods that may be called from the internals of the browser area to tell the containing xul
window to update its user interface. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the xulbrowser
window attribute exists on the nsixul
window interface although both firefox and seamonkey also store their nsixulbrowser
window reference in the global xulbrowser
window object accessible from javascript code. note: the xulbrowser
window object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code. see the documentation for xulbrowser
window for details. method overview astring onbeforelin...
...inkuri, in nsidomnode linknode, in prbool isapptab); void setjsdefaultstatus(in astring status); void setjsstatus(in astring status); void setoverlink(in astring link, in nsidomelement element); methods onbeforelinktraversal() called before traversing a link to determine the appropriate target into which to load the link. this may be used, for example, to redirect links into new tabs or
windows when it's not desirable to replace the content in the current tab (such as when the link is clicked in an app tab). astring onbeforelinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the specified target for the link. linkuri the uri of the link that is about to be traversed. linknode the nsidomnode repre...
Access Thunderbird Window Areas
to access particular parts of the thunderbird
window you can use these helper methods. an alternative to these methods is to directly access the element by it's id as in the detect when a folder opens example. ...
...elper methods. ...
Access Window
the
window object represents the
window of the thunderbird application as well as the currently opened tabs. you can do many things with the
window object, such as accessing the height or width of the
window/tab or setting its title, registering timer events and much more. the
window api will give you the complete details. since
window is a global variable you can use it directly from your javascript file. check if the
window is a tab or the root
window window.addeventlistener("load", function(e) { alert("is root?: " + isroot()); }, false); function isroot() { if(
window !=
window.top) return "false"; else return "true"; } the example above tells you if the
window object is a reference of the application
window or of one of it is a tabs. ...
...ectly from your javascript file. check if the
window is a tab or the root
window window.addeventlistener("load", function(e) { alert("is root?: " + isroot()); }, false); function isroot() { if(
window !=
window.top) return "false"; else return "true"; } the example above tells you if the
window object is a reference of the application
window or of one of it is a tabs. register a timer
window.setinterval( function() { alert('foobar'); }, 60000); //execute the function once very minute if you periodically need to perform a certain action then you can use the setinterval function, it will then call this function every x milliseconds, in this case every 60000ms or one minute. ...
Window: DOMContentLoaded event - Web APIs
en completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none the original target for this event is the document that has loaded. ...
...nt that has loaded. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on the document: domcontentloaded event. a different event, load, should be used only to detect a fully-loaded page. it is a common mistake to use load where domcontentloaded would be more appropriate. ...
Window: afterprint event - Web APIs
the afterprint event is fired after the associated document has started printing or the print preview has been closed. ...
... fired after the associated document has started printing or the print preview has been closed. ...
Window.alert() - Web APIs
the
window.alert() method displays an alert dialog with the optional specified content and an ok button. syntax
window.alert(message); parameters message optional a string you want to display in the alert dialog, or, alternatively, an object that is converted into a string and displayed. example
window.alert("hello world!"); alert("hello world!"); both produce: notes the alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message. the following text is shared between this article, dom:
window.prompt and dom:
window.confirm dialog boxes are modal
windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed. for this reason, you should not overus...
...esponse on the part of the user, other than the acknowledgement of the message. the following text is shared between this article, dom:
window.prompt and dom:
window.confirm dialog boxes are modal
windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed. for this reason, you should not overuse any function that creates a dialog box (or modal
window). specification specification status comment html living standardthe definition of 'alert()' in that specification. living standard ...
Window: animationcancel event - Web APIs
moved, or when the animating node is hidden using css. therefore, either directly or because any of its containing nodes are hidden. bubbles yes cancelable no interface animationevent event handler property onanimationcancel the original target for this event is the element that had the animation applied. ...
...ent event handler property onanimationcancel the original target for this event is the element that had the animation applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationcancel. examples this code adds a listener to the animationcancel event.
window.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener():
window.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event. specifications specification status comment css animations working draft initial def...
Window: animationend event - Web APIs
tion, such as if the element is removed from the dom or the animation is removed from the element, the animationend event is not fired. bubbles yes cancelable no interface animationevent event handler property onanimationend the original target for this event is the element that had the animation applied. ...
... animationevent event handler property onanimationend the original target for this event is the element that had the animation applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationend. examples this example listens for the animationend event:
window.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property:
window.onanimationend = () => { console.log('animation ended'); }; see a live example of this event. specifications specification status comment css animations working draft initial definition ...
Window: animationiteration event - Web APIs
at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one. bubbles yes cancelable no interface animationevent event handler property onanimationiteration the original target for this event is the element that had the animation applied. ...
... target for this event is the element that had the animation applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationiteration. examples this code uses animationiteration to keep track of the number of iterations an animation has completed: let iterationcount = 0;
window.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: let iterationcount = 0;
window.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; see a live example of this event. specifica...
Window: animationstart event - Web APIs
ual to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. ...
...ndler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired:
window.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart:
window.onanimationstart = () => { console.log('animation started'); }; see a live example of this event. specifications specification status comment css animations working draft initial definition ...
Window: appinstalled event - Web APIs
the appinstalled event of the web manifest api is fired when the browser has successfully installed a page as an application. ...
...nstalled a page as an application. ...
Window: beforeprint event - Web APIs
the beforeprint event is fired when the associated document is about to be printed or previewed for printing. ...
...ent is fired when the associated document is about to be printed or previewed for printing. ...
Window.clearImmediate() - Web APIs
examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification. ...
... examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification. ...
Window.confirm() - Web APIs
the
window.confirm() method displays a modal dialog with an optional message and two buttons: ok and cancel. syntax result =
window.confirm(message); parameters message a string you want to display in the alert dialog. return value a boolean indicating whether ok (true) or cancel (false) was selected. if a browser is ignoring in-page dialogs, then the returned value is always false. 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. for this reason, you should not over...
...regardless, there are good reasons to avoid using dialog boxes for confirmation. specification specification status comment html living standardthe definition of 'confirm()' in that specification. ...
Window.convertPointFromNodeToPage() - Web APIs
nodepoint a point object describing a point in node's coordinate system; this point will be converted to the page's coordinate system. ...
... nodepoint a point object describing a point in node's coordinate system; this point will be converted to the page's coordinate system. ...
Window.convertPointFromPageToNode - Web APIs
pagepoint a point object specifying a point in the coordinate system of the page, which is to be converted into the node's coordinate system. ...
... pagepoint a point object specifying a point in the coordinate system of the page, which is to be converted into the node's coordinate system. ...
Window: copy event - Web APIs
the copy event fires when the user initiates a copy action through the browser's user interface. bubbles yes cancelable yes interface clipboardevent event handler property oncopy the original target for this event is the element that was the intended target of the copy action. ...
... cancelable yes interface clipboardevent event handler property oncopy the original target for this event is the element that was the intended target of the copy action. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. ...
Window: cut event - Web APIs
the cut event is fired when the user has initiated a "cut" action through the browser's user interface. bubbles yes cancelable yes interface clipboardevent event handler property oncut the original target for this event is the element that was the intended target of the cut action. ...
... cancelable yes interface clipboardevent event handler property oncut the original target for this event is the element that was the intended target of the cut action. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. ...
Window: devicemotion event - Web APIs
the devicemotion event is fired at a regular interval and indicates the amount of physical force of acceleration the device is receiving at that time. it also provides information about the rate of rotation, if available. ...
..., if available. bubbles no cancelable no interface devicemotionevent event handler property
window.ondevicemotion examples function handlemotionevent(event) { var x = event.accelerationincludinggravity.x; var y = event.accelerationincludinggravity.y; var z = event.accelerationincludinggravity.z; // do something awesome. }
window.addeventlistener("devicemotion", handlemotionevent, true); specifications specification status deviceorientation event specificationthe definition of 'devicemotion event' in that specification. editor's draft ...
Window.dialogArguments - Web APIs
the dialogarguments property returns the parameters that were passed into the
window.showmodaldialog() method. ...
... the dialogarguments property returns the parameters that were passed into the
window.showmodaldialog() method. ...
Window: error event - Web APIs
bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
...rid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents');
window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-error'); scripterror.addeventlistener('click', () => { const badcode = 'const s;'; eval(badcode); }); result specifications specification status ui events workin...
Window.frameElement - Web APIs
the
window.frameelement property returns the element (such as <iframe> or <object>) in which the
window is embedded. note: despite this property's name, it works for documents embedded within any embedding point, including <object>, <iframe>, or <embed>. syntax const frameel =
window.frameelement value the element which the
window is embedded into. if the
window isn't embedded into another document, or if the document into which it's embedded has a different origin, the value is null instead. ...
... this property's name, it works for documents embedded within any embedding point, including <object>, <iframe>, or <embed>. syntax const frameel =
window.frameelement value the element which the
window is embedded into. if the
window isn't embedded into another document, or if the document into which it's embedded has a different origin, the value is null instead. example const frameel =
window.frameelement; // if we're embedded, change the containing element's url to 'http://mozilla.org/' if (frameel) { frameel.src = 'http://mozilla.org/'; } specifications specification status comment html living standardthe definition of '
window.frameelement' in that specification. candidate recommendation initial specification. ...
Window.fullScreen - Web APIs
the fullscreen property of the
window interface indicates whether the
window is displayed in full screen mode or not. syntax isinfullscreen =
windowref.fullscreen; with chrome privileges, the property is read-write, otherwise it is read-only. bear in mind that if you try to set this property without chrome privileges, it will not throw an exception and instead just silently fail. this is to prevent scripts designed to set this property in internet explorer from breaking. return value isinfullscreen a boolean. possible values: true: the
window is in full screen mode. false: the
window is not in full screen mode. notes switching between regular
window and full screen will fire the "resize" event on the corresponding
window. ...
... just silently fail. this is to prevent scripts designed to set this property in internet explorer from breaking. return value isinfullscreen a boolean. possible values: true: the
window is in full screen mode. false: the
window is not in full screen mode. ...
Window: hashchange event - Web APIs
the hashchange event is fired when the fragment identifier of the url has changed (the part of the url beginning with and following the # symbol). ...
... living standard initial definition ...
Window.moveBy() - Web APIs
the moveby() method of the
window interface moves the current
window by a specified amount. note: this function moves the
window relative to its current location. in contrast,
window.moveto() moves the
window to an absolute location. syntax
window.moveby(deltax, deltay) parameters deltax is the amount of pixels to move the
window horizontally. positive values are to the right, while negative values are to the left. deltay is the amount of pixels to move the
window vertically. positive values are down, while negative values are up. example this example moves the
window 10 pixels to the right and 10 pixels up. ...
...ative values are to the left. deltay is the amount of pixels to move the
window vertically. positive values are down, while negative values are up. example this example moves the
window 10 pixels to the right and 10 pixels up. function budge() { moveby(10, -10); } specification specification status comment css object model (cssom) view modulethe definition of '
window.moveby()' in that specification. working draft ...
Window.mozAnimationStartTime - Web APIs
is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. ...
...started. this value should be used instead of, for example, date.now(), because this value will be the same for all animations started in this
window during this refresh interval, allowing them to remain in sync with one another. this also allows javascript-based animations to remain synchronized with css transitions and smil animations triggered during the same refresh interval. syntax time =
window.mozanimationstarttime; parameters time is the time in milliseconds since the epoch at which animations for the current
window should be considered to have started. ...
Window.onappinstalled - Web APIs
the onappinstalled attribute of the
window object serves as an event handler for the appinstalled event, which is dispatched once the web application is successfully installed as a progressive web app. the event that is fired is a "simple event" that implements the event interface. syntax
window.onappinstalled = function(event) { ... ...
... the onappinstalled attribute of the
window object serves as an event handler for the appinstalled event, which is dispatched once the web application is successfully installed as a progressive web app. the event that is fired is a "simple event" that implements the event interface. syntax
window.onappinstalled = function(event) { ... ...
Window.onbeforeinstallprompt - Web APIs
the
window.onbeforeinstallprompt property is an event handler for processing a beforeinstallprompt, which is dispatched on devices when a user is about to be prompted to "install" a web application. its associated event may be saved for later and used to prompt the user at a more suitable time. syntax
window.addeventlistener("beforeinstallprompt", function(event) { ... });
window.onbeforeinstallprompt = function(event) { ...}; example the following example uses the beforeinstallprompt event to make an install button operable, by using the event inside a click handler. ...
... web application. its associated event may be saved for later and used to prompt the user at a more suitable time. syntax
window.addeventlistener("beforeinstallprompt", function(event) { ... });
window.onbeforeinstallprompt = function(event) { ...}; example the following example uses the beforeinstallprompt event to make an install button operable, by using the event inside a click handler. ...
Window: online event - Web APIs
the online event of the
window interface is fired when the browser has gained access to the network and the value of navigator.online switches to true. note: this event shouldn't be used to determine the availability of a particular website. network problems or firewalls might still prevent the website from being reached. ...
...rk and the value of navigator.online switches to true. note: this event shouldn't be used to determine the availability of a particular website. network problems or firewalls might still prevent the website from being reached. bubbles no cancelable no interface event event handler property ononline examples // addeventlistener version
window.addeventlistener('online', (event) => { console.log("you are now connected to the network."); }); // ononline version
window.ononline = (event) => { console.log("you are now connected to the network."); }; specifications specification status html living standardthe definition of 'online event' in that specification. living standard ...
Window.onmozbeforepaint - Web APIs
obsolete since gecko 11 (firefox 11 / thunderbird 11 / seamonkey 2.8)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary an event handler for the mozbeforepaint event. this is used in concert with the
window.mozrequestanimationframe() method to perform smooth, synchronized animations from javascript code. syntax
window.onmozbeforepaint = funcref; funcref is the handler function. example see
window.mozrequestanimationframe() for an example. notes this event fires immediately before the browser
window is repainted, if the event has been requested by one or more scripts calling
window.mozrequestanimationframe(). the event handler receives as an input parameter an event whos...
...ately before the browser
window is repainted, if the event has been requested by one or more scripts calling
window.mozrequestanimationframe(). the event handler receives as an input parameter an event whose timestamp property is the time, in milliseconds since epoch, that is the "current time" for the current animation frame. this time is the same for all animations being run in the same browser
window, including those using the
window.mozrequestanimationframe() method, css transitions, and smil animations. specification not part of a specification. ...
Window.onuserproximity - Web APIs
the
window.onuserproxymity property represents an eventhandler, that is a function to be called when the userproximity event occurs. these events are of type userproximityevent and occur when the the device sensor detects that an object becomes nearby. ...
... the
window.onuserproxymity property represents an eventhandler, that is a function to be called when the userproximity event occurs. these events are of type userproximityevent and occur when the the device sensor detects that an object becomes nearby. ...
Window: pageshow event - Web APIs
bubbles no cancelable no interface pagetransitionevent event handler property onpageshow examples this example sets up event handlers for events listed in the array events. ...
...try loading new pages into this tab, then navigating forward and backward through history, noting the events’ output to the log.</p> results specifications specification status comment html living standardthe definition of 'pageshow...
Window: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboardevent event handler property onpaste the original target for this event is the element that was the intended target of the paste action. ...
... cancelable yes interface clipboardevent event handler property onpaste the original target for this event is the element that was the intended target of the paste action. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. ...
Window: rejectionhandled event - Web APIs
the rejectionhandled event is sent to the script's global scope (usually
window but also worker) whenever a javascript promise is rejected but after the promise rejection has been handled. this can be used in debugging and for general application resiliency, in tandem with the unhandledrejection event, which is sent when a promise is rejected but there is no hander for the rejection. ...
...ejection event, which is sent when a promise is rejected but there is no hander for the rejection. bubbles no cancelable no interface promiserejectionevent event handler property onrejectionhandled example you can use the rejectionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected:
window.addeventlistener("rejectionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specifications specification status comment html living standardthe definition of 'rejectionhandled' in that specification. living standard initial definition. ...
Window.requestFileSystem() - Web APIs
the non-standard
window method requestfilesystem() method is a google chrome-specific method which lets a web site or app gain access to a sandboxed file system for its own use. the returned filesystem is then available for use with the other file system apis. even compared to the rest of the file and directory entries api, requestfilesystem() is especially non-standard; only chrome implements it, and all other browser makers have decided that they will not implement it. it has even been removed from the proposed specification. do not use this method! syntax this method is prefixed with webkit in all browsers that implement it (that is, google chrome).
window.requestfilesystem(type, size, successcallback[, errorcallback]); parameters type the type of storage to request. specify w...
...persistent storage requires that the user grant the site quota. size the amount of storage space you wish to have allocated for your app's use. ...
window.requestIdleCallback() - Web APIs
this enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response. functions are generally called in first-in-first-out order; however, callbacks which have a timeout specified may be called out-of-order if necessary in order to run them before the timeout elapses. you can call requestidlecallback() within an idle callback function to schedule another callback to take place no sooner than the next pass through the event loop. ...
...der if necessary in order to run them before the timeout elapses. you can call requestidlecallback() within an idle callback function to schedule another callback to take place no sooner than the next pass through the event loop. a timeout option is strongly recommended for required work, as otherwise it's possible multiple seconds will elapse before the callback is fired. syntax var handle =
window.requestidlecallback(callback[, options]) return value an id which can be used to cancel the callback by passing it into the
window.cancelidlecallback() method. parameters callback a reference to a function that should be called in the near future, when the event loop is idle. the callback function is passed an idledeadline object describing the amount of time available and whether or not t...
Window.scroll() - Web APIs
the
window.scroll() method scrolls the
window to a particular place in the document. syntax
window.scroll(x-coord, y-coord)
window.scroll(options) parameters x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left. y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left. - or - options is a scrolltooptions dictionary. examples <!-- put the 100th vertical pixel at the top of the
window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options:
window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes
window.scrollto() is effectively the same as this method. ...
...n the upper left. - or - options is a scrolltooptions dictionary. examples <!-- put the 100th vertical pixel at the top of the
window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options:
window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes
window.scrollto() is effectively the same as this method. for relative scrolling, see
window.scrollby(),
window.scrollbylines(), and
window.scrollbypages(). for scrolling elements, see element.scrolltop and element.scrollleft. specification specification status comment css object model (cssom) view modulethe definition of '
window.scroll()' in that specification. working draft initial definition. browser compatibility the compatibility table in...
Window.scrollBy() - Web APIs
the
window.scrollby() method scrolls the document in the
window by the given amount. syntax
window.scrollby(x-coord, y-coord);
window.scrollby(options) parameters x-coord is the horizontal pixel value that you want to scroll by. y-coord is the vertical pixel value that you want to scroll by. - or - options is a scrolltooptions dictionary. examples to scroll down one page:
window.scrollby(0,
window.innerheight); to scroll up:
window.scrollby(0, -
window.innerheight); using options:
window.scrollby({ top: 100, left: 100, behavior: 'smooth' }); notes
window.scrollby() scrolls by a particular amount, whereas
window.scroll() scrolls to an absolute position in the document. see also
window.scrollbylines() and
window.scrollbypages(). specification specification ...
... working draft initial definition. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.sessionStorage - Web APIs
the read-only sessionstorage property accesses a session storage object for the current origin. sessionstorage is similar to localstorage; the difference is that while data in localstorage doesn't expire, data in sessionstorage is cleared when the page session ends. 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. closing a tab/
window ends the session and clears objects in sessionstorage. data stored in sessionstorage is specific to the protocol of the page. in particular, data stored by a script ...
... particular, data stored by a script on a site accessed with http (e.g., http://example.com) is put in a different sessionstorage object from the same site accessed with https (e.g., https://example.com). the keys and the values are always in the utf-16 domstring format, which uses two bytes per character. as with objects, integer keys are automatically converted to strings. syntax mystorage =
window.sessionstorage; value a storage object which can be used to access the current origin's session storage space. exceptions securityerror the request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the file: or data: scheme, for example). for example, the user may have their browser configured to deny permission to persist ...
Window: storage event - Web APIs
the storage event of the
window interface fires when a storage area (localstorage) has been modified in the context of another document. bubbles no cancelable no interface storageevent event handler property onstorage examples log the samplelist item to the console when the storage event fires:
window.addeventlistener('storage', () => { // when local storage changes, dump the list to // the console. console.log(json.parse(
window.localstorage.getitem('samplelist'))); }); the same action can be achieved using the onstorage event handler property:
window.onstorage = () => { // when local storage changes, dump the list to // the console. ...
...ge event fires:
window.addeventlistener('storage', () => { // when local storage changes, dump the list to // the console. console.log(json.parse(
window.localstorage.getitem('samplelist'))); }); the same action can be achieved using the onstorage event handler property:
window.onstorage = () => { // when local storage changes, dump the list to // the console. console.log(json.parse(
window.localstorage.getitem('samplelist'))); }; specifications specification status html living standardthe definition of 'storage' in that specification. living standard ...
Window: transitioncancel event - Web APIs
is fired when a css transition is canceled. see globaleventhandlers.ontransitioncancel for more information. bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel the original target for this event is the element that had the transition applied. ...
...er property globaleventhandlers.ontransitioncancel the original target for this event is the element that had the transition applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitioncancel. examples this code adds a listener to the transitioncancel event:
window.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener():
window.ontransitioncancel = () => { console.log('transition canceled'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transit...
Window: transitionend event - Web APIs
erts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is the element that had the transition applied. ...
...tioncancel event is fired, the transitionend event will not fire. the original target for this event is the element that had the transition applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionend. examples this code adds a listener to the transitionend event:
window.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend property instead of addeventlistener():
window.ontransitionend = () => { console.log('transition ended'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transitionend' in that...
Window: transitionrun event - Web APIs
the transitionrun event is fired when a css transition is first created, i.e. before any transition-delay has begun. bubbles yes cancelable no interface transitionevent event handler property ontransitionrun the original target for this event is the element that had the transition applied. ...
...ionevent event handler property ontransitionrun the original target for this event is the element that had the transition applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionrun. examples this code adds a listener to the transitionrun event:
window.addeventlistener('transitionrun', () => { console.log('transition is running but hasn't necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener():
window.ontransitionrun = () => { console.log('transition started running'); }; see a live example of this event. specifications specification status comment ...
Window: transitionstart event - Web APIs
onstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended. bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. ...
...ndler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. you can listen for this event on the
window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. examples this code adds a listener to the transitionstart event:
window.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener():
window.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transiti...
WindowEventHandlers.onbeforeprint - Web APIs
the onbeforeprint property of the
windoweventhandlers mixin is the eventhandler for processing beforeprint events for the current
window. these events are raised before the print dialog
window is opened. the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then revert those changes after printing has completed. in general, you should prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases. syntax
window.addeventlistener("beforeprint", function(event) { ... });
window.onbeforeprint = function(event) { ... }; polyfill safari does not implement these events, but you can create an equivalent result to the beforeprint event with
window.matchmedia('print'). ...
...prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases. syntax
window.addeventlistener("beforeprint", function(event) { ... });
window.onbeforeprint = function(event) { ... }; polyfill safari does not implement these events, but you can create an equivalent result to the beforeprint event with
window.matchmedia('print'). var mediaquerylist =
window.matchmedia('print'); mediaquerylist.addlistener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification. living standard ...
WindowEventHandlers.onlanguagechange - Web APIs
the onlanguagechange property of the
windoweventhandlers mixin is the eventhandler for processing languagechange events. these events are received by the object implementing this interface, usually a
window, an htmlbodyelement, or an htmliframeelement. such an event is sent by the browser to inform that the preferred languages list has been updated. the list is accessible via navigatorlanguage.languages. syntax object.onlanguagechange = function; value function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of type event. ...
...es list has been updated. the list is accessible via navigatorlanguage.languages. syntax object.onlanguagechange = function; value function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of type event. example
window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specifications specification status comment html living standardthe definition of '
windoweventhandler.onlanguagechange' in that specification. living standard initial specification. ...
WindowOrWorkerGlobalScope.caches - Web APIs
this object enables functionality such as storing assets for offline use, and generating custom responses to requests. syntax var mycachestorage = self.caches; // or just caches value a cachestorage object. example the following example shows how you'd use a cache in a service worker context to store assets offline. ...
... service workers working draft initial definition. ...
WindowOrWorkerGlobalScope.clearInterval() - Web APIs
the clearinterval() method of the
windoworworkerglobalscope mixin cancels a timed, repeating action which was previously established by a call to setinterval(). syntax scope.clearinterval(intervalid) parameters intervalid the identifier of the repeated action you want to cancel. this id was returned by the corresponding call to setinterval(). it's worth noting that the pool of ids used by setinterval() and settimeout() are shared, which means you can technically use clearinterval() and cleartimeout() interchangeably. however, for clarity, you should avoid doing so. return value undefined example see the setinterval() examples. ...
...s worth noting that the pool of ids used by setinterval() and settimeout() are shared, which means you can technically use clearinterval() and cleartimeout() interchangeably. however, for clarity, you should avoid doing so. return value undefined example see the setinterval() examples. specifications specification status comment html living standardthe definition of '
windoworworkerglobalscope.clearinterval()' in that specification. living standard method moved to the
windoworworkerglobalscope mixin in the latest spec. html living standardthe definition of 'clearinterval()' in that specification. living standard ...
WindowOrWorkerGlobalScope.crossOriginIsolated - Web APIs
this value is dependant on any cross-origin-opener-policy and cross-origin-embedder-policy headers present in the response. ...
... this value is dependant on any cross-origin-opener-policy and cross-origin-embedder-policy headers present in the response. ...
WindowOrWorkerGlobalScope.indexedDB - Web APIs
the indexeddb read-only property of the
windoworworkerglobalscope mixin provides a mechanism for applications to asynchronously access the capabilities of indexed databases. syntax var idbfactory = self.indexeddb; value an idbfactory object. 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. ...
...s 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. recommendation defined in a
windoworworkerglobalscope partial in the newest spec. indexed database api 2.0the definition of 'indexeddb' in that specification. recommendation initial definition. ...
:-moz-window-inactive - CSS: Cascading Style Sheets
the :-moz-
window-inactive css pseudo-class is a mozilla extension that matches any element while it's in an inactive
window. :-moz-
window-inactive works in content html documents, too. note: prior to the addition of this pseudo-class, giving different styles to background
windows was achieved by setting an attribute (active="true") on the top-level xul chrome
window. this attribute is no longer used. syntax :-moz-
window-inactive examples this example alters the appearance of a box's background depending on whether its
window is active or not. ...
...you can view this as a separate page as well. ...
Window: deviceproximity event - Archive of obsolete content
the deviceproximity event is fired when fresh data is available from a proximity sensor. note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308). bubbles no cancelable no interface deviceproximityevent target defaultview (
window) default action none event handler property
window.ondeviceproximity specification proximity sensor other properties property type description value read only double (float) the measured proximity of the distant device (distance in centimetres). min read only double (float) the minimum value in the range the sensor detects (if available, 0 otherwise).
Window: userproximity event - Archive of obsolete content
the userproximity event is fired when fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not). bubbles no cancelable no interface userproximityevent target defaultview (
window) default action none event handler property
window.onuserroximity specification proximity sensor note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308). other properties property type description near read only boolean the current user proximity state. specifications specification status proximity sensorthe definition of 'proximity...
Post data to window - Archive of obsolete content
der("content-type", "application/x-www-form-urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); // postdata is ready to be used as apostdata argument ... 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); ...
prefwindow.type - Archive of obsolete content
« xul reference home type type: string set this attribute to child for preference dialogs that are child dialogs of a main preferences
window. this ensures that the preferences are only saved when the main dialog is closed, if this is the appropriate behaviour for the platform. ...
openWindow - Archive of obsolete content
« xul reference home open
window(
windowtype, url, features, params ) return type:
window open a child
window. the
windowtype is a string specifying a
window type. 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. ...
XULBrowserWindow - Archive of obsolete content
the xulbrowser
window object provides methods and properties that let the browser update the user interface of the enclosing xul
window. in order to do so it implements the following interfaces: nsisupports nsixulbrowser
window nsiwebprogresslistener nsiwebprogresslistener2 nsisupportsweakreference note: this page is not complete at this time. see the linked interfaces for the definition of the implemented methods. you may also wish to refer to the implementation of xulbrowser
window in browser/base/content/browser.js. method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of url strings for which chrome is automatically hidden. defaults to about...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
the tutorial here uses the my app example from the article getting started with xulrunner. step 1: installing inno setup download inno setup from inno setup downloads. if you only want to compile the installer, install the stable release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. however, if you don't get the quickstart pack, you can later get istool from inno setup third-party files. ...
-moz-windows-classic - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. syntax <integer> if the user is using
windows unthemed (in classic mode instead of using uxtheme), this is 1. otherwise it's 0. media: media/visual accepts min/max prefixes: no ...
-moz-windows-default-theme - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. syntax <integer> if the user is using one of the default
windows themes—luna, royale, zune, or aero (including vista basic, vista advanced, and aero glass)—this is 1. otherwise it's 0. media: media/visual accepts min/max prefixes: no ...
-moz-windows-glass - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. syntax <integer> if the user is using
windows glass theme, this is 1; otherwise it's 0. note that this only exists for
windows 7 and earlier. media: media/visual accepts min/max prefixes: no ...
-moz-windows-theme - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. the -moz-
windows-theme gecko-only css media feature is useful for customizing application skins and other chrome code to work well with the user's
windows theme. syntax the -moz-
windows-theme feature is specified as a keyword value that indicates which
windows theme is currently being used. values aero luna-blue luna-olive luna-silver royale generic zune media: media/visual accepts min/max prefixes: no ...
Multiprocess on Windows
ot thread safe. since gecko's main thread uses com, and com requires threads to declare their threading model, the main thread must initialize itself to live inside its own single threaded apartment (sta). this is true for both chrome and content processes. as you should already know from the prerequisite reading, single threaded apartments receive remote procedure calls (rpcs) from com, via the
windows message queue. from a performance standpoint, this is less than ideal. the
windows message queue carries a lot of baggage for the purposes of maintaining backward compatibility. on the other hand, com's multithreaded apartment (mta) uses a much faster ipc mechanism that does not suffer from the same problems as the message queue. ideally, we would like to receive rpcs via threads in the mta, and...
browser.dom.window.dump.enabled
this setting enables the dump function, which sends messages to the system console. set it to true to enable it, or false to disable it. related browser.dom.
window.dump.file
window.dump ...
nsIDOMJSWindow
one of the interfaces implemented by the
window dom object. this is only a magic interface to provide the js implementation of a dom
window and it should never be used by embedders, the ordinary dom documentation should cover the rest. the interface is defined in dom/interfaces/base/nsidomjs
window.idl. page composed by sebastian gurin <sgurin@(nospam)montevideo.com.uy ...
Generating xpt on Windows
in order to generate an .xpt file from an .idl file in recent versions of the gecko \ xul runner sdk in
windows, you need to use the typelib.py script. assuming you installed your xulrunner sdk at <mozsdkdir>, you then need to issue a command similar to c:\working-dir> <mozsdkdir>\sdk\bin\typelib.py <inputfile.idl> -o <outputfile.xpt> -i <mozsdkdir>\idl ...
Using MAPI with Thunderbird's Windows 7 developer builds
the thunderbird installer sets the installed build as the default mapi/mail client. if you want to set a debug build as the default mail client, you need configure it manually: in the objdir/mozilla/dist/bin directory, copy mozmapi32.dll to mozmapi32_inuse.dll and mapiproxy to mapiproxy_inuse.dll. (be sure to copy - not move - these files.) in the uninstall sub-directory of the bin directory, run these two commands: helper.exe /setasdefaultappglobal helper.exe /setasdefaultappuser create an elevated shell and register the mapi proxy.dll as a com server. ...
HTMLIFrameElement.contentWindow - Web APIs
the content
window property returns the
window object of an htmliframeelement. you can use this
window object to access the iframe's document and its internal dom. this attribute is read-only, but its properties can be manipulated like the global
window object. example of content
window var x = document.getelementsbytagname("iframe")[0].content
window; //x =
window.frames[0]; x.document.getelementsbytagname("body")[0].style.backgroundcolor = "blue"; // this would turn the 1st iframe in document blue. specifications specification status comment html living standardthe definition of 'htmliframeelement: content
window' in that specification. living standard ...
HTMLObjectElement.contentWindow - Web APIs
the content
window read-only property of the htmlobjectelement interface returns a
windowproxy representing the
window proxy of the object element's nested browsing context, if any; otherwise null. syntax var
windowproxy = htmlobjectelement.content
window; value a
windowproxy. specifications specification status comment html living standardthe definition of 'content
window' in that specification. living standard initial definition. ...
PaymentRequestEvent.openWindow() - Web APIs
the open
window 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. it returns a promise that resolves with a reference to a
windowclient. syntax var apromise = paymentrequestevent.open
window(url) parameters url the url to open in the new
window. it must be on the same origin as the calling page. return value a promise that resolves with a reference to a
windowclient. specifications specification status comment payment handler apithe definition of 'open
window' in that specification. working draft initial definition. ...
Window.back() - Web APIs
the obsolete and non-standard method back() on the
window interface returns the
window to the previous item in the history. this was a firefox-specific method and was removed in firefox 31. note: use the standard history.back method instead. syntax
window.back(); parameters none. return value undefined. example this simple example handles a click on a "back" button by calling back(). function handlemybackbutton() { if (cangoback) {
window.back(); } } specification this is not part of any specification. ...
Window.blur() - Web APIs
shifts focus away from the
window. syntax
window.blur() example
window.blur(); notes the
window.blur() method is the programmatic equivalent of the user shifting focus away from the current
window. specification specification status comment html living standardthe definition of '
window.blur()' in that specification. living standard ...
Window: blur event - Web APIs
this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus. click outside the document to lose focus.'; } const log = document.getelementbyid('log');
window.addeventlistener('blur', pause);
window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial definition ...
window.cancelIdleCallback() - Web APIs
return value undefined. example see our complete example in the article cooperative scheduling of background tasks api. specifications specification status comment cooperative scheduling of background tasks proposed recommendation initial definition. browser compatibility the compatibility table in this page is generated from structured data. ...
Window: clipboardchange event - Web APIs
the clipboardchange event fires when the system clipboard content changes. bubbles no cancelable no interface clipboardevent event handler property none examples javascript
window.addeventlistener('clipboardchange', () => { console.log('clipboard contents changed'); }); specifications specification status clipboard api and eventsthe definition of 'clipboardchange event' in that specification. working draft ...
Window.console - Web APIs
these methods are intended for debugging purposes only and should not be relied on for presenting information to end users. examples logging to console the first example logs text to the console. console.log("an error occurred while loading the content"); the next example logs an object to the console, with the object's fields expandable using disclosure widgets: console.dir(someobject); see usage in console for more thorough examples. specifications specification status comment console api living standard initial definition. ...
Window.controllers - Web APIs
the controllers property of the
window interface returns the xul controllers of the chrome
window. syntax controllers =
window.controllers controllers is an object of type xulcontrollers (nsicontrollers). specification xul-specific. not part of specification. by default, a
window's controller contains the code that supports the global
window commands. chrome code can add controllers (to be used in conjunction with the godocommand and goupdatecommand functions in globaloverlay.js). however, the added controllers must be explicitly removed when the
window is unloaded, as this is not done automatically. each missing removal can cause bug 415775: assertion: xpconnect is being called on a scope without a 'components' property! ...
Window.defaultStatus - Web APIs
obsolete since gecko 23 (firefox 23 / thunderbird 23 / seamonkey 2.20)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary gets/sets the status bar text for the given
window. syntax var smsg =
window.defaultstatus;
window.defaultstatus = smsg; parameters smsg is a string containing the text to be displayed by default in the statusbar. 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. specification html5 ...
Window.directories - Web APIs
obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary returned the
window personalbar toolbar object. use the
window.personalbar instead. syntax var dirbar =
window.directories; parameters dirbar is an object of the type barprop. example <script> function dirs() { alert(
window.directories); } </script> specification not part of specification. ...
Window.document - Web APIs
window.document returns a reference to the document contained in the
window. example console.log(
window.document.title); specifications specification status comment html living standardthe definition of '
window.document' in that specification. living standard html5the definition of '
window.document' in that specification. recommendation ...
Window.external - Web APIs
however, this is now deprecated, and the contained methods are now dummy functions that do nothing as per spec. methods the external object has the following methods: method description addsearchprovider(descriptionurl) dummy function; does nothing. see autodiscovery of search plugins. issearchproviderinstalled() dummy function; does nothing. ...
Window.focus() - Web APIs
makes a request to bring the
window to the front. it may fail due to user settings and the
window isn't guaranteed to be frontmost before this method returns. syntax
window.focus() example if (clicked) {
window.focus(); } specification specification status comment html living standardthe definition of '
window.focus()' in that specification. living standard ...
Window: focus event - Web APIs
this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus. click outside the document to lose focus.'; } const log = document.getelementbyid('log');
window.addeventlistener('blur', pause);
window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial definition ...
Window.forward() - Web APIs
moves the
window one document forward in history. this was a firefox-specific method and was removed in firefox 31. note: use the standard
window.history.forward() method instead. syntax
window.forward(); parameters none return value undefined. example function goforward() { if (cangoforward) {
window.forward(); } } specification this is not part of any specification. ...
Window.history - Web APIs
see manipulating the browser history for examples and details. in particular, that article explains security features of the pushstate() and replacestate() methods that you should be aware of before using them. example history.back(); // equivalent to clicking back button history.go(-1); // equivalent to history.back(); notes for top-level pages you can see the list of pages in the session history, accessible via the history object, in the browser's dropdowns next to the back and forward buttons. ...
Window.home() - Web APIs
obsolete since gecko 31 (firefox 31 / thunderbird 31 / seamonkey 2.28)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the
window.home() method returns the
window to the home page. syntax
window.home(); example function gohome() {
window.home(); } specification dom level 0. not part of specification. ...
Window: languagechange event - Web APIs
the languagechange event is fired at the global scope object when the user's preferred language changes. bubbles no cancelable no interface event event handler onlanguagechange examples you can use the languagechange event in an addeventlistener method:
window.addeventlistener('languagechange', function() { console.log('languagechange event detected!'); }); or use the onlanguagechange event handler property:
window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specification specification status html living standardthe definition of 'languagechange' in that specification. living standard ...
Window.length - Web APIs
returns the number of frames (either <frame> or <iframe> elements) in the
window. syntax framescount =
window.length; framescount is the number of frames. example if (
window.length) { // this is a document with subframes } specifications specification status comment html living standardthe definition of '
window.length' in that specification. living standard html5the definition of '
window.length' in that specification. recommendation ...
Window.localStorage - Web APIs
in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is put in a different localstorage object from the same site accessed with https (e.g., https://example.com). the keys and the values are always in the utf-16 domstring format, which uses two bytes per character. as with objects, integer keys are automatically converted to strings. syntax mystorage =
window.localstorage; value a storage object which can be used to access the current origin's local storage space. exceptions securityerror the request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the file: or data: scheme, for example). for example, the user may have their browser configured to deny permission to persist data ...
Window.locationbar - Web APIs
returns the locationbar object, whose visibility can be checked. syntax objref =
window.locationbar example the following complete html example shows how the visible property of the locationbar object is used. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> var visible =
window.locationbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of '
window.locationbar' in that specification. living standard html5the definition of '
window.locationbar' in that specification. recommendation ...
Window.menubar - Web APIs
the
window.menubar property returns the menubar object, whose visibility can be checked. syntax objref =
window.menubar example the following complete html example demonstrates how the visible property of the menubar object is used. <html> <head> <title>various dom tests</title> <script> var visible =
window.menubar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of '
window.menubar' in that specification. living standard html5the definition of '
window.menubar' in that specification. recommendation ...
Window.minimize() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.moveTo() - Web APIs
the moveto() method of the
window interface moves the current
window to the specified coordinates. note: this function moves the
window to an absolute location. in contrast,
window.moveby() moves the
window relative to its current location. syntax
window.moveto(x, y) parameters x is the horizontal coordinate to be moved to. y is the vertical coordinate to be moved to. example this example moves the
window to the top-left corner of the screen. function origin() {
window.moveto(0, 0); } specification specification status comment css object model (cssom) view modulethe definition of '
window.moveto()' in that specification. working draft initial definition ...
Window.mozInnerScreenX - Web APIs
summary gets the x coordinate of the top-left corner of the
window's viewport, in screen coordinates. note: this coordinate is reported in css pixels, not in hardware pixels. that means it can be affected by the zoom level; to compute the actual number of physical screen pixels, you should use the nsidom
windowutils.screenpixelspercsspixel property. syntax screenx =
window.mozinnerscreenx; value screenx stores the
window.mozinnerscreenx property value. the
window.mozinnerscreenx property is a floating point, read-only value; it has no default value. specification not part of any w3c technical specification or recommendation. ...
Window.mozInnerScreenY - Web APIs
summary gets the y coordinate of the top-left corner of the
window's viewport, in screen coordinates. note: this coordinate is reported in css pixels, not in hardware pixels. that means it can be affected by the zoom level; to compute the actual number of physical screen pixels, you should use the nsidom
windowutils.screenpixelspercsspixel property. syntax screeny =
window.mozinnerscreeny; value screeny stores the
window.mozinnerscreeny property value. the
window.mozinnerscreeny property is a floating point, read-only value; it has no default value. specification not part of any w3c technical specification or recommendation. ...
Window.mozPaintCount - Web APIs
obsolete since gecko 72 (firefox 72 / thunderbird 72 / seamonkey 2.69)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the number of times the current document has been painted to the screen in this
window. syntax var paintcount =
window.mozpaintcount; paintcount stores the
window.mozpaintcount property value. the
window.mozpaintcount value is a long long, and starts at zero when the document is first created, incrementing by one each time the document is painted. specification not part of any w3c technical specification or recommendation. ...
Window: offline event - Web APIs
the offline event of the
window interface is fired when the browser has lost access to the network and the value of navigator.online switches to false. bubbles no cancelable no interface event event handler property onoffline examples // addeventlistener version
window.addeventlistener('offline', (event) => { console.log("the network connection has been lost."); }); // onoffline version
window.onoffline = (event) => { console.log("the network connection has been lost."); }; specifications specification status html living standardthe definition of 'offline event' in that specification. living standard ...
Window.ondevicelight - Web APIs
specifies an event listener to receive devicelight events. these events occur when the device's light level sensor detects a change in the intensity of the ambient light level. syntax
window.ondevicelight = funcref where funcref is a function to be called when the devicelight event occurs. these events are of type devicelightevent. ...
window.ondeviceorientation - Web APIs
summary an event handler for the deviceorientation event, which contains information about a relative device orientation change. syntax
window.ondeviceorientation = function(event) { ... };
window.addeventlistener('deviceorientation', function(event) { ... }); specifications specification status comment deviceorientation event specification editor's draft initial specification. ...
Window.ondeviceorientationabsolute - Web APIs
summary an event handler for the deviceorientationabsolute event containing information about an absolute device orientation change. syntax
window.ondeviceorientationabsolute = function(event) { ... };
window.addeventlistener('deviceorientationabsolute', function(event) { ... }); specifications this event handler is not currently part of any specification. ...
Window.ondeviceproximity - Web APIs
the ondeviceproximity property of the
window interface specifies an eventhandler to receive deviceproximity events. these events occur when the device sensor detects that an object becomes closer to or farther from the device. syntax
window.onuserproximity = funcref where funcref is a function to be called when the deviceproximity event occurs. these events are of type deviceproximityevent. ...
Window.ongamepadconnected - Web APIs
the ongamepadconnected property of the
window interface represents an event handler that will run when a gamepad is connected (when the gamepadconnected event fires). the event object is of type gamepadevent. syntax
window.ongamepadconnected = function() { ... }; examples
window.ongamepadconnected = function(event) { // all buttons and axes values can be accessed through event.gamepad; }; specifications specification status comment gamepadthe definition of 'gamepadconnected event' in that specification. working draft initial definition ...
Window.ongamepaddisconnected - Web APIs
the ongamepaddisconnected property of the
window interface represents an event handler that will run when a gamepad is disconnected (when the gamepaddisconnected event fires). the event object is of type gamepadevent. syntax
window.ongamepaddisconnected = function() { ... }; examples
window.ongamepaddisconnected = function() { // a gamepad has been disconnected }; specifications specification status comment gamepadthe definition of 'gamepaddisconnected event' in that specification. working draft initial definition ...
Window.opener - Web APIs
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 opener
window =
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). if this
window was not opened by being linked to or created by another, returns null. in modern browsers, a rel="noopener noreferrer" attribute on the originating <a> element will prevent the
window.opener reference from being set, in which case this property will return null. specifications specification status comment html living standardthe definition of '
window.opener' in that specification. living standard ...
Window.outerHeight - Web APIs
the
window.outerheight read-only property returns the height in pixels of the whole browser
window, including any sidebar,
window chrome, and
window-resizing borders/handles. notes to change the size of a
window, see
window.resizeby() and
window.resizeto(). to get the inner height of a
window, i.e. the height of the page being displayed, see
window.innerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view modulethe definition of '
window.outerheight' in that specification. working draft ...
Window.pageXOffset - Web APIs
the read-only
window property pagexoffset is an alias for scrollx. specification specification status comment css object model (cssom) view modulethe definition of '
window.pagexoffset' in that specification. working draft ...
Window.parent - Web APIs
the
window.parent property is a reference to the parent of the current
window or subframe. if a
window does not have a parent, its parent property is a reference to itself. when a
window is loaded in an <iframe>, <object>, or <frame>, its parent is the
window with the element embedding the
window. syntax var parent
window =
window.parent; example if (
window.parent !=
window.top) { // we're deeper than one down } specifications specification status comment html living standardthe definition of '
window.parent' in that specification. living standard ...
Window.pkcs11 - Web APIs
col. if pkcs11 isn't supported, this property returns null. note: this property has been returned null since gecko 1.9.0.14 (firefox 3.0.14) and removed in gecko 29.0 (firefox 29 / thunderbird 29 / seamonkey 2.26)) for security reasons. for more information on installing pkcs11 modules, see installing pkcs11 modules. see bug 326628 for details on why the property was removed. syntax objref =
window.pkcs11 example
window.pkcs11.addmodule(smod, secpath, 0, 0); notes see nsidompkcs11 for more information about how to manipulate pkcs11 objects. specification not part of specification. ...
Window.print() - Web APIs
living standard browser compatibility the compatibility table in this page is generated from structured data. ...
Window.releaseEvents() - Web APIs
summary releases the
window from trapping events of a specific type. syntax
window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example
window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax:
window.releaseevents(event.keypress | event.keydown | event.keyup). see also
window.captureevents ( ). specification this is not part of any specification. browse...
Window.resizeTo() - Web APIs
the
window.resizeto() method dynamically resizes the
window. syntax
window.resizeto(width, height) parameters width an integer representing the new outerwidth in pixels (including scroll bars, title bars, etc). height an integer value representing the new outerheight in pixels (including scroll bars, title bars, etc). example this function resizes the
window so that it takes up one quarter of the available screen. see the screen.availwidth and screen.availheight properties. function quarter() {
window.resizeto(
window.screen.availwidth / 2,
window.screen.availheight / 2 ); } specification specification status comment css object model (cssom) view modulethe definition of '
window.resizeto()' in that specification. working draft ...
Window.restore() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.scrollByPages() - Web APIs
the
window.scrollbypages() method scrolls the current document by the specified number of pages. syntax
window.scrollbypages(pages) parameters pages is the number of pages to scroll. it may be a positive or negative integer. example // scroll down the document by 1 page
window.scrollbypages(1); // scroll up the document by 1 page
window.scrollbypages(-1); specification dom level 0. not part of specification. ...
Window.scrollMaxX - Web APIs
the
window.scrollmaxx read-only property returns the maximum number of pixels that the document can be scrolled horizontally. syntax xmax =
window.scrollmaxx xmax is the number of pixels. example // scroll to right edge of the page let maxx =
window.scrollmaxx;
window.scrollto(maxx, 0); notes do not use this property to get the total document width, which is not equivalent to
window.innerwidth +
window.scrollmaxx, because
window.innerwidth includes the width of any visible vertical scrollbar, thus the result would exceed the total document width by the width of any visible vertical scrollbar. instead use document.body.scrollwidth. see also
window.scrollmaxy. specification this is not part of any specification. ...
Window.scrollMaxY - Web APIs
the
window.scrollmaxy read-only property returns the maximum number of pixels that the document can be scrolled vertically. syntax ymax =
window.scrollmaxy ymax is the number of pixels. example // scroll to the bottom of the page let maxy =
window.scrollmaxy;
window.scrollto(0, maxy); notes do not use this property to get the total document height, which is not equivalent to
window.innerheight +
window.scrollmaxy, because
window.innerheight includes the width of any visible horizontal scrollbar, thus the result would exceed the total document height by the width of any visible horizontal scrollbar. instead use document.body.scrollheight. see also
window.scrollmaxx and
window.scrollto. specification this is not part of any specification. ...
Window.scrollbars - Web APIs
the
window.scrollbars property returns the scrollbars object, whose visibility can be checked. syntax objref =
window.scrollbars example the following complete html example shows how the visible property of the scrollbars object is used. <!doctype html> <html> <head> <title>various dom tests</title> <script> let visiblescrollbars =
window.scrollbars.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of '
window.scrollbars' in that specification. living standard html5the definition of '
window.scrollbars' in that specification. recommendation ...
Window.setCursor() - Web APIs
this function is unavailable to web pages, which can use the css cursor property instead. specification this is not part of any specification. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.setImmediate() - Web APIs
y updates. this method is not expected to become standard, and is only implemented by recent builds of internet explorer and node.js 0.10+. it meets resistance both from gecko (firefox) and webkit (google/apple). syntax var immediateid = setimmediate(func, [param1, param2, ...]); var immediateid = setimmediate(func); where immediateid is the id of the immediate which can be used later with
window.clearimmediate. func is the function you wish to call. all parameters will be passed directly to your function. notes the clearimmediate method can be used to clear the immediate actions, just like cleartimeout for settimeout. this method can be used instead of the settimeout(fn, 0) method to execute heavy operations. the feature can be emulated in a few different ways: postmessage can...
Window.sizeToContent() - Web APIs
the
window.sizetocontent() method sizes the
window according to its content. in order for it to work, the dom content should be loaded when this function is called—for example, once the domcontentloaded event has been thrown. the minimal size of the
window can be clamped. syntax
window.sizetocontent() example
window.sizetocontent(); specification this feature is not part of any specification. ...
Window.status - Web APIs
the status property of the
window interface was originally intended to set the text in the status bar at the bottom of the browser
window. however, the html standard now requires setting
window.status to have no effect on the text displayed in the status bar. syntax
window.status = string; var value =
window.status; specifications specification status comment html living standardthe definition of '
window.status' in that specification. living standard ...
Window.top - Web APIs
returns a reference to the topmost
window in the
window hierarchy. syntax var top
window =
window.top; notes where the
window.parent property returns the immediate parent of the current
window,
window.top returns the topmost
window in the hierarchy of
window objects. this property is especially useful when you are dealing with a
window that is in a subframe of a parent or parents, and you want to get to the top-level frameset. specifications specification status comment html living standardthe definition of '
window.top' in that specification. living standard html5the definition of '
window.top' in that specification. recommendation initial definition ...
Window.updateCommands() - Web APIs
whether we are in bold right now). notes this enables or disables items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the xul command nodes. specification dom level 0. not part of specification. browser compatibility the compatibility table in this page is generated from structured data. ...
Window.visualViewport - Web APIs
the visualviewport read-only property of the
window interface returns a visualviewport object representing the visual viewport for a given
window. syntax var visualviewport =
window.visualviewport value a visualviewport object. specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...
WindowEventHandlers.onafterprint - Web APIs
the onafterprint property of the
windoweventhandlers mixin is the eventhandler for processing afterprint events for the current
window. these events are raised after the user prints, or if they abort the print dialog. the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then revert those changes after printing has completed. in general, you should prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases. syntax
window.addeventlistener("afterprint", function(event) { ... });
window.onafterprint = function(event) { ... }; specification specification status comment html living standardthe definition of 'onafterprint' in that specific...
WindowEventHandlers.onmessageerror - Web APIs
the onmessageerror event handler of the
windoweventhandlers interface is an eventlistener, called whenever an messageevent of type messageerror is fired on a
window—that is, when it receives a message that cannot be deserialized. note: this feature is available in web workers. syntax
window.onmessageerror = function() { ... }; specifications specification status comment html living standardthe definition of 'onmessageerror' in that specification. living standard ...
WindowEventHandlers.onrejectionhandled - Web APIs
the onrejectionhandled property of the
windoweventhandlers mixin is the eventhandler for processing rejectionhandled events. these events are raised when promises are rejected. syntax
window.addeventlistener("rejectionhandled", function(event) { ... });
window.onrejectionhandled = function(event) { ...}; example
window.onrejectionhandled = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onrejectionhandled' in that specification. living standard initial definition. ...
WindowEventHandlers.onstorage - Web APIs
the onstorage property of the
windoweventhandlers mixin is an eventhandler for processing storage events. the storage event fires when a storage area has been changed in the context of another document. syntax
window.onstorage = functionref; value functionref is a function name or a function expression. this function receives a storageevent as its sole argument. example this example logs the value for a storage key whenever it changes in another document.
window.onstorage = function(e) { console.log('the ' + e.key + ' key has been changed from ' + e.oldvalue + ' to ' + e.newvalue + '.'); }; specifications specification status comment html living standardthe definition of 'onstorage' in that specification. living standard ...
WindowEventHandlers.onunhandledrejection - Web APIs
the onunhandledrejection property of the
windoweventhandlers mixin is the eventhandler for processing unhandledrejection events. these events are raised for unhandled promise rejections. syntax
window.onunhandledrejection = function; value function is an eventhandler or function to call when unhandledrejection events are received by the
window. the event handler receives as an input parameter as a promiserejectionevent. examples this example simply logs unhandled rejections' reason values to the console.
window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onunhandledrejection' in that specification. living standard initial definition. ...
WindowOrWorkerGlobalScope.isSecureContext - Web APIs
the issecurecontext read-only property of the
windoworworkerglobalscope interface returns a boolean indicating whether the current context is secure (true) or not (false). syntax var isitsecure = self.issecurecontext; // or just issecurecontext value a boolean. specifications specification status comment secure contextsthe definition of '
windoworworkerglobalscope.issecurecontext' in that specification. candidate recommendation initial definition. ...
WindowOrWorkerGlobalScope.origin - Web APIs
the origin read-only property of the
windoworworkerglobalscope interface returns the origin of the global scope, serialized as a string. syntax var myorigin = self.origin; // or just origin value a usvstring. examples executed from inside a worker script, the following snippet will log the worker's global scope's origin to the console each time it receives a message onmessage = function() { console.log(self.origin); }; if the origin is not a scheme/host/port tuple (say you are trying to run it locally, i.e. via file:// url), origin will return the string "null". specifications specification status comment html living standardthe definition of '
windoworworkerglobalscope.origin' in that specification. living standard initial definition. ...
Index - Web APIs
rnode.analysernode() api, analysernode, audio, constructor, media, reference, web audio api the analysernode constructor of the web audio api creates a new analysernode object instance. 53 analysernode.fftsize api, analysernode, property, reference, web audio api, fftsize the fftsize property of the analysernode interface is an unsigned long value and represents the
window size in samples that is used when performing a fast fourier transform (fft) to get frequency domain data. 54 analysernode.frequencybincount api, analysernode, property, reference, web audio api, frequencybincount the frequencybincount read-only property of the analysernode interface is an unsigned integer half that of the analysernode.fftsize. this generally equates to the nu...
...etion, without requiring a blocking request (for example xmlhttprequest). 274 using the beacon api guide, web performance the beacon interface schedules an asynchronous and non-blocking request to a web server. 275 beforeinstallpromptevent api, beforeinstallpromptevent, event, experimental, interface, reference the beforeinstallpromptevent is fired at the
window.onbeforeinstallprompt handler before a user is prompted to "install" a web site to a home screen on mobile. 276 beforeinstallpromptevent.prompt() api, beforeinstallpromptevent, experimental, method, reference, prompt the prompt() method of the beforeinstallpromptevent interface allows a developer to show the install prompt at a time of their own choosing. 277 befo...
... to a home screen on mobile. 276 beforeinstallpromptevent.prompt() api, beforeinstallpromptevent, experimental, method, reference, prompt the prompt() method of the beforeinstallpromptevent interface allows a developer to show the install prompt at a time of their own choosing. 277 beforeunloadevent api, reference the beforeunload event is fired when the
window, the document and its resources are about to be unloaded. 278 biquadfilternode api, biquadfilternode, interface, reference, web audio api the biquadfilternode interface represents a simple low-order filter, and is created using the audiocontext.createbiquadfilter() method. it is an audionode that can represent different kinds of filters, tone control devices, and graphic equa...
...And 263 more matches
Index - Archive of obsolete content
use very old software and you need to build web content that runs on that software. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. 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. syntax highliting support for .htaccess files less. 3 2015 mdn fellowship program 2015, archive, fellowship no summary! 4 api api, archive archived documentation about obsolete web standards apis. 5 navigator api, navigator features that used to hang off the navigator interface, but hav...
...ator interface, but have since been removed. 6 navigator.moznotification api, deprecated, mobile, non-standard, property, reference provides support for creating notification objects, which are used to display desktop notification alerts to the user. currently, these are only supported on firefox mobile and firefox os. see displaying notifications for an example. 7
window: deviceproximity event sensors, events the deviceproximity event is fired when fresh data is available from a proximity sensor. 8
window: userproximity event sensors, events no summary! 9 add-ons add-ons, archive, extensions archived add-ons documentation. 10 add-on sdk add-on sdk, jetpack no summary! 11 builder ...
...62 timers add-on sdk set one-off and periodic timers. 63 ui add-on sdk, add-ons, extensions, reference provides access to button, toolbar, and sidebar ui objects. 64 url add-on sdk construct, validate, and parse urls. 66 widget add-on sdk create a simple user interface for an add-on in firefox's add-on bar. 67
windows add-on sdk enumerate and examine open browser
windows, open new
windows, and listen for
window events. 68 low-level apis no summary! 69 /loader create commonjs module loaders. 70 chrome the chrome module gives an add-on sdk add-on access to the components object, which in turn gives it access to a large set of privileged...
...And 115 more matches
Drawing and Event Handling - Plugins
« previousnext » this chapter tells how to determine whether a plug-in instance is
windowed or
windowless, how to draw and redraw plug-ins, and how to handle plug-in events. when it comes to determining the way a plug-in instance appears in a web page, you (and the web page author) have many options. the content provider who writes the web page determines its display mode: whether the plug-in is embedded, or displayed in its own separate page. you determine whether a plug-in is
windowed or
windowless by the way you define the plug-in itself. a
windowed plug-in is drawn into its own native
window (or portion of a native
window) on a web page. a
windowed plug-in is opaque, hiding the part of the page beneath its display
window. this type of plug-in determines when it draws itself.
...is embedded, or displayed in its own separate page. you determine whether a plug-in is
windowed or
windowless by the way you define the plug-in itself. a
windowed plug-in is drawn into its own native
window (or portion of a native
window) on a web page. a
windowed plug-in is opaque, hiding the part of the page beneath its display
window. this type of plug-in determines when it draws itself. a
windowless plug-in does not require a native
window. it is drawn in a target called a drawable, which corresponds to either the browser
window or an off-screen bitmap. a drawable can be defined in several ways, depending on the platform.
windowless plug-ins can be opaque or transparent. a
windowless plug-in draws itself only in response to a paint message from the browser. for information about the wa...
...able, which corresponds to either the browser
window or an off-screen bitmap. a drawable can be defined in several ways, depending on the platform.
windowless plug-ins can be opaque or transparent. a
windowless plug-in draws itself only in response to a paint message from the browser. for information about the way html determines plug-in display mode, see using html to display plug-ins. note:
windowless plug-ins were not supported on the x
window system platform prior to gecko 1.9 alpha 7 (bug 137189). the np
window structure when a plug-in is loaded, it is drawn into a target area. this target is either the
windowed plug-in's native
window, or the drawable of a
windowless plug-in. the np
window structure represents either the native
window or a drawable. this structure contains information...
...And 59 more matches
ARIA Test Cases - Accessibility
t work we may test with nightly builds if they are available, in order to show what is already fixed in upcoming releases. we can add more screen readers if people are willing to step up and provide test results for them. ...
...case structure test cases are organized as follows: test case links test details expected at behavior markup notes results table at firefox ie opera safari jaws 9 - - - - jaws 10 - 1. pass 2. ...
...n. for example, "options, button, alt+shift+t" should be spoken if there is an options button in the alert with alt+shift+t as an accesskey. ...
...And 54 more matches
nsISessionStore
browser/components/sessionstore/nsisessionstore.idlscriptable provides a means for extensions and other code to store data in association with browser sessions, tabs, and
windows. the api operates on top-level browser.xul and navigator.xul
windows; see note on
windows for details. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in versions of firefox prior to 3.5, the user preference browser.sessionstore.enabled must be true for these calls to be successful. ...
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in versions of firefox prior to 3.5, the user preference browser.sessionstore.enabled must be true for these calls to be successful. starting in firefox 3.5, this preference is no longer used. ...
...pports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in versions of firefox prior to 3.5, the user preference browser.sessionstore.enabled must be true for these calls to be successful. starting in firefox 3.5, this preference is no longer used. ...
...And 52 more matches
Tabbed browser - Archive of obsolete content
here you should find a set of useful code snippets to help you work with firefox's tabbed browser. the comments normally mark where you should be inserting your own code. each snippet normally includes some code to run at initialization, these are best run using a load listener. these snippets assume they are run in the context of a browser
window. if you need to work with tabs from a non-browser
window, you need to obtain a reference to one first, see working with
windows in chrome code for details. multiple meanings for the word 'browser' the word 'browser' is used several ways. of course the entire application firefox is called "a browser". within the firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the xul sense of a bro...
...owser' the word 'browser' is used several ways. of course the entire application firefox is called "a browser". within the firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the xul sense of a browser element. furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser element" in a firefox xul
window. ...
...f course the entire application firefox is called "a browser". within the firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the xul sense of a browser element. furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser element" in a firefox xul
window. getting access to the browser from main
window code running in firefox's global chrome
window, common for extensions that overlay into browser.xul, can access the tabbrowser element using the global variable gbrowser. // gbrowser is only accessible from the scope of // the browser
window (browser.xul) gbrowser.addtab(...); if gbrowser isn't defined your code is either not running in the scope of the browser
window or running too early. you...
...And 43 more matches
Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross platform component object model, similar to microsoft com. it has multiple language bindings, allowing xpcom components to be used and implemented in javascript, java, and python in addition to c++. 2 accessing the
windows registry using xpcom add-ons, code snippets, extensions, needsclassification,
windows registry when implementing
windows-specific functionality, it is often useful to access the
windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in se...
...actory (nsfactory<t>) that simplifies the factory creation process that just requires writing a createinstance() method. the new nsigenericfactory interface takes this a step further, by providing a single interface that can be reused anytime a simple implementation of nsifactory is needed. here is the interface, and a description of its use.</t> 10 how to pass an xpcom object to a new
window needsexample, needshelp if you want to be able to call functions within an xpcom object from a xul
window's code, you can do so if you pass the xpcom object as one of the arguments to the
window creation method. 11 how to build a binary xpcom component using visual studio add-ons, extensions, xpcom this is a simple tutorial for building xpcom objects in c++ using vi...
... object in the scope of the specified object's compartment. 34 components.utils.evalinsandbox add-ons, developing mozilla, extensions, javascript, xpcom:language bindings, xpconnect the evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor. 35 components.utils.evalin
window this function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context. the result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xraywrapper already), so it's guaranteed to ...
...And 42 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
way to work more efficiently. preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to speed subsequent displays. disabling this cache forces xul documents to be reloaded any every time they are displayed. true browser.dom.
window.dump.enabled (not present in firefox 3.5+) enables use of the dump method for debugging. refer to the “javascript debugging methods” sidebar. true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console. true javascript.options.strict (present in firefox 3.5+) enforces strict error output from java...
...ole (present in firefox 3.5+) outputs javascript errors to the error console. 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. some of these preferences do not exist—to create them, right-click, select “new>boolean”, and type in the name and set the value accordingly. install the dom inspector the dom inspector is an extension that lets you examine html and xul dom tree structures, javascript objects and css properties, etc.
...ion to be valuable: extension developer https://addons.mozilla.org/firefox/addon/7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions. chrome what is chrome? “chrome”is the word used to describe all the gui structural elements that go into an xul application. for example, in the firefox browser
window, everything other than the web page being displayed in the content area is chrome. extensions also can be considered xul applications with chrome. three kinds of packages make up chrome the content package this package is used to contain the main xul and javascript source files. most extensions consist of a single content package2 the locale package this package is used to contain language d...
...And 38 more matches
nsIAppShellService
ppshellservice. ...
... inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/appshell/appshellservice;1 as a service: var appshellservice = components.classes["@mozilla.org/appshell/appshellservice;1"] .getservice(components.interfaces.nsiappshellservice); method overview void closetoplevel
window(in nsixul
window a
window); obsolete since gecko 1.8 void createhidden
window(in nsiappshell aappshell); native code only! boolean createstartupstate(in long a
windowwidth, in long a
windowheight); obsolete since gecko 1.8 nsixul
window createtoplevel
window(in nsixul
window aparent, in nsiuri aurl, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshel...
...ko 1.8 void createhidden
window(in nsiappshell aappshell); native code only! ...
...And 37 more matches
BluetoothCharacteristicProperties - Web APIs
ome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothcharacteristicproperties experimentalchrome full support 56notes full support 56notes notes chromeos and macos only. ...
...os only. full support 56notes disabled notes linux and versions of
windows earlier than 10.disabled from version 56: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes edgeos and macos only. ...
...nces in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes edgeos and macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 37 more matches
Index - Archive of obsolete content
no summary! 292 preference.name xul attributes, xul reference no summary! 293 preference.type needshelp, reference, référence(2), xul attributes, xul reference no summary! 294 prefpane.selected xul attributes, xul reference no summary! 295 prefpane.src xul attributes, xul reference no summary! 296 pref
window.onload no summary! 297 pref
window.type xul attributes, xul reference no summary! 298 primary xul attributes, xul reference no summary! 299 priority xul attributes, xul reference no summary! 300 progressmeter.max no summary! 301 progressmeter.mode xul attributes, xul reference no su...
... 338 sizetopopup xul attributes, xul reference no summary! 339 smoothscroll xul attributes, xul reference no summary! 340 sort xul attributes, xul reference no summary! 341 sortactive xul attributes, xul refer...
... no summary! 335 showpopup xul attributes, xul reference no summary! 336 size xul attributes, xul reference no summary! 337 sizemode xul attributes, xul reference this attribute is used to save and restore the state of a
window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on maximized
windows). 338 sizetopopup xul attributes, xul reference no summary! 339 smoothscroll xul attributes, xul reference no summary! 340 sort xul attributes, xul reference no summary! 341 sortactive xul attributes, xul reference no summary! 342 sortdirection xul attributes, xul reference no summary! ...
...And 35 more matches
Standard OS Libraries
this article gives the names of standard libraries that can be accessed with js-ctypes. these libraries are what enable js-ctypes to work. the alternative to standard libraries is creating your own dll (for
windows) or so (for linux) file with c functions that can be called from your add-on with js-ctypes. the dll/so/etc file you make must be shipped with your add-on. standard libraries offer the advantage of not having to ship anything. they are already available on the operating system for you. ...
...dd-on. standard libraries offer the advantage of not having to ship anything. they are already available on the operating system for you. you just need to supply the path to appropriate files and set up the proper types of values/arguments in the js-ctypes code. this article allows you to find out what types to give to values/arguments by supplying links to the documentation of the os libraries.
windows
windows has many standard os libraries. the most common, found on all
windows os version, is "winapi".
windows also has the "winapilists" and ".net framework" (i'm not sure if it can be accessed jsctypes but probably). a complete list of
windows apis can be found at the msdn api index. winapi this is the one that is most commonly used by js-ctypes. this comes shipped by default with all insta...
...it's also known as winapi32 or just winapi. a list of all the functions available through this api can be found at the msdn winapi index. ...
...And 33 more matches
BluetoothRemoteGATTDescriptor - Web APIs
ndroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothremotegattdescriptor experimentalchrome full support 57notes full support 57notes notes macos only. ...
...os only. full support 57notes disabled notes linux and versions of
windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. ...
...nge preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 33 more matches
ui/frame - Archive of obsolete content
add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); the toolbar is positioned between the address bar and the content
window. it occupies the whole width of the browser
window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display. this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="text/javascript" src="frame.js"></script> as usual, the ...
...relative to the html file's location. messages logged from a frame script using the console will not appear in the terminal when you run the add-on using jpm run. however, they will appear in the browser console. this issue is being tracked as bug 982385. ...
...the console will not appear in the terminal when you run the add-on using jpm run. however, they will appear in the browser console. this issue is being tracked as bug 982385. communicating with frames you can exchange messages between the main add-on code and scripts loaded into the frame using an api modeled on
window.postmessage(). a frame creates a separate iframe instance for each browser
window. ...
...And 32 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ent is for developers working to support msaa in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically. if you're implementing controls/widgets, you should also see the accessible toolkit checklist. if you're interested in more about gecko's msaa implementation, read gecko info for
windows accessibility vendors to learn how msaa clients can utilize gecko's msaa support. intro: what is msaa? msaa is the microsoft active accessibility (msaa) api, used on
windows operating systems to support assistive technologies for users with disabilities. third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening inside...
...en magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line. finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. on microsoft
windows, these kinds of assistive technology acquire this necessary information via a combination of hacks, msaa and proprietary doms. msaa is supposed to be the "right way" for accessibility aids to get information, but sometimes the hacks are more effective. for example, screen readers look for screen draws of a vertical blinking line, to determine the location of the caret. without doing this, screen...
...ms, because so many applications do not use the system caret (gecko does not). this is so commonly done, that no one even bothers to support the msaa caret, after all the hack is general solution works with pretty much all applications. msaa provides information in several different ways: a com interface (iaccessible) that allows applications to expose the tree of data nodes that make up each
window in the user interface currently being interacted with and custom interface extensions via interfaces via queryinterface and queryservice. this can provide assistive technology with contextual information specific to your object model. for example, gecko support isimpledomnode to provide information about the dom node for an accessible object. a set of system messages that confer accessibility-r...
...And 32 more matches
ui/button/toggle - Archive of obsolete content
experimental add a toggle button to the firefox user interface. with this module you can create buttons that function like a check box, representing an on/off choice. toggle buttons have all the same features as action buttons: they can display icons and respond to click events. like action buttons, you can control their state on a per-
window or per-tab basis as well as globally. toggle buttons have two extra features: they emit a change event when clicked, as well as a click event. they have an extra attribute checked that is automatically toggled when the button is clicked. when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x). usage creating buttons to create a button you must give it an id, an i...
...utton", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var panel = panels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { panel.show({ position: button }); } } function handlehide() { button.state('
window', {checked: false}); } disabling buttons you can disable a button by setting its disabled property to true. a disabled button will not generate click or change events and its icon will appear disabled: updating state you can update all the button's properties, except for its id. depending on your application, you might want a button to have different state in different browser
windows o...
...cept for its id. depending on your application, you might want a button to have different state in different browser
windows or different tabs. for example, you might want to give it a different appearance when the current page is being served over https. the button api handles this by defining a tree of potential states. at the root is the global state, then there's a state you can set for each
window, then a state you can set for each tab. more-specific states override less-specific states. for example, suppose the browser has two
windows (w1 and w2), and each
window has two tabs. ...
...And 31 more matches
nsIMsgFolder
the nsimsgfolder interface is used to interact with folders in thunderbird. this page is out of date. check //github.com/realityripple/uxp/blob/master/mailnews/base/public/nsimsgfolder.idl for the newer methods (esp. isspecialfolder and such). ...
...nsimsgfolder interface is used to interact with folders in thunderbird. this page is out of date. check //github.com/realityripple/uxp/blob/master/mailnews/base/public/nsimsgfolder.idl for the newer methods (esp. isspecialfolder and such). ...
... thunderbird. this page is out of date. check //github.com/realityripple/uxp/blob/master/mailnews/base/public/nsimsgfolder.idl for the newer methods (esp. isspecialfolder and such). ...
...And 31 more matches
CustomizableUI.jsm
this module is only available from firefox 29 onwards. the customizableui.jsm javascript code module allows you to interact with customizable buttons and items in firefox's main
window ui. it is available in the firefox
window as the customizableui property on the
window. if you want to use it from a jsm or another context without a
window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduction the module is intended for two primary purposes: allow adding, moving and removing customizable widgets. manage the areas in which these widgets are shown. note that it is expressly not really aware about the specific ui used by users to make customizations. this is handled by customizemode.jsm, which interacts with cus...
...dgets are shown. note that it is expressly not really aware about the specific ui used by users to make customizations. this is handled by customizemode.jsm, which interacts with customizableui through a listener mechanism. areas areas are parts of the user interface in which customizable widgets can be placed. customizableui assumes that each area it is told about is present in every browser
window. customizableui is aware of two types of areas: toolbars and the menu panel. areas are registered using the registerarea method and unregistered using the unregisterarea method. when a customizable toolbar's xbl binding is constructed (generally, that is when a <toolbar customizable="true"/> node is appended to the document and isn't invisible), the binding will call into customizableui and regi...
...olbar's horizontal space, the excess widgets will be placed in a panel accessible from an anchor (chevron) in the toolbar. in order to register such a toolbar, set the 'overflowable' property to true, and provide the id of the anchor in the 'anchor' property. widgets widget is the term that customizableui uses for each of the items in a customizable area. ...
...And 27 more matches
nsIMsgMessageService
t implements nsimsgmessageservice give the user top level routines related to messages like copying, displaying, attachment's manipulation, printing, streaming the message content to eml format string, etc. ...
...s nsimsgmessageservice give the user top level routines related to messages like copying, displaying, attachment's manipulation, printing, streaming the message content to eml format string, etc. ...
...orts method overview void copymessage(in string asrcuri, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsg
window amsg
window, out nsiuri aurl); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsg
window amsg
window, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsg
window amsg
window, 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 nsimsg
window amsg
window, in n...
...And 27 more matches
Extending a Protocol
nsastring& as the domstring comes in from js as utf-16. this will matter later, as we will need to convert it to utf-8 (using nscstring) to send it to the parent process. now let's implement the method in ./dom/base/navigator.cpp - we add a little bit of error boilerplate stuff, as is customary: already_addrefed<promise> navigator::echo(const nsastring& astring, errorresult& arv) { if (!m
window || !m
window->getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(m
window->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing magic will happen here! return echopromise.forget(); } ok, let's ./mach build and make sure everything is compiling ok. once it's compiled, ./mach r...
...a back to the child. sometimes, the parent will want to notify all its children of something. so communication can go in both directions. in this tutorial, we are just going to cover a child talking to a parent, and the parent responding with some data. in order to manage parent-child relationships, ipdl uses a tree herirachy to manage the creation of children. as dom apis have access to the
window object, we generally want to use the "p
windowglobal" protocol to manage things for us: this protocol is convinient because we can easily access it from the
window object... so as long as we can get a hold of a
window object, we can get it to do useful things for us (as we shall soon see!). in our case, our protocol, which we will call pecho.ipdl, will send a message to a parent, and the parent w...
... is convinient because we can easily access it from the
window object... so as long as we can get a hold of a
window object, we can get it to do useful things for us (as we shall soon see!). in our case, our protocol, which we will call pecho.ipdl, will send a message to a parent, and the parent will respond with the message we sent. as a heirarchy, this will look like this: this means that, p
windowglobal.ipdl: manages: meaning that p
windowglobal.ipdl is responsible managing the creation of instances of pecho children and the parent. and the inverse is also true, as you will soon see: pecho.idpl will need explicitly state that p
windowglobal.ipdl is managing it. includes: this is kinda like "#includes" in c++, except it's not a preprocessor directive. it just includes the defintion and...
...And 26 more matches
Key Values - Web APIs
ys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character. keyboardevent.key value description virtual keycode
windows mac linux android "unidentified" the user agent wasn't able to map the event's virtual keycode to a specific key value. this can happen due to hardware or software constraints, or because of constraints around the platform on which the user agent is running. varies varies varies varies modifier keys modifiers are special keys which are u...
...the user agent is running. varies varies varies varies modifier keys modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. examples include the shift and control keys, and lock keys such as caps lock and numlock. keyboardevent.key value description virtual keycode
windows mac linux android "alt" [5] the alt (alternative) key. vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key. enables...
...e function key mode described by "fn" on and off. often handled in hardware so that events aren't generated for this key. "hyper" [4] the hyper key. gdk_key_hyper_l (0xffed) gdk_key_hyper_r (0xffee) qt::key_hyper_l (0x01000056) qt::key_hyper_r (0x01000057) "meta" [1] the meta key. allows issuing special command inputs. this is the
windows logo key, or the command or ⌘ key on mac keyboards. vk_lwin (0x5b) vk_rwin (0x5c) kvk_command (0x37) kvk_rightcommand (0x36) gdk_key_meta_l (0xffe7) gdk_key_meta_r (0xffe8) qt::key_meta (0x01000022) keycode_meta_left (117) keycode_meta_right (118) "numlock" the numlock (number lock) key. toggles the numeric keypad between number entry some other mode...
...And 26 more matches
nsIPromptService
inherits from: nsisupports last changed in gecko 1.7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button. if you need to include an ampersand in the button's text, use two of them, like this: "&&". note: some of these interface methods use out and inout parameters. in c++, out parameters are pointers. for javascript, they are extra work, as you can't use an out parameter directly. ...
...arameter type. for more information on out parameters and javascript refer to working with out parameters. implemented by: @mozilla.org/embedcomp/prompt-service;1. ...
... parameters. implemented by: @mozilla.org/embedcomp/prompt-service;1. ...
...And 25 more matches
Interacting with page scripts - Archive of obsolete content
how to send messages between content scripts and page scripts sharing objects with page scripts there are two possible cases here: a content script might want to access an object defined by a page script a content script might want to expose an object to a page script access objects defined by page scripts to access page script objects from content scripts, you can use the global unsafe
window object. with unsafe
window you can see javascript objects that have been defined by page scripts, and if a page script has modified the behavior of native dom functions, you'll get the modified version of them as well. in this example a page script adds a string variable foo to the
window: <!doctype html"> <html> <head> <script>
window.foo = "hello from page script" </script> </h...
...en defined by page scripts, and if a page script has modified the behavior of native dom functions, you'll get the modified version of them as well. ...
...ipts, and if a page script has modified the behavior of native dom functions, you'll get the modified version of them as well. ...
...And 21 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
extensions. introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla browser. there are earlier experiments going back a long way in developing user interfaces using a combination of html and scripting languages, and xul could be considered an evolutionary step from that. similar approaches are found in xaml, which is used in
windows vista, and flex, which is used in adobe flash. like web pages, which display the same regardless of platform, applications marked up in xul will work the same in any environment where firefox runs. because html was originally conceived as a language for marking up documents, specifically web pages, it is inevitably lacking in functionality for marking up applications. xul, on the other hand, wa...
... browsers based on firefox or the gecko engine, and even web-based content also used xul. for example, there is the mozilla amazon browser, which helps with shopping at amazon, and the presentation method in xul, a tool for writing and displaying presentations to try out the code samples in this chapter, save them as text files with .xul extensions and drag and drop them into the firefox browser
window. 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 windo...
...ixme: 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.
window.opendialog('another.xul', '_blank','chrome,all,dialog=no'); listing 1: opening a
window without the firefox gui xul as an xml application listing 2 shows an example of a gui definition file marked up in xul (a "xul document"). the root element in xul is generally the "
window" element. the namespace uri is : http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul if the character enco...
...And 21 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
tely automatic configuration of mozilla's apps preferences based on users properties either retrieved from system environement variables or on an organisation ldap directory. situation int-evry manages about 3000 users (mostly students) who share computers in labs and "self service" computer rooms. hence a single computer might connect many different users all day long. computers are dual-boot (
windows 7 and linux fedora 19 by 2013). all users have a personal account on a
windows server (ad) and an ldap account for linux authentication. objective the objective is to provide users with a mailer agent, a web browser, and a news reader which are automatically configured (preferences) at startup to the current user connected on the computer. choosing mozilla products allow us to use the same app...
... instead of configuring end user individual preferences files (~/.mozilla/default/randomdir/prefs.js) we now use a centralized default set of preferences. ...
...on name , language, homepage etc...) from the enterprise directory. central configuration file that feature is provided through a javascript file. file location (not tested since 2012 ...) in thunderbird , firefox, the javascript preference file that calls the centralized preference file is located in $install_dir_moz_app/defaults/pref, for example in thunderbird this would be repectively for
windows/linux: c:\program files\mozilla thunderbird\defaults\pref /usr/lib/thunderbird/default/pref ( it used to be in /usr/lib/thunderbird-version#/default/pref as in /usr/lib/thunderbird-5/default/pref ) for the record/history purpose ... the old netscape 4.x the file is encoded (byte-shift/rotary is 7), and the presence of the file (netscape.cfg) in the mozilla_home directory suffices for it to b...
...And 21 more matches
jspage - Archive of obsolete content
"){if(a.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(
window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(
window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!
window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!
window.activexobject)?false...
...ientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(
window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!
window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!
window.activexobject)?false:((
window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&
window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; browser.detect=function(){fo...
...};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(
window.execscript){
window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.ui...
...And 21 more matches
nsIFocusManager
66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidom
window a
window); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only! obsolete since gecko 2.0 void firedelayedevents(in nsidocument adocument); native code only! void focusplugin(in nsicontent aplugin); native code only! nsidomelement getfocusedelementfor
window(in nsidom
window a
window, in prbool adeep, out nsidom
window afocusedwin...
...nt adocument, in nsicontent aelement); native code only! obsolete since gecko 2.0 void firedelayedevents(in nsidocument adocument); native code only! void focusplugin(in nsicontent aplugin); native code only! ...
...ument, in nsicontent aelement); native code only! obsolete since gecko 2.0 void firedelayedevents(in nsidocument adocument); native code only! void focusplugin(in nsicontent aplugin); native code only! ...
...And 21 more matches
SubtleCrypto.wrapKey() - Web APIs
te: you can try the working examples out on github. raw wrap this example wraps an aes key. it uses "raw" as the export format and aes-kw, with a password-derived key, to encrypt it. see the complete code on github. let salt; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. ...
...ps an aes key. it uses "raw" as the export format and aes-kw, with a password-derived key, to encrypt it. see the complete code on github. let salt; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. ...
...unction getkeymaterial() { const password =
window.prompt("enter your password"); const enc = new textencoder(); return
window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-kw key using pbkdf2. */ function getkey(keymaterial, salt) { return
window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key. ...
...And 20 more matches
ui/button/action - Archive of obsolete content
s programmatically with the button's click() method. disabling buttons you can disable a button by setting its disabled property to true. a disabled button will not generate click events and its icon will appear disabled: updating state you can update all the button's properties except for its id. ...
...n disable a button by setting its disabled property to true. a disabled button will not generate click events and its icon will appear disabled: updating state you can update all the button's properties except for its id. 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. ...
...ue. a disabled button will not generate click events and its icon will appear disabled: updating state you can update all the button's properties except for its id. 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. you can set state to be specific to a
window or tab using the button's state() method. to set state like this, call state() with 2 parameters: the first parameter is a
window or tab object or as a shorthand, the string "
window" for the currently active
window, or the string "tab" for the currently active tab the second parameter is an object containing the state properties you wish to update. here's an add-on with a button that disabl...
...And 19 more matches
Introduction to XUL - Archive of obsolete content
warning: the content of this article may be out of date. preamble mozilla has configurable, downloadable chrome, meaning that the arrangement and even presence or absence of controls in the main
window is not hardwired into the application, but loaded from a separate ui description. in fact, most of mozilla's
windows (and dialogs) will be described using this mechanism. xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built.
window chrome is displayed and managed by the same layout engine that manages html content in the browser. ui descriptions, then, look a great deal like html 4. xul is an application of xml. in fact, it is just xml with specific meaning define...
...igners and build engineers will need to maintain separate, platform-specific versions of at least some xul documents. "xptoolkit" is rather synonymous with xpfe. though the former term seems more concrete than the other, and therefore is not an exact replacement, no one is completely certain why we have both. "xul" already introduced, is an application of xml used to describe the layout of most
windows in the mozilla browser, including and especially the main, browser
window. scope this paper makes no attempt to explain requirements. we don't have a current "requirements" document. xptoolkit architecture is a better place to gain an understanding of such things. this paper contains a short introduction to mozilla front-end architecture, concentrating on the task of building uis. it is, as al...
... control of the individual widget, and set when the widget was built. relative placement of widgets, their interactions with each other, and optionally some of their configuration, will be controlled by a ui layout specified in a script whose structure is defined in this and related documents. widgets are pieces of the application largely self-contained, generally corresponding to a rectangle of
window real estate. widgets will generally live grouped in separate, dynamically loaded libraries. a widget may expect to own a piece of a
window (a toolbar or toolbar set), or it may be expected to work within or without a
window (menubars, depending on the platform). it may not be a part of the application ui at all. widgets will have predefined behaviour, set at compilation. buttons will respond to ...
...And 19 more matches
The Essentials of an Extension - Archive of obsolete content
nge. testing your add-ons with every firefox version is always recommended, though. this is the information firefox and other mozilla applications need to install an add-on. any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state. ...
...h every firefox version is always recommended, though. this is the information firefox and other mozilla applications need to install an add-on. any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state. the chrome.manifest file chrome is the set of user interface elements of the application
window that are outside of a
window's content area. toolbars, menu bars, progress bars, and
window title bars are all examples of elements that are typically part of the chrome. taken from chrome registration. in other words, the chrome is everything you see in firefox. all firefox
windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a firefox tab. windo...
...most of the code for an extension resides in the chrome folder, just like in the hello world example. as we saw in the directory structure of the unpacked extension, the chrome is composed of 3 sections: content, locale and skin. the 3 are necessary for most extensions. ...
...And 18 more matches
Common causes of memory leaks in extensions - Extensions
this page explains coding patterns that cause extension to cause memory leaks. causes of zombie compartments zombie compartments are a particular kind of memory leak. all zombie compartments in extensions are caused by a failure to release resources appropriately in certain circumstances, such as when a
window is closed, a page unloads, or an extension is disabled or removed. ...
...indow is closed, a page unloads, or an extension is disabled or removed. while bug 695480 should prevent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist. ...
...t most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist. storing references to
window objects and dom nodes the most common problem is extensions holding onto references to content
windows for too long. ...
...And 18 more matches
Mozilla DOM Hacking Guide
rly, then return type of the c++ function will be wrapped by xpconnect so that javascript can use it safely. when, in javascript, a client tries to access a dom object or a dom method on a dom object, the js engine asks xpconnect to search for the relevant c++ method to call. for example, when we ask for |document.getelementbyid("myid");|, xpconnect will find that |document| is a property of the
window object, so it will look on the interface nsidom
window, and it will find the getdocument() method. the return value of getdocument() is a nsidomdocument. so xpconnect will then try to find a method named getelementbyid() on the nsidomdocument interface. and indeed it will find it, and thus call it. this is the schema used most of the time when using w3c dom objects and methods. it is however diff...
...n value of getdocument() is a nsidomdocument. so xpconnect will then try to find a method named getelementbyid() on the nsidomdocument interface. and indeed it will find it, and thus call it. this is the schema used most of the time when using w3c dom objects and methods. it is however different for some dom level 0 objects and methods. i'll take two very different examples. ...
... the nsidomdocument interface. and indeed it will find it, and thus call it. this is the schema used most of the time when using w3c dom objects and methods. it is however different for some dom level 0 objects and methods. i'll take two very different examples. the first one is the
window.location object (the same holds true for document.location, actually). we can change the url of the current
window by assigning
window.location. in idl, location is declared to be a readonly attribute. this is because, if we had a setlocation() method, it would take an nsidomlocation parameter, and not a url string. instead, in the helper class for the
window object (ns
windowsh, see the next section), we define the getproperty() member function. getproperty() is a function used by xpconnect when we are settin...
...And 18 more matches
nsIMessenger
g, or deleting messages and attachments in mailnews. inherits from: nsisupports implemented by: @mozilla.org/messenger;1. ...
...zilla.org/messenger;1. to create an instance, use: messenger = components.classes["@mozilla.org/messenger;1"] .createinstance(components.interfaces.nsimessenger); in thunderbird, a global nsimessenger object is defined as messenger via the createmessenger function in mail
window.js. ...
...ger;1. to create an instance, use: messenger = components.classes["@mozilla.org/messenger;1"] .createinstance(components.interfaces.nsimessenger); in thunderbird, a global nsimessenger object is defined as messenger via the createmessenger function in mail
window.js. ...
...And 17 more matches
WebIDL bindings
terface_map_end if your class doesn't inherit from a class that implements getparentobject, then add a function of that name that, for a given instance of your class, returns the same object every time (unless you write explicit code that handles your parent object changing by reparenting js wrappers, as nodes do). the idea is that walking the getparentobject chain will eventually get you to a
window, so that every webidl object is associated with a particular
window. for example, nsinode::getparentobject returns the node's owner document. the return type of getparentobject doesn't matter other than it must either singly-inherit from nsisupports or have a corresponding tosupports method that can produce an nsisupports from it. (this allows the return value to be implicitly converted to a...
...turn types. you can see an example of what the function declarations should look like by running mach webidl-example myinterface. this will produce two files in dom/bindings in your objdir: myinterface-example.h and myinterface-example.cpp, which show a basic implementation of the interface using a class that inherits from nsisupports and has a wrapper cache. see this sample patch that migrates
window.performance.* to webidl bindings. note: if your object can only be reflected into js by creating it, not by retrieving it from somewhere, you can skip steps 1 and 2 above and instead add 'wrappercache': false to your descriptor. you will need to flag the functions that return your object as [newobject] in the webidl. if your object is not refcounted then the return value of functions that return...
...with a void return value and a single argument whose type is the attribute's type. c++ reflections of webidl constructors a webidl constructor is turned into a static class method named constructor. the arguments of this method will be the arguments of the webidl constructor, with a const globalobject& for the relevant global prepended. for the non-worker case, the global is typically the inner
window for the dom
window the constructor function is attached to. if a jscontext* is also needed due to some of the argument types, it will come after the global. the return value of the constructor for myinterface is exactly the same as that of a method returning an instance of myinterface. constructors are always allowed to throw. for example, this idl: [constructor, constructor(unsigned long some...
...And 17 more matches
Index of archived content - Archive of obsolete content
page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui url widget
windows low-level apis /loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/heritage core/namespace ...
... test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid
window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials add a context menu item add a ...
...ons autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding
window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri...
...And 16 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
plugin as an extension. xpinstall is a javascript-based installer technology that works across all the platforms that mozilla and netscape browsers based on mozilla (such as netscape 7) are deployed. it can be a way to ensure a smooth user-experience when obtaining plugins, without obliging the user to exit the browsing environment to launch a binary installer (the classic setup.exe experience on
windows) or obliging the user to restart their browser. for plugin vendors who have already written a native code (e.g. exe) installer, xpinstall can wrap this native installer and run it so that the user never has to leave the browsing environment and click on the exe to run it. this article presents a guideline for improving the plugin installation experience for netscape gecko browsers using xpinstal...
... "cross platform install" (hence "xp" -- an abbreviation for "cross platform"). an xpinstall package is usually called an xpi package for short (and often pronounced "zippy"). this article is about how you can use xpinstall to install plugins to the browsers that support xpinstall. an xpi package is in fact a zip file with the xpi file extension (e.g. myplugininstaller.xpi), and can be created on
windows by utilities such as winzip. xpi packages, like zip files, "contain" other files, typically: the software component to be installed. in our case, this is the plugin software. a javascript file called install.js, which is the install logic that drives the installation. this includes instructions on where to install the software, and what messages to feed to the user. you can create an xpinsta...
...ware based on netscape gecko, the layout engine of the mozilla project. caveats: aol time warner's compuserve browser, also based on netscape gecko, does not support xpinstall. netscape communicator 4.x does not support xpinstall. what does a plugin consist of? plugins can consist of the following types of files, all of which can be installed via an xpi package: shared libraries (i.e. on
windows, these are dlls, on unix these are *.so files). these files are native code files made with the netscape plugin api. if the plugin is scriptable, then it will also consist of an xpt file. examples would be flash 6r47 on
windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt). if you are developing a plugin and wish to make it scriptable, ...
...And 16 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. after that there's one section for each tool, which lists the shortcuts that you can use within that tool. because access keys are locale-dependent, they're not documented in this page. ...
...each tool, which lists the shortcuts that you can use within that tool. because access keys are locale-dependent, they're not documented in this page. opening and closing tools these shortcuts work in the main browser
window to open the specified tool. the same shortcuts will work to close tools hosted in the toolbox, if the tool is active. for tools like the browser console that open in a new
window, you have to close the
window to close the tool. ...
...use access keys are locale-dependent, they're not documented in this page. opening and closing tools these shortcuts work in the main browser
window to open the specified tool. the same shortcuts will work to close tools hosted in the toolbox, if the tool is active. for tools like the browser console that open in a new
window, you have to close the
window to close the tool. ...
...And 16 more matches
XUL Migration Guide - Archive of obsolete content
if your add-on only needs a little help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future releases to meet important use cases. user interface components xul-based add-ons typically implement a user interface using a combination of two techniques: xul overlays and xul
windows. xul overlays xul overlays are used to modify existing
windows such as the main browser
window. in this way an extension can integrate its user interface into the browser: for example, adding menu items, buttons, and toolbars. because sdk-based extensions are restartless, they can't use xul overlays. to add user interface components to the browser, there are a few different options. in order ...
...different options. in order of complexity, the main options are: the sdk includes modules that implement some basic user interface components including buttons, dialogs, and context menu items. there is a collection of community-developed modules that includes various user interface components. by using the sdk's low-level apis you can directly modify the browser chrome. xul
windows xul
windows are used to define completely new
windows to host user interface elements specific to the add-on. the sdk generally expects you to specify your user interface using html, not xul. however, you can include a chrome.manifest file in your add-on and it will be included in the generated xpi. my-addon/ chrome/ content/ locale/ skin/ chrome.manifest d...
... be included in the generated xpi. my-addon/ chrome/ content/ locale/ skin/ chrome.manifest data/ lib/ package.json there are limitations on what you can do in this manifest file: for example, you can't register overlays, resource: uris, or components. however, you can register a chrome: uri, with a skin and locale, and this means you can include xul
windows in an sdk-based add-on. you can keep the "chrome.manifest" file in your add-on's root directory and create a directory there called "chrome". in that directory you can keep your "content", "locale", and "skin" subdirectories: this allows you to refer to objects in these directories from "chrome.manifest" using a relative path, like "chrome/content". this is provided only as a migration aid, a...
...And 15 more matches
Theme changes in Firefox 2 - Archive of obsolete content
removed from firefox 2. preferences/general.xul - removed from firefox 2. safebrowsing/warning-overlay.xul safebrowsing/browser-protection.css new file containing the overlay that's drawn over the browser when you browse to a suspected phishing site. search/enginemanager.xul enginemanager.css new file containing the ui for the search engine manager
window. toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2. changes to the default theme the table below lists all the changes made in the default theme for firefox 2; you can use this information as a starting point for figuring out the changes you need to make. file description of change browser/bookmarks/addbookmark.css updated to incl...
... browser/dropmark-nav-small.png new file; used as the drop-down menu arrow on the navigation buttons, when using small icons. browser/dropmark-nav.png new file; used as the drop-down menu arrow on the navigation buttons. browser/enginemanager.css new file; css used for the search engine manager. browser/feeds/addfeedreader.css new file; css used for the
window to add a new feed reader. browser/feeds/feedicon.png new file; the rss feed icon. browser/feeds/feedicon16.png new file; the 16x16 pixel version of the rss feed icon. browser/feeds/subscribe.css new file; css used for the
window to subscribe to a news feed. browser/go-rtl.png new file; go icon to use if it's positioned at the left end of the url fie...
...feed icon. browser/feeds/feedicon16.png new file; the 16x16 pixel version of the rss feed icon. browser/feeds/subscribe.css new file; css used for the
window to subscribe to a news feed. browser/go-rtl.png new file; go icon to use if it's positioned at the left end of the url field. browser/preferences/preferences.css file that skins the preferences
window. browser/safebrowsing/browser-protection.css new file; css for the
window that appears to warn the user that a site may be fraudulent, as well as the url bar icon that indicates a site may be fraudulent. browser/safebrowsing/close16x16.png new file; this is the icon displayed in the safe browsing warning
window as a close box for the
window. browser/safebrowsing/d...
...And 15 more matches
Observer Notifications
fter any profile migration. profile-after-change this is fired after all the observers for profile-do-change have been notified. you can register with nsicategorymanager to receive this notification. prior to firefox 3.5, this was available to observers observing the app-startup/xpcom-startup notification. final-ui-startup triggered just before the first
window for the application is displayed. 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. note: this notification is specific to firefox and seamonkey 2.0 applications ...
... indicate interesting things that happen that the browser alerts you to. topic description browser:purge-session-history sent when the sanitizer runs to purge all history and other information. browser:purge-domain-data sent after domain-specific history and other information have been purged. the data value is a string form of the domain. ...
...ic description browser:purge-session-history sent when the sanitizer runs to purge all history and other information. browser:purge-domain-data sent after domain-specific history and other information have been purged. the data value is a string form of the domain. browser-last
window-close-requested sent when the browser wishes to close the last open browser
window. ...
...And 15 more matches
Sidebar - Archive of obsolete content
this page provides several snippets demonstrating how to work with the firefox sidebar. see the creating a firefox sidebar tutorial for step-by-step instructions on creating a firefox sidebar extension. opening and closing the sidebar firefox provides a built-in sidebarui object function defined in browser-sidebar.js. this means that the function is available in all browser
windows. you can use this function to show, hide, or toggle sidebars. // 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 ...
...re 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". web panels sidebar content such as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar". bookmarks with "load this bookmark in sidebar" checked in the properties open in the "viewwebpanelssidebar". a web page can use
window.sidebar to create bookmark with that property. to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element). t...
... such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element). this means you can't directly access the sidebar content from a script referenced from a browser.xul overlay. ...
...And 14 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
some of that will have to be replaced and the rest will need to be loaded differently. ...
...s webpages to detect installed add-ons using the protocol, which is not particularly fantastic (just the static file contents, not any loaded script/data). step 2a: load your jsm from chrome:// now with that preface out of the way, this part is easy: drop support for firefox 3.x if you haven't already, move your jsm files to wherever you've got your chrome mapping to for your xul overlay and/or
windows, import your files from that new chrome mapped path instead of the old resource one, and remove your "resource" line from your chrome.manifest file. it's probably a good idea to do this even if you aren't going fully restartless / extractionless due to the previously mentioned exposure to content of resource mappings. also, drop support for firefox 4 through 9 while you're at it. prior to firef...
...soft, adopted by mozilla and other vendors, and hacked into a swiss army knife of file loading. you can use it in a web page to fetch a file from your server and you can use it in your add-on to fetch a local file from your installation. the name is a vestigial structure that just makes things confusing. it is nonetheless the "correct" and best way to do things. ...
...And 14 more matches
Handling Preferences - Archive of obsolete content
« previousnext » preferences in firefox mozilla applications are highly customizable. preferences are used to store settings and information to change their default behavior. 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. if you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. tip: you can use
window.navigator.platform in your chrome code to figure out the operating system firefox is running on. you can use the hidden dom
window in non-chrome code. firefox loads user preferences fr...
... file to override other settings. lockfile settings: these preferences are stored in a file that usually has the name mozilla.cfg or netscape.cfg. the file may be located on a network. it is intended to be used by an administrator or isp to set settings centrally. in addition, certain preferences may be locked such that users cannot change them. locked preferences are disabled in the preferences
window. firefox exposes its most common high-level preferences through the preferences
window and other parts of its ui. in reality there are thousands of other preferences firefox handles that are not readily available to the user. these are hidden because they are too advanced or obscure for regular users to manage, and because the preferences
window should be as easy to use as possible. to access a...
...eferences. then, create the observer method: observe : function(asubject, atopic, adata) { if ("nspref:changed" == atopic) { let newvalue = asubject.getintpref(adata); // do something. ...
...And 14 more matches
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
la is embedded, the java application can work with xpcom objects. the mozilla class provides several methods to facilitate this, such as getservicemanager, getcomponentmanager, and newlocalfile. in addition to retrieving and calling methods on xpcom objects, javaxpcom allows the java application to pass java class objects to xpcom methods. ...
...lication can work with xpcom objects. the mozilla class provides several methods to facilitate this, such as getservicemanager, getcomponentmanager, and newlocalfile. in addition to retrieving and calling methods on xpcom objects, javaxpcom allows the java application to pass java class objects to xpcom methods. ...
...s. the mozilla class provides several methods to facilitate this, such as getservicemanager, getcomponentmanager, and newlocalfile. in addition to retrieving and calling methods on xpcom objects, javaxpcom allows the java application to pass java class objects to xpcom methods. ...
...And 14 more matches
Eclipse CDT
reenabling "automatically update the index". however, you may find this too disruptive, since re-indexing will then happen very frequently and code assistance can be broken while the index is rebuilding. the alternative is to leave that option disabled and update the index manually as necessary. to update the index manually, use the context menu in the project explorer tab on the left side of the
window. to rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory. to rebuild the entire index (for example when you pull from mozilla-central) select "index > rebuild" on the project root. usage tips below are some of the more useful user tips. (if you're thinking of adding tips, please ...
...ng tips, please first consider how widely useful they'll be before adding to this already lengthy page.) for further documentation see the official eclipse user guide and eclipse cdt user guide. keyboard shortcuts regarding key bindings (keyboard shortcuts), the bindings given below are the defaults. you can change the key bindings by opening the workspace preferences (eclipse > preferences, or
window > preferences) and selecting "general > keys". you can set the scheme to "emacs" or "microsoft visual studio" if that's your thing, or change individual key bindings. when changing individual key bindings, note that bindings are context sensitive and that any changes you make may be ignored if they conflict with existing bindings, or if they are overridden by a binding for a more specific context...
...e current editor view (the editor must be focused first). to tab to another view, use cmd-f7/ctrl-f7. this is useful if you have maximized the editor using ctrl-m and you want to quickly see your search results. for example, without un-maximizing the editor. to side-by-side edit the same file in two different tabs, select the tab of the file that you want to edit, then from the menu bar select "
window > new editor". this will open another tab containing the same file. now simply drag that tab to position it beside, above, or below the original. changes you make in one editor will be immediately reflected in the other. note that the search, call hierarchy, and other tabs have a "pin" button that allows you to open multiple tabs of these type. this is useful if you want to keep your existing se...
...And 14 more matches
nsIWinTaskbar
widget/public/nsiwintaskbar.idlscriptable represents a service that exposes the apis provided by the microsoft
windows taskbar. 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) starting with
windows 7, applications gain some control over their appearance in the taskbar. by default, there is a single taskbar preview per top level
window (excluding pop-ups). this preview is represented by an nsitaskbar
windowpreview object. an application can register its own "tab" previews. these previews automatically hide the corresponding nsitaskbar
windowpreview. these don't have to correspond to tabs within the application; they can vary in size, shape, and location. they don't even have to r...
...warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to crash if used under certain conditions. ...
...warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to crash if used under certain conditions. ...
...And 14 more matches
IDBFactory - Web APIs
you open — that is, create and access — and delete a database with this object, and not directly with idbfactory. note: this feature is available in web workers. methods idbfactory.open the current method to request opening a connection to a database. idbfactory.deletedatabase a method to request the deletion of a database. idbfactory.cmp a method that compares two keys and returns a result indicating which one is greater in value. ...
...thod that returns a list of all available databases, including their names and versions. example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. for a full working example, see our to-do notifications app (view example live.) // in the following line, you should include the prefixes of implementations you want to test. ...
... list of all available databases, including their names and versions. example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. for a full working example, see our to-do notifications app (view example live.) // in the following line, you should include the prefixes of implementations you want to test. ...
...And 14 more matches
Using IndexedDB - Web APIs
can be found on the request object). with these big concepts under our belts, we can get to more concrete stuff. creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should include the prefixes of implementations you want to test. ...
... request object). with these big concepts under our belts, we can get to more concrete stuff. creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should include the prefixes of implementations you want to test. ...
... with these big concepts under our belts, we can get to more concrete stuff. creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should include the prefixes of implementations you want to test. ...
...And 14 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
romeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here. --> </toolbarpalette> <!-- more overlay stuff. --> </overlay> one detail that is easy to overlook is the fact that the toolbarpalette element is outside of the
window element. if you put the toolbarpalette element inside the
window element in your overlay, some weird errors will begin to happen. always set the label and tooltiptext attributes of a toolbarbutton. in the case of a toolbaritem element (discussed later), use the title attribute instead of label. tooltips are very important for users that want to know what a button does before clicking it. sett...
...ore buttons to the toolbar palette. the user can now use the customize dialog to add the buttons to the current firefox toolbars. in most cases this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. keep in mind most users don't know how to customize toolbars in firefox. let's add our own toolbar. this is done in the overlay as well. ...
...he toolbar palette. the user can now use the customize dialog to add the buttons to the current firefox toolbars. in most cases this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. keep in mind most users don't know how to customize toolbars in firefox. let's add our own toolbar. this is done in the overlay as well. ...
...And 13 more matches
Strategies for carrying out testing - Learn web development
ted guesses you could call these "assumptions", or "gut feelings". this is not an accurate, scientific approach, but as someone who has experience with the web industry you'll have a pretty good idea of at least some of the browsers you should test. this can form a good basis for a support chart. for example, if you live in western europe or north america, you will know that a lot of people use
windows and mac desktops/laptops, where the main browsers are chrome, firefox, safari, ie, and edge. you probably want to just test the latest versions of the first three, as these browsers receive regular updates. for edge and ie, you probably want to test the last couple of versions; these should all go in the a grade tier. note: you can only have one version of ie or edge installed on a machine at ...
...e old android stock browser, and chrome and firefox for ios and android. you should ideally test these on both a phone and a tablet, to make sure that responsive designs are working ok. you might also know that a number of people still use ie 9. this is old and less capable, so let's put it in the b grade tier. this gives us the following support chart so far: a grade: chrome and firefox for
windows/mac, safari for mac, edge and ie for
windows (last two versions of each), ios safari for iphone/ipad, android stock browser (last two versions) on phone/tablet, chrome and firefox for android (last two versions) on phone tablet b grade: ie 9 for
windows c grade: n/a if you live somewhere else, or are working on a site that will serve somewhere else (e.g. certain countries, or locales), then ...
...ons that you should probably include as well. you should definitely include accessibility as a grade a testing requirement (we'll cover exactly what you should test in our handling common accessibility problems article) plus you might have other considerations. ...
...And 13 more matches
about:memory
cit calls to heap allocation functions (such as malloc and new) and to non-heap allocations functions (such as mmap and virtualalloc). here is an example for a browser session where tabs were open to cnn.com, techcrunch.com, and arstechnica.com. various sub-trees have been expanded and others collapsed for the sake of presentation. ...
...re tabs were open to cnn.com, techcrunch.com, and arstechnica.com. various sub-trees have been expanded and others collapsed for the sake of presentation. ...
...1%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (23.84%) ++ js-non-
window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────5.82 mb (03.03%) ++ workers/workers(chrome) ├────5.36 mb (02.80%) ++ (16 tiny) ├────4.07 mb (02.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.16 mb (01.12%) ++ xpconnect some expertis...
...And 13 more matches
nsIWebProgressListener
transition through as they are being loaded. these flags are mutually exclusive. for any given request, onstatechange() is called once with the state_start flag, zero or more times with the state_transferring flag or once with the state_redirecting flag, and then finally once with the state_stop flag. note: for document requests, a second state_stop is generated (see the description of state_is_
window for more details). constant value description state_start 0x00000001 this flag indicates the start of a request. this flag is set when a request is initiated. the request is complete when onstatechange() is called for the same request with the state_stop flag set. state_redirecting 0x00000002 this flag indicates that a request is being redirected. the...
...e nsichannel interface and its loadflags attribute includes the nsichannel::load_document_uri flag. a document request does not complete until all requests associated with the loading of its corresponding document have completed. this includes other document requests (for example corresponding to html <iframe> elements). ...
...if activity only occurs in a child nsiwebprogress instance, then this flag will be set to indicate the start and stop of that activity. ...
...And 13 more matches
Plug-in Basics - Plugins
ces applications that range from personal information managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins. with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser
window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page. go to the help m...
...ns. 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 time. if you are browsing a page that has several embedded realaudio clips, for example, the browser will create as many instances of the realplayer plug-in as are needed (though of course playing several realaudio files at the same time would seldom be a good idea). when the user leaves the page or closes the
window, the plug-in instance is deleted. when the last instance of a plug-...
...okup, which means that they are not related to any particular plug-in instance. again, see initialization and destruction for more information about initializing and destructing. the browser calls the plug-in api function npp_new when the instance is created. 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. a plug-in instance is deleted when a user leaves the instance's page or closes its
window; gecko calls the function npp_destroy to inform the plug-in that the instance is being deleted. when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory. gecko calls the function np_shutdown. plug-ins consume no resources (othe...
...And 13 more matches
IDBVersionChangeEvent.newVersion - Web APIs
code snippet, we make a request to open a database, and include handlers for the success and error cases. these events are fired via the custom idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of // implementations you want to test. ...
...ake a request to open a database, and include handlers for the success and error cases. these events are fired via the custom idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of // implementations you want to test. ...
...n a database, and include handlers for the success and error cases. these events are fired via the custom idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of // implementations you want to test. ...
...And 13 more matches
IDBVersionChangeEvent - Web APIs
, and include handlers for the success and error cases. upon a version change (after an upgradedneeded event), the success event will implement the idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of implementations you want to test. ...
...ers for the success and error cases. upon a version change (after an upgradedneeded event), the success event will implement the idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of implementations you want to test. ...
...and error cases. upon a version change (after an upgradedneeded event), the success event will implement the idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of implementations you want to test. ...
...And 13 more matches
Viewport concepts - CSS: Cascading Style Sheets
that is, the part of the document you are viewing. ...
...e size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. content outside the viewport, such as the see also section in this document, is likely to not be visible onscreen until scrolled into view. on larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser
window. on most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen. in fullscreen mode, the viewport is the device screen, the
window is the browser
window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is ...
... in fullscreen mode, the viewport is the device screen, the
window is the browser
window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is currently visible. viewport sizes are mutable the width of the viewport is not always the width of the
window. ...
...And 13 more matches
Event reference
ample, mozilla-specific events are listed so that add-ons can use them to interact with the browser. most common categories resource events event name fired when error a resource failed to load. abort the loading of a resource has been aborted. load a resource and its dependent resources have finished loading. beforeunload the
window, the document and its resources are about to be unloaded. unload the document or a dependent resource is being unloaded. network events event name fired when online the browser has gained access to the network. offline the browser has lost access to the network. focus events event name fired when ...
...events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
...devicemotion deviceorientation orientationchange smartcard events icccardlockerror iccinfochange smartcard-insert smartcard-remove stkcommand stksessionend cardstatechange sms and ussd events delivered received sent ussdreceived frame events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserlocationchange mozbrowserloadend mozbrowserloadstart mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange dom mutation events domattributenamechanged domattrmodified domcharacterdatamodified domcontentloaded domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified touch events touchcancel touchend touchmove touchstart pointer events pointerover pointeren...
...And 13 more matches
Content Scripts - Archive of obsolete content
t in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. you can load multiple scripts by passing an array of strings to either contentscript or contentscriptfile: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: ['document.body.style.border = "5px solid red";', '
window.alert("hi");'] }); }); // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: [data.url("jquery.min.js"), data.url("my-content-script.js")] }); if you do this, the scripts can interact directly with each other, just like scripts loaded by the same web page. you can also use contentscript and...
...th it. "ready": load the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires. at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading. "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires. the default value is "end". note that tab.attach() doesn't accept contentscriptwhen, because it's generally called after the page has loaded. passing configuration options the contentscriptoptions is a json object that is exposed to content scripts as a read-only value under the self.options property: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function...
...end". note that tab.attach() doesn't accept contentscriptwhen, because it's generally called after the page has loaded. passing configuration options the contentscriptoptions is a json object that is exposed to content scripts as a read-only value under the self.options property: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: '
window.alert(self.options.message);', contentscriptoptions: {"message" : "hello world"} }); }); any kind of jsonable value (object, array, string, etc.) can be used here. accessing the dom content scripts can access the dom of a page, of course, just like any scripts that the page has loaded (page scripts). but content scripts are insulated from page scripts: content scripts don't see any ...
...And 12 more matches
widget - Archive of obsolete content
nchored: 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, onclick: function() { // will not be anchored this.panel.show(); } }); see bug 638142. private
windows if your add-on has not opted into private browsing, then your widget will not appear in any private browser
windows. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. examples for conciseness, these examples create their content scripts as strings and use the contentscript pr...
... contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. widget represents a widget object. methods destroy() removes the widget from the add-on bar.
... an event listener with the widget. parameters type : string the type of event to listen for. listener : function the listener function that handles the event. removelistener(type, listener) unregisters an event listener from the widget. parameters type : string the type of event for which listener was registered. listener : function the listener function that was registered. getview(
window) retrieve a widgetview instance of this widget relative to a browser
window. parameters
window : browser
window the browser
window instance to match. returns widgetview : a widgetview instance associated with the browser
window. any changes subsequently applied to this object will only be applied to the widget attached to that
window. properties label the widget's label. read-only. conten...
...And 12 more matches
JavaScript Object Management - Archive of obsolete content
...
...ny javascript object, at any moment you want. this is an odd, but powerful feature that comes in handy at times when things get complicated. for instance, you could replace a method in any object in the firefox chrome, so that it behaves differently than how it normally does. this should be a last resort option, but it is very useful at times. you usually need only one js file to control a xul
window, since the code required is normally not that much. if you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. you can include as many scripts in a xul
window as you need. to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the
window. the load event is fired after the d...
...e code required is normally not that much. if you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. you can include as many scripts in a xul
window as you need. to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the
window. the load event is fired after the dom on the
window has loaded completely, but before it's displayed to the user. this allows you to manipulate and possibly change elements in the
window without the user noticing the changes. /** * controls the browser overlay for the hello world extension. */ 〈namespace〉.browseroverlay = { /** * initializes this object. */ init : function(aevent) { this._stringbundle = document.getelementby...
...And 12 more matches
NPN_SetValue - Archive of obsolete content
the browser of variable information controlled by the plugin. syntax #include <npapi.h> nperror npn_setvalue(npp instance, nppvariable variable, void *value); parameters the function has the following parameters: instance pointer to the plugin instance setting the variable. ...
...ariable information controlled by the plugin. syntax #include <npapi.h> nperror npn_setvalue(npp instance, nppvariable variable, void *value); parameters the function has the following parameters: instance pointer to the plugin instance setting the variable. ...
...nformation controlled by the plugin. syntax #include <npapi.h> nperror npn_setvalue(npp instance, nppvariable variable, void *value); parameters the function has the following parameters: instance pointer to the plugin instance setting the variable. ...
...And 12 more matches
Performance best practices for Firefox front-end engineers
the cost of doing these style calculations is proportional to the number of dom nodes in the document (and the number of styles being applied). it is expected that over time, script will update the dom, requiring us to recalculate styles. normally, the changes to the dom just result in the standard style calculation occurring immediately after the javascript has finished running during the 16ms
window, inside the "style" step. that's the ideal scenario. however, it's possible for script to do things that force multiple style calculations (or style flushes) to occur synchronously during the javascript part of the 16 ms
window. the more of them there are, the more likely they'll exceed the 16ms frame budget. if that happens, some of them will be postponed until the next frame (or possibly multi...
...and avoiding synchronous reflow below). to avoid this: avoid reading style information if you can. if you must read style information, do so at the very beginning of the frame, before any changes have been made to the dom since the last time a style flush occurred. ...
...wever, bug 1434376 has recently landed some chromeonly helpers to the
window binding to make this simpler. if you want to queue up some javascript to run after the next "natural" style and layout flush, try: // suppose we want to get the computed "display" style of some node without // causing a style flush. we could do it this way: async function nodeisdisplaynone(node) { let display = await
window.promisedocumentflushed(() => { // do _not_ under any circumstances write to the dom in one of these // callbacks! return
window.getcomputedstyle(node).display; }); return display == "none"; } see detecting and avoiding synchronous reflow for a more advanced example of getting layout information, and then setting it safely, without causing flushes. promisedocumentflushed is o...
...And 12 more matches
ui/sidebar - Archive of obsolete content
experimental enables you to create sidebars. a sidebar is a vertical strip of user interface real estate for your add-on that's attached to the left-hand side of the browser
window. you specify its content using html, css, and javascript, and the user can show or hide it in the same way they can show or hide the built-in sidebars. usage creating, showing, and hiding sidebars you construct a sidebar object using the sidebar() constructor. once you've done that, you can show the sidebar by calling the sidebar's show() method. if a new
window is opened from a
window that has a sidebar visible, the new
window gets a sidebar, too. you can hide the sidebar by calling its hide() method. called with no arguments, show() and hide() will operate on the currently active
window. from firefox 33 on...
...) constructor. once you've done that, you can show the sidebar by calling the sidebar's show() method. if a new
window is opened from a
window that has a sidebar visible, the new
window gets a sidebar, too. you can hide the sidebar by calling its hide() method. called with no arguments, show() and hide() will operate on the currently active
window. from firefox 33 onwards you can pass a browser
window into these methods, and they will then operate on the specified
window. alternatively, the view->sidebar submenu in firefox will contain a new item which the user can use to show or hide the sidebar: the sidebar generates a show event when it is shown and a hide event when it is hidden. once you've finished using the sidebar you can destroy it by calling its dispose() method. to show what a s...
...ing <script> and <link> tags containing a path relative to the html file itself. <!doctype html> <html> <head> <link href="stuff.css" type="text/css" rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property. this will change the sidebar's content across all
windows. communicating with sidebar scripts you can't directly access your sidebar's content from your main add-on code, but you can send messages between your main add-on code and scripts loaded into your sidebar. on the sidebar end of the conversation, sidebar scripts get a global variable addon that contains a port for sending and receiving messages. on the add-on side, you need to get a worker o...
...And 11 more matches
NPN_GetValue - Archive of obsolete content
npnvariable variable, void *value); parameters this function has the following parameters: instance pointer to the current plug-in instance. variable information the call gets. ...
...ble variable, void *value); parameters this function has the following parameters: instance pointer to the current plug-in instance. variable information the call gets. ...
... *value); parameters this function has the following parameters: instance pointer to the current plug-in instance. variable information the call gets. ...
...And 11 more matches
Command line crash course - Learn web development
...
...applications. macos macos has a system called darwin that sits underneath the graphical user interface. darwin is the unix-like system, which provides the terminal, and access to the low-level tools. macos darwin mostly has parity with unix, certainly good enough to not cause us any worries as we work through this article. the terminal is available on macos at applications/utilities/terminal. ...
...al user interface. darwin is the unix-like system, which provides the terminal, and access to the low-level tools. macos darwin mostly has parity with unix, certainly good enough to not cause us any worries as we work through this article. the terminal is available on macos at applications/utilities/terminal.
windows as with some other programming tools, using the terminal (or command line) on
windows has traditionally not been as simple or easy as on other operating systems. but things are getting better.
windows has traditionally had its own terminal-like program called cmd (“the command prompt”) for a long time, but this definitely doesn’t have parity with unix commands, and is equivalent to the old-style
windows dos prompt. better programs exist for providing a terminal experienc...
...And 11 more matches
Obsolete Build Caveats and Tips
formation, it's best to collect them all here and remove them from the majority happy path documentation. each piece of information should mention the page and the section it originally came from. you can copy in the original text and bold out what has been removed. ...
...3/mozilla 1.9 and earlier can check out the latest source using cvs. in reality, you should probably not need to do this, since that code is very obsolete. this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che7s%28v=vs.110%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on
windows. if you're using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in type and set it to "yes". from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0) release lives in releases/mozilla-2.0. to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of ...
.../mozilla-1.9.1. to get this code, do the following: # pull the mozilla source to the folder 191src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.1/ 191src cd 191src note: starting with gecko 5.0, you can actually build firefox without a .mozconfig file. by default, a similar-to-release build is done. from
windows_sdk_versions visual c++ 9 (vs2008) professional/express download and install the
windows 7 sdk. note that you need service pack 1--for the express edition it is a separate download. visual c++ 8 (vs2005) professional download and install the
windows 7 sdk. install this microsoft hotfix to allow linking to work correctly. visual c++ 7.1 or visual c++ 8 (vs2005) express these versions ...
...And 11 more matches
IME handling guide
ime is a helper application of a user's text input. it handles native key events before or after focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ...
...nsaction (it was called imetexttxn) sets ime selections for representing the clauses of the composition string. when editorbase receives an ecompositionend (dom "compositionend") event, it releases the stored textcomposition instance. nstextframe nstextframe paints ime selections. mozilla::imecontentobserver imecontentobserver observes various changes of a focused editor. when an editor or a
windowless plugin gets focus, an instance is created, starts to observe and notifies widget of ime getting focus. when the editor or
windowless plugin loses focus, it notifies widget of ime losing focus, stops observing everything and is released. this class observes selection changes (caret position changes), text changes of a focused editor and layout changes (by reflow or scroll) of everything in th...
...one or more dom events and/or new reflow. therefore, imecontentobserver only stores which notification should be sent to widget and/or ime. then, mozilla::imecontentobserver::imenotificationsender tries to send the pending notifications when it might become safe to do that. currently, it's tried: after a native event is dispatched from presshell::handleeventinternal() at changing focus from a
windowless plugin when new focused editor receives dom "focus" event the 3rd timing may not be safe actually, but it causes a lot of oranges of automated tests. see also notifications to ime section for the detail of sending notifications. currently, widgetquerycontentevent is handled via imecontentobserver because if it has a cache of selection, it can set reply of equeryselectedtext event only ...
...And 11 more matches
nsIAppStartup
introduced gecko 1.8 inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/toolkit/app-startup;1. ...
...isupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/toolkit/app-startup;1. ...
... in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/toolkit/app-startup;1. ...
...And 11 more matches
nsIWebContentHandlerRegistrar
8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/web-content-handler-registrar;1 as a service: var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); method overview void registercontenthandler(in domstring mimetype, in domstring uri, in domstring title, in nsidom
window content
window) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidom
window content
window) methods registercontenthandler summary of registercontenthandler void registercontenthandler( in domstring mimetype, in domstring uri, in domstring title, in nsidomw...
...w) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidom
window content
window) methods registercontenthandler summary of registercontenthandler void registercontenthandler( in domstring mimetype, in domstring uri, in domstring title, in nsidom
window content
window ); parameters mimetype the desired mime type as a string uri the uri to the handler as a string. title the title of the handler presented to the user as a string. content
window the dom content
window from which the method has been called. registerprotocolhandler summary of registerprotocolhandler void registerprotocolhandler( in domstring protocol, in domstring uri, in domst...
... uri the uri to the handler as a string. ...
...And 11 more matches
page-mod - Archive of obsolete content
fy: one or more scripts to attach. the sdk calls these scripts "content scripts". a pattern that a page's url must match, in order for the script(s) to be attached to that page. ...
...ing, don't use contentscript: if you do, you may have problems getting your add-on approved on amo. instead, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. a page-mod only attaches scripts to documents loaded in tabs. it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden
windows. to stop a page-mod from making any more modifications, call its destroy() method. the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings. contentstylefile lists stylesheets to attach, supplied in separate files. contentscriptoptions defines read-only values accessible t...
...if you are maintaining a list of workers belonging to a page-mod, you can use this event to remove workers that are no longer valid. for example, if you maintain a list of workers attached to a page-mod: var workers = []; var pagemod = require("sdk/page-mod").pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: data.url('pagemod.js'), onattach...
...And 10 more matches
private-browsing - Archive of obsolete content
check whether a given object is private, so an add-on can respect private browsing usage per-
window private browsing private browsing status is a property of an individual browser
window. 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. ...
...rivate
windows are kept open, so the user will typically have both private and non-private
windows open at the same time. ...
...rivate and non-private
windows open at the same time. ...
...And 10 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
roduce the dialog shown in figure 1. this can get annoying. to run the file's scripts without manual confirmation, add the contents of listing 3 to the prefs.js file in the user profile folder. opening test.xul will show the local file url in the location bar. copy and paste this into the appropriate spot in listing 3. note: the location of the user profile will vary depending on your system. ...
...ontents of listing 3 to the prefs.js file in the user profile folder. opening test.xul will show the local file url in the location bar. copy and paste this into the appropriate spot in listing 3. note: the location of the user profile will vary depending on your system. on
windows vista, it will be located at c:\users\username\appdata\roaming\mozilla\firefox\profiles\random number.default\ ; on
windows xp or 2000, it will be c:\documents and settings\username\application data\mozilla\firefox\profiles\random number.default\ ; on linux, it will be ~/.mozilla/firefox/random number.default/ ; on mac os x, it will be ~/library/application support/firefox/profiles/random number.default/ in the interests of security, delete these lines from prefs.js after finishing these tests. note that firefox it...
...hat are used especially frequently. you should be able to get the gist of how xpcom is used by looking at the sample code. you can paste almost all the sample code in this chapter into your existing test.xul file to try it out. feel free to fill in blank spots as you see fit. make sure to change file paths to match your own environment. you can download the source code used in this chapter. get
window while you can use javascript to get child
windows opened from the parent
window, you cannot get dialogs or
windows that have no relation to that
window. to overcome this limitation, nsi
windowmediator makes it possible to access all of firefox's
windows. get active
window one thing that nsi
windowmediator is often used for is to get the active
window. listing 4 shows how to get the active browse...
...And 10 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
xist, you should use the onload event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. ...
... event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. one concrete example is
window.open, which opens a new
window: <script> function doopen
window(){ var my
window =
window.open("about:blank"); my
window.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. y...
... differences in javascript-generating html javascript can, through document.write, generate html on the fly from a string. the main issue here is when javascript, embedded inside an html document (thus, inside an <script> tag), generates html that contains a <script> tag. ...
...And 10 more matches
Tamarin build documentation - Archive of obsolete content
tamarin source versions the following instructions are for obtaining and building the tamarin central source code. for instructions on tamarin tracing, please see tamarin tracing build documentation. supported platforms tamarin currently supports the following operating systems and/or architectures.
windows 32 and 64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm
windows mobile 6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central. active development source resides at tamarin redux. in this document replace instances of tamarin-central with tamarin-redux to operate in the redux repository. use the following command to create a copy of the ...
...der your sdk/ndk top folder. make sure its name is just "openssl". then build as follows: - replace the makefile in the main folder with the one attached to this page. - change the variable android_device in the makefile (near line 65) to point to your sdk/ndk top folder. - find the two instances of "android-ndk" and make sure they match your ndk's name (they should already). - in a terminal
window change to your /openssl folder and run make build_libs to create the necessary 'libcrypto.a' and 'libssl.a' static libraries. alternatively, run make, in which case the process will complete with errors when it tries to create the shared lib crt0.o: $ /android-public/android-ndk/toolchains/arm-eabi-4.4.0/prebuilt/darwin-x86/bin/../lib/gcc/arm-eabi/4.4.0/../../../../arm-eabi/bin/ld: crt0.o: no s...
...(gnu make 3.80 does not work. nor does any other brand of make.) setup: if you normally work in a cygwin mounted place (eg /home/user/...) then you must cd around to the cygdrive path equivalent (eg /cygdrive/c/cygwin/home/user/). setup the shell environment with the following environment variables: # note: the incl...
...And 10 more matches
Menus - Archive of obsolete content
priate locations automatically. there are four elements that a menupopup can be attached to. in each case, the menupopup element is placed as a direct child of the element. the following is a brief summary of these elements, examples of each will be provided later. menu the menu tag is used when placing menus on a menu bar. for example, the file and edit menus along the top of an application
window (or the menubar on the top of screen). this type of menu is usually used for commands that apply to the entire application. commands that don't apply at a given time should be disabled. however, the actual top level menus do not generally change for a given
window. button a menu may be attached to a button by setting the type attribute of the button to 'menu'. instead of creating a standard but...
...it should contain menu elements. menu a label of a menu on a menubar, for instance 'file' or 'tools'. a menu can also be used as the label of a submenu. menupopup a popup containing items to appear on a menu. the menupopup in the example above is a child of the 'file' menu and will appear when the menu label is clicked. menuitem a single item to appear on a menu. when th...
...he example above, the 'file' menu has four menuitems and one menuseparator on it. the menu and each menuitem has a label indicating its purpose. other types of tags should not appear on a menupopup. if you want to create a general purpose popup that isn't a menu, use a panel instead. for this, see panels. the menubar element a menu bar is created by using the xul menubar tag. ...
...And 10 more matches
XPCOM Examples - Archive of obsolete content
« previousnext » this section provides some examples of using xpcom along with some additional interfaces.
window management this example contains rdf datasource that will be seen in the later section. you might skip this example for the time being, except when you have already had that knowledge. 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. the datasource for this is rdf:
window-mediator. ...
...time being, except when you have already had that knowledge. 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. the datasource for this is rdf:
window-mediator. we can use this as in the following example: example 1 : source <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. try this exampl...
...dow"> <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. try this example by opening a number of browser
windows and you'll see that they are all listed on the menu.
window mediator component this is fine for displaying a list of open
windows, but we would like to enhance this so that clicking on the menu item will switch to that
window. this is accomplished by using the
window mediator component. it implements the interface nsi
windowdatasource. the code below shows how to get a component which implements ...
...And 10 more matches
XUL Questions and Answers - Archive of obsolete content
locked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks. a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done. hidechrome="true" doesn’t work on a mac? unfortunately, no simple solution to this was posted. ...
...urity reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks. a scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done. hidechrome="true" doesn’t work on a mac? unfortunately, no simple solution to this was posted. ...
...new
window using "
window.open" and send titlebar=”no” as one of the flags in the 3rd argument. is it possible to have checkbox support for multi column lists? the current issue is a person exploring if it is possible to have checkbox support for multi column lists. the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="test-
window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell ...
...And 10 more matches
Getting started with XULRunner - Archive of obsolete content
he mozilla build system. if you need to change xulrunner itself or integrate it with external binaries you may need to read that article. step 1: download xulrunner you can find a download link on the main xulrunner page here on mdn. since we are not creating any binary xpcom components, we only need to download and install the xulrunner runtime package, not the sdk. the xulrunner download for
windows is a zip file, not a true install. as a developer, i like the idea that xulrunner only needs to be unzipped onto my machine. i am assuming that it doesn’t need to hook into my
windows system and that’s a good thing. it also means that the xulrunner is portable so, if you develop your applications to be portable you could carry them around on a flash drive or sync them in the cloud. the mac ...
...ux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience. note: if you are using firefox build from ubuntuzilla repository, replace /usr/lib/firefox/platform.ini with /opt/firefox/platform.ini. step 2: install xulrunner on
windows, unzip the archive someplace reasonable. i unzipped it to a new c:\program files\xulrunner folder. on the mac, extract the tar.bz2 archive, which contains xulrunner as xul.framework. copy this to the /library/frameworks directory, or another location of your choice. on linux, you only need to unpack the archive if you are using a pre-release xulrunner. in all systems you should unzip the om...
...w can be found in the xulrunner documentation here on mdn in much more detail. hint: skip ahead and download the sample application, you can experiment with it while following this tutorial. you can download the sample application from https://github.com/matthewkastor/xulrunner-examples. please continue reading to learn the "what", "why" and "how" parts of building a xulrunner application. on
windows, i created the root in a new c:\program files\myapp folder, but you can create it wherever you like, using whatever os you like. the same application structure is used on
windows, mac and linux. here is the subfolder structure: + myapp/ | +-+ chrome/ | | | +-+ content/ | | | | | +-- main.xul | | | | | +-- main.js | | | +-- chrome.manifest | +-+ defaults/ | | | +-+ preferences/ | | | +-- pre...
...And 10 more matches
NPEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary represents an event passed by npp_handleevent() to a
windowless plug-in. ...
... « gecko plugin api reference « plug-in side plug-in api summary represents an event passed by npp_handleevent() to a
windowless plug-in. ...
...sents an event passed by npp_handleevent() to a
windowless plug-in. ...
...And 10 more matches
Anatomy of a video game - Game development
called on a strict interval of time, every frame, or only after something else happens. being more specific with the browser about when your function needs to be called allows the browser to optimize when it is called. also, it will probably make your job easier. ...
...frame-by-frame so why attach that function to anything other than the browser's redraw schedule? on the web,
window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops. a callback function must be passed in to it when it is called. that callback function will be executed at a suitable time before the next repaint. here is an example of a simple main loop:
window.main = function () {
window.requestanimationframe( main ); // whatever your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before performing our loop contents. that is not by accident and it is considered best practice. calling the next requestanimationframe early ensures the browser receives ...
...r your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before performing our loop contents. that is not by accident and it is considered best practice. calling the next requestanimationframe early ensures the browser receives it on time to plan accordingly even if your current frame misses its vsync
window. the above chunk of code has two statements. the first statement creates a function as a global variable called main(). this function does some work and also tells the browser to call itself next frame with
window.requestanimationframe(). the second statement calls the main() function, defined in the first statement. because main() is called once in the second statement and every call of it pla...
...And 10 more matches
Plug-in Development Overview - Gecko Plugin API Reference
up the media type, and if it finds a plug-in registered to that type, loads the plug-in software. when it starts up, the browser checks for plug-in modules for the platform and registers them. it determines which plug-ins are installed and which types they support through a combination of user preferences that are private to the browser, the contents of the plug-ins directory, or the registry on
windows. a mime type is made up of a major type (such as application or image) and a minor type, for example, image/jpeg. if you define a new mime type for a plug-in, you must register it with ietf (internet engineering task force). until your new mime type is registered, preface its name with "x-", for example, image/x-nwim. for more information about mime types, see these mime rfcs: rfc-2045: "mul...
...ultipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms. the following sections describe platform-specific discovery and registration: ms
windows unix mac os x ms
windows on
windows, plug-ins are found according to the section how gecko finds plug-ins. to determine the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry. but when the plug-in is loaded from a well-known directory, a different method m...
... the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry. but when the plug-in is loaded from a well-known directory, a different method must be used. in this case to ensure the plug-in file will be loaded, it should have a name in the form of "np*.dll". 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 p...
...And 10 more matches
Accessibility API cross-reference
a part of the main document. application frame n/a application see <div> and <nonstruct> a region that contains mostly site-oriented content, rather than page-specific content. ...
...> containing <toci> elements (which are wrappers for internal hyperlinks in such a table). for an index, use <index> with a <l>(list) inside. no default semantics in html, but semantics and other accessibility features may be provided with aria. see also span n/a n/a n/a <div> <div> but if you need custom semantic structure, use <nonstruct> instead
window that corresponds to an mdi document. in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles ...
...cell in a grid or treegrid. grid a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g. a spreadsheet. gridcell a type of mouse pointer used for resizing
windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a section of the page. in aria, the heading level is expressed with the aria-level attribute. heading <h1> ... <h6> <h1> ... <h6>. <h> is also available but its use is not recommen...
...And 10 more matches
HTTP logging
rs during startup, or you're running on mobile, etc. in that case you can set environment variables *before* you launch firefox. note that this approach winds up logging the whole browser history, so files can get rather large (they compress well :) setting environment variables differs by operating system. don't let the scary-looking command line stuff frighten you off; it's not hard at all!
windows if firefox is already running, exit out of it. open a command prompt. on
windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of
windows, you can hold down the
windows key and press "r". type cmd and press enter, a new command prompt
window with a black background will appear. copy and paste the following lines one at a time into t...
... already running, exit out of it. open a command prompt. on
windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of
windows, you can hold down the
windows key and press "r". type cmd and press enter, a new command prompt
window with a black background will appear. copy and paste the following lines one at a time into the command prompt
window. ...
...on
windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of
windows, you can hold down the
windows key and press "r". type cmd and press enter, a new command prompt
window with a black background will appear. copy and paste the following lines one at a time into the command prompt
window. ...
...And 10 more matches
Overview of Mozilla embedding APIs
of registered xpcom components to be instantiated. the embedding layer consists of several components built on top of xpcom and its services. much of the gecko functionality is exposed through a component called the nswebbrowser. embedding applications can leverage this component to easily access many of gecko's features. each webbrowser instance represents the "client-area" of a typical browser
window. the webbrowser exposes a set of interfaces which allow the embedding application to control activity and respond to changes within this client area. using these interfaces an embedding application can build up its own user interface around a webbrowser instance. public classes the following utility classes are available from the xpcom dll. they provide some basic functionality which should be l...
...ing the class factories used for component creation... contract-id: ns_componentmanager_contractid implemented interfaces: nsicomponentmanager nsiinterfacerequestor requestor interfaces: nsiservicemanager related interfaces: nsifactory nsuriloader the nsuriloader service is responsible for targeting a uri at an appropriate content handler. a content handler may be an existing or new
window, a helper application or the unknown content handler - if no other handler can be found for the content-type. contract-id: ns_uri_loader_contractid implemented interfaces: nsiuriloader related interfaces: nsiuricontentlistener nsunknowncontenttypehandler the unknowncontenttypehandler service is the last resort of the uriloader when no other content handler can be located. if no registered...
...ent_loader_service_contractid implemented interfaces: nsiwebprogress nsidocumentloader related interfaces: nsiwebprogresslistener public components nswebbrowser the nswebbrowser is the main embedding component which gecko exposes. conceptually, each nswebbrowser instance represents a html content area. conceptually, for each document being rendered, gecko creates a container called a dom
window. each webbrowser exposes a tree of dom
windows - representing the frame hierarchy for the current document. as such, access to individual document frames is done via the dom
window interfaces. manipulation of the entire document structure is done via the various webbrowser interfaces. contract-id: ns_webbrowser_contractid implemented interfaces: nsiwebbrowser nsiwebnavigation nsiwebbrowserse...
...And 10 more matches
OS.File for the main thread
llowing snippet obtains the path to file "sessionstore.js", contained in the user's profile directory. let sessionstore = os.path.join(os.constants.path.profiledir, "sessionstore.js"); // under linux, this is generally "$home/.firefox/profiles/$profilename/sessionstore.js" // under macos, this is generally "$home/library/application support/firefox/$profilename/sessionstore.js" // under
windows, this is generally "%appdata%\local\temp\%profilename%"\sessionstore.js // etc. example: determine if a file is a directory the following snippet determines if some path represents a file or a directory: let promise = os.file.stat(somepath); promise = promise.then( function onsuccess(stat) { if (stat.isdir) { // the path represents a directory } else { // the path r...
... be opened for reading. depending on other fields, it may also be opened for writing. write if true, the file will be opened for writing. depending on other fields, it may also be opened for reading. prior to gecko 27, unless create or truncate are set or explicit unixflags are given, the file will be opened for appending on unix/linux. however, the file is not opened for appending on
windows. see bug 924858. starting with gecko 27, you may use the append flag instead. for an example using append see here. truncate | trunc if true, the file will be opened for writing. if the file does not exist, it will be created. if the file exists, its contents will be removed. cannot be used with create. create if true, file will be opened for writing. the file must not exist. if th...
...ntents of mode. you can build these flags from values os.constants.libc.o_*. unixmode (ignored under non-unix platforms) if specified, file creation mode, as per libc function open. if unspecified, files are created with a default mode of 0600 (file is private to the user, the user can read and write). you can build this mode from values os.constants.libc.s_i*. ...
...And 10 more matches
Embedded Dialog API
posing gecko dialogs in embedding applications problem statement an application embedding gecko cannot tightly control its own
windows and still allow gecko to be a fully functional web browser. in any single
window, gecko can be expected to play nicely within its given boundaries. but it must be allowed to create additional
windows at times perhaps unexpected by the containing appliction. 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. part of gecko's embedding api is callbacks into the embedding application for creating new
windows. the complete
windowing portion of the api is large and complex, but it need not be entirely implemented. its simp...
...gecko can use the latter to pose dialogs built from xul. xul dialogs are part of the gecko package; they are the default dialog posing mechanism. ...
...gecko can use the latter to pose dialogs built from xul. xul dialogs are part of the gecko package; they are the default dialog posing mechanism. many embedding applications will find them entirely sufficient. ...
...And 10 more matches
Components.utils.cloneInto
this function provides a safe way to take an object defined in a privileged scope and create a structured clone of it in a less-privileged scope. it returns a reference to the clone: var clonedobject = cloneinto(myobject, target
window); you can then assign the clone to an object in the target scope as an expando property, and scripts running in that scope can access it: target
window.foo = clonedobject; in this way privileged code, such as an add-on, can share an object with less-privileged code like a normal web page script. syntax components.utils.cloneinto(obj, targetscope[, options]); parameters obj : object the object to clone. targetscope : object the object to attach the object to. options : object this optional parameter is an object with the following opt...
...nts.utils.exportfunction. see cloning objects that have functions below. wrapreflectors: a boolean value that determines if objects reflected from c++, such as dom objects, should be cloned. if omitted the default value is false. see cloning objects that contain dom elements below. returns a reference to the cloned object. ...
...that have functions below. wrapreflectors: a boolean value that determines if objects reflected from c++, such as dom objects, should be cloned. if omitted the default value is false. see cloning objects that contain dom elements below. returns a reference to the cloned object. ...
...And 10 more matches
amIWebInstallListener
ed by websites. the default implementation displays a confirmation dialog when add-ons are ready to install and uses the observer service to notify when installations are blocked. ...
...bsites. the default implementation displays a confirmation dialog when add-ons are ready to install and uses the observer service to notify when installations are blocked. ...
...llations are blocked. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean onwebinstallblocked(in nsidom
window a
window, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); void onwebinstalldisabled(in nsidom
window a
window, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); boolean onwebinstallrequested(in nsidom
window a
window, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); note: prior to gecko 8.0, all references to nsidom
window used in this interface were nsidom
windowinternal. methods onwebi...
...And 10 more matches
Index
matching the email, the icon will not appear. if there is a card, but no screenname, the icon will not appear. and finally, if there is no icon, the icon will not appear. the reason this file name scheme was chosen was is this is how netscape 7.0 im stores buddy icons on disk. so if you use nim, and you use buddy icons, this will just work for free. notes: 16 cached compose
window faq seth spitzer (sspitzer@mozilla.org) what is the "cached" compose
window? instead of destroying the mail compose
window on send (or close) just to create a new one the next time, mozilla mail will "cache" the compose
window on send (or close), and use that instead. the downsides are that we have had some bugs, it complicates and bloats the code, and it requires more testing. the...
...l compose
window on send (or close) just to create a new one the next time, mozilla mail will "cache" the compose
window on send (or close), and use that instead. the downsides are that we have had some bugs, it complicates and bloats the code, and it requires more testing. the upside is that is has been a major performance win why did you do this? back 0.9.7, we hit a wall with the compose
window. any new
window performance problems that mozilla has are especially painful in mail compose, as we need to create a new compose
window on every new mail message or reply. but we noticed that the common usage pattern is to compose, send, compose, send, compose send. we decided it would be worth the trouble to cache the compose
window. if the user has this usage pattern, we wouldn't have to...
...dow performance problems that mozilla has are especially painful in mail compose, as we need to create a new compose
window on every new mail message or reply. but we noticed that the common usage pattern is to compose, send, compose, send, compose send. we decided it would be worth the trouble to cache the compose
window. if the user has this usage pattern, we wouldn't have to create a new
window. we could just hide it on send, and then show it on the next compose. if the user opens (but never sends or closes compose
windows), this trick will not apply to them. but this is not a common usage model. how do i test it? on
window and mac, the cached compose
window is on by default. to test it 17 content tabs thunderbird content tabs enable thunderbird to display r...
...And 10 more matches
Plug-in Development Overview - Plugins
up the media type, and if it finds a plug-in registered to that type, loads the plug-in software. when it starts up, the browser checks for plug-in modules for the platform and registers them. it determines which plug-ins are installed and which types they support through a combination of user preferences that are private to the browser, the contents of the plug-ins directory, or the registry on
windows. a mime type is made up of a major type (such as application or image) and a minor type, for example, image/jpeg. if you define a new mime type for a plug-in, you must register it with ietf (internet engineering task force). until your new mime type is registered, preface its name with "x-", for example, image/x-nwim. for more information about mime types, see these mime rfcs: rfc-2045: "mul...
...ultipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms. the following sections describe platform-specific discovery and registration: ms
windows unix mac os x ms
windows on
windows, plug-ins are found according to the section how gecko finds plug-ins. to determine the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry. but when the plug-in is loaded from a well-known directory, a different method m...
... the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry. but when the plug-in is loaded from a well-known directory, a different method must be used. in this case to ensure the plug-in file will be loaded, it should have a name in the form of "np*.dll". 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 p...
...And 10 more matches
URLs - Plugins
pecified items on a gopher server. obsolete since gecko 2.0 http (hypertext transfer protocol) locates resources on the internet. javascript executes javascript code that follows the url. netscape-specific. mailto (electronic mail address) locates the internet mailing address of an individual or service. nethelp displays a nethelp topic in a nethelp
window. browser-specific. news (usenet news) locates usenet news groups or individual usenet articles. nntp (usenet news using nntp access) locates usenet news groups or individual usenet articles; alternate to news. prospero (prospero directory service) locates a resource on a prospero directory server. telnet (reference to interactive sessions) locates a...
...stry. getting urls posting urls getting urls to retrieve a url and display it on a specified target page, use the npn_geturl, npn_geturlnotify, and npp_urlnotify functions. this section describes the methods and procedures used for getting the url and displaying the page. the plug-in uses the npn_geturl function to ask the browser to display data retrieved from a url in a specified target
window or frame, or deliver it to the plug-in instance in a new stream. this is the way that plug-ins provide hyperlinks to other documents or retrieve data from the network. if the browser cannot locate the url and retrieve the data, it does not create a stream for the instance; in this case, the plug-in receives notification of the result. to request a stream and receive notification of the result in...
...ied upon either successful or unsuccessful completion of the request. nperror npn_geturl(npp instance, const char *url, const char *target); the instance parameter represents the current plug-in instance. the url parameter is the url of the request, which can be of any type, including http, ftp, news, or mailto. the target parameter represents the destination where the url will be displayed, a
window or frame. if target refers to the
window or frame containing the plug-in instance, it is destroyed and the plug-in may be unloaded. if the target parameter is set to null, the application creates a new stream and delivers the data to the plug-in instance, through calls to npp_newstream, npp_writeready and npp_write, and npp_destroystream. in general, if a url works in the location box of the nav...
...And 10 more matches
DevTools API - Firefox Developer Tools
ns of page inspector and debugger that may be used currently. introduction the devtools api provides a way to register and access developer tools in firefox. in terms of user interface, each registered tool lives in its own tab (we call one tab a panel). these tabs are located in a box we call a toolbox. a toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own
window (we say that the toolbox is undocked). a toolbox (and all the tools it contains) is linked to a target, which is the object the tools are debugging. a target is usually a web page (a tab), but can be other things (a chrome
window, a remote tab,…). in terms of code, each tool has to provide a tooldefinition object. a definition is a js light object that exposes different information about the t...
...led a toolpanel. the toolpanel is built only when the tool is selected (not when the toolbox is opened). there is no way to "close/destroy" a toolpanel. the only way to close a toolpanel is to close its containing toolbox. all these objects implement the eventemitter interface. api gdevtools the gdevtools api can be used to register new tools, themes and handle toolboxes for different tabs and
windows. to use the gdevtools api from an add-on, it can be imported with following snippet const { gdevtools } = require("resource:///modules/devtools/gdevtools.jsm"); methods registertool(tooldefinition) registers a new tool and adds a tab to each existing toolbox. parameters: tooldefinition {tooldefinition} - an object that contains information about the tool. see tooldefinition for detai...
...target [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given target either by creating a new one or activating an existing one. parameters: target {target} - the target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side,
window, custom. see hosttype for details. hostoptions {object} - an options object passed to the selected host. see hosttype for details. return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded. gettoolbox(target) fetch the toolbox object for the given target. parameters: target {target} - the target the toolbox is deb...
...And 10 more matches
Element.classList - Web APIs
ed. the following polyfill for both classlist and domtokenlist ensures full compliance (coverage) for all standard methods and properties of element.prototype.classlist for ie10-ie11 browsers plus nearly compliant behavior for ie 6-9. check it out: // 1. ...
...ensures full compliance (coverage) for all standard methods and properties of element.prototype.classlist for ie10-ie11 browsers plus nearly compliant behavior for ie 6-9. check it out: // 1. ...
... + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) throw new domexception("failed to execute '"+o+"' on 'domtokenlist': " + "the token provided ('"+v[wsindex]+"') contains html space characters, which are not valid in tokens."); } // 2. ...
...And 10 more matches
EventTarget.addEventListener() - Web APIs
addeventlistener() works by adding a function or an object that implements eventlistener to the list of event listeners for the specified event type on the eventtarget on which it's called. ...
...n do this by using feature detection for each of the options you're interested in. for example, if you want to check for the passive option: let passivesupported = false; try { const options = { get passive() { // this function will be called when the browser // attempts to access the passive property. passivesupported = true; return false; } };
window.addeventlistener("test", null, options);
window.removeeventlistener("test", null, options); } catch(err) { passivesupported = false; } this creates an options object with a getter function for the passive property; the getter sets a flag, passivesupported, to true if it gets called. that means that if the browser checks the value of the passive property on the options object, passivesupport...
... value of this inside a function, called by the code in the attribute value, behaves as per standard rules. this is shown in the following example: <script> function logid() { console.log(this.id); } </script> <table id="my_table" onclick="logid();"><!-- when called, `this` will refer to the global object --> ... </table> the value of this within logid() is a reference to the global object
window (or undefined in the case of strict mode. specifying "this" using bind() the function.prototype.bind() method lets you specify the value that should be used as this for all calls to a given function. this lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. note, however, that you'll need to keep a reference to the l...
...And 10 more matches
Using the Gamepad API - Web APIs
components for rich, interactive game development. technologies like <canvas>, webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks previously requiring native code. the gamepad api is a way for developers and designers to access and use gamepads and other game controllers. the gamepad api introduces new events on the
window object for reading gamepad and controller (hereby referred to as gamepad) state. in addition to these events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page. connecting to a gamepad when a new gamepad is connected to the computer, the focused page ...
...tched to the focused page when the user presses a button or moves an axis. in firefox, gamepads are only exposed to a page when the user interacts with one with the page visible. this helps prevent gamepads being used for fingerprinting the user. once one gamepad has been interacted with, other gamepads that are connected will automatically be visible. you can use gamepadconnected like this:
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property. disconnecting a gamepad when a gamepad is disconnected, and if a page has pre...
...tons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property. disconnecting a gamepad when a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. gamepadconnected), a second event is dispatched to the focused
window, gamepaddisconnected:
window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used. the index property also functions as the index into the array returned by navigato...
...And 10 more matches
IDBFactory.open() - Web APIs
e a idbopendbrequest object on which subsequent events related to this request are fired. exceptions this method may raise a domexception of the following types: exception description typeerror the value of version is zero or a negative number or not a number. ...
... var request =
window.indexeddb.open("todolist", 4); in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes // of implementations you want to test.
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes // of implementations you want to test.
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...And 10 more matches
Using CSS transitions - CSS: Cascading Style Sheets
dth height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size ...
... width height background-color font-size left top transform -webkit-transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size ...
... width height background-color font-size left top transform -webkit-transform color; transition-duration: 2s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-duration: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size ...
...And 10 more matches
content/mod - Archive of obsolete content
experimental provides functions to modify a page content. globals constructors functions attachto(modification,
window) function applies given modification to a given
window. for example, the following code applies a style to a content
window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming
window points to the content page we want to modify attachto(style,
window); parameters modification : object the modification we want to apply to the target. ...
...ontent
window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming
window points to the content page we want to modify attachto(style,
window); parameters modification : object the modification we want to apply to the target.
window : nsidom
window the
window to be modified. detachfrom(modification,
window) function removes attached modification from a given
window. if
window is not specified, modification is removed from all the
windows it's being attached to. ...
...arameters modification : object the modification we want to apply to the target.
window : nsidom
window the
window to be modified. detachfrom(modification,
window) function removes attached modification from a given
window. if
window is not specified, modification is removed from all the
windows it's being attached to. for example, the following code applies and removes a style to a content
window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming
window points to the content page we want to modify attachto(style,
window); // ... ...
...And 9 more matches
Element Positioning - Archive of obsolete content
first two buttons have been given a suitable size to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. the height of the buttons is a suitable size to hold the text. width and height attributes you may need to have more control over the size of an element in a
window. there are a number of features that allow you to control the size of an element. the quick way is to simply add the width and height attributes on an element, much like you might do on an html img tag. an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this. it is not very portable and may not fit in with ...
...large enough to fit the contents. for flexible elements, the calculation is slightly trickier. flexible elements are those that have a flex attribute set to a value greater than 0. recall that flexible elements grow and shrink to fit the available space. their default size is still calculated the same as for inflexible elements. the following example demonstrates this: example 2 : source view <
window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </
window> the
window will initially appear like in the image earlier. the first two buttons will be sized at a suitable default width and the third button will be l...
...pear like in the image earlier. the first two buttons will be sized at a suitable default width and the third button will be larger because it has a longer label. the first button is made flexible and all three elements have been placed inside a box. the width of the box will be set to the initial total width of all three buttons (around 430 pixels in the image). if you increase the width of the
window, elements are checked to see whether they are flexible to fill the blank space that would appear. the first button is the only flexible element, but it will not grow wider. this is because the box that the button is inside is not flexible. an inflexible element never changes size even when space is available, so the button can't grow either. thus, the button won't get wider. the solution is to m...
...And 9 more matches
Localization - Archive of obsolete content
s subdirectory. you would normally have one dtd file (with an extension .dtd) per xul file. if you look in the chrome directory, you should see an archive for your language. (en-us.jar is the default for english.) you might have locale files in multiple languages, for example, us english (en-us) and french (fr). inside these archives, you will find the files that hold the localized text for each
window. the structure of the archives is very similar to the directory structure used for skins. inside the archives, you would place the dtd files in which you declare entities. typically, you will have one dtd file for each xul file, usually with the same filename except with a .dtd extension. so, for the find files dialog, we will need a file called findfile.dtd. for non-installed chrome files, you...
...ave them in utf-8 format (without bom). for more information, see mozilla language packs. once you have created a dtd file for your xul, you will need to add a line to the xul file which indicates that you want to use the dtd file. otherwise, errors will occur as it won't be able to find the entities. to do this, add a line of the following form somewhere near the top of the xul file: <!doctype
window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the url indicated is to be used as a dtd for the file. in this case, we have declared that we want to use the findfile.dtd dtd file. this line is typically placed just before the
window element. you also need to add the locale to the chrome.manifest file, for example: locale findfile en-us locale/ declaring entities t...
...nging the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text strings. the entire xul file is shown below with the changes shown in red. ...
...And 9 more matches
XULRunner tips - Archive of obsolete content
anifest from browser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in browser/fuel/src/makefile.in rebuild... useful chrome urls most of these require branding. ...
...ser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in browser/fuel/src/makefile.in rebuild... useful chrome urls most of these require branding. ...
...there is a working stub. any better suggestion? venkman uses "chrome://communicator/skin/" as an alias for "chrome://global/skin/" and this alias was maintained in the xulrunner toolkit until xulrunner 1.9 was released. when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest add a "skin" line: skin communicator classic/1.0...
...And 9 more matches
Mozilla’s UAAG evaluation report
this time. this document is based on the september 12, 2001 candidate recommendation of uaag 1.0. this may be different from the most recent version, check for updates on the user agent working group home page. look to the "techniques" document for real-world implementation examples of each checkpoint. this uaag evaluation report covers nightly builds of the mozilla web browser itself, running on
windows 2000, as of february 20, 2002. we are claiming to support html 4, css 2, png, jpg and gif. this evaluation does not cover mailnews or composer. there may be accessibility and customizability features not listed here. a very good resource is the customizing document. when filing mozilla bugs based on uaag requirements, please use bug 24413 as the uaag meta bug. checkpoint information (same scaled...
...ommand to toggle audio or video 3.3 toggle animated/blinking text. (p1) p the following line can be added to a user's prefs.js file to control blinking: user_pref("browser.blink_allowed", false); bug 89144 has been filed to expose this pref in the ui. mozilla doesn't support <marquee> by default. 3.4 toggle scripts. (p1) g preferences, advanced, scripts &
windows - enable javascript for when toggled off, we don't notify the user when a page is loaded with scripts 3.5 toggle content refresh. (p1) ni mozilla has no features for toggling refreshes 3.6 toggle redirects. (p2) ni mozilla has no features for toggling redirects 3.7 toggle images. (p2) p our interface for image toggling needs redesign unfortuna...
... el, tr, he, ar, th, ja, zh-cn or zh-tw 4.2 configure font family. (p1) c can be changed through preferences or user style sheet the prefs are at preferences, appearances, fonts 4.3 configure text colors. (p1) vg can be changed through preferences or by editing the prefs.js file the prefs are at preferences, appearances, colors to use any color offered in
windows, the prefs.js file must be edited by hand 4.4 slow multimedia. (p1) ni cannot slow animations 4.5 start, stop, pause, and navigate multimedia. (p1) na 4.6 position captions. (p1) na 4.7 slow other multimedia. (p2) na this is similar to checkpoint 4.4, except that includes animation through style cannot control animation rate of ...
...And 9 more matches
Command line options
arguments must be enclosed in quotation marks (this is noted in the option descriptions below). multiple command line options can be specified. in general, the syntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird:
windows select run from
windows start menu. enter the following command: firefox -profilemanager mac os x go to applications > utilities. open terminal and enter the following command: cd /applications/firefox.app/contents/macos ./firefox -profilemanager if you use firefox nightly, you can enter: cd /applications/firefoxnightly.app/contents/macos ./firefox -profilemanager linux open terminal...
.... do not run profile_dir while running an instance of the application. you can use the -no-remote option to avoid connecting to a running instance. firefox -createprofile "joeluser c:\internet\joelusers-moz-profile" note: profile_dir must not exist and you must not already have a profile called profile_name. -migration start with import wizard. -new-instance open new instance, not a new
window in running instance, which allows multiple copies of application to be open at a time. firefox -new-instance -p "another profile" note: not available for
windows, see bug 855899. -no-remote do not accept or send remote commands. implies -new-instance. firefox -no-remote -p "another profile" note: since firefox 9, this does really mean what its name implies on all platforms, i.e. instan...
...o/profile") or a relative path ("path/to/profile"). note: on mac os x specifying a relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955. browser -browser start with the browser component. firefox and seamonkey only. -foreground make this instance the active application. -new-tab url open url in a new tab. firefox and seamonkey2.x only. -new-
window url open url in a new
window. firefox and seamonkey2.x only. --kiosk url open url full screen without user interface. firefox 71 and later. -preferences open options/preferences
window. firefox and seamonkey2.x only. -private opens firefox in permanent private browsing mode. firefox 3.6 and later only. may not be applicable in older ubuntu for firefox 20 and later, confirmed to work in 14...
...And 9 more matches
Limitations of chrome scripts
dom.ipc.shims.enabledwarnings preference and watching the browser console as you use the add-on. the rest of this page documents patterns that don't work in multiprocess firefox as well as how are shims try to paper over the problem. ...
...shims.enabledwarnings preference and watching the browser console as you use the add-on. the rest of this page documents patterns that don't work in multiprocess firefox as well as how are shims try to paper over the problem. ...
... how are shims try to paper over the problem. for each pattern we've noted: whether a shim exists and what kind of behavior it provides how to update your add-on so you don't need the shim gbrowser.content
window,
window.content... without the shim all apis in the chrome process that provide direct access to content objects will no longer work. ...
...And 9 more matches
Split object
ment the jsextendedclass.outerobject hook, which returns a pointer to the corresponding outer object. outer objects implement the jsextendedclass.innerobject hook. but the association is not fixed. an outer object may be associated with different inner objects at different times. this feature is complicated. programs other than mozilla that embed spidermonkey should avoid using split objects. the
window object split objects were introduced to resolve a problem posed by the
window object. three interrelated requirements on the
window object seemed to conflict. the
window object is the global object for scripts in web pages. firefox has to maintain this for web compatibility. for performance, access to global properties must be fast. there is a glaring difference in the lifetime of th...
...bject split objects were introduced to resolve a problem posed by the
window object. three interrelated requirements on the
window object seemed to conflict. the
window object is the global object for scripts in web pages. firefox has to maintain this for web compatibility. for performance, access to global properties must be fast. there is a glaring difference in the lifetime of the
window object as seen from two different angles. suppose a script in page a, in tab ta, has a reference to the
window object of page b in another tab tb. the
window object for tab tb must persist as the user navigates from page to page in that tab. to the script in page a, the
window must appear to be a single object that moves from page to page. but each web page must load with fresh globals. (the pr...
...other tab tb. the
window object for tab tb must persist as the user navigates from page to page in that tab. to the script in page a, the
window must appear to be a single object that moves from page to page. but each web page must load with fresh globals. (the problem is even a bit subtler than this, since the reference may be direct or indirect. the script in a might have opened tb by calling
window.open, which returns a direct reference to tb's
window. more indirectly, suppose there's a javascript function defined in page b that refers to global variables in page b. if page a gets a reference to that function, then by calling it, it is indirectly accessing tab tb's
window. the function object carries a reference to the
window, via the scope chain. to further complicate matters, a and b are ...
...And 9 more matches
Components.utils.exportFunction
an extension, can share code with less-privileged code like a normal web page script. a function exported from privileged to less-privileged code can be called from the less privileged code's context. the function has access to its surrounding closure just as if it were being called in the privileged context. the exported function does not have to be added to the less privileged code's global
window object: it can be exported to any object in the target scope. exportfunction() is made available as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor. this includes add-on sdk content scripts. to understand what happens if the functions you export accept arguments, see exporting functions that take arguments below. syntax components.utils.exportfun...
...ructor. this includes add-on sdk content scripts. to understand what happens if the functions you export accept arguments, see exporting functions that take arguments below. syntax components.utils.exportfunction(func, targetscope[, options]); parameters func : function the function to export. targetscope : object the object to attach the function to. this does not have to be the global
window object: it could be any other object in the target
window, or an object created by the caller. options : object optional parameter that supplies additional options. the following options are currently defined: defineas: determines the name of the function in targetscope. if this is omitted, you need to assign the return value of exportfunction() to an object in the target scope. allowcallb...
...ged scope as xrays. ...
...And 9 more matches
nsIAccessibleEvent
pports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accessible nsiaccessible the nsiaccessible associated with the event. may return null if no accessible is available. read only. accessibledocument nsiaccessibledocument the nsiaccessibledocument that the event target nsiaccessible resides in. this can be used to get the dom
window, the dom document and the
window handler, among other things. read only. domnode nsidomnode the nsidomnode associated with the event. may return null if accessible for event has been shut down. read only. eventtype unsigned long the type of event, based on the enumerated event values defined in this interface. read only. isfromuserinput boolean returns true if the event was caused by expli...
...ithin a container object has been removed from the selection. event_selection_within 0x8009 0x0015 0x0012 numerous selection changes have occurred within a container object. event_alert 0x0002 0x0016 0x0013 an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. event_foreground 0x0003 0x0017 0x0014 the foreground
window has changed. event_menu_start 0x0018 0x0015 a menu item on the menu bar has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a
window has received mouse capture. event_cap...
...start 0x0018 0x0015 a menu item on the menu bar has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a
window has received mouse capture. event_capture_end 0x001d 0x001a a
window has lost mouse capture. event_movesize_start 0x001e 0x001b a
window is being moved or resized. event_movesize_end 0x001f 0x001c the movement or resizing of a
window has finished. event_contexthelp_start 0x0020 0x001d a
window has entered context-sensitive help mode. event_contexthelp_end 0x0021 0x001e a
window has exited context-sensitive help mode. event_dragdrop_start 0x0022...
...And 9 more matches
Version, UI, and Status Information - Plugins
« previousnext » this chapter describes the functions that allow a plug-in to display a message on the status line, get agent information, and check on the current version of the plug-in api and the browser. displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser
window for updates on the progress of an operation or the url of a link on the page. you can also use the status line to notify the user of plug-in-related information. the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of which the browser shows. in fact, your plug-in interface should be consistent with the rest of the browser in this way. to accomplish t...
...tant represents a feature. the plug-in can compare the npvers constant to the version number. if the version supports the feature, the plug-in can operate according to plan. if not, the plug-in cannot use some functionality. if an essential feature is unavailable, the developer must arrange for alternative behavior, shut down the plug-in, or give the user a chance to decide what to do. ...
.... the plug-in can compare the npvers constant to the version number. if the version supports the feature, the plug-in can operate according to plan. if not, the plug-in cannot use some functionality. if an essential feature is unavailable, the developer must arrange for alternative behavior, shut down the plug-in, or give the user a chance to decide what to do. ...
...And 9 more matches
Advanced animations - Web APIs
(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn with the help of the arc() method. adding velocity now that we have a ball, we are ready to add a basic animation like we have learned in the last chapter of this tutorial. again,
window.requestanimationframe() helps us to control the animation. the ball gets moving by adding a velocity vector to the position. for each frame, we also clear the canvas to remove old circles from prior frames. var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function...
...we need to check if the x and y position of the ball is out of the ca...
...we need to check if the x and y position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. to do so, we add the following c...
...And 9 more matches
Appendix D: Loading Scripts - Archive of obsolete content
exists on firefox 4 and other gecko 2-based platforms, the services in question will have to be manually loaded on other platforms. <script> tags xul script tags are traditionally the primary means of loading scripts for extension developers. these tags are generally inserted into xul overlay files or other xul documents, after which they are automatically loaded into the context of the xul
window in question and executed immediately and synchronously. advantages familiarity: these tags are very similar to the html script tags familiar to most web developers. simplicity: the simple, declarative nature of these tags make them easy to find and understand at a glance. speed: script tags may or may not be loaded from pre-compiled bytecode in the fastload cache (gecko 1.x) or startup cach...
...rce and compiled with each restart. flexibility: script tags provide a means to specify the character set and javascript version of the scripts to be loaded, which many other methods do not. debuggable: development tools support debugging javascript loaded by script tags disadvantages scoping: scripts loaded via script tags share the global scope with all other scripts loaded into the same
window. these tags provide no means to load scripts into a private or otherwise specific scope. speed: even if these scripts are loaded from a cache, only read and compile time are reduced. the scripts still need to execute all of their initialization code and allocate and initialize all of their data structures each time the script is loaded. loading: script loaded via script tags run in partially lo...
...pts still need to execute all of their initialization code and allocate and initialize all of their data structures each time the script is loaded. loading: script loaded via script tags run in partially loaded documents. problems can ensue if the script immediately attempts to access dom nodes. this is easily resolved by deferring the work to a dynamically added onload hander. (a standalone xul
window can use an onload attribute.) example the following overlay will load the script “overlay.js” from the same directory as the overlay file into the
window which it overlays. the script will be read with the utf-8 encoding, based on the encoding of the overlay, and will execute as javascript version 1.8, based on the version specified in the script tag. <?xml version="1.0" encoding="utf-8"?
...And 8 more matches
Venkman Introduction - Archive of obsolete content
on are available from the user interface and from console commands, letting you work in the way you are most accustomed to. the interactive console also allows for execution of arbitrary javascript code. venkman's keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands. on
windows, the javascript debugger compares favorably with visual interdev and other large web development tools. on other platforms, including mac os and unix, it is alone in offering this degree of flexibility, depth, and power in a visual debugging environment. starting the debugger the javascript debugger is automatically pre-installed in mozilla 1.x but must be installed separately in firefox and o...
...ng a hyperlink. if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some
windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman dev...
...rmation about this counter and the data, see item 2.2 in the venkman faq.) when you first start venkman, the basic views are arranged as in the screenshot above—though you can customize the layout and presence of the different views however you want, as we describe in the view customization section below. the scripts that have been loaded by the javascript engine appear in the loaded scripts
window (for more information about how scripts are loaded and accessed in venkman, see "loading scripts into the debugger"). the menubar, toolbar, and all of the views can be collapsed or hidden, giving you a lot of control over the debugging environment. the source code view is empty until you select a script, and the interactive session view starts up with basic startup information. each of the vi...
...And 8 more matches
Popup Menus - Archive of obsolete content
...
...the exact way that a context menu is opened varies on each platform. ...
...the exact way that a context menu is opened varies on each platform. on the macintosh for example, the user can either press the control key and click the mouse button, or hold the mouse button down for a moment. ...
...And 8 more matches
Using Remote XUL - Archive of obsolete content
sed by desktop applications like mozilla but can also be loaded from a web server and rendered inside the content pane of a compatible browser. xul loaded and rendered in this way is called remote xul and can be used for basic functions like web site navigation as well as to build sophisticated web-based applications. [***aw: we should have a screenshot here of a xul document loaded in a content
window***] this tutorial walks you through the process of building xul-based navigation for the mozilla.org web site. after completing the tutorial you should understand how to: create xul documents; serve them from a web server; use cascading style sheets (css) to change their appearance; use javascript to define their behavior. global web site navigation most web sites today have poor global...
...tion. <?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. step 1: a basic xul document the first thing we need to do is create a basic xul document. <?xml version="1.0"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" /> a xul document requires only two entities to be valid, an xml processing instruction on the first line that identifies the file as xml, and a
window element that defines a xul application
window (or in this case web page). the processing instruction is required because xul is an xml-based language, and this instruction te...
...it is analogous to the <html> element in html. ...
...And 8 more matches
Using the Editor from XUL - Archive of obsolete content
ocument loading in this <iframe>, and, when document loading is complete, it instantiates an editor on the loaded document. the <iframe> contents are then editable. note that the <editor> element is really just an <iframe> which takes over some of the task of creating the editor from javascript. editor creation so let's trace through the process of editor creation when bringing up the composer
window. you can find the relevant xul parts in editor.xul, the javascript parts in editor.js, and the xbl binding for the editor element in editor.xml. something, somewhere, tells mozilla to open the composer
window. editor.xul is loaded. in editor.xul, the <
window> tag has an onload handler: onload="editoronload()". that causes the editoronload() javascript function to get executed when the xul i...
...oser
window. editor.xul is loaded. in editor.xul, the <
window> tag has an onload handler: onload="editoronload()". that causes the editoronload() javascript function to get executed when the xul is done loading. the xul contains an <editor> tag, e.g.: <editor type="content-primary" id="content-frame" src="about:blank" flex="1"/> the attribute type="content-primary" identifies this as the
window content element, i.e. that which you get from
window._content. having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css. editoronload() is called. ...
...ntent-primary" id="content-frame" src="about:blank" flex="1"/> the attribute type="content-primary" identifies this as the
window content element, i.e. that which you get from
window._content. having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css. editoronload() is called. it does some getting of
window.arguments (which is a way callers can pass parameters to new
windows -- we use this to get the url to be loaded), then it calls editorstartup(), where the real work happens. it passes two parameters; the first indicates whether we want a plain text or html editor (pass text or html here), and the second is the <iframe> element on which we wish to create the editor. we could either pass documen...
...And 8 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
as we already discussed, a common approach in the past was to use objects to classify browsers by vendor/version. a common type of detection which originally was written to support only netscape navigator 4 and internet explorer 4 might look like: // wrong approach - do not use! if (document.all) { // ie4 height = document.body.offsetheight; } else if (document.layers) { // nn4 height =
window.innerheight; } else { // other height = 0; } with the introduction of the w3c dom, the standard method document.getelementbyid became available in internet explorer 5 and later in netscape 6 (gecko). many web authors decided that the easiest way to add support for netscape gecko was to add another code fork as follows: // wrong approach - do not use! if (document.all) { // ie4 height =...
...e w3c dom, the standard method document.getelementbyid became available in internet explorer 5 and later in netscape 6 (gecko). many web authors decided that the easiest way to add support for netscape gecko was to add another code fork as follows: // wrong approach - do not use! if (document.all) { // ie4 height = document.body.offsetheight; } else if (document.layers) { // nn4 height =
window.innerheight; } else if (document.getelementbyid) { // they think this is gecko // but could be wrong! height =
window.innerheight; } else { // other height = 0; } the approach is incorrect since it assumes that the only other browser besides internet explorer 5+ that implements document.getelementbyid is gecko. this is not true today and will become even less true as more browsers whi...
...the same standards may be introduced in the future. a common problem on the web today is the assumption that the only browsers in the world are netscape navigator and microsoft internet explorer. this ignores the existence of opera as well as the newer handheld devices which are being used to access the web today and in the future. mozilla-based browsers (such as firefox), internet explorer 6 on
windows, and internet explorer 5 for macintosh all support doctype switching. this is a technique where these browsers can be switched from "quirks" mode (which emulates buggy implementations in earlier generation browsers) to standards mode (which more strictly adhers to the standards). for new content, we recommend that you use a doctype which will invoke standards mode in gecko and internet explorer ...
...And 8 more matches
Drawing graphics - Learn web development
emoved 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). canvases with no explicit width and height default to 300 pixels wide by 150 pixels high. ...
...u could add them back in if you wanted, but we will set them using javascript in a below section). canvases with no explicit width and height default to 300 pixels wide by 150 pixels high. now add the following lines of javascript inside the <script> element: const canvas = document.queryselector('.mycanvas'); const width = canvas.width =
window.innerwidth; const height = canvas.height =
window.innerheight; here we have stored a reference to the canvas in the canvas constant. in the second line we set both a new constant width and the canvas' width property equal to
window.innerwidth (which gives us the viewport width). in the third line we set both a new constant height and the canvas' height property equal to
window.innerheight (which gives us the viewport height). so now we have a...
... in the canvas constant. in the second line we set both a new constant width and the canvas' width property equal to
window.innerwidth (which gives us the viewport width). in the third line we set both a new constant height and the canvas' height property equal to
window.innerheight (which gives us the viewport height). so now we have a canvas that fills the entire width and height of the browser
window! you'll also see that we are chaining assignments together with multiple equals signs — this is allowed in javascript, and it is a good technique if you want to make multiple variables all equal to the same value. we wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (for example, if you want to dr...
...And 8 more matches
Mozilla accessibility architecture
s accessibility api module, which provides support for platform accessibility apis. accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of focus. mozilla supports two accessibility apis: microsoft active accessibility (msaa) on
windows and accessibility tool kit (atk) on linux and unix. we do not currently support the carbon accessibility model for apple's os x. please note, the documentation for implementing an msaa server has moved. you may also wish to read gecko info for
windows accessibility vendors, a primer for vendors of 3rd party accessibility software, on how msaa clients can utilize gecko's support. if you're intere...
...c cross-platform accessibility interface nsiaccessible (which provides a text name, enumerated role identifier and a set of state flags) and sometimes additional interfaces. for example, tables support nsiaccessibletable, text supports nsiaccessibletext and edit boxes support nsieditabletext., although this code has been moved into the atk specific directories because it is not currently used in
windows. we will not rule out the possibility of supporting some of the rich atk interfaces on
windows. the toolkit-specific classes then use these xpcom interfaces to gather information about the objects they want to expose, make any necessary changes, and then expose the information using microsoft com on
windows, or through gtk2's atk api's on linux and unix. the assistive technology can then use thi...
.... above: a diagram showing that the msaa tree is a subset of the dom tree. the situation for other accessibility apis is similar. the problem is, what happens if there are dom nodes that the assistive technology vendors wants to know about, which are not exposed? also, what if they want to get dom information, like css rules, tag names and attributes, that msaa's iaccessible does not provide? on
windows, we solve this by supporting an additional interface beyond msaa's iaccesible, for every dom node. queryinterface() can be used to switch between the two interfaces. if there is no msaa node for a dom node, paccessible->queryinterface(iid_iaccessible) will return null. in addition, some vendors had asked us to provide information and support for pieces of text smaller than a text node (i.e. a wo...
...And 8 more matches
Simple Thunderbird build
underbird on older hardware it can take quite a bit of time to compile on slower machines with less ram. good internet connection for the initial source download. build prerequisites depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. ...
... good internet connection for the initial source download. build prerequisites depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. ...
...e instructions for your os and then continue following these build instructions.
windows build prerequisites gnu/linux build prerequisites macos build prerequisites mapi headers on
windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 2017 (
windows sdk 10). you should copy 17 of the 18 header files to a
windows sdk include directory so that the build process will find the files, that is c:\program files (x86)\
windows kits\10\include\10.0.nnnnn.0\shared, where nnnnn is the highest number present on the system. note that the downloaded outlook 2010 mapi header files contain 18 fies, of which only 17 are needed. do not copy mapi.h, it is alre...
...And 8 more matches
nsIAccessibleRole
ssiblerole.idlscriptable this interface defines cross platform (gecko) roles. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) constants constant value description role_nothing 0 used when accessible has no strong defined role. role_titlebar 1 represents a title or caption bar for a
window. it is used by msaa only, supported automatically by ms
windows. role_menubar 2 represents the menu bar (positioned beneath the title bar of a
window) from which menus are selected by the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a spe...
... role_sound 5 represents a system sound, which is associated with various system events. role_cursor 6 represents the system mouse pointer. role_caret 7 represents the system caret. the role is supported for caret. ...
...lected by the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as
windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a
window to resize it. role_sound 5 represents a system sound, which is associated with various system events. role_cursor 6 represents the system mouse pointer. role_caret 7 represents the system caret. the role is supported for caret. role_alert 8 represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire on...
...And 8 more matches
nsIMsgIncomingServer
st changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void clearallvalues(); void cleartemporaryreturnreceiptsfilter(); void closecachedconnections(); void configuretemporaryfilters(in nsimsgfilterlist filterlist); void configuretemporaryreturnreceiptsfilter(in nsimsgfilterlist filterlist); obsolete since gecko 1.8 void displayofflinemsg(in nsimsg
window a
window); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string attr); acstring getcharattribute(in string name); acstring getcharvalue(in string attr); nsilocalfile getfilevalue(in string relpref, in string abspref); ...
...mingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string attr); acstring getcharattribute(in string name); acstring getcharvalue(in string attr); nsilocalfile getfilevalue(in string relpref, in string abspref); nsimsgfilterlist getfilterlist(in nsimsg
window amsg
window); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void getnewmessages(in nsimsgfolder afolder, in nsimsg
window amsg
window, in nsiurllistener aurllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsg
window amsg
window, out bo...
...tener aurllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsg
window amsg
window, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in acstring oldname, in acstring newname); void performbiff(in nsimsg
window amsg
window); void performexpand(in nsimsg
window amsg
window); void removefiles(); void setboolattribute(in string name, in boolean value); void setboolvalue(in string attr, in boolean value); void setcharattribute(in string name, in acstring value); void setcharvalue(in string attr, in acstring value); void setdefaultlocalpath(in nsilocalfile adefaultlocalpath); void setfilevalue(i...
...And 8 more matches
Using the clipboard
o copy data: create an xpcom wrapper for the data which you want to put on the clipboard. this is needed because you can put anything on the clipboard from text to images. create a transferring object. this object can be the component @mozilla.org/widget/transferable;1 which implements the interface nsitransferable. initialize the transferring object with the nsiloadcontext obtained from the
window that is the source of the clipboard data. this ensures that if the copied data comes from a
window in private browsing mode, the clipboard will be cleared when private browsing mode ends. for reading from the clipboard you can call the init method of the transferable with null as nsiloadcontext, but you have to call it. tell the transferring object about the type of data being copied. tell the ...
...oard. first, we need to create an xpcom object to wrap what we want to copy. we'll assume that we want to copy some text. we will use the interface nsisupportsstring which can be used to represent strings (specifically, unicode strings). the following boilerplate utility functions will be used in all later code examples. // import the services module for future use, if we're not in // a browser
window where it's already loaded. components.utils.import('resource://gre/modules/services.jsm'); // create a constructor for the built-in supports-string class. const nssupportsstring = components.constructor("@mozilla.org/supports-string;1", "nsisupportsstring"); function supportsstring(str) { // create an instance of the supports-string class var res = nssupportsstring(); // store the j...
...string(); // store the javascript string that we want to wrap in the new nsisupportsstring object res.data = str; return res; } // create a constructor for the built-in transferable class const nstransferable = components.constructor("@mozilla.org/widget/transferable;1", "nsitransferable"); // create a wrapper to construct an nsitransferable instance and set its source to the given
window, when necessary function transferable(source) { var res = nstransferable(); if ('init' in res) { // when passed a
window object, find a suitable privacy context for it. if (source instanceof ci.nsidom
window) // note: in gecko versions >16, you can import the privatebrowsingutils.jsm module // and use privatebrowsingutils.privacycontextfrom
window(sou...
...And 8 more matches
The JavaScript input interpreter - Firefox Developer Tools
t+enter , enabling you to finish your input. for example, if you type: function foo() { and then enter, the console does not immediately execute the input, but behaves as if you had pressed shift+enter , so you can finish entering the function definition. multi-line mode for multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (
windows/linux) or cmd+b (macos). the multi-line editing pane opens on the left side the of web console. you can enter multiple lines of javascript by default in this mode, pressing enter after each one. to execute the snippet that is currently in the editing pane, click the run button or press ctrl+enter (or cmd+return on macos). the snippet is echoed under the input prompt (in the right-side pane), ...
... of the editing pane to a file. to open a file, press ctrl+o (cmd+o on macos). a file dialog box opens so you can select the file to open. to save the contents of the editing pane, press ctrl+s (cmd+s on macos). a file dialog box opens so you can specify the location to save to. ...
...le to open. to save the contents of the editing pane, press ctrl+s (cmd+s on macos). a file dialog box opens so you can specify the location to save to. to switch back to single-line mode, click the x icon at the top of the multi-line editing pane, or press ctrl+b (
windows/linux) or cmd+b (macos). accessing variables you can access variables defined in the page, both built-in variables like
window and variables added by javascript libraries like jquery: autocomplete the editor has autocomplete: enter the first few letters and a popup appears with possible completions: press enter, tab, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions. console autocomplete suggesti...
...And 8 more matches
Privileged features - Web APIs
this page lists the
windowfeatures parameter of
window.open function that requires chrome-privilege in firefox. this is not for web content. the following features require the chrome-privilege. centerscreen centers the
window in relation to its parent's size and position. minimizable this setting can only apply to dialog
windows; minimizable requires dialog=yes. if minimizable is on, the new dialog
window will have a minimize system command icon in the titlebar and it will be minimizable. any non-dialog
window is always minimizable and minimizable=no will be ignored. dependent if on, the new
window is said to be dependent of its parent
window. a dependent
window closes when its parent
window closes. ...
...
windows; minimizable requires dialog=yes. if minimizable is on, the new dialog
window will have a minimize system command icon in the titlebar and it will be minimizable. any non-dialog
window is always minimizable and minimizable=no will be ignored. dependent if on, the new
window is said to be dependent of its parent
window. a dependent
window closes when its parent
window closes. a dependent
window is minimized on the
windows task bar only when its parent
window is minimized. on
windows platforms, a dependent
window does not show on the task bar. a dependent
window also stays in front of the parent
window. dependent
windows are not implemented on macos x, this option will be ignored. the dependent feature is currently under revision to be removed (bug 214867) in msie 6, the nearest equiv...
...there will be no context menu defined by default and none of the standard keyboard shortcuts will work. 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). ...
...And 8 more matches
panel - Archive of obsolete content
url: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently active browser
window. you can position the panel by passing a position to the panel's constructor or to its show() method. attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/se...
...this is usually the best approach. embedding an iframe in the panel, and changing its document setting the panel's contenturl property. however, doing this will cause any content scripts to be unloaded and then reloaded, so ...
... you can communicate with the script using either the postmessage() api or (preferably, usually) the port api. for example, here's an add-on whose content script intercepts mouse clicks on links inside the panel, and sends the target url to the main add-on code. the content script sends messages using self.port.emit() and the add-on script receives them using panel.port.on(). ...
...And 7 more matches
Setting up an extension development environment - Archive of obsolete content
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. in the following example, the described command starts a new instance of firefox, with a profile called dev; even if an instance of firefox is already running. on ubuntu (and many other linux distributions): /usr/bin/firefox -no-remote -p dev on other distributions of linux/unix: /usr/local/bin/firefox -no-remote -p dev on macos mavericks (10.9) and newer: ...
...and starts a new instance of firefox, with a profile called dev; even if an instance of firefox is already running. on ubuntu (and many other linux distributions): /usr/bin/firefox -no-remote -p dev on other distributions of linux/unix: /usr/local/bin/firefox -no-remote -p dev on macos mavericks (10.9) and newer: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p dev & on
windows: start -> run "%programfiles%\mozilla firefox\firefox.exe" -no-remote -p dev on
windows 64 bit: start -> run "%programfiles(x86)%\mozilla firefox\firefox.exe" -no-remote -p dev to start thunderbird or seamonkey instead of firefox, substitute thunderbird, or seamonkey for the firefox used in our examples. note: you could run firefox using your regular profile while developing. however, you...
...nefits of isolated resources, which we discussed earlier. the parameter -p profilename doesn't imply -no-remote, therefore use them together. 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. download firefox download your desired version of firefox. unpack them in your user home directory, and name folders for easy navigation to firenightly and firedevedition or similar. you do not have to install these unstable versions, if you do not wish. make a symbolic link (also referred to as a shortcut) to the firefo...
...And 7 more matches
sizemode - Archive of obsolete content
« xul reference home sizemode type: one of the values below the state of the
window. it can have one of the following values: maximized the
window is maximized, and occupies the full size of the screen. normal the
window appears in a normal state at the desired size. this attribute is used to save and restore the state of a
window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on maximized
windows). note: when a
window is minimized, the sizemode attribute is not updated. this is done so that if a
window is closed while minimized, its persisted sizemode attribute wouldn't be minimized. ...
... note: prior to gecko 13.0, this did not work on mac os x. ...
... note: prior to gecko 13.0, this did not work on mac os x. ...
...And 7 more matches
XUL Events - Archive of obsolete content
vent reference subpages broadcastthe broadcast event is executed when the attributes of the element (such as a broadcaster) being listened to are changed. the event handler should be placed on an observer.checkboxstatechangethe checkboxstatechange event is executed when the state of a <checkbox> element has changed.closethe close event is executed when a request has been made to close the
window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. this event would be used to update the disabled status of its commands.dommenuitemactivethe dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.dommenu...
...f the user pressed the same key repeatedly). attribute: onkeypress keyup the keyup event is sent to an element that has the focus when a key is released. attribute: onkeyup load this event is sent to the
window after it has been fully loaded. you should place this event handler on the
window element. this event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading. for images, this event does not bubble up the element tree, so it will not conflict with the
window's load event. attribute: onload ...
...is event is sent when the mouse is released on an element. attribute: onmouseup select this event is sent to a listbox or tree when an item is selected. attribute: onselect unload this event is sent to a
window when the
window has closed. this is done after the close event. you should place this event handler on the
window element. attribute: onunload mutation dom events event description domattrmodified this event is sent to...
...And 7 more matches
Code Samples - Archive of obsolete content
r computer, use code like this. change the first line to specify the file that you want to launch. you can launch an executable file or some other file that your operating system knows how to open. note: on operating systems that use backslash characters, double each backslash character. on operating systems that use forward-slash characters, specify the file in the normal way. 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 .getelementbyi...
... .getservice(components.interfaces.nsiuri) uri.spec = url components .classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice) .loadurl(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above. ...
...i) uri.spec = url components .classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice) .loadurl(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above. change the first line to specify: const url = "mailto://" open an application
window to open one of the application's
windows, use code like this. ...
...And 7 more matches
Document Object Model - Archive of obsolete content
ul nodes. when an xul file is loaded, the tags are parsed and converted into a hierarchical document structure of nodes, one for each tag and block of text. the dom structure may be examined and modified using various methods provided for this purpose. specific xul elements also provide additional functions which may be used. each xul file that is loaded will have its own document displayed in a
window or frame. although there is only ever one document associated with a
window at a time, you may load additional documents using various methods. in mozilla, the dom may be accessed and manipulated using javascript. the various dom objects have functions which may be accessed in script, however, it is important to note that the dom is an api that is accessible by javascript. javascript itself is j...
...vides these objects for use. in javascript, there is always a single global object that is always available. you can refer to the properties and methods of the global object without having to qualify them with an object. for example, if the global object has a 'name' property, you can change the name with the code 'name = 7', without having to specify any object to use. in a browser context, the
window is the global object, and the same is also true for xul. naturally, this global object will be different for each
window. each frame will also have a separate
window object. the
window is often referred to using the
window property, although this is optional. sometimes, this is done just to clarify the scope of the method you are referring to. for example, the following two lines which open a ne...
...s the global object, and the same is also true for xul. naturally, this global object will be different for each
window. each frame will also have a separate
window object. the
window is often referred to using the
window property, although this is optional. sometimes, this is done just to clarify the scope of the method you are referring to. 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. in xul, each function you declare will be set as a property of the
window object. for example, the following code will display the text 'message...
...And 7 more matches
XUL Structure - Archive of obsolete content
enhanced privileges. html, xml, and xul each have a different document type. some features may be used in any document type whereas some features are specific to one kind of document. the next few sections describe the basic structure of a chrome package which can be installed into mozilla. however, if you just want to get started building a simple application, you may skip ahead to creating a
window and save this section for later. package organization mozilla is organized such that you can have as many components as you want pre-installed. each extension is something of a standalone component with a separate chrome url. mozilla also has one component for each installed theme and locale. each of these components, or packages, is made up of a set of files that describe the user interface fo...
...t you can have as many components as you want pre-installed. each extension is something of a standalone component with a separate chrome url. mozilla also has one component for each installed theme and locale. each of these components, or packages, is made up of a set of files that describe the user interface for it. for example, the messenger component has descriptions of the mail messages list
window, the composition
window and the address book dialogs. the packages that are provided with mozilla are located within the chrome directory, which is in the directory where you built mozilla. the chrome directory is where you find all the files that describe the user interface used by the mozilla browser, mail client, and other applications. typically, you put all the xul files for an application ...
...hrome url is by creating a package as described in the next few sections. this directory is called 'chrome' probably because it seemed like a convenient name to use in keeping with the chrome packages that are included with mozilla. to further the confusion, there are two other places where the word "chrome" might appear. these are the -chrome command line argument and the chrome modifier to the
window.open() function. neither of these features grant extra privileges; instead they are used to open a new top-level
window without the browser ui such as the menu and toolbar. you will commonly use this feature in more complex xul applications since you wouldn't want the browser ui to exist around your dialog boxes. the files for a package are usually combined into a single jar file. a jar file may...
...And 7 more matches
NPAPI plugin reference - Archive of obsolete content
the articles below describe each of the apis related to npapi plugins. browser-side plug-in api this chapter describes methods in the plug-in api that are provided by the browser; these allow call back to the browser to request information, tell the browser to repaint part of the
window, and so forth. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. np_getmimedescription np_getmimedescription returns a supported mime type list for your plugin. it works on unix (linux) and macos. on
windows you have to define supported mimetypes in the dll resource file. np_getvalue allows the browser to query the plug-in for information. np_initialize provides global initialization for a plug-in. np_port contains in...
... np_shutdown provides global deinitialization for a plug-in. npanycallbackstruct contains information required during embedded mode printing. ...
... np_shutdown provides global deinitialization for a plug-in. npanycallbackstruct contains information required during embedded mode printing. ...
...And 7 more matches
What text editors are available? - Learn web development
es my text editor's look-and-feel matter to me? notice we didn't mention price. obviously, that matters too, but a product's cost has little connection with its quality or capability. there's a big chance you'll find a suitable text editor for free. here are some popular editors: editor licence price os support doc. ...
..., that matters too, but a product's cost has little connection with its quality or capability. there's a big chance you'll find a suitable text editor for free. here are some popular editors: editor licence price os support doc. ...
...ig chance you'll find a suitable text editor for free. here are some popular editors: editor licence price os support doc. ...
...And 7 more matches
Accessible Toolkit Checklist
controls. however, be aware that the wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. you will also need to provide a way for custom and owner drawn controls to easily accessibility api support, as wxwidgets does. there will be custom and owner drawn controls -- there always are. for example, lists of checkboxes are implemented in
windows with images of checked and unchecked checkboxes. owner drawn toolkits , like xul and flash's flex ui framework use few or no native widgets. these toolkits need to have accessibility implemented from the ground up, and get nothing for free in terms of keyboard, api or os-theme support. in this case, adding a complete or even a partial accessibility solution is major work, and w...
...drawn toolkits , like xul and flash's flex ui framework use few or no native widgets. these toolkits need to have accessibility implemented from the ground up, and get nothing for free in terms of keyboard, api or os-theme support. ...
...emented from the ground up, and get nothing for free in terms of keyboard, api or os-theme support. in this case, adding a complete or even a partial accessibility solution is major work, and will require more than one full time person as well as cooperation from
windows assistive technology vendors when parts of your msaa solution isn't working. often these kinds of toolkits don't use a separate
window for each control; in that case remember to generate a unique 32 bit child id for each control so that the msaa event system can call back for the right iaccessible for each event. the checklist this checklist is currently only for microsoft
windows, but should be expanded to include information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welco...
...And 7 more matches
Chrome registration
what is chrome? ...
... what is chrome? ...
... what is chrome? ...
...And 7 more matches
Creating Custom Events That Can Pass Data
code but it will have to be a lot of code because nsdomevent uses a lot of code outside of itself which you, again, cannot access from an extension. this remains true even if you mark you extension code as "internal". dispatching your event in javascript here is how to dispatch your event in javascript. ...
...s from an extension. this remains true even if you mark you extension code as "internal". dispatching your event in javascript here is how to dispatch your event in javascript. ...
..."internal". dispatching your event in javascript here is how to dispatch your event in javascript. ...
...And 7 more matches
Message manager overview
pt. so fundamentally, frame message managers enable chrome code to: load a script into a frame (essentially, a single browser tab) in the content process. these scripts are called "frame scripts". 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. chrome process in the chrome process, there's a hierarchy of frame message managers: the global frame message manager,
window message managers, and browser message managers. global frame message manager description there's a single global frame message manager in the chrome process. this operates on all frames, in all ...
...anager, the script gets loaded separately into every open tab: three times, in the diagram above. similarly, if you send a message using the global frame message manager, it's received by all content tabs, and is then delivered to any frame scripts that are listening for it. ...
...erfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); you can also access it as the mm property of services.jsm, if you are in the parent process. ...
...And 7 more matches
Embedding Tips
embedders may wish to override some of the default service implementations with their own. ...
...interface. call the nsiwebbrowserprint::printpreview() method supplying a print settings object (e.g. that returned from nsiwebbrowserprint::getglobalprintsettings()) that you wish to preview the page with. the nsiwebbrowserprint::printpreviewnavigate() method can be used to step through the pages. when finished with preview mode, call nsiwebbrowserprint::exitprintpreview(). ...
...review() method supplying a print settings object (e.g. that returned from nsiwebbrowserprint::getglobalprintsettings()) that you wish to preview the page with. the nsiwebbrowserprint::printpreviewnavigate() method can be used to step through the pages. when finished with preview mode, call nsiwebbrowserprint::exitprintpreview(). how do i get popup
windows working? implement and register a nsi
windowcreator object with the
window watcher service. ...
...And 7 more matches
Application Translation with Mercurial
d by going to localization status page and click on the page for your language. in the section "applications & sign-offs", you will find different products and branches which are currently in translation. gaia-* denotes branches of firefox os, the operating system for mobile devices. firefox and fx-* denote branches of firefox for desktop, the browser for desktops and notebooks running,
windows, mac os or linux. fennec and fennec-* denote branches of firefox for mobile, the firefox browser for the android operating system. thunderbird and tb-* denote branches of thunderbird, the mail client, newsgroup and feed reader and chat client. the localization of the lightning calendar add-on also takes place on these branches. seamonkey and sea-* denote branches of seamonkey, the suite...
...a.org/firefox/bundles/ the file is not small, but after initially downloading it, you only need to download the latest changes in the future. thunderbird, lightning or seamonkey: download the comm-<branch>.hg file (e.g. comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g. by pressing the
windows key and r on the keyboard or by calling the "run..." command from the
windows "start" button, and then typing cmd and pressing the enter key. launch the installed mozillabuild toolset by launching it with its path, e.g. c:\mozilla\coding\buildtools\mozillabuild\start-shell-msvc2010.bat you can autocomplete the file path after typing a few characters and then pressing the tabulator key. if yo...
...am), and compiling the application likely won't work. you are now in the mozilla development environment which emulates a linux environment. now go to the directory where you want to put the source code. it's highly recommended to put it onto the fastest hard drive in the device. file paths here work starting with a slash (/) followed by the drive letter, and then the directory structure like on
windows, but using slashes (/) instead of backslashes (\). so let's go to c:\mozilla by typing cd /c/mozilla/ create a new directory for the source code: mkdir mozilla-aurora initialize the new directory as new repository: hg init mozilla-aurora go into the new directory: cd mozilla-aurora unpack the source code: hg unbundle /path/to/the/downloaded/mozilla-aurora.hg this can take some ti...
...And 7 more matches
Gecko Roles
« at apis support page this page offers a list of accessible roles used in gecko. role constants are defined in the nsiaccessiblerole interface. role_nothing used when the accessible item doesn't have a strongly defined role. role_titlebar represents a title or caption bar for a
window. used by msaa only, this is supported automatically by microsoft
windows. role_menubar represents the menu bar (positioned beneath the title bar of a
window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interfa...
... role_cursor represents the system mouse pointer. role_caret represents the system caret. ...
...screen on mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interface elements such as
windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a
window to resize it role_sound represents a system sound, which is associated with various system events. role_cursor represents the system mouse pointer. role_caret represents the system caret. role_alert represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire onscreen contents of...
...And 7 more matches
Setting up the Gecko SDK
lopment kit (sdk) used to build the weblock component in this tutorial. the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created. downloading and setting the sdk the gecko sdk provides all of the tools, headers, and libraries that you need to build xpcom components. ...
...the weblock component was built with version 1.4a, which is no longer available. ...
... is 1.8. the weblock component was built with version 1.4a, which is no longer available. you may want to check for newer versions at gecko versions prior to 1.7: http://ftp.mozilla.org/pub/mozi...illa/releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/releases/ once you download the sdk, you can expand it into any convenient location. in this appendix, we set up the
windows gecko sdk in c:\gecko-sdk\. if you choose some other location, remember to adjust the settings described here (e.g., in the building a microsoft visual cpp project section below) to point to this new location. when you extract the sdk, it should have the layout seen below: layout of the extracted sdk the directories represent different modules in the sdk. for example, the headers for networ...
...And 7 more matches
nsIScriptError
ge last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/scripterror;1. to create an instance, use: var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); note: the nsiscripterror2 interface was merged into this interface in gecko 12.0. prior to that release, if you wanted to associate an outer
window with a script error, you had to use nsiscripterror2 instead. that subclass offered the nsiscripterror.initwith
windowid() method for that purpose; that method is now available in this interface, however. method overview void init(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category); ...
..., you had to use nsiscripterror2 instead. that subclass offered the nsiscripterror.initwith
windowid() method for that purpose; that method is now available in this interface, however. ...
...read only. columnnumber pruint32 the column number where the error occurred. this is used to draw the arrow pointing to the problem character. read only. errormess...
...And 7 more matches
nsITextInputProcessor
therefore they sometimes caused impossible scenarios in automated tests (what's tested with such events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch events with wrong rules. for sol...
...t input events synthesizer and manages its composition and modifier state 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) the motivation of this interface is to provide better api than nsidom
windowutils to dispatch key events and create, modify, and commit composition in higher level. nsidom
windowutils has provided the methods which dispatched keyboard events and composition events almost directly. therefore they sometimes caused impossible scenarios in automated tests (what's tested with such events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch events with wrong rules. for solving that issue, methods of this interface have been designed for performing a key operati...
...ge. you can create an instance of this interface with the following code: var tip = components.classes["@mozilla.org/text-input-processor;1"]. createinstance(components.interfaces.nsitextinputprocessor); next, you need to get the rights to create composition or dispatch keyboard events with begininputtransaction() or begininputtransactionfortests(): if (!tip.begininputtransaction(
window, callback)) { return; } if begininputtransaction() or begininputtransactionfortests() returns false, it means that another instance of nsitextinputprocessor has composition on the
window or is dispatching an event. in this case, other instances cannot create composition nor dispatch keyboard events on the
window. the second argument, callback, should be an object which implements nsitextinpu...
...And 7 more matches
nsIWebBrowserChrome
embedding/browser/webbrowser/nsiwebbrowserchrome.idlscriptable corresponds to the top-level, outermost
window containing an embedded gecko web browser. inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowser
window(); void exitmodaleventloop(in nsresult astatus); boolean is
windowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome. the implementation should reflect the value of this attribute by hiding or showing its chrome appropriately. webbrowser nsiwebbro...
...s if it had created the webbrowser itself. this includes positioning setting up listeners etc. constants constant value description status_script 1 flag for setstatus() status_script_default 2 flag for setstatus() status_link 3 flag for setstatus() chrome_default 1 value for the chromeflags attribute. chrome_
window_borders 2 value for the chromeflags attribute. chrome_
window_close 4 value for the chromeflags attribute. chrome_
window_resize 8 value for the chromeflags attribute. chrome_menubar 16 value for the chromeflags attribute. chrome_toolbar 32 value for the chromeflags attribute. chrome_locationbar 64 value for the chrome...
...value for the chromeflags attribute. chrome_personal_toolbar 256 value for the chromeflags attribute. chrome_scrollbars 512 value for the chromeflags attribute. chrome_titlebar 1024 value for the chromeflags attribute. chrome_extra 2048 value for the chromeflags attribute. chrome_with_size 4096 specifically for use with nsi
windowcreator. chrome_with_position 8192 specifically for use with nsi
windowcreator. chrome_
window_min 16384 represent special cases. chrome_
window_popup 32768 represent special cases. chrome_
window_raised 33554432 represent special cases. chrome_
window_lowered 67108864 represent special cases. chrome_center_screen 13...
...And 7 more matches
Xray vision
bility to access content objects can be a security risk for chrome code. javascript's a highly malleable language. scripts running in web pages can add extra properties to dom objects (also known as expando properties) and even redefine standard dom objects to do something unexpected. if chrome code relies on such modified objects, it can be tricked into doing things it shouldn't. for example:
window.confirm() is a dom api that's supposed to ask the user to confirm an action, and return a boolean depending on whether they clicked "ok" or "cancel". a web page could redefine it to return true:
window.confirm = function() { return true; } any privileged code calling this function and expecting its result to represent user confirmation would be deceived. this would be very naive, of course, b...
...e can cause security problems. this is the problem that xray vision is designed to solve. when a script accesses an object using xray vision it sees only the native version of the object. any expandos are invisible, and if any properties of the object have been redefined, it sees the original implementation, not the redefined version. so in the example above, chrome code calling the content's
window.confirm() would get the original version of confirm(), not the redefined version. it's worth emphasizing that even if content tricks chrome into running some unexpected code, that code does not run with chrome privileges. so this is not a straightforward privilege escalation attack, although it might lead to one if the chrome code is sufficiently confused. how you get xray vision privileged ...
... so this is not a straightforward privilege escalation attack, although it might lead to one if the chrome code is sufficiently confused. how you get xray vision privileged code automatically gets xray vision whenever it accesses objects belonging to less-privileged code. so when chrome code accesses content objects, it sees them with xray vision: // chrome code var transfer = gbrowser.content
window.confirm("transfer all my money?"); // calls the native implementation note that using
window.confirm() would be a terrible way to implement a security policy, and is only shown here to illustrate how xray vision works. waiving xray vision xray vision is a kind of security heuristic, designed to make most common operations on untrusted objects simple and safe. however, there are some operatio...
...And 7 more matches
Using tab-modal prompts
note: this part of the documentation is outdated. the updated prompt documentation can be found in the firefox source docs. prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), prompts (that is, alerts and other modal prompts) were
window modal. that is, when an alert occurred, it blocked the user interface on all tabs in the
window until the user dismissed the prompt.
window-modal alert. gecko 2.0 introduces tab modal prompts, which only block the tab with which they're associated. ...
...o 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), prompts (that is, alerts and other modal prompts) were
window modal. that is, when an alert occurred, it blocked the user interface on all tabs in the
window until the user dismissed the prompt.
window-modal alert. gecko 2.0 introduces tab modal prompts, which only block the tab with which they're associated. only the
window.alert() method gets this by default; you get this by default. tab-modal alert. disabling tab-modal prompts you can disable tab-modal prompts and get back
window-modal prompts by setting the prompts.tab_modal.enabled preference to false. using tab-modal prompts from chrome code currently, nsiprompt defaults to using
window-modal prompts. you can force a prompt to be t...
...ou get this by default. tab-modal alert. disabling tab-modal prompts you can disable tab-modal prompts and get back
window-modal prompts by setting the prompts.tab_modal.enabled preference to false. using tab-modal prompts from chrome code currently, nsiprompt defaults to using
window-modal prompts. ...
...And 7 more matches
Basic animations - Web APIs
s directly or by calling custom functions. in normal circumstances, we only see these results appear on the canvas when the script finishes executing. for instance, it isn't possible to do an animation from within a for loop. that means we need a way to execute our drawing functions over a period of time. there are two ways to control an animation like this. scheduled updates first there's the
window.setinterval(),
window.settimeout(), and
window.requestanimationframe() functions, which can be used to call a specific function over a set period of time. setinterval(function, delay) starts repeatedly executing the function specified by function every delay milliseconds. settimeout(function, delay) executes the function specified by function in delay milliseconds. requestanimationframe(ca...
...on before the next repaint. if you don't want any user interaction you can use the setinterval() function which repeatedly executes the supplied code. if we wanted to make a game, we could use keyboard or mouse events to control the animation and use settimeout(). by setting eventlisteners, we catch any user interaction and execute our animation functions. in the examples below, we'll use the
window.requestanimationframe() method to control the animation. the requestanimationframe method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. the number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. for more information about the animation loop, especi...
...zone. an animated solar system this example animates a small model of our solar system. ...
...And 7 more matches
HTMLBodyElement - Web APIs
htmlbodyelement.alink is a domstring that represents the color of active hyperlinks. htmlbodyelement.background is a domstring that represents the description of the location of the background image resource. note that this is not an uri, though some older version of some browsers do expect it. htmlbodyelement.bgcolor is a domstring that represents the background color...
...that represents the background color for the document. htmlbodyelement.link is a domstring that represents the color of unvisited links. htmlbodyelement.text is a domstring that represents the foreground color of text. htmlbodyelement.vlink is a domstring that represents the color of visited links. methods no specific methods; inherits methods from its parent, htmlelement, and from
windoweventhandlers. event handlers no specific event handlers; inherits event handlers from its parent, htmlelement and from
windoweventhandlers.
windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised. ...
...eventhandlers. event handlers no specific event handlers; inherits event handlers from its parent, htmlelement and from
windoweventhandlers.
windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised.
windoweventhandlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised.
windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised. ...
...And 7 more matches
LocalFileSystem - Web APIs
the argument of a successful callback is the filesystem object, which has two properties: the name and root of the file system. you can call the method more than once if you want to create two file systems: one that's temporary and one that's persistent. ...
...the argument of a successful callback is the filesystem object, which has two properties: the name and root of the file system. you can call the method more than once if you want to create two file systems: one that's temporary and one that's persistent. ...
...tically granted without any user permission, but it can be expunged by the browser at any time. to use persistent storage with the file system api, chrome exposes a requestquota api. so to request storage, you need to do something like the following: var requestedbytes = 1024*1024*10; // 10mb navigator.webkitpersistentstorage.requestquota ( requestedbytes, function(grantedbytes) {
window.requestfilesystem(persistent, grantedbytes, oninitfs, errorhandler); }, function(e) { console.log('error', e); } ); your user must grant your app permission to store data locally before your app can use persistent storage. once your user grants it, you don't need to call requestquota() again. subsequent calls are a noop. another api, the quota management api, lets you query an origin's cu...
...And 7 more matches
SubtleCrypto.exportKey() - Web APIs
n format. typeerror raised when trying to use an invalid format. examples note: you can try the working examples out on github. raw export this example exports an aes key as an arraybuffer containing the bytes for the key. see the complete code on github. /* export the given key and write it into the "exported-key" space. ...
...ync function exportcryptokey(key) { const exported = await
window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button. */
window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object. the exported key is then pem-encoded. see the c...
...e the complete code on github. /* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space. ...
...And 7 more matches
Printing - Developer guides
a queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred. you can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process). ...
...ut detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred. you can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process). ...
...d. you can use this to adjust the user interface presented during printing (such as by displaying or hiding user interface elements during the print process). note: you can also use
window.onbeforeprint and
window.onafterprint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred. examples here are some common examples. ...
...And 7 more matches
Communicating With Other Scripts - Archive of obsolete content
th each other: if two different matching pages are loaded, content scripts attached to page a cannot interact with those attached to page b. if an add-on loads two or more content scripts into the same page, or panel, using two different method (e.g. a page-mod and a context-menu) they can directly communicate by dispatching and listening for customevents on dom objects they can access (e.g. the
window object). this is true as long as both context scripts have direct access to the same dom objects. the web content has no access to objects created by the content script, unless the content script explicitly makes them available. for more discussion and an example please see content scripts: communicating with the add-on: content script to content script. page scripts if a page includes its o...
... content script to content script. page scripts if a page includes its own scripts using <script> tags, either embedded in the page or linked to it using the src attribute, there are a couple of ways a content script can communicate with it: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox 31 code in content scripts can't use
window to access postmessage() and addeventlistener() and instead must use document.defaultview. see the section below on using postmessage() before firefox 31. you can communicate between the content script and page scripts using
window.postmessage(). messaging from content script to page script suppose we have a page called "listen.html" hosted at "my-domain.org", and we want to send messages from...
... to send messages from the add-on to a script embedded in that page. ...
...And 6 more matches
Creating Reusable Modules - Archive of obsolete content
these operations we'll use xpcom interfaces. file picker to let the user select a file we'll use nsifilepicker. the documentation 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").getmostrecentbrowser
window(); 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. note that you usually won't // need to work with t...
...// 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.finish(false); // convert the binary hash data to a hex string. ...
...omstream 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.finish(false); // convert the binary hash data to a hex string. ...
...And 6 more matches
Dialogs and Prompts - Archive of obsolete content
this will: handle a few keyboard events (enter/esc and more), which is good for keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). ...
...this will: handle a few keyboard events (enter/esc and more), which is good for keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). ...
...on dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> element bug 284776. the possible values for the attribute are the names of buttons listed above, and the default is "accept", for compatibility with previous versions. using <dialogheader> you can use the dialogheader element to add "headers" to
windows. to get an idea of what it looks like, open options (or preferences) dialog in firefox or thunderbird (v1.0 and earlier only). the header to the right of the sections buttons is made with <dialogheader>: <dialogheader title="general" description="whatever"/> note, that you should only use this element in a <dialog>, because otherwise it may be not styled properly. (although it seems to work in...
...And 6 more matches
JavaScript Daemons Management - Archive of obsolete content
******** * daemon is now ready! * *******************************/ /******************************* * polyfills * *******************************/ /*\ |*| |*| ie-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html5 standard syntax). ...
...********************/ /******************************* * polyfills * *******************************/ /*\ |*| |*| ie-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html5 standard syntax). ...
...lyfills * *******************************/ /*\ |*| |*| ie-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html5 standard syntax). ...
...And 6 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
s not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox. ...
...en different chrome urls as compared to firefox. ...
...menu_view_popup menu_view_popup view menu popup - gopopup gopopup go menu popup placespopup - - history menu popup bookmarksmenupopup menu_bookmarkspopup menu_bookmarkspopup bookmarks menu popup menu_toolspopup taskpopup taskpopup tools menu popup -
windowpopup
windowpopup
window menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image popup="myext-menu"/> </hbox> <
window id="main-
window"> <menupopup id=...
...And 6 more matches
Creating XPI Installer Modules - Archive of obsolete content
the user. creating a new package the package described in this section is a very simple one, but it uses the new packaging scheme and the chrome registry to make itself a piece of self-contained and redistributable software. once you have created a package like the one described here, mozilla users can download and install it in a single step. ...
... the one described here, mozilla users can download and install it in a single step. the barley package the barley package is a simple xul
window with a couple of buttons and an image element. one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js. since we are not updating the mozilla ui to provide special access to this
window (e.g., an item in the tasks menu or elsewhere), the measure of the success of the installation of the barley package is that the user can, as before, invoke our software by using a special startup option: mozilla -chrome chrome://barley/content this option tells mozilla to load a chrome other than the default, which is the main browser
window. for this option to work, the designated chrome must ...
...escribed here by downloading the barley xpi file and using a zip unarchiver[zip] to open it. all of the resources described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. ...
...And 6 more matches
Using Spacers - Archive of obsolete content
has a different display. some users may have larger displays with higher resolutions and others may have lower resolutions. in addition, different platforms may have special requirements on the user interface. if adding support for multiple languages, the text for one language may require more room than another. ...
... platforms and languages usually have their
windows laid out with lots of space to allow for this. some platforms and user interface toolkits provide components that are smart enough to resize and re-position themselves to fit the needs of the user. (java uses layout managers for example.) xul provides the capability for elements to position and resize automatically. as we've seen, the find files
window has appeared in a size that will fit the elements inside it. each time we add something, the
window gets bigger. xul uses a layout system called the 'box model'. we'll talk more about this in the next section but it essentially allows you to divide a
window into a series of boxes that hold elements. the boxes will be positioned and resized based on specifications that you can define. for now, jus...
... a size that will fit the elements inside it. each time we add something, the
window gets bigger. xul uses a layout system called the 'box model'. we'll talk more about this in the next section but it essentially allows you to divide a
window into a series of boxes that hold elements. the boxes will be positioned and resized based on specifications that you can define. for now, just know that the
window element is a type of box. before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer. a spacer is very simple and only requires one attribute, which will be explained in a moment. the simplest spacer looks like the following: <spacer flex="1"/> a spacer is used to place blank space into a
window. its most useful ability is that it can grow or...
...And 6 more matches
Extentsions FAQ - Archive of obsolete content
write an xpcom component in c++ - it will talk to the com component and will be accessible to js code via xpconnect. how to customizes toolbar button to coexist in a toolbar palette and status bar? option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you put toolbar buttons at either end of the status-bar. just drag them there from the toolbar customisation
window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process
windows messages. use wm_copydata how to creating an extension that can replace html code on a specific page that does not use greasemonkey? var newnode = document.createelement(" ... html content here...
...etting an extension to process
windows messages. use wm_copydata how to creating an extension that can replace html code on a specific page that does not use greasemonkey? var newnode = document.createelement(" ... html content here ... "); var replaceme = document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the
window that can be moved to anywhere in the
window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <
window ...> <stack flex="1"> <image top="40" left="80"/> <vbox> other content here </vbox> </stack> </
window> the only restriction is that your image can't overlap th...
...there are workarounds to this restriction by messing around with overflow or negative margins but i forgot offhand how to do that. ...
...And 6 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
er glossary, navigation a web browser or browser is a program that retrieves and displays pages from the web, and lets users access further pages through hyperlinks. a browser is the most familiar type of user agent. 43 browsing context glossary a browsing context is the environment a browser displays a document. in modern browsers, it usually is a tab, but can be a
window or even only parts of a page, like a frame or an iframe. 44 bézier curve bézier curve, glossary, graphics, reference a bézier curve (pronounced [bezje]) is a mathematically described curve used in computer graphics and animation. in vector images, they are used to model smooth curves that can be scaled indefinitely. 45 cdn glossary, infrastructure a cd...
... b2g, boot2gecko, firefox os, glossary, infrastructure, intro firefox os is mozilla's mobile operating system, based on linux and firefox's powerful gecko rendering engine. firefox os consists mainly of gaia, gecko, and gonk. 146 first cpu idle glossary, lighthouse, performance, web performance first cpu idle measures when a page is minimally interactive, or when the
window is quiet enough to handle user input. it is a non-standard google web performance metric. generally, it occurs when most, but not necessarily all visible ui elements are interactive, and the user interface responds, on average, to most user input within 50ms. it is also known as first interactive. 147 first meaningful paint glossary, reference, web performance first meaningfu...
...rst interacts with your site (i.e. when they click a link, tap on a button, or use a custom, javascript-powered control) to the time when the browser is actually able to respond to that interaction. 150 first interactive glossary, lighthouse, web performance first interactive, also known as first cpu idle, is a non-standard web performance metric that measures when the user's
window is quiet enough to handle user input, or what is termed as minimally interactive. 151 first paint beginner, glossary, performance, web performance first paint, part of the paint timing api, is the time between navigation and when the browser renders the first pixels to the screen, 152 first-class function codingscripting, glossary, javascript a programmi...
...And 6 more matches
Manipulating documents - Learn web development
information, and log into websites as if it were you? despite the limitations, web apis still give us access to a lot of functionality that enable us to do a great many things with web pages. ...
...e us access to a lot of functionality that enable us to do a great many things with web pages. there are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the
window is the browser tab that a web page is loaded into; this is represented in javascript by the
window object. using methods available on this object you can do things like return the
window's size (see
window.innerwidth and
window.innerheight), manipulate the document loaded into that
window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current
window, and more. the navigator represents the...
...you can use this object to return and manipulate information on the html and css that comprises the document, for example get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether. ...
...And 6 more matches
Mozilla's Section 508 Compliance
here is a detailed list of section 508 bugs in mozilla's seamonkey application suite. some of them are fairly minor. the following is provided for informational purposes only and is not a legally binding voluntary product accessibility template (vpat). here are the section 508 requirements and how far along mozilla seamonkey rv1.8a4 is with each one: requirement
windows linux/unix mac os requirement
windows linux/unix mac os (a) when software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually. mostly comple...
...available to the product developer. complete. (c) a well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. the focus shall be programmatically exposed so that assistive technology can track focus and focus changes. complete. we expose focus programmatically via msaa (
windows) and atk (linux/unix). incomplete, we show focus but need to expose it programmatically by supporting carbon/cocoa accessibility. (d) sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. when an image represents a program element, the information conveyed by the i...
... (d) sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. when an image represents a program element, the information conveyed by the image must also be available in text. complete. we expose this information to assistive technology via microsoft active accessibility (msaa) (
windows) and accessibility toolkit (atk) (linux/unix). incomplete. no development efforts have made made to utilize cocoa or carbon accessibility apis. (e) when bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance. complete. ...
...And 6 more matches
Old Thunderbird build
n older hardware it can take quite a bit of time to compile on slower machines with less ram. good internet connection for the initial source download. build prerequisites depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. to build on
windows, please read the prerequisites so you don't skip preparing the mapi headers needed to compile thunderbird.
windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites get the source note: on
windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings"). you can pick ...
... note: parts of the build process also have problems when the source code is in a directory where the path is long (nested many levels deep). ...
... deep). on linux, this can manifest as problems setting up the virtualenv for running tests (failure to install pip or virtualenv because of os access denied errors, where access is denied not because of permission problems, but because the paths being accessed have been truncated, and so do not exist). having the source deep in a filesystem hierarchy can also cause problems with pymake builds on
windows. if you run into seemingly arbitrary problems in building and the source is deeply nested, try moving it close to the root of your machine and re-building. get the latest source code from mozilla's comm-central mercurial code repository: hg clone https://hg.mozilla.org/comm-central then, get all the repositories it depends on. the comm-central repository includes a script to do just that. th...
...And 6 more matches
The Firefox codebase: CSS Guidelines
. this makes it more obvious that the padding is symmetrical (so rtl won't be an issue). note: see css logical properties and values for more information. testing to test for rtl layouts, you can go to about:config and set intl.uidirection to -1. ...
...rical (so rtl won't be an issue). note: see css logical properties and values for more information. testing to test for rtl layouts, you can go to about:config and set intl.uidirection to -1. ...
...'t be an issue). note: see css logical properties and values for more information. testing to test for rtl layouts, you can go to about:config and set intl.uidirection to -1. ...
...And 6 more matches
Optimizing Applications For NSPR
trappings. win16 uses co-operative non-preemptive dispatching for its own processes. this means that when the application using nspr is dispatched, a thread within that application will run until that thread voluntarily gives up control to another thread within the process. ...
... win16 uses co-operative non-preemptive dispatching for its own processes. this means that when the application using nspr is dispatched, a thread within that application will run until that thread voluntarily gives up control to another thread within the process. further, the process in which the threads are being emulated will run until it invokes some function that gives control to
windows. ...
...ts own processes. this means that when the application using nspr is dispatched, a thread within that application will run until that thread voluntarily gives up control to another thread within the process. further, the process in which the threads are being emulated will run until it invokes some function that gives control to
windows.
windows 3.1 applications always run on a stack provided by
windows. this means that nspr threads use a shadow stack to preserve context across a thread switch. at thread switch time, the stack of the current running thread is copied to other storage associated with that thread and the about-to-be-dispatched thread's stack data is copied back onto the
windows stack just before the thread is given control. this has disastrous implications on the generally accepte...
...And 6 more matches
Gecko events
an item within a container object has been removed from the selection. is supported: yes event_selection_within numerous selection changes have occurred within a container object. is supported: yes event_alert an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. is supported: yes event_foreground the foreground
window has changed. is supported: no event_menu_start a menu item on the menu bar has been selected. is supported: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a
window has received mouse capture. i...
..._menu_start a menu item on the menu bar has been selected. is supported: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a
window has received mouse capture. is supported: no event_capture_end a
window has lost mouse capture. ...
...: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a
window has received mouse capture. is supported: no event_capture_end a
window has lost mouse capture. is supported: no event_movesize_start a
window is being moved or resized. ...
...And 6 more matches
AT APIs Support
duction documentation is in progress still. but in the meantime it more up-to-date and contains more details than existed analogues for at-spi and msaa this documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software. we provide for them the support of these products on
windows, linux/unix and os x platforms. accessible gecko gecko is a rendering engine that firefox, seamonkey, netscape and yelp use. gecko can render a variety of content, not just html and supports key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, i...
...ing style sheets, javascript and the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. ...
...okes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. gecko based applications gecko can be used in two ways to create application: embedded clients embedded clients use gecko only in the content
window, at the moment for html and generic xml only. they typically use standard
windows controls for their user interface -- the area outside of the client content
window, plus the context menu. on
windows platform mfcembed testing client - this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine (please contact us for a copy). k-meleon - light, ultra-fast and more advanced (fully configurable) gecko-bas...
...And 6 more matches
Components.utils.Sandbox
more information on security principals. system principal to specify the system principal, you can create it using code like: cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); content principal you can specify a content principal for a particular origin in one of three ways: as an nsiprincipal, for example by using the nodeprincipal property of a dom node as an nsidom
window, such as that returned by the dom
window property as a string uri like "http://www.example.com/" (discouraged) when possible, specify a
window or an nsiprincipal object instead of using a string uri.
window objects and nsiprincipal carry additional information such as origin attributes and same-origin privilege changes caused by setting document.domain. example of obtaining content principal ...
...so this can be simply an array with a single element. ...
...so this can be simply an array with a single element. ...
...And 6 more matches
nsIPluginHost
lease add a summary to this article. ...
...his article. ...
...s from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsifile createtempfiletopost(in string apostdataurl); native code only! void createtmpfiletopost(in string apostdataurl, out string atmpfilename); native code only! obsolete since gecko 2.0 void deletepluginnative
window(in nspluginnative
windowptr apluginnative
window); native code only! void destroy(); native code only! void findproxyforurl(in string aurl, out string aresult); native code only! nsiplugin getplugin(in string amimetype); native code only! void getplugincount(out unsigned long aplugincount); obsolete since gecko 1.8 nsiplugin getpluginfactory(in string amimetype); native code only! obsolete since g...
...And 6 more matches
nsITaskbarTabPreview
an application may have as many tab previews as memory allows. ...
... an application may have as many tab previews as memory allows. ...
... an application may have as many tab previews as memory allows. ...
...And 6 more matches
Browser Console - Firefox Developer Tools
formation for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code. if you also want to use the other web developer tools in the regular web toolbox with add-on or browser code, consider using the browser toolbox. similarly, you can execute javascript expressions using the browser console. but while the web console executes code in the page
window scope, the browser console executes them in the scope of the browser's chrome
window. this means you can interact with all the browser's tabs using the gbrowser global, and even with the xul used to specify the browser's user interface. nb: the browser console command line (to execute javascript expressions) is disabled by default. to enable it set the devtools.chrome.enabled preference to true...
...from the keyboard: press ctrl+shift+j (or cmd+shift+j on a mac). you can also start the browser console by launching firefox from the command line and passing the -jsconsole argument: /applications/firefoxaurora.app/contents/macos/firefox-bin -jsconsole the browser console looks like this: you can see that the browser console looks and behaves very much like the web console: most of the
window is occupied by a pane that display messages. at the top, a toolbar enables you to filter the messages that appear. at the bottom, a command line interpreter enables you to evaluate javascript expressions. beginning with firefox 68, the browser console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing th...
... content document of the browser console this can be done with the hudservice. this example here makes it so that when you mouse over the "clear" button it will clear the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); var clearbtn = hud.chrome
window.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically. 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", ...
...And 6 more matches
Navigator.oscpu - Web APIs
the navigator.oscpu property returns a string that identifies the current operating system. syntax oscpuinfo = navigator.oscpu value a domstring providing a string which identifies the operating system on which the browser is running. ...
... the navigator.oscpu property returns a string that identifies the current operating system. syntax oscpuinfo = navigator.oscpu value a domstring providing a string which identifies the operating system on which the browser is running. ...
... the navigator.oscpu property returns a string that identifies the current operating system. syntax oscpuinfo = navigator.oscpu value a domstring providing a string which identifies the operating system on which the browser is running. ...
...And 6 more matches
Using the Notifications API - Web APIs
tion.permission = permission; } // set the button to shown or hidden, depending on what the user answers if(notification.permission === 'denied' || notification.permission === 'default') { notificationbtn.style.display = 'block'; } else { notificationbtn.style.display = 'none'; } } // let's check if the browser supports notifications if (!('notification' in
window)) { console.log("this browser does not support notifications."); } else { if(checknotificationpromise()) { notification.requestpermission() .then((permission) => { handlepermission(permission); }) } else { notification.requestpermission(function(permission) { handlepermission(permission); }); } } } looking at the second main block...
...if a notification already has the same tag and has not been displayed yet, the new notification replaces that previous notification. if the notification with the same tag has already been displayed, the previous notification is closed and the new one is displayed. ...
...tion with the same tag has already been displayed, the previous notification is closed and the new one is displayed. ...
...And 6 more matches
this - JavaScript
-examples and send us a pull request. syntax this value a property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value. description global context in the global execution context (outside of any function), this refers to the global object whether in strict mode or not. // in web browsers, the
window object is also the global object: console.log(this ===
window); // true a = 37; console.log(
window.a); // 37 this.b = "mdn"; console.log(
window.b) // "mdn" console.log(b) // "mdn" note: you can always easily get the global object using the global globalthis property, regardless of the current context in which your code is running. function context inside a function, the value of ...
...ote: you can always easily get the global object using the global globalthis property, regardless of the current context in which your code is running. function context inside a function, the value of this depends on how the function is called. ...
...rty, regardless of the current context in which your code is running. function context inside a function, the value of this depends on how the function is called. since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is
window in a browser. ...
...And 6 more matches
Same-origin policy - Web security
p:// is port 80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or javascript: url inherit the origin of the document containing that url, since these types of urls do not contain information about an origin server. for example, about:blank is often used as a url of new, empty popup
windows into which the parent script writes content (e.g. via the
window.open() mechanism). if this popup also contains javascript, that script would inherit the same origin as the script that created it. data: urls get a new, empty, security context. exceptions in internet explorer internet explorer has two major exceptions to the same-origin policy: trust zones if both domains are in the hig...
...nterpreted as one of the embeddable formats listed above. browsers may not respect the content-type header. for example, if you point a <script> tag at an html document, the browser will try to parse the html as javascript. when your resource is not an entry point to your site, you can also use a csrf token to prevent embedding. cross-origin script api access javascript apis like iframe.content
window,
window.parent,
window.open, and
window.opener allow documents to directly reference each other. when two documents do not have the same origin, these references provide very limited access to
window and location objects, as described in the next two sections. to communicate between documents from different origins, use
window.postmessage. specification: html living standard § cross-origin obj...
...w.parent,
window.open, and
window.opener allow documents to directly reference each other. when two documents do not have the same origin, these references provide very limited access to
window and location objects, as described in the next two sections. to communicate between documents from different origins, use
window.postmessage. specification: html living standard § cross-origin objects.
window the following cross-origin access to these
window properties is allowed: methods
window.blur
window.close
window.focus
window.postmessage attributes
window.closed read only.
window.frames read only.
window.length read only.
window.location read/write. ...
...And 6 more matches
context-menu - Archive of obsolete content
on to returning true, your "context" listeners can also return strings. when a "context" listener returns a string, it becomes the item's new label. this item implements the aforementioned search example: var cm = require("sdk/context-menu"); cm.item({ label: "search google", context: cm.selectioncontext(), contentscript: 'self.on("context", function () {' + ' var text =
window.getselection().tostring();' + ' if (text.length > 20)' + ' text = text.substr(0, 20) + "...";' + ' return "search google for " + text;' + '});' }); the "context" listener gets the
window's current selection, truncating it if it's too long, and includes it in the returned string. when the item is shown, its label will be "se...
... current selection, truncating it if it's too long, and includes it in the returned string. when the item is shown, its label will be "search google for text", where text is the truncated selection. you can also get the selected text using the high level selection api. var selection = require("sdk/selection"); and within the contentscript, reference the selected text as selection.text private
windows if your add-on has not opted into private browsing, then any menus or menu items that you add will not appear in context menus belonging to private browser
windows. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. more examples for conciseness, these examples create their co...
... var cm = require("sdk/context-menu"); var googleitem = cm.item({ label: "google", data: "http://www.google.com/search?q=" }); var wikipediaitem = cm.item({ label: "wikipedia", data: "http://en.wikipedia.org/wiki...
...And 5 more matches
tabs - Archive of obsolete content
se, 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. tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a list of all opened tabs across all
windows. in particular, you can enumerate it: var tabs = require('sdk/tabs'); for (let tab of tabs) console.log(tab.title); you can also access individual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/t...
... } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private
windows if your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser
windows. tabs hosted by private browser
windows won't be seen if you enumerate the tabs module itself, and you won't receive any events for them. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation...
...onsole.log(highleveltab.url); } tabs.on("ready", maphighleveltolowlevel); note that directly accessing xul objects and web content like this means you're no longer protected by the compatibility guarantees made by the sdk's high-level apis. in particular, your code might not work with multiprocess firefox. globals functions open(options) opens a new tab. the new tab will open in the active
window or in a new
window, depending on the innew
window option. example var tabs = require("sdk/tabs"); // open a new tab on active
window and make tab active. tabs.open("http://www.mysite.com"); // open a new tab in a new
window and make it active. tabs.open({ url: "http://www.mysite.com", innew
window: true }); // open a new tab on active
window in the background. tabs.open({ url: "http://ww...
...And 5 more matches
Miscellaneous - Archive of obsolete content
this page contains small, self-explanatory code snippets. system info operating system detection // returns "winnt" on
windows vista, xp, 2000, and nt systems; // "linux" on gnu/linux; and "darwin" on mac os x. var osstring = services.appinfo.os; detecting the host application and version // get the name of the application running us services.appinfo.name; // returns "firefox" for firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extensio...
...ion by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when scrolling the mouse wheel on an element, the dommousescroll event fires. event.detail contains the number of lines to scroll. this event is mozilla-only; other browsers may support
window.onmousewheel. <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is ...
...change text size. if set, you will not receive dommousescroll events. you can listen to mouse wheel click events just like normal click events (via mousedown and mouseup events). when the mouse wheel is clicked, event.button will be equal to 1. ...
...And 5 more matches
Intercepting Page Loads - Archive of obsolete content
« previousnext » there are several ways to detect and intercept loading of web pages and their content, be it only to realize when it happens, modify their contents, or to block them and do something else instead. some of the techniques presented here apply only to content loaded in the main browser area, while others detect content being loaded in other xul
windows, or even detect xul content being loaded. also, the different techniques tap into different steps of the load process. which one you should use solely depends on your needs. we will start with the simplest one, which is also the most common to use. note: performance is very important when it comes to add-ons and page loads. read the recommendations in appendix a regarding performance if you're planning on implementing any of...
... any of these. the easy way: load events this comes from the tabbrowser code snippets page. in a nutshell, from the chrome code in the overlay we add an event listener for the load event. this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser
window. it is full of useful functions, so you should always keep it in mind when you want to handle tabs and web content
windows. attaching the load event handler to gbrowser allows us to listen to these events for all tabs, without having to worry how many tabs are open. gbrowser exists in every browser
window. we store the handler function in a private variable because later we want to remove it when...
...nd it will look like a bug. there are better ways to intercept page loads before any content is downloaded, and before the user sees anything in the tab. http observers another common way of detecting and intercepting loads is using http observer topics. this is how the tamper data extension and others do it. http notifications are fired for all http requests originating from firefox. they are
window-independent, so it is better to keep your observer code in non-chrome objects (your xpcom service or jsm module). otherwise you have to make sure to avoid duplicated work if you have 2 or more
windows open. there are 2 http topics you can listen to, as specified in the observer notifications page: topic description http-on-modify-request called as an http request is made...
...And 5 more matches
appendNotification - Archive of obsolete content
underbird 9.0 / seamonkey 2.6) if you specify the eventcallback parameter, it should be a javascript function that gets called when interesting things happen related to the notification box. this function receives as its only parameter a string indicating what event occurred. at this time, there's just one event type: "removed". this indicates that the notification box has been removed from its
window. ...
...me, there's just one event type: "removed". this indicates that the notification box has been removed from its
window. example: function testnotificationboxwithbuttons() { //create some common variables if they do not exist. // this should work from any firefox context. // depending on the context in which the function is being run, // this could be simplified. if (typeof
window === "undefined") { //if there is no
window defined, get the most recent. ...
...d from its
window. example: function testnotificationboxwithbuttons() { //create some common variables if they do not exist. // this should work from any firefox context. // depending on the context in which the function is being run, // this could be simplified. if (typeof
window === "undefined") { //if there is no
window defined, get the most recent. ...
...And 5 more matches
XUL element attributes - Archive of obsolete content
r to setting the css display property to 'none'. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base
window that the element should appear after. this attribute overrides the insertbefore attribute. this value may be a comma-separated list of ids, which are scanned and the first one found in the
window is used. insertbefore type: id when an element is in an overlay, the insertbefore attribute specifies the id of the element in the base
window that the element should appear before. this value m...
... left type: string (representing an integer) for elements placed directly within a stack, specifies the pixel position of the left edge of the element relative to the left edge of the stack. ...
...the child elements, resulting the children being placed in the center of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. persist type: space-separated list of attribute names a space-separated list of attributes that are maintained when the
window is closed. when the
window is re-opened, the values of persistent attributes are restored. in mozilla, persistent attributes are stored in the per-profile file xulstore.json. persistence can also be stored using the document.persist function. in order for persistence to work, the element must also have an id. persistence will not remember the absence of an attribute, so for boolean attributes lik...
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
y is available under the view menu which is accessible to a keyboard user. toolbarbuttons by default, toolbar buttons cannot receive focus with a keyboard. the recommended way of fixing this is that all functionality associated with a toolbar be duplicated elsewhere in the application, such as in a menu item or context menu. in cases where duplication of functionality is not possible (such as a
window without a menu bar), toolbar buttons can be made focusable by adding the special css rule -moz-user-focus: normal. (firefox's "print preview"
window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a
window (that is either all toolbar buttons are tabbable or none of them are). keyboard shortcuts keyboard shortcuts are very useful t...
...ining unused key combinations and cross platform issues. mozilla keyboard shortcuts. a full list of keyboard shortcuts for the various mozilla applications. mozilla's accesskey faq. a short reference for using the accesskey attribute. context menus the context menu is the small menu activated with a right mouse click on a content area or element (or with shift + f10 or vk_apps on
windows and ctrl + click or ctrl + space on a mac). use the oncontextmenu event handler or the context attribute to create context menus. do not specifically code them to open on a click of the right mouse button. the oncontextmenu event and context attribute work with the correct platform-specific context menu triggers, including the keyboard button and appropriate mouse clicks. mouse dependent script...
...n the label attribute and image alt text in the tooltiptext attribute. view the code examples below. <image src="stop.png" tooltiptext="stop" /> <html:img src="stop.jpg" alt="stop" /> <html:img src="decorative_image.jpg" alt="" /> <!-- in html the alt attribute is required. --> <toolbarbutton label="stop" image="stop.png" tooltiptext="stop loading the page" /> title provide unique titles to
window container elements such as
windows, wizards, and dialogs. titles provide users the most basic information about the application. the title is often the first thing spoken by a screen reader when an application is opened or activated. users can also refer back to the title to get a sense of where they are located. titles are displayed in the top bar of an application. view code examples below. <d...
...And 5 more matches
preference - Archive of obsolete content
t is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...elow: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
... is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...And 5 more matches
Debugging a XULRunner Application - Archive of obsolete content
e information you need to know is displayed on them. see also debugging javascript prefs setting the following prefs will make your debugging life much easier! preferences should be in a .js file in the directory %appname%/defaults/preferences/. it doesn't matter what the file is called (as long as the extension is .js), so debug.js is as good as any! /* debugging prefs */ 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); don't forget to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm performance and usability. see: preference refe...
...t.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); don't forget to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm performance and usability. see: preference reference for more information about these preferences. ...
...and usability. see: preference reference for more information about these preferences. console to enable a console on
windows, start xulrunner with the -console argument. note that -console goes after the application.ini argument: e.g. xulrunner.exe /path/to/application.ini -console to output text to the console, use dump("my text here\n");. this will only work if the pref pref("browser.dom.
window.dump.enabled", true) is enabled. to output dump calls instead to a file, set browser.dom.
window.dump.file to the file destination where the log should be created and restart the application. if you would like the console messages to appear in the console you used to launch the application, you can use the gecko console redirector. precompiled binaries are available in the zipped archive https:...
...And 5 more matches
MacFAQ - Archive of obsolete content
tion quit command to work with the application menu (the one to the right of the blue apple), you need to give your quit menu item an id of "menu_filequititem". to enable the mac "about" menu make sure that you use "aboutname" as the id for your menu item to enable the mac "preferences" menu make sure that you use "menu_preferences" as the id for your options/preferences menu item toolbars mac
windows have a small "jelly bean" button in the top right corner. this button is used to show/hide the toolbar. the toolkit will automatically enable this behavior if you add class="chromeclass-toolbar" to your <toolbar> element. commandline support commandline handlers work great on the mac if it's a cold start. here's how to implement command-line trapping when the app is already running, without g...
...ed to show/hide the toolbar. the toolkit will automatically enable this behavior if you add class="chromeclass-toolbar" to your <toolbar> element. commandline support commandline handlers work great on the mac if it's a cold start. here's how to implement command-line trapping when the app is already running, without getting into appleevents or c++ code. this is implemented in a pseudo "hidden
window" technique and parsing the
window arguments instead of command-line handlers and some of the toolkit singleton
window code. 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.ch...
...ents instead of command-line handlers and some of the toolkit singleton
window code. ...
...And 5 more matches
Scratchpad - Archive of obsolete content
erver. it is also possible to use scratchpad over pages opened from a local file system, if permission policies allow that. but even with possible limitations present, the html code can be either manually entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command. 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. opening scratchpad in the t...
...irst you need to check "scratchpad" in the "default firefox developer tools" section of the settings page. now scratchpad will be available in the toolbox, alongside other tools like the page inspector and the web console. this is especially useful in split console mode: you can use scratchpad for a persistent, multiline editor, and the console to interact with the page. editing the scratchpad
window looks something like this (on macos the menu bar is at the top of the screen): the file menu offers options to save and load javascript code snippets, so you can reuse code later if you like. code completion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. to list autocomplete sugge...
... cursor is on an identifier. for example, if you type document.addeventlistener, then press ctrl + shift + space, you'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for the symbol. executing once you've written your code, select the code you want to run. if you don't select anything, all the code in the
window will be run. then choose the way you want the code to run using the buttons along the top, using the execute menu, or using the context menu. the code is executed in the scope of the currently selected tab. any variables you declare outside of a function will be added to the global object for that tab. there are four execution options available. run when you choose the run option, the selecte...
...And 5 more matches
CSS property compatibility table for form controls - Learn web development
ext, search, and password input types. property n t note css box model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. ...
...property to search fields. on
windows 7, internet explorer 9 does not apply the border unless background:none is applied. border partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. on
windows 7, internet explorer 9 does not apply the border unless background:none is applied. margin yes yes padding partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. ...
... text and font color[1] yes yes if the border-color property is not set, some webkit based browsers will apply the color property to the border as well as the font on <textarea>s. ...
...And 5 more matches
Accessibility Features in Firefox
we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same keyboard commands are still available, so users can become comfortable and productive right away. ...
...f the professional version are happily playing with dragon and firefox. we are optimistic that nuance will work to improve access to the user interface in the coming year. firefox on linux currently boasts the best onscreen keyboard support in the industry via gok, the gnome onscreen keyboard. basic screen reader accessibility is available via the fire vox extension. fire vox can also be used on
windows or os x. for more detailed information, please check the assistive technology compatibility guide is kept on an editable wiki. keyboard support "mozilla firefox is a web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboa...
...ludes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard. the f7 key toggles this feature on/off. tabbed browsing helps keyboard users by putting all of the browsed documents in one firefox application
window rather than cluttering the alt+tab order which makes keyboard navigation within the entire
windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances thi...
...And 5 more matches
Multiple Firefox profiles
nager and the external profile manager, there are a few third-party tools that make working with multiple profiles easy. this list is by no means exhaustive. please add any helpful tools you discover to the list! mac os x multifirefox by dave martorana profile management determining the profile while firefox is running to determine the profile of a currently-running firefox instance in
windows, macos or linux, type about:profiles into the browser url search bar. the page presents a list of all of your profiles, each beginning with "profile: " followed by its name. the one being run by this firefox instance will include the bold text "this is the profile in use" for example, if you find that text beneath the entry for "profile: suzie", then you are running in a profile named suzie...
.... then follow the instructions below, applicable to your operating system. 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. find the profile you want to use. press the “launch profile in new browser” button next to it.
windows
windows xp click the start button. click "run". type firefox --new-instance--profilemanager.
windows vista/7 click the start button. click the search bar at the bottom. type firefox --new-instance --profilemanager.
windows 8/8.1/10 press "
windows + r" on your keyboard. type firefox --new-instance --profilemanager. linux if firefox is already included in your linux...
...plications/firefox.app/contents/macos/firefox. if you have the path to your desired profile handy, enter a space character, followed by -profile followed by another space character, followed by the full path to the profile folder you wish to launch into. this will launch firefox immediately. otherwise, enter a space character followed by --profilemanager. this will present the profile manager
window in which you can make your selection. hit return. 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. close all instances of...
...And 5 more matches
Process scripts
process scripts are subject to the same kinds of limitations as frame scripts (for example, no file system access). process scripts stay loaded until their host process is closed. the environment for process scripts is similar to that for frame scripts. however, you don't get access to web content or dom events from a process script. ...
...le, no file system access). process scripts stay loaded until their host process is closed. the environment for process scripts is similar to that for frame scripts. however, you don't get access to web content or dom events from a process script. ...
...ent for process scripts is similar to that for frame scripts. however, you don't get access to web content or dom events from a process script. retrieving the content frame message manager for a content
window when an observer notification in a process script contains a content document or
window it can be useful to not use talk through the child/parent process message managers but through the
window's content frame message manager, e.g. if responses should be processed by a frame script instead of the process script. ...
...And 5 more matches
How to get a stacktrace with WinDbg
introduction sometimes you need to get a stacktrace (call stack) for a crash or hang but breakpad fails because it's a special crasher or a hang. this article describes how to get a stacktrace in those cases with windbg on
windows. ...
...h or hang but breakpad fails because it's a special crasher or a hang. this article describes how to get a stacktrace in those cases with windbg on
windows. (to get a stacktrace for thunderbird or some other product, substitute the product name where ever you see firefox in this instructions.) requirements to get such a stacktrace you need to install the following software: debugging tools for
windows microsoft distributes the debugging tools for
windows for free, those include windbg which you will need here. download it from install debugging tools for
windows. (you'll want the 32-bit version, even if you are using a 64-bit version of
windows) then install it, the standard settings in the installation process are fine. a firefox nightly or release you need a firefox version for which sym...
...bles from the mozilla symbol server to use with windbg. you can use any official nightly build or released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. 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). you should now see a "command" text
window with debug output at the top and an input box at the bottom. before debugging can start, several commands must be entered into the one-line input...
...And 5 more matches
WebRequest.jsm
good place to listen if you want to cancel the request. opt_extrainfospec values name description "blocking" make the browser wait until the listener returns. use this if you want to cancel the request. see some examples of canceling requests. listener argument name type description url string target of the request.
windowid number the id of the
window making the request, as an outer
windowid. parent
windowid number type string the resource type. browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser. onbeforesendheaders this event is triggered before sending any http data, but af...
.... use this if you want to redirect the request or modify request headers. see examples of redirecting and modifying request headers. "requestheaders" include request headers in the argument passed to the listener. see modifying headers for an example using this. listener argument name type description url string target of the request.
windowid number the id of the
window making the request, as an outer
windowid. parent
windowid number type string the resource type. browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser. method string the http method to be used (get, post, etc). reque...
...can't pass "blocking" for this event, so you can't modify or cancel the request from this event: it's informational only. opt_extrainfospec values name description "requestheaders" include request headers in the argument passed to the listener. listener argument name type description url string target of the request.
windowid number the id of the
window making the request, as an outer
windowid. parent
windowid number type string the resource type. browser object the xul browser into which the resource will be loaded, or null if the resource will not be loaded into a xul browser. method string the http method to be used (get, post, etc). reque...
...And 5 more matches
Localizing with Mercurial
mmands. choose the appropriate command for your distribution and make sure to run as root. # 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. ...
...ce, you can download and install mercurialeclipse here. did it work? open a terminal
window and enter hg --version. if you see a message about the version of mercurial (e.g. mercurial distributed scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on linux systems, refer to the instructions on mercurial's download page. mercurial on
windows with
windows, you have a couple of install options: for a command line interface, download and install mozillabuild package. this will not only install hg, but also all the tools required to build mozilla products on
windows. trust us, you'll want this eventually. for a graphical interface, you may want to install tortoisehg, which integrates with your
windows explorer shell. it also instal...
...use the add_path.exe utility found in c:\mozilla-build\hg to do this. ...
...And 5 more matches
Gecko Profiler FAQ
was captured (this is why there is no support for line-level sampling for native code either.) at this point the granularity of each sample it displays is a native function. therefore the gecko profiler is not a suitable tool for finding hotspots within a single function. for this purpose you should try to use a native profiler on your platform of choice (for example xperf/vtune on
windows, instruments on osx, and perf/zoom on linux.) one workaround is to break the hot function into several explicitly-non-inline helpers, recompile, and re-profile. this can change some performance characteristics, but is a decent way to get a sense of which parts of a large function are expensive. how to profile startup code that regresses just a little (<10-15ms ts_paint/t...
...ou are trying to avoid is not profiling on fast machines that mozilla developers typically use to build firefox on, a better solution may be using a less high-end machine that actually has lower spec’d hardware instead of artificially slowing down just the cpu. another approach to get more precision is also raising the sampling frequency to sub-millisecond ranges (it won’t work on
windows.) high frequency sampling may also be an area where native profilers are a useful alternative tool to try. how do we profile "leaks" that show up after running firefox for > 40 mins? the gecko profiler has been designed specifically for the use case of having it run always in the background, and it’s pretty good at that! it is quite reasonable to actually run the bro...
... we spend a lot of time in gc / cc. in that case, the gecko profiler is the wrong tool to debug this. even about:memory would be more useful. overview of the changes in the last (year?) to cleopatra/etc faster, hopefully more reliable has a timeline tab lets you hide threads with a context menu supports symbolication for local builds on
windows if you run “mach buildsymbols” first profiling non-nsthreads? the current setup requires each thread that you want to profile to notify the profiler about its existence. we have this hooked up for nsthreads, and as of very recently also for rayon threads (used in stylo). we have not attempted to register other threads with the profiler. bug 1341811 suggests hooking p...
...And 5 more matches
Scroll-linked effects
f examples of effects that would not work well with asynchronous scrolling, along with equivalent versions that would work well: example 1: sticky positioning here is an implementation of a sticky-positioning effect, where the "toolbar" div will stick to the top of the screen as you scroll down. <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100,
window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div. as the scroll event listener runs in the javascript on the browser's main thread, it will be asynchronous relative to the user-visible scrollin...
...nous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls. example 2: scroll snapping below is an implementation of scroll snapping, where the scroll position snaps to a particular destination when the user's scrolling stops near that destination. ...
...bar" div is updated by the browser as the user scrolls. example 2: scroll snapping below is an implementation of scroll snapping, where the scroll position snaps to a particular destination when the user's scrolling stops near that destination. ...
...And 5 more matches
Rhino Debugger
java org.mozilla.javascript.tools.debugger.main [options] [filename.js] [script-arguments] where the options are the same as the shell. the rhino javascript debugger can debug scripts running in multiple threads and provides facilities to set and clear breakpoints, control execution, view variables, and evaluate arbitrary javascript code in the current scope of an executing script. console
window the debugger redirects the system.out, system.in, and system.err streams to an internal javascript console
window which provides an editable command line for you to enter javascript code and view system output. the console
window maintains a history of the commands you have entered. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. op...
...ed. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to load. the selected file will be compiled and displayed in a new
window. running scripts you may select the file->run menu item on the menu bar to execute javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to execute. the loaded script will be run in a new thread and control will be given to the debugger on its first instruction. controlling execution the debugger provides the f...
...n enter selecting debug->break on function enter will give control to the debugger whenever the execution is entered into a function or script. break on function exit selecting debug->break on function return will give control to the debugger whenever the execution is about to return from a function or script. moving up and down the stack the lower-left (dockable) pane in the debugger main
window contains a combo-box labeled "context:" which displays the current stack of the executing script. you may move up and down the stack by selecting an entry in the combo-box. when you select a stack frame the variables and watch
windows are updated to reflect the names and values of the variables visible at that scope. setting and clearing breakpoints the main desktop of the debugger contains fil...
...And 5 more matches
mozIThirdPartyUtil
netwerk/base/public/mozithirdpartyutil.idlscriptable utility functions for determining whether a given uri, channel, or
window hierarchy is third party with respect to a known uri. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean isthirdpartychannel(in nsichannel achannel, [optional] in nsiuri auri); boolean isthirdpartyuri(in nsiuri afirsturi, in nsiuri aseconduri); boolean isthirdparty
window(in nsidom
window a
window, [optional] in nsiuri auri); methods isthirdpartychannel() determine whether the given channel and its content
window hierarchy is third party. this is done as follows: if achannel is an nsihttpchannel and has the 'forceallowthirdpartyco...
...e as follows: if achannel is an nsihttpchannel and has the 'forceallowthirdpartycookie' property set, then: if auri is null, return false. otherwise, find the uri of the channel, determine whether it is foreign with respect to auri, and return. find the uri of the channel and determine whether it is third party with respect to the uri of the channel. if so, return. obtain the bottommost nsidom
window, and its same-type parent if it exists, from the channel's notification callbacks. then: if the parent is the same as the bottommost
window, and the channel has the load_document_uri flag set, return false. this represents the case where a toplevel load is occurring and the
window's uri has not yet been updated. (we have already checked that auri is not foreign with respect to the channel uri.) ...
...m the channel's notification callbacks. then: if the parent is the same as the bottommost
window, and the channel has the load_document_uri flag set, return false. this represents the case where a toplevel load is occurring and the
window's uri has not yet been updated. (we have already checked that auri is not foreign with respect to the channel uri.) otherwise, return the result of isthirdparty
window() with arguments of the channel's bottommost
window and the channel uri, respectively. therefore, both the channel's uri and each level in the
window hierarchy associated with the channel is tested. ...
...And 5 more matches
nsICompositionStringSynthesizer
that synthesizes composition string with arbitrary clauses and a caret 1.0 66 introduced gecko 26 obsolete gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38. you need to use nsitextinputprocessor instead of this. ...
...n string with arbitrary clauses and a caret 1.0 66 introduced gecko 26 obsolete gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38. you need to use nsitextinputprocessor instead of this. ...
... obsolete gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38. you need to use nsitextinputprocessor instead of this. every instance is associated with a dom
window at created by nsidom
windowutils.createcompositionstringsynthesizer(). ...
...And 5 more matches
nsIContentViewer
widgetptr aparentwidget, [const] in nsintrectref abounds); native code only! 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 acallercloses
window); boolean request
windowclose(); void resetclose
window(); void setbounds([const] in nsintrectref abounds); native code only! void setdocumentinternal(in nsidocumentptr adocument, in boolean aforcereuseinner
window); native code only! [noscript,notxpcom,nostdcall] void setnavigationtiming(in nsdomnavigationtimingptr atiming); void setpagemode(...
... when destroy() is called: sanitize() will be called on the viewer's document the content viewer will set the contentviewer property on the history entry, and release its reference (ownership reversal). hide() will be called, and no further destruction will happen. destroy() void destroy(); parameters none. findcontainerview() finds the view to use as the container view for make
window. note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer. [noscript,notxpcom,nostdcall] nsiviewptr findcontainerview(); parameters none. return value the container view, or null if this content viewer is the root of a view manager hierarchy. note: if this container is the root of a view manager hierarchy (that is, this method ...
... ashentry the history entry that the content viewer was stored in. the entry must have the docshells for all of the child documents stored in its child shell list. pagehide() void pagehide( in boolean isunload ); para...
...And 5 more matches
nsIDocShell
void fireunloadnotification(); native code only! obsolete since gecko 1.8 nsisimpleenumerator getdocshellenumerator(in long aitemtype, in long adirection); nsidomstorage getsessionstorageforprincipal(in nsiprincipal ...
... boolean isbeingdestroyed(); void loadstream(in nsiinputstream astream, in nsiuri auri, in acstring acontenttype, in acstring acontentchar...
... allowmedia boolean attribute stating whether or not media (audio/video) should be loaded. allowmetaredirects boolean attribute stating if refresh based redirects can be allowed. allowplugins boolean whether to allow plugin execution. allowsubframes boolean attribute stating if it should allow subframes (framesets/iframes) or not. allow
windowcontrol boolean specifies whether or not content is allowed to control the
window (that is, to resize or move the
window). default is true, which lets content control the
window. apptype unsigned long the type of application that created this
window. types are defined in constants. busyflags unsigned long current busy state for docshell. valid states are define...
...And 5 more matches
nsIMacDockSupport
application. void activateapplication( in boolean aignoreotherapplications ); parameters aignoreotherapplications if true, the application is activated regardless of the state of other applications. if false, the application is only activated if other applications are not currently active. about dockmenu by default firefox adds two menu items to the dock menu. the menu items are "new
window" and "new private
window". if permanent private browsing mode is enabled then the "new private
window" menu item is hidden. this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu. this can ...
...t here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu. ...
...win = services.wm.getmostrecent
window('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent
window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecent
window(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopu...
...And 5 more matches
nsIPropertyBag
only. methods getproperty() get a property value for the given name. nsivariant getproperty( in astring name ); parameters name the name to return the matching property. return value the property matching the given name. exceptions thrown ns_error_failure if a property with that name doesn't exist. examples get user agent information (operating system specifics. ...
...roperty value for the given name. nsivariant getproperty( in astring name ); parameters name the name to return the matching property. return value the property matching the given name. exceptions thrown ns_error_failure if a property with that name doesn't exist. examples get user agent information (operating system specifics. the
window scope is not always accessible so the
window.navigator cannot be accessed. ...
... in astring name ); parameters name the name to return the matching property. return value the property matching the given name. exceptions thrown ns_error_failure if a property with that name doesn't exist. examples get user agent information (operating system specifics. the
window scope is not always accessible so the
window.navigator cannot be accessed. ...
...And 5 more matches
Thunderbird Configuration Files
dit configuration files manually. there are three files you should know about: userchrome.css used to change the appearance of the browser. usercontent.css used to change the appearance of web pages. user.js used to change various preferences. all these files are plain text files you need to create in your profile folder and can be edited using a standard text editor, such as notepad on
windows and gedit or kate on linux. locate your profile folder before the configuration files are presented, you should know how to find your profile folder, which is where thunderbird saves all your settings on your hard drive. on
windows vista/xp/2000, the path is usually %appdata%\thunderbird\profiles\xxxxxxxx.default\, where xxxxxxxx is a random string of 8 characters. just browse to c:\documen...
...configuration files are presented, you should know how to find your profile folder, which is where thunderbird saves all your settings on your hard drive. on
windows vista/xp/2000, the path is usually %appdata%\thunderbird\profiles\xxxxxxxx.default\, where xxxxxxxx is a random string of 8 characters. just browse to c:\documents and settings\[user name]\application data\thunderbird\profiles\ on
windows xp/2000 or c:\users\[user name]\appdata\roaming\thunderbird\profiles\ on
windows vista, and the rest should be obvious. ...
...to use it, click start > run... ...
...And 5 more matches
Mozilla
debug builds (--enable-debug) and non-optimized builds (--disable-optimize) are much slower. any performance metrics gathered by such builds are largely unrelated to what would be found in a release browser. browser chrome tests the browser chrome test suite is an automated testing framework designed to allow testing of application chrome
windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser
window and report results using the same functions as the mochitest test framework. as all tests, they won't work in a build with tests disabled (--disable-tests). browser security an important aspect of developing code for any ...
...as migrated to using c++ in mozilla code. choosing the right memory allocator there are a lot of different memory allocators in the mozilla source tree. this article looks over some of them and tries to sort out which should be used under what circumstances. chrome registration chrome is the set of user interface elements of the application
window that are outside the
window's content area. toolbars, menu bars, progress bars, and
window title bars are all examples of elements that are typically part of the chrome. command line options command line options are used to specify various startup options for mozilla applications.this page describes the commonly used options and how to us...
...ebar to encourage their engagement. there are two ways to create a sidebar for firefox users: the social api and an extension. you can choose either depending on your needs and resources. creating a language pack to create a language pack, or a localization repack, you first need to go through the initial setup process. creating a localized
windows installer of seamonkey preamble: not all of the programs listed below are necessary. some of them are simply the ones i use because i like them, while others are scripts that i've created to speed up the work. you can in every case choose the program you prefer to do some operations, and you can also decide not to use any of my scripts and manually enter all o...
...And 5 more matches
Gecko Plugin API Reference - Plugins
plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and platform independence
windowed and
windowless plug-ins the default plug-in using html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms
windows unix mac os x drawing...
... memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the
windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the np
window structure drawing plug-ins printing the plug-in setting the
window getting information
windowed plug-ins mac os
windows unix event handling for
windowed plug-ins
windowl...
...nitialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the np
window structure drawing plug-ins printing the plug-in setting the
window getting information
windowed plug-ins mac os
windows unix event handling for
windowed plug-ins
windowless plug-ins specifying that a plug-in is
windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for
windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the ...
...And 5 more matches
Web Console remoting - Firefox Developer Tools
equest further network event details - like response body or request headers. to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachconsole) the listeners argument is an array which specifies listeners you want to start in the web console. these can be: page errors,
window.console api messages, network activity, and file activity. for example: ["pageerror", "consoleapi", "networkactivity", "fileactivity"] the web console actor does not start any listeners by default. the client has the option to start each listener when needed. this approach allows for lower resource usage on the server - this is a potential issue if the server runs on devices with fewer resourc...
...ted": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ... ] } notice that the consoleactor is also available as a global actor. when you attach to the global consoleactor you receive all of the network requests, page errors, and the other events from all of the tabs and
windows, including chrome errors and network events. this actor is used for the browser console implementation and for debugging remote firefox/b2g instances. startlisteners(listeners, onresponse) the new startlisteners packet: { "to": "conn0.console9", "type": "startlisteners", "listeners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ] } the reply is: { ...
... tab navigation to listen to the tab navigation events you also need to attach to the tab actor for the given tab. the tabnavigated notification comes from tab actors. prior to firefox 20 the web console actor provided a locationchange listener, with an associated locationchanged notification. this is no longer the case: we have ...
...And 5 more matches
Background Tasks API - Web APIs
because event handling and screen updates are two of the most obvious ways users notice performance issues, it's important for your code to be a good citizen of the web and help to prevent stalls in the execution of the event loop. in the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers.
window.requestidlecallback() makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag. if you stay within the limit given, you can make the user's experience much better. getting the most out of idle callbacks because idle callbacks are inten...
...nges to the dom within your idle callback. by the time your callback is run, the current frame has already finished drawing, and all layout updates and computations have been completed. if you make changes that affect layout, you may force a situation in which the browser has to stop and do recalculations that would otherwise be unnecessary. if your callback needs to change the dom, it should use
window.requestanimationframe() to schedule that. avoid tasks whose run time can't be predicted. your idle callback should avoid doing anything that could take an unpredictable amount of time. for example, anything which might affect layout should be avoided. you should also avoid resolving or rejecting promises, since that would invoke the handler for that promise's resolution or rejection as soon as y...
...code may need to be able to work on browsers that don't yet support it. you can do so with a simple shim that uses settimeout() as a fallback option. this isn't a polyfill, since it's not functionally identical; settimeout() doesn't let you make use of idle periods, but instead runs your code when possible, leaving us to do the best we can to avoid causing the user to experience performance lag.
window.requestidlecallback =
window.requestidlecallback || function(handler) { let starttime = date.now(); return settimeout(function() { handler({ didtimeout: false, timeremaining: function() { return math.max(0, 50.0 - (date.now() - starttime)); } }); }, 1); } if
window.requestidlecallback is undefined, we create it here. the function begins by recording the ...
...And 5 more matches
GlobalEventHandlers.onerror - Web APIs
the onerror property of the globaleventhandlers mixin is an eventhandler that processes error events. error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at
window and
window.onerror() is invoked (as well as handlers attached by
window.addeventlistener (not only capturing)). ...
... using interface errorevent is fired at
window and
window.onerror() is invoked (as well as handlers attached by
window.addeventlistener (not only capturing)). when a resource (such as an <img> or <script>) fails to load, an error event using interface event is fired at the element that initiated the load, and the onerror() handler on the element is invoked. these error events do not bubble up to
window, but (at least in firefox) can be handled with a
window.addeventlistener configured with usecapture set to true. installing a global error event handler is useful for automated collection of error reports. ...
...}; function parameters: message: error message (string). ...
...And 5 more matches
HashChangeEvent - Web APIs
/><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event. ...
..." fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event. hashchangeevent.newurl read only the new url to which the
window is navigating. hashchangeevent.oldurl read only the previous url from which the
window was navigated. ...
... hashchangeevent.newurl read only the new url to which the
window is navigating. hashchangeevent.oldurl read only the previous url from which the
window was navigated. methods this interface has no methods of its own, but inherits the methods of its parent, event. examples syntax options for a hash change you can listen for the hashchange event using any of the following options:
window.onhashchange = funcref; or <body onhashchange="funcref();"> or
window.addeventlistener("hashchange", funcref, false); basic example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } }
window.addeventlistener('hashchange', locationhashchanged); polyfill there are several fallback scripts listed on the modernizr github page. ba...
...And 5 more matches
SubtleCrypto.importKey() - Web APIs
convert the resulting string into an arraybuffer. see the examples section for more concrete guidance. subjectpublickeyinfo you can use this format to import or export rsa or elliptic curve public keys. subjectpublickey is defined in rfc 5280, section 4.1 using the asn.1 notation: subjectpublickeyinfo ::= sequence { algorithm algorithmidentifier, subjectpublic...
... convert the resulting string into an arraybuffer. see the examples section for more concrete guidance. json web key you can use json web key format to import or export rsa or elliptic curve public or private keys, as well as aes and hmac secret keys. json web key format is defined in rfc 7517. it describes a way to represent public, private, and secret keys as json objects. a json ...
...ue, "key_ops": ["sign"], "kty": "ec", "x": "szrrxmyi8vwfjg1dpunbfcc9jzvjzefh7ulki1ukxaltd7rgwrcffxqygpcwu6aq", "y": "hhuag3ovdzer0uuqnd4pxhqtxp5idgdyhjhl-wlkjngjqaw0rngy5v29-av-ysew" }; examples note: you can try the working examples on github. raw import this example imports an aes key from an arraybuffer containing the bytes to use. see the complete code on github. ...
...And 5 more matches
Using Web Workers - Web APIs
ng messages to an event handler specified by that code (and vice versa). this article provides a detailed introduction to using web workers. web workers api a worker is an object created using a constructor (e.g. worker()) that runs a named javascript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current
window. thus, using the
window shortcut to get the current global scope (instead of self) within a worker will return an error. the worker context is represented by a dedicatedworkerglobalscope object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use sharedworkerglobalscope). a dedicated worker is only accessible from the script that first spawn...
...that first spawned it, whereas shared workers can be accessed from multiple scripts. note: see the web workers api landing page for reference documentation on workers and additional guides. you can run whatever code you like inside the worker thread, with some exceptions. for example, you can't directly manipulate the dom from inside a worker, or use some default methods and properties of the
window object. but you can use a large number of items available under
window, including websockets, and data storage mechanisms like indexeddb. see functions and classes available to workers for more details. data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage event handle...
...t is returned to the page and displayed. this example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. more advanced details are covered later on in the article. worker feature detection for slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js): if (
window.worker) { ... } spawning a dedicated worker creating a new worker is simple. all you need to do is call the worker() constructor, specifying the uri of a script to execute in the worker thread (main.js): var myworker = new worker('worker.js'); sending messages to and from a dedicated worker the magic of workers happens via the postmessage() method and the onmessage event handler. when...
...And 5 more matches
WorkerGlobalScope - Web APIs
the workerglobalscope interface of the web workers api is an interface representing the scope of any worker. workers have no browsing context; this scope contains the information usually conveyed by
window objects — in this case event handlers, the console or the associated workernavigator object. each workerglobalscope has its own event loop. this interface is usually specialized by each worker type: dedicatedworkerglobalscope for dedicated workers, sharedworkerglobalscope for shared workers, and serviceworkerglobalscope for serviceworker. the self property returns the specialized scope for each context. properties this interface inherits properties from the eventtarget interface and
windoworworkerglobalscope and
windoweventhandlers mixins. standard properties workerglobalscope.navigato...
...s, but adapted to workers. non-standard properties workerglobalscope.performance read only returns the performance associated with the worker. it is a regular performance object, except that only a subset of its property and methods are available to workers. workerglobalscope.console read only returns the console associated with the worker. ...
...methods are available to workers. workerglobalscope.console read only returns the console associated with the worker. properties implemented from elsewhere
windoworworkerglobalscope.caches read only returns the cachestorage object associated with the current context. this object enables functionality such as storing assets for offline use, and generating custom responses to requests.
windoworworkerglobalscope.indexeddb read only provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an idbfactory object. ...
...And 5 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
once a given property is standardized and implemented without the prefix, the prefixed...
...once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while. a -moz-animation [prefixe...
...once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while. a -moz-animation [prefixed version still accept...
...And 5 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
nk is followed, the browser will send post requests with the body ping to the urls. typically for tracking. referrerpolicy how much of the referrer to send when following the link. see referrer-policy for possible values and their effects. rel the relationship of the linked url as space-separated link types. target where to display the linked url, as the name for a browsing context (a tab,
window, or <iframe>). the following keywords have special meanings for where to load the url: _self: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new
window instead. _parent: the parent browsing context of the current one. if no parent, behaves as _self. _top: the topmost browsing context (the "highest" context that’s an ancest...
...firefox 79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener". type hints at the linked url’s format with a mime type. no built-in functionality. ...
...> isdrawing = false); document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy. see referer header: privacy and security concerns for information. using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to
window.opener api exploitation attacks (vulnerability description), although note that, in newer browser versions (e.g. firefox 79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener". accessibility strong link text the content inside a link should indicate where the link goes, even out of context. inaccessible, weak link text a sadly common mistake is to only...
...And 5 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
ository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. each embedded browsing context has its own session history and document. the browsing context that embeds the others is called the parent browsing context. the topmost browsing context — the one with no parent — is usually the browser
window, represented by the
window object. because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources. while theoretically you can use as many <iframe>s as you like, check for performance problems. content categories flow content, phrasing content, embedded content, interactive content, palpable conten...
... it is outside the visible viewport (this is the default value). lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. name a targetable name for the embedded browsing context. 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. referrerpolicy indicates which referrer to send when fetching the frame's resource: no-referrer: the referer header will not be sent. no-referrer-when-downgrade (default): the referer header will not be sent to origins without tls (https). origin: the sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
...pace-separated tokens to lift particular restrictions: allow-downloads-without-user-activation : allows for downloads to occur without a gesture from the user. allow-downloads : allows for downloads to occur with a gesture from the user. allow-forms: allows the resource to submit forms. if this keyword is not used, form submission is blocked. ...
...And 5 more matches
Porting the Library Detector - Archive of obsolete content
e process of porting a xul-based add-on to the sdk. it's a very simple add-on and a good candidate for porting because there are suitable sdk apis for all its features. the add-on is paul bakaus's library detector. the library detector tells you which javascript frameworks the current web page is using. it does this by checking whether particular objects that those libraries add to the global
window object are defined. for example, if
window.jquery is defined, then the page has loaded jquery. for each library that it finds, the library detector adds an icon representing that library to the status bar. it adds a tooltip to each icon, which contains the library name and version. you can browse and run the ported version in the sdk's examples directory. how the library detector works all th...
...of libraries by iterating through the tests and adding an entry for each library which passes. once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the icon at the corresponding chrome:// url, and adds it to the box. finally, it listens to gbrowser's tabselect event, to update the contents of the box for that
window. content script separation the test objects in the original script need access to the dom
window object, so in the sdk port, they need to run in a content script. in fact, they need access to the un-proxied dom
window, so they can see the objects added by libraries, so we’ll need to use the experimental unsafe
window. the main add-on script, main.js, will use a page-mod to inject the content ...
...ew page. the content script, which we'll call library-detector.js, will keep most of the logic of the test functions intact. ...
...And 4 more matches
Progress Listeners - Archive of obsolete content
st state_start = ci.nsiwebprogresslistener.state_start; const state_stop = ci.nsiwebprogresslistener.state_stop; var mylistener = { queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { // if you use mylistener for more than one tab/
window, use // awebprogress.dom
window to obtain the tab/
window which triggers the state change if (aflag & state_start) { // this fires when the load event is initiated } if (aflag & state_stop) { // this fires when the load finishes } }, onlocationchange: function(aprogress, arequest, auri) { // this fires when the locatio...
... // this fires when the load event is initiated } if (aflag & state_stop) { // this fires when the load finishes } }, onlocationchange: function(aprogress, arequest, auri) { // this fires when the location bar changes; that is load event is confirmed // or when the user switches tabs. if you use mylistener for more than one tab/
window, // use aprogress.dom
window to obtain the tab/
window which triggered the change. }, // for definitions of the remaining functions see related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, as...
...note that the browser uses a weak reference to your listener object, so make sure to keep an external reference to your object to ensure that it stays in memory. when used with a tabbrowser, you cannot choose which types of events th...
...And 4 more matches
Providing Command-Line Options - Archive of obsolete content
gory. see also: xulrunner:commandline overview the code below is an example of writing a javascript xpcom component to handle command line parameters. you can learn more about how the command line is interpreted by looking at the documentation for the nsicommandline interface. 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. using the example to use this sample code, save the commandline.js file into the components directory and add the following lines to your chrome.manifest file: component {2991c315-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandl...
...tup;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. ...
...s; 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. * @param achromeurispec a string specifying the uri of the
window to open. ...
...And 4 more matches
Adding Event Handlers - Archive of obsolete content
to add a script to handle the find button, the cancel button and to handle each menu command. we write this using javascript functions much in the same way as html. you can use the script element to include scripts in xul files. ...
... <script src="findfile.js"/> we'll create the script file later when we know what we want to put in it. we'll define some functions in the file and we can call them in event handlers. you can include multiple scripts in a xul file by using multiple script tags, each pointing to a different script. you may use relative or absolute urls. ...
...chanism as defined by dom events. when an action occurs that would trigger an event, such as the user moving the mouse, an event object is created corresponding to that event type. various properties are set on the event object such as the mouse position, the key that was pressed, and so forth. the event is then sent to the xul in phases. in the capturing phase, the event is first sent to the
window, then to the document, followed by each ancestor of the xul element where the event occured downwards until it reaches that element. in the target phase, the event is sent to the target xul element. in the bubbling phase, the event is sent to each element back upwards until it reaches the
window again. you can respond to an event during either the capturing or bubbling phase. once the event h...
...And 4 more matches
Content Panels - Archive of obsolete content
« previousnext » in this section, we'll look at how to add panels that can display html pages or other xul files. adding child panels there may be times when you want to have part of a document loaded from a different page. sometimes, you will want to change part of the
window. a good example is a step-by-step wizard that guides you through a number of screens, asking a set of questions. each time the user clicks the next button, the next screen of the wizard is displayed. you could create a wizard interface by opening a different
window for each screen. there are three problems with this approach. first, each
window could appear in a different location (although there are ways around this). second, the elements such the back and next buttons are the same throughout the int...
...w for each screen. there are three problems with this approach. first, each
window could appear in a different location (although there are ways around this). second, the elements such the back and next buttons are the same throughout the interface. it would be much better if just the content area of the wizard changed. third, it would be difficult to co-ordinate scripts when running in different
windows. note that xul does have a wizard element which may be used to create wizard interfaces. this will be described in a later section. another approach is to use the iframe element, which works much like the html element of the same name. it creates a separate document within the
window. it has the advantage that it can be placed anywhere and the contents can be loaded from a different file. set th...
...when the user enters a url or clicks on a link in a document, the source of the frame is changed. ...
...And 4 more matches
Creating Dialogs - Archive of obsolete content
« previousnext » a xul application will often require dialogs to be displayed. this section describes how one might construct them. 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. it displays a dialog instead of a
window, which implies that it is asking something of the user. it also has subtle differences in the way it works and appears to the user. these differences will vary depending on the platform the application is running on. in addition, the opendialog() function can take additional arguments beyond the first three. these arguments are passed to the new dialog and placed in an array stored in the new
window's arguments property. you can pass as many arguments as you wi...
...ning on. in addition, the opendialog() function can take additional arguments beyond the first three. these arguments are passed to the new dialog and placed in an array stored in the new
window's arguments property. you can pass as many arguments as you wish. this is a convenient way to supply default values to the fields in the dialog. var somefile=document.getelementbyid('enterfile').value;
window.opendialog("chrome://findfile/content/showdetails.xul","showmore", "chrome",somefile); in this example the dialog showdetails.xul is displayed. it's passed one argument, somefile, which was taken from the value of an element with the id enterfile. in a script used by the dialog, we can then refer to the argument using the
window's arguments property. for example: var fl = win...
...mple the dialog showdetails.xul is displayed. it's passed one argument, somefile, which was taken from the value of an element with the id enterfile. in a script used by the dialog, we can then refer to the argument using the
window's arguments property. for example: var fl =
window.arguments[0]; document.getelementbyid('thefile').value = fl; this is an effective way to pass values to the new
window. you can pass values back from the opened
window to the original
window in one of two ways. first, you could use the
window.opener property which holds the
window that opened the dialog. second, you could pass a function or object as one of the arguments when creating the dialog, then call that function or modify the object in the opened dialog. note: opendialog() requires universalbrowserwrite...
...And 4 more matches
Cross Package Overlays - Archive of obsolete content
« previousnext » this section describes how to apply overlays to files that don't import them. applying overlays to other packages note: this section talks about contents.rdf which has been replaced in gecko 1.8 by manifest files. overlays have another very useful feature. in the examples in the previous section, the overlays were imported by the
window. you can also go the other way and have the overlays specify which
windows that they apply to. you specify this by modifying the contents.rdf file for your package. this is useful because the overlay can modify the user interface of another package without changing the other package. for example, you could add menu items or toolbars to the mozilla browser
window. we'll use this feature to add a toolbar to the mozilla browser w...
...for example, if mail is not installed, there will be no new message command. ...
... menu to add the new message command. below, we'll add a find files toolbar to the browser. it probably wouldn't be useful to have this feature, but we'll do it anyway. mozilla allows you to add a list of overlays to the contents.rdf file that you use to list chrome packages, skins and locales. once you have created an overlay, you can add it to the contents.rdf file. then add items, one for each
window that you want the overlay to apply to. our find files example first, let's create a simple overlay. it will just have a few elements for entering a filename and directory to search. call the file foverlay.xul and add it to the findfile directory along with findfile.xul. our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeepe...
...And 4 more matches
Keyboard Shortcuts - Archive of obsolete content
ose" accesskey="c"/> </menupopup> </menu> </menubar> you can also use the accesskey attribute on buttons. when the key is pressed in this case, the button is selected. you might want to set up more general keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. although shortcuts such as this might not always be valid, they will usually work any time the
window is open. usually, a keyboard shortcut will be allowed at any time and you can check to see whether it should do something using a script. for example, copying text to the clipboard should only work when some text is selected. key element xul provides an element, key, which lets you define a keyboard shortcut for a
window. it has attributes to specify the key that should be pressed and what modi...
... which case they will be mapped to modifier keys that you do have. the key element must be placed inside a keyset element. this element is designed for holding a set of key elements, which serves to group all of the key definitions in one place in a file. any key elements outside of a keyset element will not work. each platform generally uses a different key for keyboard shortcuts. for example,
windows uses the control key and the macintosh uses the command key. it would be inconvenient to define separate key elements for each platform. luckily, there is a solution. the modifier accel refers to the special platform-specific key used for shortcuts. it works just like the other modifiers, but won't be the same on every platform. here are some additional examples: <keyset> <key id="copy-key" ...
...ement. when the user presses the key, the script will be invoked. an example is shown below: <keyset> <key id="copy-key" modifiers="accel" key="c" oncommand="docopy();"/> </keyset> the function docopy will be called when the user presses the keys specified by the key element, which in this example, are the keys for copying to the clipboard (such as control + c). this will work as long as the
window is open. the docopy function should check to see if text is selected and then copy the text to the clipboard. note that textboxes have the clipboard shortcuts built-in so you don't have to implement them yourself. assigning a keyboard shortcut on a menu the second way is: if you are assigning a keyboard shortcut that performs a command that also exists on a menu, you can associate the key eleme...
...And 4 more matches
Using multiple DTDs - Archive of obsolete content
have a single dtd (document type definition) to localize a specific xul file. but there are situations where you want to use multiple dtds, for example to localize common widgets used in all your xul files, additionally to the ones specific to the file. ...
...o localize a specific xul file. but there are situations where you want to use multiple dtds, for example to localize common widgets used in all your xul files, additionally to the ones specific to the file. ...
...xul file. but there are situations where you want to use multiple dtds, for example to localize common widgets used in all your xul files, additionally to the ones specific to the file. single dtd to make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype
window system "chrome://myextension/locale/main
window.dtd"> where "
window" is the local name of the document (root) element. ...
...And 4 more matches
browser - Archive of obsolete content
d to use the document and history objects to change the displayed document. ...
...oolean whether or not to cause a typing caret to be visible in the content area. default is false. src type: uri the uri of the content to appear in the element. type type: one of the values below. the type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the
window containing the browser. more precisely: the document loaded into a chrome
window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. this bou...
...the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. ...
...And 4 more matches
dialog - Archive of obsolete content
the buttons attribute may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
..., buttonaccesskeydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, center
windowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my...
...this only affects mac os x. buttonaccesskeyaccept type: string the access key to use for the "accept" button. buttonaccesskeycancel type: string the access key to use for the "cancel" button. buttonaccesskeydisclosure type: string the access key to use for the "di...
...And 4 more matches
resizer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element used for
window resizing. if you place a custom resizing button inside the resizer, the user will be able to resize the
window by dragging it. the resizer will send a command event after the resize is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the
window. ...
...custom resizing button inside the resizer, the user will be able to resize the
window by dragging it. the resizer will send a command event after the resize is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the
window. ...
...sizing button inside the resizer, the user will be able to resize the
window by dragging it. the resizer will send a command event after the resize is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the
window. ...
...And 4 more matches
titlebar - Archive of obsolete content
if the titlebar is in a panel element, dragging it will move the panel. elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. ...
...if the titlebar is in a panel element, dragging it will move the panel. elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. ...
...if the titlebar is in a panel element, dragging it will move the panel. elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. ...
...And 4 more matches
Building XULRunner with Python - Archive of obsolete content
see also xulrunner. or, if you are interested in working with xulrunner with python on linux, see mark lise's post with the python extensions enabled xulrunner provides python script access to the dom and xpcom in addition to the usual java script. this gives access to python features and modules and builds on mark hammond's pyxpcom work from active state. xpcom components can also be created in python. currently (mar 07) python is not enabled by default so a custom build of mozilla is needed. ...
...nded. apply any service packs and for msvc71 sp 1 is available. the matching platform sdk is also needed and for msvc71 that is .net framework sdk 1.1. the latest mozilla build system is easy to use. install the included python distro usingpython25\python-2.5.msi. it doesn't need to be installed for the build but will be useful later when installing python packages which look for entries in the
windows' registry. building the batch filestart-msvc71.bat is used to launch the build console (msys from the mingw project ). if you plan to checkout often into empty folders you could modify it to set the cvsroot environment variable. set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot having created amozilla project directory (e.g.c:\projects\mozilla or/c/projects/mozilla in msys) cre...
... build, use cd /c/projects/mozilla make -f client.mk which will also checkout client.mk itself for build only, without checkouts, use make -f client.mk build and see client.mk for other options. the built xulrunner can then be found asc:\projects\obj-xulrunner\dist\bin\xulrunner.exe. using python in xul applications add the following to yourprefs.js during development pref("browser.dom.
window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used withtype="application/x-python" attribute. dom scripting is pretty much as with java script. for example def onload(): btntest = docume...
...And 4 more matches
Client-side storage - Learn web development
nt declarations, add the following lines: // create an instance of a db object for us to store the open database in let db; here we are declaring a variable called db — this will later be used to store an object representing our database. we will use this in a few places, so we've declared it globally here to make things easier. ...
...to store the open database in let db; here we are declaring a variable called db — this will later be used to store an object representing our database. we will use this in a few places, so we've declared it globally here to make things easier. ...
...eclaring a variable called db — this will later be used to store an object representing our database. we will use this in a few places, so we've declared it globally here to make things easier. ...
...And 4 more matches
A bird's-eye view of the Mozilla framework
author: susan d. tiner last updated date: 11/23/05 statement of purpose the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework. it examines what happens when the user performs a simple user interface (ui) action such as clicking a link in the contents panel of the help viewer
window shown below. ...
...the build id is 2005110409. ...
...ndow shown below. the article focuses on the architecture of the overall framework supporting the mozilla application suite, not the architecture of the individual applications themselves. prerequisites this article assumes you have access to mozilla sources and are familiar with the directory structure of the source tree. the code samples in the article are based on mozilla/5.0 (
windows; u;
windows nt 5.1; en-us; rv:1.9a1) gecko/20051104 seamonkey/1.1a from a new source tree checked out 11/04/05. the build id is 2005110409. thehelp viewer files referenced in the article are located in /seamonkey/extensions/help/ this article also assumes you are familiar with the javascript and c++ programming languages, object-oriented programming (oop) terminology and design concepts, the microsoft® c...
...And 4 more matches
Eclipse CDT Manual Setup
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. something like $home/eclipse-workspaces/mozilla-tree-1, for example. after selecting an appropriate directory, click ok, then close the "welcome" tab when the main eclipse
window opens. before you proceed any further, check that your changes to eclipse's memory limits have taken effect and are present in eclipse/help > about eclipse > installation details > configuration. to avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll get to the details below). whenever you create a new works...
...esent in eclipse/help > about eclipse > installation details > configuration. to avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll get to the details below). whenever you create a new workspace for a mozilla source tree, you should be sure to turn off the following two settings in the workspace preferences (
window > preferences, or eclipse > preferences) before creating a project in that workspace: in "general > workspace", disable "build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing prevents the cpu intensive indexer from running at various stages during the steps below before we're ready. select "general > content types", expand "text ...
...select "run/debug > console" and deselect "limit console output". if you want to increase the text size in the editor, select "general > appearance > colors and fonts", select "basic > text font", and edit the font size. creating an eclipse project to create an eclipse project for your mozilla source tree, select "file > new > makefile project with existing code". in the "import existing code"
window that opens, enter a meaningful project name that identifies your mozilla source tree, set the code location to the root of your source tree, select an appropriate toolchain (e.g., "macosx gcc"), and click finish. the status bar at the bottom right of the
window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree). click on the little g...
...And 4 more matches
Limitations of frame scripts
nager) htmlinputelement.mozsetfilenamearray (alternative: mozsetfilearray) xul and browser ui anything that tries to touch the browser ui or anything to do with xul is likely to not work in the content process. for example: nsipromptservice nsifilepicker nsixul* <need more examples> services some services will not work in frame scripts. services.search services.downloads chrome
windows anything that needs to use chrome
windows will not work in the content process. for example: nsisessionstore nsi
windowmediator <need more examples> places api the places api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers should be registered ...
...s> places api the places api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers should be registered in the chrome process and will not work in the content process. ...
...ces api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers should be registered in the chrome process and will not work in the content process. ...
...And 4 more matches
Limitations of frame scripts
amearray (alternative: mozsetfilearray) file: uris, see bug 1187099 <...> xul and browser ui anything that tries to touch the browser ui or anything to do with xul is likely not to work in the content process. for example: nsipromptservice nsifilepicker nsixul* <need more examples> services some services will not work in frame scripts. services.search services.downloads chrome
windows anything that needs to use chrome
windows will not work in the content process. for example: nsisessionstore nsi
windowmediator <need more examples> places api the places api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers should be registered ...
...s> places api the places api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers should be registered in the chrome process and will not work in the content process. ...
...ces api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers should be registered in the chrome process and will not work in the content process. ...
...And 4 more matches
Embedding the editor
embedded in an html document, and is not meant to infer that future versions of mozilla will support this specific tag. composer embedded in a xul application developers need to embed composer widgets in their xul applications, by using the <editor> tag as we do today. they should need to do as little work as possible to get basic editing functionality, be able to have any number of <editor>s per
window, and control whether those <editor>s are in html or plain text mode. composer embedded in a native application in this application, the <iframe> on which the editor lives is embedded directly in the native application; this is equivalent to embedding the browser via nsiwebbrowser, but instead having an editable document. the composer chrome (toolbars etc) may be implemented by the embedder using ...
...an be displayed either as a toolbar at the top of the <htmlarea>, a floating palette, or a top-level toolbar. current problems the current composer architecture was created while other parts of mozilla were still under development, and as a result it suffers from a number of shortcomings, and anachronisms. this section describes its major faults. editor incorrectly rooted the editor in a composer
window is current owned by the nseditorshell, which in turn is created, owned and destroyed by the nseditorboxobject. the box object is a layout structure that is owned by content nodes, and survives frame destruction/recreation. the box object also has a reference to the docshell for the editor frame. xbl creates an nseditorboxobject for each <editor> tag, and allows javascript to access properties of ...
...s created; in all other respects, it behaves like a xul <iframe>. the problem with this ownership model is that there can be only one editor per <editor> tag, yet the document loaded in the <iframe> may itself contain multiple <iframe>s (consider a frameset document, or a document itself containing an <html:iframe>). currently, composer does not deal gracefully with such documents. one editor per
window limitation the current composer
window xul/c++ architecture has grown up with the assumption that there can be just one <editor> tag per
window. at
window construction time, we get the editorshell from the <editor> element, and put that into
window.editorshell. thence, lots of javascript in editor.js, composercommands.js and the various dialog js files assume that they can get at the one true edi...
...And 4 more matches
Widget Wrappers
properties all of a wrapper's properties are read-only unless otherwise indicated. attribute description id the widget's id type the type of widget (button, view, custom). ...
...properties all of a wrapper's properties are read-only unless otherwise indicated. attribute description id the widget's id type the type of widget (button, view, custom). ...
...properties all of a wrapper's properties are read-only unless otherwise indicated. attribute description id the widget's id type the type of widget (button, view, custom). ...
...And 4 more matches
SpiderMonkey Build Documentation
when building a version older than 28, you'll additionally need nspr. and of course, you'll need to get the spidermonkey source code. ...
...ey for production use or run performance benchmarks. (if you want to use spidermonkey as a library in your c++ application, or work on improving spidermonkey itself, do a developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it. mkdir build_opt.obj cd build_opt.obj /bin/sh ../configure.in # use "mozmake" on
windows make a few notes about this: the most common build problems are dependency problems. see the build prerequisites page for your platform. spidermonkey does not support building in your source directory. you must configure and build in a separate build directory, as shown above. note: if you are on mac and getting an error similar to "checking whether the c compiler (gcc-4.2 )...
...ng) and an optimized build (for performance testing), in separate build directories. thus, in addition to following the steps above, you should also create a debug build using these steps: cd js/src # this name should end with "_dbg.obj" to make the version control system ignore it. mkdir build_dbg.obj cd build_dbg.obj /bin/sh ../configure.in --enable-debug --disable-optimize # use "mozmake" on
windows make you can also build debug builds of spidermonkey with the js_gc_zeal option, which adds a new built-in function to spidermonkey that lets you configure zealous garbage collection. this can help debug memory leaks and other memory-related problems. see js_setgczeal() for details. for a list of other available build options, type (assuming the current working directory is one of the above-...
...And 4 more matches
nsIDOMGlobalPropertyInitializer
dom/interfaces/base/nsidomglobalpropertyinitializer.idlscriptable an initializer for global properties that lets them know about the
window they're being attached to. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) an xpcom component implementing this interface can be exposed to web content as a property on the
window. see custom
window properties are a snap in firefox blog post for details. an alternative way to expose an object to the web content is to add the property in response to the content-document-global-created notification. ...
... return value the initialized global property. ...
... return value the initialized global property. ...
...And 4 more matches
nsIScriptError2
js/src/xpconnect/idl/nsiscripterror.idlscriptable represents javascript errors and warnings for use by the console service; augments nsiscripterror by adding a way to initialize the error with the
window id of the outer
window with which the error is associated. 1.0 66 introduced gecko 2.0 obsolete gecko 12.0 inherits from: nsiscripterror last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) in gecko 12.0 this interface was merged into the nsiscripterror interface. ...
...the error with the
window id of the outer
window with which the error is associated. 1.0 66 introduced gecko 2.0 obsolete gecko 12.0 inherits from: nsiscripterror last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) in gecko 12.0 this interface was merged into the nsiscripterror interface. method overview void initwith
windowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long inner
windowid); attributes attribute type description inner
windowid unsigned long long the inner
window id with which the error is associated. this is zero if the error was initializ...
...read only. ...
...And 4 more matches
nsIWebBrowser
embedding/browser/webbrowser/nsiwebbrowser.idlscriptable this interface is implemented by web browser objects. embedders use this interface during initialization to associate the new web browser instance with the embedders chrome and to register any listeners. the interface may also be used at runtime to obtain the content dom
window and from that the rest of the dom. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0. method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute ...
...ox 4 / thunderbird 3.3 / seamonkey 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0. method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description container
window nsiwebbrowserchrome the chrome object associated with the browser instance. the embedder must create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the chrome object before creating the browser
window via the browser's nsibase
window interface. the chrome object must also implement nsiembedding...
...nsiwebbrowserchrome the chrome object associated with the browser instance. the embedder must create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the chrome object before creating the browser
window via the browser's nsibase
window interface. the chrome object must also implement nsiembeddingsite
window. the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object. the chrome object may optionally implement nsiwebprogresslistener instead of explicitly calling addwebbrowserlistener() and removewebbrowserlistener() to register a progress listener object. if the ...
...And 4 more matches
XPCOM Interface Reference
verteroutputstreamnsicookiensicookie2nsicookieacceptdialognsicookieconsentnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchrome
windownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositi...
...eptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjs
windownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstorageman...
...eventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstorage
windownsidomuserdatahandlernsidom
windownsidom
window2nsidom
windowinternalnsidom
windowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelementnsidomxulselectcontrolelementnsidomxulselectcontrolitemelementnsidatasignatureverifiernsidebugnsidebug2nsidevicemotionnsidevicemotiondatansidevicemotionlistenernsidialogc...
...And 4 more matches
Using COM from js-ctypes
the
windows api mostly concerns itself with the interaction between the operating system and an application. for communication between the different
windows applications among themselves, microsoft has developed a series of technologies alongside the main
windows api. this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. ...
...ich was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create
windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c. after that, we can pass a pointer . speech synthesis example let's start with following c++ code, which invokes microsoft speech api and says "hello, firefox!" with syste...
...cription here. ...
...And 4 more matches
Toolbox - Firefox Developer Tools
the toolbox provides a single home for most of the developer tools that are built into firefox. 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. ...
...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. see also keyboard shortcuts. by default, the
window appears docked to the bottom side of the firefox
window, but you can detach it if you like. this is what it looks like when it's docked: the
window itself is split into two parts: a toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish (bug 1226272). docking mode by default...
...but you can detach it if you like. this is what it looks like when it's docked: the
window itself is split into two parts: a toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish (bug 1226272). docking mode by default, the toolbox appears docked to the bottom of the browser
window, but you can also dock it to the right-hand side of the
window, or make it a standalone
window, using buttons in the toolbar. toolbar the toolbar contains controls to activate a particular tool, to dock/float the
window, and to close the
window. node picker on the far left there's a button to activate the node picker. this lets you select a page element for inspection. see "selecting elemen...
...And 4 more matches
HTMLFrameSetElement - Web APIs
the htmlframesetelement interface provides special properties (beyond those of the regular htmlelement interface they also inherit) for manipulating <frameset> elements. properties inherits properties from its parent, htmlelement and from
windoweventhandlers. htmlframesetelement.cols is a domstring structured as a comma-seperated list specifing the width of each column inside a frameset. htmlframesetelement.rows is a domstring structured as a comma-seperated list specifing the height of each column inside a frameset. ...
...tmlelement and from
windoweventhandlers. htmlframesetelement.cols is a domstring structured as a comma-seperated list specifing the width of each column inside a frameset. htmlframesetelement.rows is a domstring structured as a comma-seperated list specifing the height of each column inside a frameset. methods no specific method; inherits methods from its parent, htmlelement and from
windoweventhandlers. event handlers no specific event handler; inherits event handlers from its parent, htmlelement and from
windoweventhandlers.
windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised. w...
...enthandlers.
windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised.
windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised.
windoweventhandlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised.
windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised.
windoweventhandlers.onlanguagechange is an eventhandler representing the code to be called when the languagechange event is raised.
windoweventhandlers.onmessage is an eventhandler representing the code to be called when the message event is raised. ...
...And 4 more matches
Online and offline events - Web APIs
specification: the navigator.online attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)... firefox 2 updates this property when switching to/from the browser's offline mode. firefox 41 updates this property when the os reports a change in network connectivity on
windows, linux, and os x. this property existed in older versions of firefox and internet explorer (the specification based itself off of these prior implementations), so you can begin using it immediately. network status autodetection was implemented in firefox 2. "online" and "offline" events firefox 3 introduces two new events: "online" and "offline". these two events are fired on the <body> of ea...
...implementations), so you can begin using it immediately. network status autodetection was implemented in firefox 2. "online" and "offline" events firefox 3 introduces two new events: "online" and "offline". these two events are fired on the <body> of each page when the browser switches between online and offline mode. additionally, the events bubble up from document.body, to document, ending at
window. ...
...and "offline". these two events are fired on the <body> of each page when the browser switches between online and offline mode. additionally, the events bubble up from document.body, to document, ending at
window. both events are non-cancellable (you can't prevent the user from coming online, or going offline). firefox 41 fires these events when the os reports a change in network connectivity on
windows, linux, and os x. ...
...And 4 more matches
Using the Payment Request API - Web APIs
te('success') .then(function() { // finish handling payment }); }) } }) paymentrequest.abort() can be used to abort the payment request if required. detecting availability of the payment request api you can effectively detect support for the payment request api by checking if the user's browser supports paymentrequest, i.e. ...
...t api you can effectively detect support for the payment request api by checking if the user's browser supports paymentrequest, i.e. if (
window.paymentrequest). in the following snippet, a merchant page performs this check, and if it returns true updates the checkout button to use paymentrequest instead of legacy web forms. const checkoutbutton = document.getelementbyid('checkout-button'); if (
window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment. for example, redirect to // the legacy web form ch...
...t) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment. for example, redirect to // the legacy web form checkout:
window.location.href = '/legacy-web-form-checkout'; }); // every click on the checkout button should use a new instance of // paymentrequest object, because paymentrequest.show() can be // called only once per instance. request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); }); } note: see our feature detect support demo for the ful...
...And 4 more matches
Screen.height - Web APIs
internet explorer will take into account the zoom setting when reporting the screen height. ...
... internet explorer will take into account the zoom setting when reporting the screen height. ...
... internet explorer will take into account the zoom setting when reporting the screen height. ...
...And 4 more matches
Using the Screen Capture API - Web APIs
er way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share. both of these implementations of startcapture() return the mediastream containing the captured display imagery. see options and constraints, below, for more on both how to specify the type of surface you want as well as other ways to adjust the resulting stream. example of a
window allowing the user to select a display surface to capture you can then use the captured stream, capturestream, for anything that accepts a stream as input. the examples below show a few ways to make use of the stream. visible vs logical display surfaces for the purposes of the screen capture api, a display surface is any content object that can be selected by the api for sharing purposes. sh...
... can then use the captured stream, capturestream, for anything that accepts a stream as input. the examples below show a few ways to make use of the stream. visible vs logical display surfaces for the purposes of the screen capture api, a display surface is any content object that can be selected by the api for sharing purposes. sharing surfaces include the contents of a browser tab, a complete
window, all of the applications of a
window combined into a single surface, and a monitor (or group of monitors combined together into one surface). there are two types of display surface. a visible display surface is a surface which is entirely visible on the screen, such as the frontmost
window or tab, or the entire screen. a logical display surface is one which is in part or completely obscured, ei...
...api varies. generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or pattern. this is done for security reasons, as the content that cannot be seen by the user may contain data which they do not want to share. a user agent might allow the capture of the entire content of an obscured
window after gaining permission from the user to do so. in this case, the user agent may include the obscured content, either by getting the current contents of the hidden portion of the
window or by presenting the most-recently-visible contents if the current contents are not available. options and constraints the constraints object passed into getdisplaymedia() is a displaymediastreamconstraints obj...
...And 4 more matches
SubtleCrypto.deriveKey() - Web APIs
try the working examples on github. ecdh in this example alice and bob each generate an ecdh key pair, then exchange public keys. they then use derivekey() to derive a shared aes key, that they could use to encrypt messages. see the complete code on github. ...
... let alicessecretkey = await derivesecre...
... let alicessecretkey = await derivesecretkey(aliceskeypair.privatekey, bobskeypair.publickey); // bob generates the same secret key using his private key and alice's public key. let bobssec...
...And 4 more matches
WebGL model view projection - Web APIs
will draw a 2d box on the screen. note: the code for each webglbox example is available in this github repo and is organized by section. in addition there is a jsfiddle link at the bottom of each section. ...
...the code for each webglbox example is available in this github repo and is organized by section. in addition there is a jsfiddle link at the bottom of each section. ...
.... the results view on jsfiddle at this point the w value of the transformed point is still 1.0. the cube still doesn't have any perspective. the next section will take this setup and modify the w values to provide some perspective. exercises shrink down the box using the scale matrix and position it in different places within clip space. try moving it outside of clip space. resize the
window and watch as the box skews out of shape. add a rotatez matrix. divide by w an easy way to start getting some perspective on our model of the cube is to take the z coordinate and copy it over to the w coordinate. normally when converting a cartesian point to homogeneous it becomes (x,y,z,1), but we're going to set it to something like (x,y,z,z). in reality we want to make sure that z is greate...
...And 4 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
t-text; -webkit-appearance: menulist-text; } <div>lorem</div> firefox chrome safari edge menulist-textfield div { color: black; -moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; } <div>lorem</div> firefox chrome safari edge the element is styled as the text field for a menulist. (not implemented for the
windows platform) meterbar div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>lorem</div> firefox use meter instead. number-input div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>lorem</div> firefox progress-bar-value ...
...ck; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; } <div>lorem</div> safari edge searchfield-results-decoration div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; } <div>lorem</div> chrome safari edge (works on chrome 51 on
windows 7) searchfield-results-button div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; } <div>lorem</div> safari edge searchfield-cancel-button div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>lorem</div> chrome safari edge ...
...in firefox 64. -moz-win-communicationstext firefox removed in firefox 64. -moz-win-communications-toolbox firefox removed in firefox 64. -moz-win-exclude-glass firefox removed in firefox 64. -moz-win-glass firefox removed in firefox 64. -moz-win-media-toolbox firefox removed in firefox 64. ...
...And 4 more matches
Localizations and character encodings - Developer guides
-8 and declaring that utf-8 was used was not always the prevalent way of offering web content. in the 1990s, it was common to leave the encoding undeclared and to use a region-specific encoding that wasn't able to represent all of unicode. firefox needs a fallback encoding that it uses for non-conforming legacy content that doesn't declare its encoding. for most locales, the fallback encoding is
windows-1252 (often called iso-8859-1), which was the encoding emitted by most
windows applications in the 1990s and a superset of the encoding emitted by most unix applications in the 1990s as a deployed in the america has and in western europe. however, there are locales where web publishing was common already in the 1990s but the
windows-1252 encoding was not suitable for the local language. in these...
...perset of the encoding emitted by most unix applications in the 1990s as a deployed in the america has and in western europe. however, there are locales where web publishing was common already in the 1990s but the
windows-1252 encoding was not suitable for the local language. in these locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than
windows-1252. in order to work with legacy content, some firefox localizations need a non-
windows-1252 fallback encoding. unfortunately, this means that the web-exposed functionality of firefox differs by locale and it is hard to read legacy content across locales with different fallback encodings. to avoid introducing this problem in locales where web publishing took off after the adoption of utf-8, l...
... legacy content, some firefox localizations need a non-
windows-1252 fallback encoding. unfortunately, this means that the web-exposed functionality of firefox differs by locale and it is hard to read legacy content across locales with different fallback encodings. to avoid introducing this problem in locales where web publishing took off after the adoption of utf-8, locales that don't have a non-
windows-1252 legacy encoding arising from the practices of the 1990s, should leave the fallback encoding at
windows-1252 to facilitate reading content cross-locale from the old locales whose fallback encoding is
windows-1252. new-authored locale-native utf-8 content is expected to declare its encoding, in which case the fallback encoding does not participate in the processing of content. additionally, ...
...And 4 more matches
Browser detection using the user agent - HTTP
ou can do this using css by simply increasing the font size). here is an example of code that increases the padding of #examplebutton to 1em on mobile devices. ...
...chscreen = false; if ("maxtouchpoints" in navigator) { hastouchscreen = navigator.maxtouchpoints > 0; } else if ("msmaxtouchpoints" in navigator) { hastouchscreen = navigator.msmaxtouchpoints > 0; } else { var mq =
window.matchmedia && matchmedia("(pointer:coarse)"); if (mq && mq.media === "(pointer:coarse)") { hastouchscreen = !!mq.matches; } else if ('orientation' in
window) { hastouchscreen = true; // deprecated, but good fallback } else { // only as a last resort, fall back to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|
windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.getelem...
... // only as a last resort, fall back to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|
windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use
window.innerwidth and
window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }). what you want to do for screen size is not slash off information on smaller screens. that will only annoy people because it will force them to use the desktop version. rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter...
...And 4 more matches
Firefox user agent string reference - HTTP
niffing and this hacks blog post. general form the ua string of firefox itself is broken down into four components: mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the browser is mozilla compatible, and is common to almost every browser today. platform describes the native platform the browser is running on (e.g.
windows, mac, linux or android), and whether or not it's a mobile phone. firefox os phones simply say "mobile"; the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. though fixed in firefox 69, previous 32-bit versions of firefox running on 64-bit processors would report that the system is using a 32-bit cpu. rv...
...ther phone/tablet operating systems or android is used for laptops. also, please use touch detection to find touch devices rather than looking for "mobi" or "tablet", since there may be touch devices which are not tablets. firefox os devices identify themselves without any operating system indication; for example: "mozilla/5.0 (mobile; rv:15.0) gecko/15.0 firefox/15.0". the web is the platform. ...
...e/tablet operating systems or android is used for laptops. also, please use touch detection to find touch devices rather than looking for "mobi" or "tablet", since there may be touch devices which are not tablets. firefox os devices identify themselves without any operating system indication; for example: "mozilla/5.0 (mobile; rv:15.0) gecko/15.0 firefox/15.0". the web is the platform. ...
...And 4 more matches
Content Processes - Archive of obsolete content
s to each other using the postmessage function. this function uses the same pipe internally, and causes a 'message' event to be emitted on the other side. as explained earlier, firefox doesn't yet use separate processes for tabs or add-ons, so instead, each content script is loaded in a sandbox. sandboxes were explained this article. ...
...and causes a 'message' event to be emitted on the other side. as explained earlier, firefox doesn't yet use separate processes for tabs or add-ons, so instead, each content script is loaded in a sandbox. sandboxes were explained this article. accessing the dom the global for the content sandbox has the
window object as its prototype. this allows the content script to access any property on the
window object, even though that object lives outside the sandbox. ...
... firefox doesn't yet use separate processes for tabs or add-ons, so instead, each content script is loaded in a sandbox. sandboxes were explained this article. accessing the dom the global for the content sandbox has the
window object as its prototype. this allows the content script to access any property on the
window object, even though that object lives outside the sandbox. recall that the
window object inside the sandbox is actually a wrapper to the real object. a potential problem with the content script having access to the
window object is that a malicious page could override methods on the
window object that it knows are being used by the add-on, in order to trick the add-on into doing something it does not expect. similarly, if the content script defines any values on the win...
...And 3 more matches
tabs/utils - Archive of obsolete content
functions for working with xul tabs and the xul tabbrowser object. globals functions activatetab(tab,
window) set the specified tab as the active, or selected, tab. parameters tab : tab a xul tab element to activate.
window :
window a browser
window. gettabbrowser(
window) get the tabbrowser element for the given browser
window. parameters
window :
window a browser
window. returns tabbrowser : gettabcontainer(
window) get the tabbrowser's tabcontainer property. parameters
window :
window a browser
window. returns tabcontainer : gettabs(
window) returns the tabs for the specified
window. if you omit
window, this function will return tabs across all the browser's
windows. however, if your add-on has not opted into private browsing, then the function will exclude all tabs ...
...get the tabbrowser's tabcontainer property. parameters
window :
window a browser
window. returns tabcontainer : gettabs(
window) returns the tabs for the specified
window. if you omit
window, this function will return tabs across all the browser's
windows. however, if your add-on has not opted into private browsing, then the function will exclude all tabs that are hosted by private browser
windows. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. parameters
window : nsi
window optional. returns array : an array of tab elements. getactivetab(
window) given a browser
window, get the active, or selected, tab. parameters
window :
window a browser
window. returns ta...
...how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. parameters
window : nsi
window optional. returns array : an array of tab elements. getactivetab(
window) given a browser
window, get the active, or selected, tab. parameters
window :
window a browser
window. returns tab : the currently selected tab. getowner
window(tab) get the browser
window that owns the specified tab. parameters tab : tab a browser tab. returns
window : a browser
window. 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. url : string url for the document to load. options : object optional options: name type ...
...And 3 more matches
Canvas code snippets - Archive of obsolete content
e.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load event. once the remote page has loaded, the remotepageloaded method fires. this method gets a reference to the iframe's
window and draws this
window to a canvas object. note that this only works if you are running the page from chrome. if you try running the code as a plain webpage, you will get a 'security error" code: "1000' error. remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() ...
... this
window to a canvas object. note that this only works if you are running the page from chrome. if you try running the code as a plain webpage, you will get a 'security error" code: "1000' error. remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var
windowwidth =
window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width =
windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens... add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotep...
... = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width =
windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens... ...
...And 3 more matches
Downloading Files - Archive of obsolete content
ource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser
window that the url // we are downloading comes from. if, and only if, the url is not // related to a
window, null should be used instead. var privacy = privatebrowsingutils.privacycontextfrom
window(urlsource
window); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, p...
...erpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser
window that the url // we are downloading comes from. if, and only if, the url is not // related to a
window, null should be used instead. var privacy = privatebrowsingutils.privacycontextfrom
window(aurlsource
window); var progresselement = document.getelementbyid("progress_element"); persist.progresslistener = { onprogresschange: function(awebprogress, arequest, acurselfprogress, amaxselfprogress, ac...
...uri(), you need to set the progresslistener property of the nsiwebbrowserpersist instance to an object that implements nsiauthprompt. normally, nsiauthprompt expects a prompt to be displayed so the user can enter credentials, but you can return a username and password credentials directly without prompting the user. ...
...And 3 more matches
Observer Notifications - Archive of obsolete content
. the first parameter (subject) can be any xpcom object, the second parameter is a notification topic, and the final parameter is a string that further describes the notification. this example code shows you what an implementation of the nsiobserver interface looks like: let testobserver = { observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") {
window.alert("data received: " + adata); } } } in order for this observer to work, you need to use the observer service that provides methods for you to add, remove, notify and enumerate observers. adding an observer to the observer service is simple, invoking the addobserver method with three parameters. the first parameter is an observer object, the second parameter is a notification topic, ...
...an be null). observerservice.notifyobservers(null, "xulschoolhello-test-topic", "hello"); non-chrome to chrome communication non-chrome to chrome communication is one of the main uses of observers. by non-chrome we mean javascript code modules or xpcom. as we saw in previous sections, you can use javascript code module and xpcom objects very easily from the chrome. but given that chrome is
window-dependent and non-chrome objects are not, it's tricky to send a message to the chrome. you would have to invoke a method for the chrome objects in all
windows. it's much easier to use observers in this case. let's see the following example code on how to send out a notification from non-chrome code. /** * notifies all the registered observers with the test notification topic. */ notifytest ...
...e notifytest method, the notifyobservers call is used to notify all registered observers about the notification topic "xulschoolhello-test-topic". the input parameter is an instance of nsisupportsstring with some text and the last input parameter is a string "hello". in a chrome browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the
window loads. keep in mind that you have to remove observers that are not longer needed. not doing so will result in memory leaks. therefore, the registered observer is unregistered when the browser
window is unloaded. /** * controls the browser overlay for the hello world extension. */ xulschoolchrome.browseroverlay = { /* observer service. */ _observerservice : null, /** * initializes t...
...And 3 more matches
Setting Up a Development Environment - Archive of obsolete content
recommend git and github for source control, but any decent software configuration management system will do. to package xpi files, we use make. we chose make because this is the same system used by mozilla to build firefox, and it is available for all operating systems. make is a default tool in most unix-based systems. it can be installed on mac os x as part of the xcode tools package, and on
windows with cygwin. in cygwin installations you'll have to explicitly check the make and zip utilities from the long list of packages to download and install. also make sure that make is in the executable system path. 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. we recommend you set up make in your system, s...
...e to restart it in order to see the changes. it's still better than installing the xpi all over again. you may need to alter the profile location in your makefile. in order to set the profile location to the right value, you should read the support article on profiles, at the mozilla support site. we'll also delve deeper in this topic later on in this section. to make "make install" work on non-
windows systems, you need an extra step. the install process requires using an environment variable called ostype, which is not exported. long story short, if you want to run it from a command line, you need to run: export ostype; make install and in the command in komodo, you should enter the following: bash -c "export ostype; make install" the export command won't work correctly unless you...
...g up multiple firefox profiles in the mozilla support article managing profiles. you can have as many profiles as you like. you can also mix them with multiple firefox installations. for instance, you may want to test your extension in firefox 3.5 and firefox 3.6, or test it in a localized version of firefox. you can install as many firefox versions as you want, and mix profiles and versions. on
windows and linux it's easy to create shortcuts for every profile you create, using the commands described at http://kb.mozillazine.org/command_line_arguments . for mac os x developers, there is also a way to set up "shortcuts". you can do this by opening the automator application, choosing run shell script and then entering the profile-loading script in the textbox: /applications/firefox.app/conten...
...And 3 more matches
Adding preferences to an extension - Archive of obsolete content
prefs is configured by startup() to reference our extension's preferences, while tickersymbol indicates the stock symbol to monitor. the first thing the startup() function does is to get a reference to the preferences for our extension. this is done in two steps: first, we get the preferences ser...
... stock to watch. we forcibly convert the symbol to upper-case since that's the way stock symbols are normally displayed. next, we call our own refreshinformation() method to immediately fetch and display the current information about the stock the extension is configured to monitor. we'll look at the details of how this method works later. the last thing the startup() method does is to call the
window.setinterval() dom method to set up a callback that will automatically run our refreshinformation() method every 10 minutes. the interval time is specified in milliseconds. shutdown() the stockwatcher.shutdown() method deactivates the observer on the preferences. this is also where we would add any other shutdown tasks we need to perform. shutdown: function() { this.prefs.removeobserver("",...
...this doesn't refer to the right object. see method binding for detailed explanation. once we have the symbol in the local variable symbol, we use that to construct the url and the string to display in the status bar panel. installing the event listeners the only thing left to do is to install the event listeners needed to run the startup() and shutdown() routines automatically when the browser
window is loaded and unloaded.
window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false);
window.addeventlistener("unload", function(e) { stockwatcher.shutdown(); }, false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>...
...And 3 more matches
Creating a dynamic status bar extension - Archive of obsolete content
nel. write the javascript code the work of fetching the stock quote and updating the status bar panel's display is handled by the javascript code in the file stockwatcher.js. unlike our previous sample, this one is implemented as an object. we do this because in future samples in this series, we're going to be doing things that are easier to do if our extension is implemented that way. 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(). the refreshinformation() function contains another function, called inforeceived(). the following sections ...
...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(). the refreshinformation() function contains another function, called inforeceived(). the following sections will examine these one by one. startup() the startup() function is called when a new browser
window is opened. ...
...("load", function(e) { stockwatcher.startup(); }, false); our new extension has two primary functions: startup() and refreshinformation(). the refreshinformation() function contains another function, called inforeceived(). the following sections will examine these one by one. startup() the startup() function is called when a new browser
window is opened. ...
...And 3 more matches
Creating a Microsummary - Archive of obsolete content
an xpath expression that points to the node in question is to use the xpath checker extension. install the extension (restarting firefox to complete installation) then go to the spread firefox home page, find the firefox download count (a large number at the bottom of the right-hand column), context click on the number, and select view xpath from the context menu. xpath checker will open a new
window. the new
window will include an xpath field that contains this xpath expression pointing to the download count node: id('download-count'). add a <value-of> element to the xslt <template> element whose select attribute contains that xpath expression: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <te...
...r with regular expressions, see creating regular expressions for a microsummary generator for a tutorial on writing them. making the generator available for download now that the generator applies to the spread firefox home page, the only thing left to do is to make it downloadable. ...
...that calls firefox's
window.sidebar.addmicrosummarygenerator() method to download and install the generator. ...
...And 3 more matches
JavaScript crypto - Archive of obsolete content
r. use <keygen> or the future web crypto api instead. using the mozilla crypto object from javascript mozilla defines a special javascript object to allow web pages access to certain cryptographic-related services. these services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom
window object as
window.crypto. services are provided to enable: smart card events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and signing text. handling smart card events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal events. to enable your document to receive these events, you ...
...t card events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and signing text. handling smart card events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal events. to enable your document to receive these events, you must first tell the crypto system you are interested by setting
window.crypto.enablesmartcardevents to true. you can then register event handlers for these events with the document.addeventlistener() method. two smart card related events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed. web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and remo...
...ers for these events with the document.addeventlistener() method. two smart card related events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed. web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and removals: <!doctype html> <p>... ...
...And 3 more matches
close - Archive of obsolete content
properties property type description target read only eventtarget the event target (the topmost target in the dom tree). ...
... properties property type description target read only eventtarget the event target (the topmost target in the dom tree). ...
... properties property type description target read only eventtarget the event target (the topmost target in the dom tree). ...
...And 3 more matches
ContextMenus - Archive of obsolete content
play a menu of commands pertaining to what was clicked on. context menu events there are various ways in which a context menu can be opened. the most common is by clicking on an element with the right mouse button. 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. on
windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a user has used the mouse to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the windo...
...ntlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the preventdefault method. this has the effect of disabling the context menu. the event listener is attached using the addeventlistener method within the 'init' function. ...
... the 'init' function. this might be called while initializing a
window during a load event for example. attaching context menus a context menu may be attached to an element using the context attribute, which may be applied to any xul element. the value of the context attribute should be the id of a context menu within the same document. in the example, a context menu is attached to a grid. ...
...And 3 more matches
Adding Buttons - Archive of obsolete content
like html, xul has a number of tags that can be used to create user interface elements. the most basic of these is the button tag. this element is used to create simple buttons. the button element has two main properties associated with it, a label and an image. you need one or the other or both. ...
... like html, xul has a number of tags that can be used to create user interface elements. the most basic of these is the button tag. this element is used to create simple buttons. the button element has two main properties associated with it, a label and an image. you need one or the other or both. ...
...ntirely, the button is enabled. you can switch the disabled state of the button using javascript. accesskey this should be set to a letter that is used as a shortcut key. this letter should appear in the label text and will typically be drawn underlined. when the user presses alt (or a similar key that varies on each platform) and the access key, the button will be focused from anywhere in the
window. note: buttons support more attributes than those listed above. others will be discussed later. some examples of buttons example 1 : source view <button label="normal"/> <button label="disabled" disabled="true"/> the examples above will generate the buttons in the image. the first button is a normal button. the second button is disabled so it appears greyed out. we'll start by creating ...
...And 3 more matches
Adding HTML Elements - Archive of obsolete content
you should avoid using html elements in xul files if you can. (there are some reasons, and the main one concerns the control of the layout described later). however, this section will describe how to use them anyway. ...
...you should avoid using html elements in xul files if you can. (there are some reasons, and the main one concerns the control of the layout described later). however, this section will describe how to use them anyway. ...
...ever, this section will describe how to use them anyway. remember that xml is case-sensitive though, so you'll have to enter the tags and attributes in lowercase. xhtml namespace in order to use html elements in a xul file, you must declare that you are doing so using the xhtml namespace. this way, mozilla can distinguish the html tags from the xul ones. ...
...And 3 more matches
Commands - Archive of obsolete content
erations, for instance. an example of this will be provided later. by default, only textboxes have a controller that does anything. the textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. note that an element may have multiple controllers, which will all be checked. if the currently focused element does not have a suitable controller, the
window is checked next. the
window also has a controllers property which you can modify if desired. if the focus is inside a frame, each frame leading to the top-level
window is checked as as well. this means that commands will work even if the focus is inside a frame. this works well for a browser, since editing commands invoked from the main menu will work inside the content area. note that html also ...
...the command dispatcher contains methods for retrieving controllers for commands and for retrieving and modifying the focus. ...
...the command dispatcher contains methods for retrieving controllers for commands and for retrieving and modifying the focus. adding controllers you can implement your own controllers to respond to commands. ...
...And 3 more matches
Creating a Skin - Archive of obsolete content
it using the url 'chrome://findfile/skin/findfile.css'. adding style rules first, let's decide what kind of changes we want to make. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. let's start with the menus, toolbars and the overall tab panel. the following style rules added to findfile.css will cause the changes shown in the accompanying image. ...
... four elements, the menubar, the menupopup, the toolbar and the tabpanels appear in light blue. ...
... four elements, the menubar, the menupopup, the toolbar and the tabpanels appear in light blue. the border around these four elements has been changed to give a heavier 3d appearance. you can see this if you look closely. ...
...And 3 more matches
Focus and Selection - Archive of obsolete content
the user can change the focus by clicking an element with the mouse or by pressing the tab key. when the tab key is pressed, the next element is given the focus. ...
...the user can change the focus by clicking an element with the mouse or by pressing the tab key. when the tab key is pressed, the next element is given the focus. ...
...andlers dynamically using the dom function addeventlistener. you can use it for any element and event type. it takes three parameters, the event type, a function to execute when the event occurs and a boolean indicating whether to capture or not. getting the currently focused element the currently focused element is held by an object called a command dispatcher, of which there is only one for the
window. the command dispatcher is responsible for keeping track of the focused element as the user uses the interface. the command dispatcher has other roles, which will be discussed in a later section on commands. for now, we'll look at some of the focus related features of the command dispatcher. you can retrieve the command dispatcher from a
window using the document's commanddispatcher property. fro...
...And 3 more matches
XUL FAQ - Archive of obsolete content
t xul applications? there are no production-quality visual editors available for xul. the recommended way is to edit xul by hand, possibly with the help of a good text or xml editor. ted mielczarek's live xul editor (also part of extension developer's extension) often proves useful. a list of projects (dead and active) aiming to create a xul ide/editor is at wikimo:xul:ide. ...
...there are no production-quality visual editors available for xul. the recommended way is to edit xul by hand, possibly with the help of a good text or xml editor. ted mielczarek's live xul editor (also part of extension developer's extension) often proves useful. a list of projects (dead and active) aiming to create a xul ide/editor is at wikimo:xul:ide. ...
...xml editor. ted mielczarek's live xul editor (also part of extension developer's extension) often proves useful. a list of projects (dead and active) aiming to create a xul ide/editor is at wikimo:xul:ide. troubleshooting pref
window-based options
windows this ought to be on a separate page, preferences system troubleshooting. it is a faq. ...
...And 3 more matches
XUL Event Propagation - Archive of obsolete content
sic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the focus of this article. ...
...ement that raised the event. this flexibility in the xul event model is the focus of this article. ...
...the hierarchy of the interface can be represented as follows: when one of these menuitems raises an event, any of the elements above it in the hierarchy can handle it. in the example above, when the menuitem raises the "command" event, indicating that it has been selected, the menupopup, the menu itself, the parent box, or...
...And 3 more matches
colorpicker - Archive of obsolete content
t is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...elow: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
... is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...And 3 more matches
iframe - Archive of obsolete content
the frame may have the same permissions as firefox itself. this can be a serious security vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...boolean whether or not to cause a typing caret to be visible in the content area. default is false. src type: uri the uri of the content to appear in the element. type type: one of the values below. the type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the
window containing the browser. more precisely: the document loaded into a chrome
window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. this bou...
...the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. ...
...And 3 more matches
panel - Archive of obsolete content
typically, it will be attached to a button using the button's type attribute so that when the button is pressed, the panel will be displayed. a panel may also be opened via a script using the openpopup method. the panel is closed when the user clicks outside the panel, presses escape or when the panel's hidepopup method is called. ...
... extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor. in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or
window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor. without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor. ignorekeys type: boolean if false, the default value, the escape key may be used to close the panel. if true, th...
...ue, the escape key may be used to close the panel. if true, the escape key cannot be used to close the panel. label type: string for panels with titlebars, the label on the titlebar. left type: integer overrides the horizontal position of the popup specified by the showpopup method. level type: one of the values below specifies whether the panel appears on top of all
windows, or just on top of the
window the panel is in. if this attribute is not set, the popup
window level depends on the platform. on linux, the default value is top, otherwise, the default value is parent. if a panel has one or more text fields, this attribute should not be set, otherwise ime or on-screen keyboard popups will appear incorrectly. for these reasons, you should avoid setting the level i...
...And 3 more matches
prefpane - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single preference panel in a pref
window. a prefpane is made up of two parts, the preferences descriptions, which specify the set of preferences that will be modified, and the user interface for adjusting those preferences. the former is specified using a preferences element while the latter may be specified using other xul elements. both may be specified directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file. in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences
window. more information is available in the preferences system article. attribu...
...es. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a
window. selected type: boolean this attribute will be set to true for the currently selected prefpane. to change the selected pane, use the pref
window's showpane method. src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. properties contentheight (readonly) ...
...ld(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events paneload this event is fired on the pane element when the pane is fully loaded (e.g. after the overlay is merged.) you can put the handler for this event in the onpaneload attribute on the element. using multiple prefpanes note that when using multiple prefpanes in the same pref
window, you must not put the <script> elements above the prefpane elements, but instead below them. otherwise the dialog will show erratic behavior and not display correctly. place the <script> tags as in the following example for preference dialogs to work correctly: <pref
window> <prefpane id="panegeneral" label="general"> ... </prefpane> <prefpane id="panesecurity" label="security"> ...
...And 3 more matches
tabbrowser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for holding a set of read-only views of web documents. it is similar to the browser element, except that multiple documents can be displayed, each in a separate tab. ...
...eference home [ examples | attributes | properties | methods | related ] this element is used for holding a set of read-only views of web documents. it is similar to the browser element, except that multiple documents can be displayed, each in a separate tab. ...
...in firefox
window and cannot be used in other xul
windows by third-party applications or extensions. ...
...And 3 more matches
wizard - Archive of obsolete content
this element provides the header and buttons along the bottom, and also handles navigation between the pages. each page should be constructed using a wizardpage. ...
...you use the next and pageid attributes on the pages to change the sequence. the wizard will rendered in a manner suitable for the user's selected theme and platform. in newer versions of mozilla, a statusbar may be placed directly inside the wizard element which will be shared among all pages. more information is available in the xul tutorial. ...
...moreover this hides separator between titlebar and win...
...And 3 more matches
CommandLine - Archive of obsolete content
handling command line arguments with xulrunner for multiple instances application it's fairly easy to retrieve application specific command line arguments in xulrunner when it's not a single instance application. an nsicommandline object is passed as the first argument of the launched
window: example var cmdline =
window.arguments[0]; cmdline = cmdline.queryinterface(components.interfaces.nsicommandline); alert(cmdline.handleflagwithparam("test", false)); see also: chrome: command line for single instance applications of course, for a single instance application (see toolkit.singleton
windowtype for more information), the last example still applies the first time your application is launched. however, if you'd like to retrieve the latest command line arguments (to open a file fo...
...anged"); } } var observer = new commandlineobserver(); // because we haven't yet registered a commandlineobserver when the application is // launched the first time, we simulate a notification here. ...
...irst time, we simulate a notification here. ...
...And 3 more matches
Dialogs in XULRunner - Archive of obsolete content
each dialog is described in its own xul file. ...
...s are pretty fundamental to a desktop application. certain types of dialogs are used so frequently that the os can provide a default implementation. file open and save dialogs are good examples of these. whenever possible, it is a good idea to reuse these "native" dialogs so users get a consistent experience across applications. custom dialogs building dialogs in xul is very similar to creating
windows. each dialog is described in its own xul file. xul provides a dialog element to act as the container for the dialog. dialog xul files can have dtd, css, and javascript, just like
windows. here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gat...
...file. xul provides a dialog element to act as the container for the dialog. dialog xul files can have dtd, css, and javascript, just like
windows. ...
...And 3 more matches
Archived Mozilla and build documentation - Archive of obsolete content
plug-ins in ie microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond. if you are a plug-in author, you may find this project saves you a lot of work! ant script to assemble an extension this ant script helps to package an extension archived spidermonkey docs this section contains old spidermonkey documentation. autodial for
windows nt this document is intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way. automated testing tips and tricks automatic mozilla configurator ankh8 automatically handle failed asserts in debug builds as of 2004-12-8, it is now possible to automatically handle failed a...
...s intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way. automated testing tips and tricks automatic mozilla configurator ankh8 automatically handle failed asserts in debug builds as of 2004-12-8, it is now possible to automatically handle failed asserts in debug builds of mozilla for
windows. blackconnect blackwood bonsai it is a tool that lets you perform queries on the contents of a cvs archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period. it also includes tools for looking at checkin logs (and comments); doing diffs...
...ake use of the standard jdk classes, e.g., javascript crypto mozilla defines a special javascript object to allow web pages access to certain cryptographic-related services. these services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom
window object as
window.crypto. jetpack litmus tests litmus tests are (non-automated) tests that are documented in the litmus database. see http://litmus.mozilla.org. makefile.mozextension.2 this makefile is a modification of the makefile.mozextention, found in makefile for packaging an extension - mozillazine knowledge base (2...
...And 3 more matches
NPN_GetURL - Archive of obsolete content
fied url. syntax #include <npapi.h> nperror npn_geturl(npp instance, const char* url, const char* target); parameters the function has the following parameters: instance pointer to the current plug-in instance. url pointer to the url of the request. can be of any type, such as http, ftp, news, or mailto. ...
...char* target); parameters the function has the following parameters: instance pointer to the current plug-in instance. url pointer to the url of the request. can be of any type, such as http, ftp, news, or mailto. target name of the target
window or frame, or one of the following special target names. values: _blank or _new: load the link in a new blank unnamed
window. safest target, even though, when used with a mailto or news url, this creates an extra blank the browser instance. _self or _current: load the link into the same
window the plug-in instance occupies. not recommended; if target refers to the
window or frame containing the instance, the instance is destroyed and the plug-in may be unloaded. use with npn_geturl() only if you want to terminate th...
...the default is _self, if the plug-in instance's document is already at the top. use for breaking out of a deep frame nesting. if the target is null, the browser creates a new stream and delivers the data to the current instance regardless of the mime type of the url. in general, if a url works in the location box of the browser, it works here, except for the _self target. ...
...And 3 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
with notes on how to fix common issues. it is a companion document to the amo editors guide common theme problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues. this document was started on july 27, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them. operating system specific issues
windows 7
windows 7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar. please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=...
...
windows 7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar. please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60
windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal
window properly. the resolution to this issue is to add the following code to your browser.css file somewhere below where the main-
window is made transparent to support aero glass. ...
...zine.org/viewtopic.php?f=18&t=1953371&start=60
windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal
window properly. the resolution to this issue is to add the following code to your browser.css file somewhere below where the main-
window is made transparent to support aero glass. @media all and (-moz-
windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-
window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread. mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702558, s...
...And 3 more matches
Theme changes in Firefox 3.5 - Archive of obsolete content
ed to be made to update a firefox theme to work properly in firefox 3.5. core, browser and toolkit changes requiring theme updates there are a number of changes in the browser that may require you to make changes to your theme. affected files details scrollbar.xml, xulscrollbars.css the <gripper> element was removed from the scrollbar thumb button by bug 448704. for the
windows and linux native default themes, the gripper is now drawn as a part of the background of the scrollbar thumb widget. third-party themes can still draw a gripper for the scrollbar thumb button by applying a centered background image to the scrollbar's thumb button. global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on ma...
...tons and checkboxes no longer have a minimum size on mac os x. if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check to 16px to avoid that problem. look at the patch to see what was changed for pinstripe. ...
... your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check to 16px to avoid that problem. look at the patch to see what was changed for pinstripe. bug 450944 changed the way
window shadow is handled on mac os x. before that change, opaque
windows always had a shadow and transparent
windows never had a shadow. after that change, transparent
windows also have a shadow by default. this can result in unwanted shadows in your theme, e.g. under the autoscroll icon or the identity panel. if you don't want the shadow, you can turn it off by setting the new -moz-
window-shadow css property to none on the affected element. browser.xul b...
...And 3 more matches
Theme changes in Firefox 4 - Archive of obsolete content
n toolbar buttons the iconsize attribute of the browser's toolbar elements now has a different default value on each toolbar independently. the value does not necessarily reflect the user preference in the toolbar customization palette anymore. the theme can now override the value by setting a special css property on the toolbar. the iconsize attribute of the toolbox element in the main browser
window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette. use of the iconsize attribute on toolbar elements add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar. iconsize value actual add-on toolbar button icon dimensions (assuming correct stylesheet and images) smal...
... default values themes can override the value of the iconsize attribute on each toolbar by specifying a special value for the counter-reset css property on the toolbar itself. css property on the toolbar element value forced on the iconsize attribute counter-reset: largeicons; large counter-reset: smallicons; small for toolbars in the upper part of the
window, the counter-reset property can be set using a css rule that is applied depending on the user preference in the toolbar customization palette. to do this, use a css rule that depends on the iconsize attribute on the #navigator-toolbox element. note: a rule that depends on the user preference cannot be applied to the add-on bar because it is not a child of the #navigator-toolbox element. however...
...e toolbar customization palette. to do this, use a css rule that depends on the iconsize attribute on the #navigator-toolbox element. note: a rule that depends on the user preference cannot be applied to the add-on bar because it is not a child of the #navigator-toolbox element. however, the theme can force large icons in the add-on bar regardless of the user preference. examples the default
windows theme wants to force small icons on the navigation bar regardless of the user preference. thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons ever...
...And 3 more matches
Debug - Archive of obsolete content
to debug internet explorer scripts, you must have a script debugger installed and the script must run in debug mode. ...
... to debug internet explorer scripts, you must have a script debugger installed and the script must run in debug mode. ...
... to debug internet explorer scripts, you must have a script debugger installed and the script must run in debug mode. ...
...And 3 more matches
Archive of obsolete content
extremely obsolete. if anyone might realistically need the information in a living product, it may not be appropriate to move it here. in general, it may be best to discuss it in the mdn web docs room on matrix before moving content here. .htaccess ( hypertext access ) file accessing : htaccess files can be opened using any text editor, like
windows notepad, vin, sublime text editor or any other. syntax highliting support for .htaccess files less. 2015 mdn fellowship program add-ons archived add-ons documentation. adding preferences to an extension this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switc...
...us versions worked only in firefox). using firebug and jquery (screencast) note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ using io timeout and interrupt on nt this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on
windows nt 3.51 and 4.0. due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: using ssh to connect to cvs using web standards in your web pages using workers in extensions this article shows you how to use worker threads in extensions to perform tasks in the background without...
... following guideline: using ssh to connect to cvs using web standards in your web pages using workers in extensions this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface. ...
...And 3 more matches
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
by around 2002, internet explorer had become the most used browser in the world, but has since lost ground to chrome, firefox, edge, and safari. ie has gone through many releases and currently stands at version 11.0.12, with desktop, mobile, and xbox console versions available. formerly available on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. ...
... and currently stands at version 11.0.12, with desktop, mobile, and xbox console versions available. formerly available on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. ...
...d xbox console versions available. formerly available on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. ...
...And 3 more matches
Capturing a minidump
minidumps are files created by various
windows tools which record the complete state of a program as it's running, or as it was at the moment of a crash. small minidumps are created by the breakpad crash reporting tool, but sometimes that's not sufficient to diagnose a problem. for example, if the application is hanging (not responding to input, but hasn't crashed) then breakpad is not triggered, and it can be difficult to determine where the problem lies. sometimes a more complete form of minidump is needed to see additional details about a crash, in which case manual capture of a minidump is desired. this page describes how to capture these minidumps on
windows, to permit better debugging. privacy and minidumps warning! unlike the minidumps submitted by breakpad, these minidumps con...
...ontain the complete contents of program memory. they are therefore much more likely to contain private information, if there is any in the browser. for this reason, you may prefer to generate minidumps against a clean profile where possible. capturing a minidump: application crash to capture a full minidump for an application crash, you can use a tool called windbg. install debugging tools for
windows microsoft distributes the debugging tools for
windows for free, those include windbg which you will need here. download it from install debugging tools for
windows. (you'll want the 32-bit version of windbg only if you are using a 32-bit version of firefox) then install it, the standard settings in the installation process are fine. capture a minidump connect firefox to the debugger. ...
...t from install debugging tools for
windows. (you'll want the 32-bit version of windbg only if you are using a 32-bit version of firefox) then install it, the standard settings in the installation process are fine. capture a minidump connect firefox to the debugger. 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). if firefox is already running, open windbg from the start menu (start->all programs->debugging tools for
windows->windbg). next, open the "file" menu and choose "attach to a ...
...And 3 more matches
Simple SeaMonkey build
install xcode tools. insert "mac os x install disc 2", then open xcodetools.mpkg. (for some mac os x versions, you will find it in a directory called "optional installs".) install macports. run these commands to install the other build tools: sudo port sync sudo port install mercurial libidl autoconf213 yasm problems? see mac os x build prerequisites.
windows: install visual c++ 2013. both the professional edition and the express edition will work. you may need to install one or more
windows sdks. see
windows sdk versions for a quick guide. if you decided on the
windows 8 sdk, you also need the outlook 2010 mapi header files from microsoft. install mozillabuild, a package of additional build tools. (if you get a message saying...
...tion and the express edition will work. you may need to install one or more
windows sdks. see
windows sdk versions for a quick guide. if you decided on the
windows 8 sdk, you also need the outlook 2010 mapi header files from microsoft. install mozillabuild, a package of additional build tools. (if you get a message saying this application did not install properly then you should see a
windows dialog giving you the option to re-install with the 'correct settings'. after that all should be well.) open a shell
window by running: c:\mozilla-build\start-msvc2013.bat. even if you're on 64-bit
windows, do not use the files ending in -x64.bat. by default you will arrive in your
windows user home directory which is likely to contain spaces in its path (e.g. c:\users\myaccount). this c...
... building seamonkey building seamonkey requires at least 2 gb of disk space and 256 mb of available ram. ...
...And 3 more matches
MozBeforePaint
gecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same
window. usage outline in order to time your animation, the first thing you need to know is the time base; that is, the time at which your animation sequence started. you can determine this value by looking at
window.mozanimationstarttime. ...
...animations being performed within the same
window. usage outline in order to time your animation, the first thing you need to know is the time base; that is, the time at which your animation sequence started. you can determine this value by looking at
window.mozanimationstarttime. this new property indicates the time, in milliseconds since epoch, at which all animations started in the specified
window during the current refresh interval should be considered to have started running. with that value in hand, you can then schedule all your subsequent animation frames. whenever you're ready to refresh your animation, you call the
window.requestanimationframe() method. once you've called this, the mozbeforepaint event will be fired one time, when it's time for animations to be updated for the wind...
... frame rate control mozbeforepaint won't fire more than a fixed number of times per second, e.g. 50 or 60. this is intentional, because modern operating systems and hardware won't let the browser display more frames than that anyway. ...
...And 3 more matches
Encodings for localization files
when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate. in general, files in the mozilla repositories are utf-8 encoded. there are a few exceptions, though. installer the
windows installer can’t handle utf-8, but only the codepages provided by
windows. this is tricky to hook up in the build process, so here it goes: file encoding notes toolkit/installer/
windows/charset.mk ascii the win_installer_charset variable must be set to an encoding which matches toolkit/installer/
windows/install.it charset= parameter. see the table below for appropriate values. toolkit/installer/
windows/install.it a
windows codepage. this must match the charset= parameter in this file, and the wi...
...nstall.it a
windows codepage. this must match the charset= parameter in this file, and the win_installer_charset parameter in charset.mk the fontname/fontsize/charset parameters in this file must be set to good values. for most western scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern scripts will need to choose appropriate fonts that are shipped with
windows. see the table below for appropriate values for the charset= parameter. ...
...et to good values. for most western scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern scripts will need to choose appropriate fonts that are shipped with
windows. see the table below for appropriate values for the charset= parameter. ...
...And 3 more matches
Investigating leaks using DMD heap scan mode
be passed in so that dmd will be run. --mode=scan is needed so that when we get a dmd log the entire contents of each block of memory is saved for later analysis. with that command line in hand, you can start firefox. be aware that this may take multiple minutes if you have optimization disabled. once it has started, go through the steps you need to reproduce your leak. if your leak is a ghost
window, it can be handy to get an about:memory report and write down the pid of the leaking process. you may want to wait 10 or so seconds after this to make sure as much as possible is cleaned up. next, exit the browser. this will cause a lot of logs to be written out, so it can take a while. analyzing the logs getting the pid and address of the leaking object the first step is to figure out the pi...
...ant to wait 10 or so seconds after this to make sure as much as possible is cleaned up. next, exit the browser. this will cause a lot of logs to be written out, so it can take a while. analyzing the logs getting the pid and address of the leaking object the first step is to figure out the pid of the leaking process. the second step is to figure out the address of the leaking object, usually a
window. conveniently, you can usually do both at once using the cycle collector log. if you are investigating a leak of www.example.com, then from $logdir you can do "grep nsglobal
window cc-edges* | grep example.com". this looks through all of the
windows in all of the cc logs (which may leaked, this late in shutdown), and then filters out
windows where the url contains example.com. the result of that ...
... of www.example.com, then from $logdir you can do "grep nsglobal
window cc-edges* | grep example.com". this looks through all of the
windows in all of the cc logs (which may leaked, this late in shutdown), and then filters out
windows where the url contains example.com. the result of that grep will contain output that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] nsglobal
windowinner # 2147483662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found. 15873 is the pid of the process that leaked. you'll want to write down the name of the file and the pid. let's call the file $cclog and the pid $pid. * 0x7f0897082c00: this is the address of the leaking
window. you'll also want to write that down. let's call this $winaddr. ...
...And 3 more matches
Profiling with Xperf
xperf is part of the microsoft
windows performance toolkit, and has functionality similar to that of shark, oprofile, and (for some things) dtrace/instruments. for stack walking,
windows vista or higher is required; i haven't tested it at all on xp. this page applies to xperf version 4.8.7701 or newer. to see your xperf version, either run 'xperf' on a command line with no arguments, or start 'xperfview' and look at help -> about performance analyzer. (note that it's not the first version number in the about
window; that's the
windows version.) if you have an older version, you will experience bugs, especially around symbol loading for local builds. installation for all versions, the tools are part of the latest
windows 7 sdk (sdk version 7.1). use the web installer to install at le...
...out
window; that's the
windows version.) if you have an older version, you will experience bugs, especially around symbol loading for local builds. installation for all versions, the tools are part of the latest
windows 7 sdk (sdk version 7.1). use the web installer to install at least the "win32 development tools". once the sdk installs, execute either wpt_x86.msi or wpt_x64.msi in the redist/
windows performance toolkit folder of the sdk's install location (typically program files/microsoft sdks/
windows/v7.1/redist/
windows performance toolkit) to actually install the
windows performance toolkit tools. it might already be installed by the
windows sdk. check if c:\program files\microsoft
windows performance toolkit already exists. ...
... wpt_x86.msi or wpt_x64.msi in the redist/
windows performance toolkit folder of the sdk's install location (typically program files/microsoft sdks/
windows/v7.1/redist/
windows performance toolkit) to actually install the
windows performance toolkit tools. it might already be installed by the
windows sdk. check if c:\program files\microsoft
windows performance toolkit already exists. for 64-bit
windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the
windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu. just make ...
...And 3 more matches
NSS_3.12_release_notes.html
bug 361076: clean up the use_pthreads related code in coreconf/sunos5.mk. bug 361077: clean up the use_pthreads related code in coreconf/hp-ux*.mk. bug 402114: fix the incorrect function prototypes of ssl hands...
...dn bug 334683: extraneous semicolons cause empty declaration compiler warnings bug 335275: compile with the gcc flag -werror-implicit-function-declaration bug 354565: fipstest sha_test needs to detect sha tests that are incorrectly configured for bit oriented implementations bug 356595: on
windows, rng_systeminfoforrng calls getcurrentprocess, which returns the constant (handle)-1. bug 357015: on
windows, readsystemfiles reads 21 files as opposed to 10 files in c:\
windows\system32. bug 361076: clean up the use_pthreads related code in coreconf/sunos5.mk. bug 361077: clean up the use_pthreads related code in coreconf/hp-ux*.mk. bug 402114: fix the incorrect function prototypes of ssl handshake callbacks bug 402308: fix miscellaneous compiler warnings in nss/cmd bug 402777: lib/util can't be built...
...down is not called by nssinit.c bug 393174: memory leaks in ocspclnt/pkix. bug 395093: pkix_pl_httpcertstore_processcertresponse is unable to process certs in der format bug 395224: don't reject certs with critical netscapecerttype extensions in libpkix bug 395427: pkix_pl_initialize must not call nss_init bug 395850: build of libpkix tests creates links to nonexistant shared libraries and breaks
windows build bug 398401: memory leak in pkix init. bug 399326: libpkix is unable to validate cert for certusagestatusresponder bug 400947: thread unsafe operation in pkix_pl_hashtable_add cause selfserv to crash. bug 402773: verify the list of public header files in nss 3.12 bug 403470: strsclnt + tstclnt crashes when pkix enabled. bug 403685: application crashes after having called cert_pkixverifycert...
...And 3 more matches
Components.utils.unwaiveXrays
bject, but for all properties of the object (and their properties, and so on). the unwaivexrays operation undoes the operation, so xray vision is restored transitively as well. syntax xray = components.utils.unwaivexrays(obj); parameters obj the object for which we wish to restore xrays. returns the object with xrays restored. ...
... operation, so xray vision is restored transitively as well. syntax xray = components.utils.unwaivexrays(obj); parameters obj the object for which we wish to restore xrays. returns the object with xrays restored. example suppose a page script adds an expando to its global
window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content
window with xray vision, but the chrome code can waive xray protection. ...
...restore xrays. returns the object with xrays restored. example suppose a page script adds an expando to its global
window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content
window with xray vision, but the chrome code can waive xray protection. ...
...And 3 more matches
nsIDeviceMotion
sed to implement accelerometer support. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) note: this interface was named nsidevicemotion prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3). ...
...ometer support. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) note: this interface was named nsidevicemotion prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3). ...
...upport. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) note: this interface was named nsidevicemotion prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3). ...
...And 3 more matches
Address Book examples
mponents.interfaces.nsiabmanager); abmanager.deleteaddressbook(maillist.uri); how do i display properties dialogs to the user? in the following examples: selectedab is the uri of an address book to default the dialog to saving the card in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. ...
...ard in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. ...
...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"...
...And 3 more matches
Using js-ctypes
before you can use js-ctypes, you need to import the ctypes.jsm code module. 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. ...
...; you can't use c++ methods directly. instead, you'll need to create a shim library that uses c functions that then call into the c++ library for you. examples can be found here: bugzilla :: bug 505907 - support c++ calling from jsctypes library search paths if you specify a full path, that path is used to load the library. otherwise, the system looks for the library in its standard locations.
windows on
windows, the following locations are searched for the library, in this order: the application's directory. the system directory. the 16-bit system directory. the
windows directory. the current working directory the directories listed in the path environment variable. note: this information comes from this article on msdn. after you're done when you're finished using a library, yo...
... so that you can call them. once you've declared the types and functions, you can write your code to make use of them. instantiating c data objects and referencing them is covered in the article working with data. memory management moved to memory management page. examples these examples offer a quick look at how js-ctypes is used. see js-ctypes examples for more intricate examples. ...
...And 3 more matches
characteristic - Web APIs
reroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcharacteristic experimentalchrome full support 57notes full support 57notes notes macos only. ...
...os only. full support 57notes disabled notes linux and versions of
windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. ...
...nge preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 3 more matches
readValue() - Web APIs
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadvalue experimentalchrome full support 57notes full support 57notes notes macos only. ...
...os only. full support 57notes disabled notes linux and versions of
windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. ...
...nge preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 3 more matches
uuid - Web APIs
rnet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetuuid experimentalchrome full support 57notes full support 57notes notes macos only. ...
...os only. full support 57notes disabled notes linux and versions of
windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. ...
...nge preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 3 more matches
value - Web APIs
net exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalue experimentalchrome full support 57notes full support 57notes notes macos only. ...
...os only. full support 57notes disabled notes linux and versions of
windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. ...
...nge preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 3 more matches
writeValue() - Web APIs
xploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritevalue experimentalchrome full support 57notes full support 57notes notes macos only. ...
...os only. full support 57notes disabled notes linux and versions of
windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). to change preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. ...
...nge preferences in chrome, visit chrome://flags. full support 70notes notes
windows 10.edge full support ≤79notes full support ≤79notes notes macos only. full support ≤79notes disabled notes linux and versions of
windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). ...
...And 3 more matches
DedicatedWorkerGlobalScope - Web APIs
self keyword. some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference. see also: functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from
windowtimers,
windowbase64, and
windoweventhandlers. dedicatedworkerglobalscope.name read only the name that the worker was (optionally) given when it was created using the worker() constructor. this is mainly useful for debugging purposes. properties inherited from workerglobalscope workerglobalscope.self returns an object reference to the dedicatedworkerglobalscope object itself. workerglo...
...opes, but adapted to workers. workerglobalscope.performance read only returns the performance object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available. event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from
windowtimers,
windowbase64, and
windoweventhandlers. dedicatedworkerglobalscope.onmessage is an eventhandler representing the code to be called when the message event is raised. these events are of type messageevent and will be called when the worker receives a message from the document that started it (i.e. from the worker.postmessage method.) dedicatedworkerglobalscope.onmessageerror is an event...
...led when the worker receives a message from the document that started it (i.e. from the worker.postmessage method.) dedicatedworkerglobalscope.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from
windowtimers,
windowbase64, and
windoweventhandlers. dedicatedworkerglobalscope.close() discards any tasks queued in the workerglobalscope's event loop, effectively closing this particular scope. dedicatedworkerglobalscope.postmessage() sends a message — which can consist of any javascript object — to the parent document that first spawned the worker. inherited from workerglobalscope work...
...And 3 more matches
Introduction to the DOM - Web APIs
ations. what is the dom? the document object model (dom) is a programming interface for html and xml documents. it represents the page so that programs can change the document structure, style, and content. the dom represents the document as nodes and objects. that way, programming languages can connect to the page. a web page is a document. this document can be either displayed in the browser
window or as the html source. but it is the same document in both cases. the document object model (dom) represents that same document so it can be manipulated. the dom is an object-oriented representation of the web page, which can be modified with a scripting language such as javascript. the w3c dom and whatwg dom standards are implemented in most modern browsers. many browsers extend the standard, s...
...egrees of conformance to the actual dom standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via javascript. when you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the api for the document or
window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. your dom programming may be something as simple as the following, which displays an alert message by using the alert() function from the
window object, or it may use more sophisticated dom methods to actually create new content, as in the longer example below. th...
...your dom programming may be something as simple as the following, which displays an alert message by using the alert() function from the
window object, or it may use more sophisticated dom methods to actually create new content, as in the longer example below. this following javascript will display an alert when the document is loaded (and when the whole dom is available for use): <body onload="
window.alert('welcome to my home page!');"> another example. ...
...And 3 more matches
GlobalEventHandlers.onresize - Web APIs
the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events. the resize event fires after the
window has been resized. syntax
window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
... the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events. the resize event fires after the
window has been resized. syntax
window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
... the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events. the resize event fires after the
window has been resized. syntax
window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
...And 3 more matches
Screen.availHeight - Web APIs
the read-only screen interface's availheight property returns the height, in css pixels, of the space available for web content on the screen. since screen is exposed on the
window interface's
window.screen property, you access availheight using
window.screen.availheight. you can similarly use screen.availwidth to get the number of pixels which are horizontally available to the browser for its use. syntax let availheight =
window.screen.availheight; value a numeric value indicating the number of css pixels tall the screen's available space is. this can be no larger than the value of
window.screen.height, and will be less if the device or user agent reserves any vertical space for itself. for instance, on a mac whose dock is located at the bottom of screen (which is the default), the valu...
...f the device or user agent reserves any vertical space for itself. for instance, on a mac whose dock is located at the bottom of screen (which is the default), the value of availheight is approximately the value of height (the total height of the screen in css pixels) minus the heights of the dock and menu bar, as seen in the diagram below. ...
... height (the total height of the screen in css pixels) minus the heights of the dock and menu bar, as seen in the diagram below. 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. ...
...And 3 more matches
SharedWorkerGlobalScope - Web APIs
some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference. see the complete list of functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from
windowtimers,
windowbase64, and
windoweventhandlers. sharedworkerglobalscope.name read only the name that the sharedworker was (optionally) given when it was created using the sharedworker() constructor. this is mainly useful for debugging purposes. sharedworkerglobalscope.applicationcache read only this property returns the applicationcache object for the worker (see using the application cac...
...opes, but adapted to workers. workerglobalscope.performance read only returns the performance object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available. event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from
windowtimers,
windowbase64, and
windoweventhandlers. 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. methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and there...
...doweventhandlers. 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. methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from
windowtimers,
windowbase64, and
windoweventhandlers. sharedworkerglobalscope.close() discards any tasks queued in the sharedworkerglobalscope's event loop, effectively closing this particular scope. inherited from workerglobalscope workerglobalscope.close() discards any tasks queued in the workerglobalscope's event loop, effectively closing this particular scope. workerglobalscope.dump() ...
...And 3 more matches
SubtleCrypto.deriveBits() - Web APIs
e supported algorithms section of the derivekey() documentation. examples note: you can try the working examples on github. ecdh in this example alice and bob each generate an ecdh key pair. we then use alice's private key and bob's public key to derive a shared secret. see the complete code on github. ...
...cretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const generatealiceskeypair =
window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); const generatebobskeypair =
window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; co...
... derivesharedsecret(aliceskeypair.privatekey, bobskeypair.publickey); }); }); pbkdf2 in this example we ask the user for a password, then use it to derive some bits using pbkdf2. see the complete code on github. let salt; /* get some key material to use as input to the derivebits method. the key material is a password supplied by the user. ...
...And 3 more matches
SubtleCrypto.encrypt() - Web APIs
tents of a text box, encodes it for encryption, and encrypts it with using rsa-oaep. see the complete code on github. function getmessageencoding() { const messagebox = document.queryselector(".rsa-oaep #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(publickey) { let encoded = getmessageencoding(); return
window.crypto.subtle.encrypt( { name: "rsa-oaep" }, publickey, encoded ); } aes-ctr this code fetches the contents of a text box, encodes it for encryption, and encrypts it using aes in ctr mode. see the complete code on github. function getmessageencoding() { const messagebox = document.queryselector(".aes-ctr #message"); let message = messagebox.value; let enc = new te...
...ption, and encrypts it using aes in ctr mode. see the complete code on github. ...
...te code on github. ...
...And 3 more matches
SubtleCrypto.unwrapKey() - Web APIs
to an arraybuffer. */ function bytestoarraybuffer(bytes) { const bytesasarraybuffer = new arraybuffer(bytes.length); const bytesuint8 = new uint8array(bytesasarraybuffer); bytesuint8.set(bytes); return bytesasarraybuffer; } /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { let password =
window.prompt("enter your password"); let enc = new textencoder(); return
window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive an aes-kw key using pbkdf2. */ async function getunwrappingkey() { // 1. get the key material (user-supplied password) const keymaterial = await getkeymaterial(); // 2 in...
...getunwrappingkey() { // 1. get the key material (user-supplied password) const keymaterial = await getkeymaterial(); // 2 initialize the salt parameter. // the salt must match the salt originally used to derive the key. // in this example it's supplied as a constant "saltbytes". const saltbuffer = bytestoarraybuffer(saltbytes); // 3 derive the key from key material and salt return
window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: saltbuffer, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* unwrap an aes secret key from an arraybuffer containing the raw bytes. takes an array containing the bytes, and returns a promise that will resolve to a...
...ntaining the raw bytes. takes an array containing the bytes, and returns a promise that will resolve to a cryptokey representing the secret key. */ async function unwrapsecretkey(wrappedkey) { // 1. get the unwrapping key const unwrappingkey = await getunwrappingkey(); // 2. initialize the wrapped key const wrappedkeybuffer = bytestoarraybuffer(wrappedkey); // 3. ...
...And 3 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
cillators. gainnode2 and gainnode3 will be linked together to have the same, adjustable, value using the constantsourcenode. constantnode the constantsourcenode used to control the values of gainnode2 and gainnode3 together. playing a boolean that we'll use to keep track of whether or not we're currently playing the tones. ...
...ode the constantsourcenode used to control the values of gainnode2 and gainnode3 together. playing a boolean that we'll use to keep track of whether or not we're currently playing the tones. now let's look at the setup() function, which is our handler for the
window's load event; it handles all the initialization tasks that require the dom to be in place. ...
...node used to control the values of gainnode2 and gainnode3 together. playing a boolean that we'll use to keep track of whether or not we're currently playing the tones. now let's look at the setup() function, which is our handler for the
window's load event; it handles all the initialization tasks that require the dom to be in place. ...
...And 3 more matches
HTML in XMLHttpRequest - Web APIs
is.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". this throws an error in the browsers that implement the feature and works on others. ...
...r.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". this throws an error in the browsers that implement the feature and works on others. function htmlinxhr() { if (!
window.xmlhttprequest) return false; var req = new
window.xmlhttprequest(); req.open('get',
window.location.href, false); try { req.responsetype = 'document'; } catch(e) { return true; } return false; } view on jsfiddle this method is synchronous, does not rely on external assets though it may not be as reliable as method 2 described below since it does not check the actual feature but an indication of that feature. method 2 ther...
...ver http, because testing with a data: url would end up testing data: url support at the same time. thus, to detect html support, a test html file is needed on the server. ...
...And 3 more matches
Rich-Text Editing in Mozilla - Developer guides
own designmode to "on". this makes the entire document editable in mozilla 1.3. internet explorer, however, does not allow javascript to change the current document's designmode. for it to work in internet explorer, the contenteditable attribute of the body tag needs to be set to "true". figure 2 : first example html: <body contenteditable="true" onload="load()"> javascript: function load(){
window.document.designmode = "on"; } example 2 the second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be added and the color of text changed. the example page consists of an iframe, which will be the rich editing area, as well as elements for basic editing commands such as bold/italics/text color. figure 3 : setting up rich-text editing ...
...diting page, where text can be bolded/italicized/underlined, new links can be added and the color of text changed. the example page consists of an iframe, which will be the rich editing area, as well as elements for basic editing commands such as bold/italics/text color. ...
...d the requested command using execcommand() and then sets focus back to the editable document, as clicking on a button will set focus on the button itself, which breaks the editing flow. ...
...And 3 more matches
globalThis - JavaScript
clone https://github.com/mdn/interactive-examples and send us a pull request. property attributes of globalthis writable yes enumerable no configurable yes description historically, accessing the global object has required different syntax in different javascript environments. on the web you can use
window, self, or frames - but in web workers only self will work. in node.js none of these work, and you must instead use global. the this keyword could be used inside functions running in non–strict mode, but this will be undefined in modules and inside functions running in strict mode. you can also use function('return this')(), but environments that disable eval(), like csp in browsers, prevent us...
...but this will be undefined in modules and inside functions running in strict mode. you can also use function('return this')(), but environments that disable eval(), like csp in browsers, prevent use of function in this way. the globalthis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. ...
...side functions running in strict mode. you can also use function('return this')(), but environments that disable eval(), like csp in browsers, prevent use of function in this way. the globalthis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. unlike similar properties such as
window and self, it's guaranteed to work in
window and non-
window contexts. ...
...And 3 more matches
Image file type and format guide - Web media technologies
each pixel is comprised of four d-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is. compression lossless licensing free and open under the creative commons attribution-sharealike license (cc-by-sa) version 3.0 or later. bmp (bitmap file) the bmp (bitmap image) file type is most prevalent on
windows computers, and is generally used only for special cases in web apps and content. note: you should typically avoid using bmp for web site content, as it's not a generally-accepted use of the format. bmp theoretically supports a variety of internal data representations. the simplest, and most commonly used, form of bmp file is an uncompressed raster image, with each pixel occupying 3 bytes rep...
...om the top-left corner toward the right and bottom). theoretically, several compression algorithms are supported, and the image data can also be stored in jpeg or png format within the bmp file. ...
... 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. this is not the same as a license, however. bmp is included under the
windows metafile format (.wmf). gif (graphics interchange format) in 1987, the compuserve online service provider introduced the gif (graphics interchange format) image file format to provide a compressed graphics format that all members of their service would be able to use. gif uses the lempel-ziv-welch (lzw) algorithm to losslessly compress 8-bit indexed color graphics. gif was one of the fir...
...And 3 more matches
dev/panel - Archive of obsolete content
t created it, and the add-on can pass it the debuggee so it can communicate with the debugger server the developer tools are targeting. communicating with the panel document the main add-on code can't directly access the panel document or any scripts loaded by the panel document. however it can send messages to the panel document using the postmessage method of panel. this is closely modeled on
window.postmessage. you can only send the panel document message after you've received the ready event. in the main add-on code: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool's panel", icon...
...el", tooltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { this.postmessage("message from the add-on"); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document script: // my-panel.js
window.addeventlistener("message", function(event) { var content = document.getelementbyid("content"); content.textcontent = event.data; }); note that at the moment you have to pass an array of ports into postmessage, even if you don't need to use them: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require...
...t to the panel document this.postmessage("message from the add-on", [panelside]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document: retrieve the messageport from the event, and use it to send messages to the add-on // my-panel.js
window.addeventlistener("message", function(event) { // retrieve the port var toaddon = event.ports[0]; toaddon.start(); toaddon.postmessage("message from the panel document"); console.log(toaddon); }); communicating with the debugger server the firefox developer tools use a client/server protocol: a tool, such as a javascript debugger or style editor, is the client, and the program being d...
...And 2 more matches
Customizing the download progress bar - Archive of obsolete content
this example illustrates how to customize the progress bar displayed for a given download in the downloads
window. first you need to overlay the downloads
window so that you can add a new stylesheet. in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that i...
...the background image (the first one in the file) should be a segment of whatever you want the unfill...
...background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports
windows and mac, but it would be straightforward to add support for linux. this is the product of some tweaking and experimentation, so perhaps there is a different and/or better way to achieve the same thing. we are specifying the height of the progress meter on
windows and a background image on mac. the background image (the first one in the file) should be a segment of whatever you want the unfilled portion of the progress bar to look like. an image of 7 pixels wide and 12 pixels high seems to work well. the other two images are for the filled in progress bar on
windows and mac respectively. once again, a height of 12 pixels or so and a few pixels wide seems ...
...And 2 more matches
File I/O - Archive of obsolete content
ce. creating an nsifile object components.utils.import("resource://gre/modules/fileutils.jsm"); var file = new fileutils.file("/home"); or the same without using fileutils.jsm: var file = components.classes["@mozilla.org/file/local;1"]. createinstance(components.interfaces.nsilocalfile); file.initwithpath("/home"); note: the path should be in the "native" form (for example"c:\\
windows"). if you need to use file:// uris as initializers, see discussion of nsiioservice below. note: you can still get a file object even if the specified file does not exist, and no exception will be thrown. an exception is thrown only when methods that require the file to exist are called, e.g., isdirectory(), moveto(), and so on. getting files in special directories components.utils.import("re...
... defproflrt d location of user profile temporary directories live. defprofrt d the root of the default profile directory (for example /root/.mozilla). defrt d %curprocd%/defaults - the root directory of all defaults directories. the user's desktop directory (for example ~/desktop on linux or mac os x, c:\documents and settings\username\desktop on
windows). desk f dfltdwnld f the default downloads directory (for example, ~/downloads on mac os x). home f the user's home directory (for example, /home/username). prefd f directory containing user prefs prfdef d %installation%/defaults/pref profd f the profile directory. profdef d the profile defaults...
... prfdef d %installation%/defaults/pref profd f the profile directory. profdef d the profile defaults of the "current" locale. should be the first choice. profdefnoloc d %installation%/defaults/profile - the profile defaults of the "default" installed locale. second choice when profdef is not available. profld f local settings on
windows; where the network cache and fastload files are stored. progs d user start menu programs directory (for example, c:\documents and settings\username\start menu\programs). this is a
windows-specific value. tmpd d the operating system's temporary files directory (for example, /tmp on mac os x and linux). uchrm f the user chrome directory in their profile...
...And 2 more matches
Scrollbar - Archive of obsolete content
this example shows how to style the scrollbars in your xul application. scrollbars inside browser elements will be styled to. tested on
windows xp. 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. so to make this work with osx, make an extra override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some color values inside the app/...
...lscrollbars.css chrome://app-global/skin/scrollbars.css xulscrollbars.css are used for
windows xp, and nativescrollbars.css on osx. so to make this work with osx, make an extra override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used. ...
... xp, and nativescrollbars.css on osx. so to make this work with osx, make an extra override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used. ...
...And 2 more matches
Adding sidebars - Archive of obsolete content
sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. you're probably familiar with the bookmarks and history sidebars. 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 code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...
...oth of these references: you can choose an obscure key combination that won't conflict with firefox, such as ctrl+shift+(some letter), but there's no way of knowing if any other extension uses that same combination as well. shortcut keys can be very valuable for advanced users, but don't rely on them. the xul page for the sidebar can hold any content you want and it's no different from other xul
windows or overlays. one minor difference is that the xul sidebar should be defined using the « xul reference « root element instead of
window or dialog. 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 . another, more important difference to take into account is that users can resize the sidebar to their...
...hat doesn't take too much space. for this purpose we'll also look at some handy xul elements in this section. they allow you to stack content on top of other content and switch between different sections easily. the tabbox element the « xul reference « element creates a tabbed view of one or more tabpanel elements. you can see an example of a tabbox element if you open the firefox preferences
window and select the advanced section. the tabs are styled to match the operating system you're using, so you should avoid changing the css in tab boxes. on the other hand, if you need ui that behaves like a tabbox but doesn't look like one, you should still favor using a tabbox and use css to change its look. using custom-made elements are likely to cause accessibility and functional problems. creati...
...And 2 more matches
Signing an XPI - Archive of obsolete content
these instructions are outdated. for an extension to work in firefox it must be signed by mozilla, not by yourself. see signing and distributing your add-on. note: these instructions are for how to test with a self-signed certificate. see signing an extension for a practical guide. introduction this article describes how to sign your own firefox extensions with a code-signing certificate on a
windows platform. it was developed from the linux article so you want to sign your xpi package? by mozdev group's pete collins. this article is a mirror of the original, with minor reformatting, some new info and all links updated in march 2010. get network security services 1. download the latest network security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla...
...ed from the linux article so you want to sign your xpi package? by mozdev group's pete collins. this article is a mirror of the original, with minor reformatting, some new info and all links updated in march 2010. get network security services 1. download the latest network security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/releases/. for
windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ get netscape portable runtime 1. download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/ns...
... nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ get netscape portable runtime 1. download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/nspr/releases/. for
windows you'll want the nspr-4.6.zip package in the v4.6/winnt5.0_opt.obj/ folder. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nspr-4.6\ add path add the nss tools bin/ and lib/, and the nspr lib/ directories to the system path. you can either set this permanently via control panel->system properties->advanced->environment variables->system variables or do i...
...And 2 more matches
Updating addons broken by private browsing changes - Archive of obsolete content
ger 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: openbrowser
window gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-
window private browser feature in firefox 20 (and will require updating to work correctly in releases of firefox s...
...webbrowserpersist: saveuri gained a new argument; see the nsiwebbrowserpersist docs for more information. nsicontentprefservice: getpref, setpref, haspref, hascachedpref, removepref, removegroupedprefs, removeprefsbyname, getprefs, and getprefsbyname all take a required nsiloadcontext argument to indicate the privacy status of the pref in question. use privatebrowsingutils.getprivacycontextfrom
window(win) to obtain it from the relevant
window. nsidownloadmanager/nsidownload: integer download ids (and specifically the id property of nsidownload) are deprecated, and don't allow access to private downloads. all downloads now use guids, and contain a new guid property. nsidownload now has retry, cancel, remove, pause, and resume methods which should be used instead of deprecated similarly-...
.... nsirecentbadcertsservice: this is no longer a global service, and has been renamed to nsirecentbadcerts. to obtain this, acquire the nsix509certdb service, and use the new getrecentbadcerts method, passing a boolean indicating whether the private bad certificates or public ones are desired. observer notifications none of the ones listed above will be sent as of firefox 20. ...
...And 2 more matches
XUL user interfaces - Archive of obsolete content
although html has some support for user interfaces, it does not support all the features that you need to make a standalone application. mozilla overcomes this limitation by providing a specialized language for creating user interfaces: xul (xml user-interface language, usually pronounced like "zool"). in xul, many common user interface features are built in. for example, xul provides specialized
windows like dialogs and wizards, as well as status bars, menus, tool bars, and even browsers. more specialized features can be built from parts by using xul together with other technologies that you have seen in this tutorial: css style, javascript code, and xbl bindings. like other xml-based languages, xul uses css stylesheets. more details for more information about xul user interfaces, ...
...guages, xul uses css stylesheets. more details for more information about xul user interfaces, see the xul page in this wiki. action: a xul demonstration make a new xul document as a plain text file, doc7.xul. ...
...l uses css stylesheets. more details for more information about xul user interfaces, see the xul page in this wiki. action: a xul demonstration make a new xul document as a plain text file, doc7.xul. ...
...And 2 more matches
Creating a status bar extension - Archive of obsolete content
s bar (that is, firefox 4 and up). you can find a more up-to-date tutorial in the xul school tutorial the essentials of an extension. many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox. this sample will add a static text string to the status bar at the bottom of firefox browser
windows. if this sounds a lot like the existing building an extension article, you're right. however, this sample will be expanded upon in later articles in the series. download the sample you can download a copy of this sample to look over -- or to use as the basis for your own extension. download the sample the install manifest the install manifest, install.rdf, is a text file containing information t...
...xtension's version number. type the addon type. for extensions, this is 2. human-readable information in this sample, we have four pieces of human-readable information; that is, information that is displayed to the user within the firefox interface. these are: property name description em:name the extension's name. this name is displayed in the extensions
window. em:description a short, one-line description of the extension. this text is also displayed in the extensions
window. em:creator the author's name. homepageurl the url of a web site the user can visit to get information about the extension, or to look for updates. this is not a required field, but including it is a nice thing to do. target application inf...
...sion of the target application on which the extension is known to work. for details on the format of an install manifest, read the install manifests section. the chrome manifest the chrome manifest is a file that tells the target application where to look for the chrome package for your extension. the chrome is the set of user interface elements outside the content area of the application's
window, such as toolbars, status bars, menu bars, and the like. the chrome manifest file, chrome.manifest, for the sample follows. content status-bar-sample-1 chrome/content/ # firefox overlay chrome://browser/content/browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul the first line registers the location on disk of the contents of the extension whose id is "status-bar-sample-...
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
de fennec browser for mobiles as mark notes: fennec is not firefox, it’s a completely different application findthatfont! ...
... javascript development runtime environment uses spidermonkey (note: this is separate from the javascript library jslib) joybidder ebay auction tool standalone version uses xulrunner just (fr) audio a tool for setting temporal tags in audio documents jsdoc toolkit documentation tool uses mozilla rhino k-meleon gecko-based web browser for
windows embeds gecko in mfc kairo.at mandelbrot creates images of mandelbrot sets xulrunner application kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia kneemail prayer, praise, and journal application komodo and komodo edit and open komodo development too...
......
...And 2 more matches
Download Manager preferences - Archive of obsolete content
list. default value is true. browser.download.manager.alertonexeopen a boolean value that indicates whether the ui should alert the user about the dangers of opening (executing) an exe. the user may check a "don't ask" box on the ui to toggle this. default value is true. browser.download.manager.closewhendone a boolean value indicating whether or not the downloads
window should close automatically when downloads are completed. in thunderbird the default value is true. in other applications the default value is false. browser.download.manager.flashcount indicates the number of times the appropriate user interface element should be "flashed" to get the user's attention when a download completes. default value is 2. browser.download.
... in other applications the default value is false. browser.download.manager.flashcount indicates the number of times the appropriate user interface element should be "flashed" to get the user's attention when a download completes. default value is 2. browser.download.manager.focuswhenstarting a boolean value that indicates whether or not to focus the download manager
window when a download begins. in firefox,thunderbird and seamonkey the default value is false. in other applications the default value is true. browser.download.manager.quitbehavior indicates what should happen to in-progress downloads if the application is quit while they're ongoing. 0 indicates that the downloads should be paused and resumed automatically the next time firefox is ...
...ads should be removed on quit; 2 indicates that downloads should never be removed automatically. in firefox and seamonkey the default value is 2. in thunderbird the default value is 1; if the preference is missing, the value 0 is used. browser.download.manager.scanwhendone a boolean value that indicates whether or not to perform virus scans after downloads are complete. on
windows xp sp2 and
windows vista, this value also indicates whether downloaded files trigger a security warning upon launch. default value is true. browser.download.manager.showalertinterval the minimum number of milliseconds that must elapse between download complete alerts; if two downloads complete within this amount of time, only one alert is displayed. default value is 2000 (2 s...
...And 2 more matches
Drag and Drop Example - Archive of obsolete content
style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events. we'll add a boardobserver to the file dragboard.js in a moment. next, a palette will be added to the right side of the
window. it will contain three buttons, one to create new buttons, one to create check boxes and the other to create textboxes. this buttons will respond to the draggesture event and start a drag. <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="ns...
...ement function to create a new element of the type stored in the drag session. next, appendchild is called to add the new element to the stack, which is the target of the event. finally, we set some attributes on the new element. the position of elements in a stack is determined by the left and top attributes. the values of the pagex and pagey properties store the mouse pointer coordinates on the
window where the drop occured. this allows us to place the new element at the position where the mouse button was released. this isn't quite the correct way to do this as we actually need to calculate the coordinates of the event relative to the stack. it works here because the board is at the top-left corner of the
window. the label attribute is set to the data from the drag also so that the button has...
... so that the button has a default label. this example is fairly simple. one possible change is to use a custom flavour for the data instead of text. the problem with using text is that if the text from an external drag just happens to be set to button, a button will be created on the board. a custom type means that the board will only accept drags from the palette. ...
...And 2 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
this document describes the beginning of the document loading process. we start with the request to load a particular link in a particular
window, and proceed up to the point at which the data stream is dispatched to the proper handler. the final goal is to find the correct stream listener to pump the data into when necko calls ondataavailable (e.g., we may find the html parser as the stream listener to give the data to). dramatis personae this document focuses on the interaction of three classes with each other, but other mozilla components are also involved. main roles nsdocshell this class corresponds, basically, to a "
window" object in javascript -- each frame, iframe, content area, tab, etc has its own docshell. a docshell can have a name associated with it (e.g. a named frame). a...
... interface) or nsilinkhandler (an internal interface used for link clicks). both interfaces are implemented by nswebshell/nsdocshell. these api calls will typically pass in a uri string or object to load, and may include information like the name of the target frame (for <a target="something">, e.g.). nsdocshell::internalload() handles targeting to the correct docshell (if the load has a target
window associated with it), scrolling to anchors (if the load is an anchor within the current page), and session history issues. it calls douriload(). douriload() creates a channel, massages it to have the right post data, load flags, cache key, referrer, etc. it then passes the channel to dochannelload, which does some more flag massaging and then calls into the uriloader. nsuriloader::openuri gets a...
...istory issues. it calls douriload(). douriload() creates a channel, massages it to have the right post data, load flags, cache key, referrer, etc. it then passes the channel to dochannelload, which does some more flag massaging and then calls into the uriloader. nsuriloader::openuri gets a channel to open, a boolean indicating whether this load is the result of a link click, and an nsisupports "
window context" (the docshell triggering the load, actually, but in drag and heavy makeup). it immediately hands off to nsuriloader::openchannel. nsuriloader::openchannel notifies the nsiuricontentlistener hanging off the
window context, if any, of the start of the load; this gives embedders a chance to abort the load if this uri type is something they want to handle in the embedding app. if the load ...
...And 2 more matches
JavaScript OS.Shared - Archive of obsolete content
be used with js-ctypes. for the moment, module os.shared is accessible only from chrome workers. ...
...the moment, module os.shared is accessible only from chrome workers. ...
....shared is accessible only from chrome workers. ...
...And 2 more matches
Modularization techniques - Archive of obsolete content
s. use them wherever possible. /* * the nsisupports interface */ class nsisupports { public: ns_imethod queryinterface(const nsiid &aiid, void **aresult) = 0; ns_imethod_(nsrefcnt) addref(void) = 0; ns_imethod_(nsrefcnt) release(void) = 0; }; the ns_imethod and ns_imethod_(type) macros are basically shorthand for virtual nsresult and virtualtype. on
windows they expand to virtual nsresult __stdcall and virtual type __stdcall for com compatibility reasons. you don't have to use them in your interfaces unless you're concerned with com compatibility. all mozilla interfaces inherit from nsisupports. inheriting from nsisupports allows any interface to be interrogated about other interfaces that its instance may support, and insures that reference count...
...uint16 m1, m2; pruint8 m3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae3c-11d1-b66c-00805f8a2676} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}}; why the b66c couplet gets broken up and grouped with the last set of bytes is probably a footnote somewhere. on
windows you can use the programs uuidgen and guidgen, which ship with visual c++, to generate ids. a simple example it is recommended that you use xpidl to define your interfaces. this sample code should be updated to reflect this, but it gives you a good basic understanding of com from the c++ perspective. file nsisample.h nsisample.h defines an extremely simple interface and its interface id (ii...
...ry's registerfactory() method (for an example of this, see nssample2.cpp). a dll can export two additional functions for self registration and unregistration. extern "c" ns_export nsresult nsregisterself(const char *path); extern "c" ns_export nsresult nsunregisterself(const char *path); this allows a dll to register and unregister all its factories. a simple program called regfactory.exe (on
windows) or regfactory (on unix) can be used to register self-registering dlls. reference counting basics reference counting is a critical part of modularity picture. there are a number of basic reference counting rules to remember. here's a quick summary. out parameters functions that return a new interface should call addref() on that interface before returning it. nsresult getfoo(ifoo **afoores)...
...And 2 more matches
onchange - Archive of obsolete content
t is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...elow: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
... is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...And 2 more matches
OpenClose - Archive of obsolete content
open a menu that is already open doesn't have any effect. if the menu is a child of another menu and the parent menu is not open. in this case, the parent menu must be opened first. if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener. see the popupshown event for an example of how to do this. a menu in an unprivileged content
window (such as a web page) can only open a popup while its
window is focused, and it is in the currently active tab. that means that a document in a background tab cannot open a menu or popup. closing menus menus will close automatically once the user has made a selection from the menu. when an menu item is selected, it fires a command event so that code may be used to perform an action. the user ma...
...rbutton tag. for menupopups attached to other elements using the popup or context attributes, see closing a popup below. when a menu is closed, the popuphiding event is fired at the menupopup. attaching an event listener which listens for the popuphiding event can be used to remove any commands that were adding during the popupshowing event. menus and popups are also closed when the document or
window they are contained within is closed, or if the menupopup element is removed from the document. these are situations when the popuphiding or popuphidden events may not fire as the element the events would be fired on are no longer available. if you need to perform uninitialization that would be done during these events, this could be done during an unload event. testing menu open state to check ...
...text attribute are opened when the user performs an action that attempts to open a context menu. this action will vary on each platform, but it general it involves clicking on the element with the right mouse button. 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. on
windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10. for this reason, you should not assume that a user has used the mouse to open the context menu. the openpopup method regardless of the type of popup, you may wish to open the popup programatically. to do this, use the popup's open...
...And 2 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
t is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...elow: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
... is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...And 2 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
t is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...elow: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
... is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...
...And 2 more matches
Box Model Details - Archive of obsolete content
ew <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this size but they may grow larger. here the
window should appear just over 200 pixels wide. that's enough for the two buttons. because all three elements are flexible, but they don't need any more room, the flexibility adds no extra space. as shown in the image, there are two buttons which expand vertically to fit their container, which in this case is the hbox. the align attribute controls this behavior on a horizontal box. you can also prev...
...ly. the align attribute aligns the buttons vertically. the result is that the buttons will be centered in the box in both directions. this example will work with a vertical box as well, although the second button will be underneath the first one, instead of beside it. ...
...the...
...And 2 more matches
Templates - Archive of obsolete content
, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark. you can see that the template contains a single button. this single button is used as a basis for all the buttons that need to be created. you can see in the image that the set of buttons has been created, one for each bookmark. try adding a bookmark in the browser while you have the example
window open. you'll notice that the buttons in the example get updated instantly. (you may have to focus the
window for it to change.) container and datasources the template itself is placed inside a vertical box. the box has two special attributes that allow it to be used for templates, which are used to specify where the data comes from. the first attribute on the box is the datasources attribute. t...
...s placed on the rule element determine which rules apply to which rdf resource. when scanning for which rule applies to the data, each rule element is checked in sequence for a match. that means that the order in which you define rules is important. earlier rules will override later rules. ...
...element determine which rules apply to which rdf resource. when scanning for which rule applies to the data, each rule element is checked in sequence for a match. that means that the order in which you define rules is important. earlier rules will override later rules. ...
...And 2 more matches
Tree View Details - Archive of obsolete content
s to determine what the next sibling's row index would be in such a case. example of hierarchical custom view let's put this together into a simple example that takes an array and constructs a tree from it. this tree will only support a single parent level with an inner child level, but it could be extended to support additional levels without too much effort. we'll examine it piece by piece. ...
...it simply sets the custom view by retrieving the tree and setting its 'view' property. we will define 'treeview' next. ...
...it simply sets the custom view by retrieving the tree and setting its 'view' property. we will define 'treeview' next. function init() { document.getelementbyid("elementlist").view = treeview; } the custom tree view will need to implement a number of methods, of which the important ones will be examined individually. ...
...And 2 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
e writing buggy or syntactically incorrect css. read the spec! study a book! know it! love it! make it a part of you! each skin has a master skin file. the skin for a package should always have a master skin file whose name corresponds to the name of the package. for example, the skin for the navigator package should contain a file called navigator.css that determines the default look of all xul
windows posed from this package. if inheriting the global skin, a skin file must import the global skin explicitly. if your skin file wishes to inherit the global skin, then it should import the global skin explicitly. this is done using an @import directive placed at the top of the file. @import url(chrome://global/skin/) ... rest of skin file ... css files for a skin fall into two categories: b...
... should be drawn from global by placingclass attributes on the appropriate elements in the xul. there should be no rules in navigator.css that attempt to define colors, fonts, etc. for either the personal toolbar headers or for the menu buttons' borders. example 2: the messenger package has a css file that describes the appearance of the messenger button that appears on the taskbar used by all
windows. the messenger css file should not attempt to describe the borders or the colors for this button. it should only describe the icon. because the button is used in the navigator
window (through overlays), the fonts/colors used should not be described by messenger. this allows the button to blend in as much as possible regardless of where it is used. the importance of this rule cannot be oversta...
... designed mozilla skin (aside from global) every single css file is a derived skin file, so this applies to all of you!!! derived skin files should not attempt to change the default look for a widget. for example, there should never be any css rules of the form tagname {...}; in a derived skin file. in doing so, you have redefined the default look for the widget, which will make the ui in your
window different from others that properly inherit from the same base skin file you do. the descendant selector is forbidden. never use the descendant selector without first getting usage of the rule approved. the matching for these rules (unless you're very careful) will be inefficient, and when only using generic tag names, can be positively grotesque. i'll show you the evil rule i put into the globa...
...And 2 more matches
editor - Archive of obsolete content
itor, you must enable editing using the makeeditable method. to specify the document to load in the editor use the src attribute. however, an issue is that if you specify the src attribute initially on the editor tag in the xul file, the document does not become editable by default. to enable editing on an editor, do either of the following: set the src attribute on the editor after the outer
window has loaded, for example, in the onload handler. you might also set the src attribute based on what the user selects from a file dialog. in this case, set the editortype attribute on the editor. call the makeeditable method to make the document loaded in the editor editable. enable the design mode of the document loaded in the editor. to edit a new document, set the src attribute to about:blan...
..., your application must be part of an extension or part of the chrome. xul applications loaded via a url from a web server will not be able to access most of the features of the editor. see the rich text editing and midas pages for more information about gecko's built-in rich text editor. ...
... below the type of editor to use. this value will be overridden depending on the content type of the document in the editor. html an html editor. text a plaintext editor. src type: uri the uri of the content to appear in the element. type type: string if set to the string content-primary, this editor becomes the primary content for the page. the
window for the primary content can be retrieved more conveniently using
window.content. properties accessibletype type: integer a value indicating the type of accessibility object for the element. commandmanager type: nsicommandmanager the command manager handles operations on the editor. contentdocument type: document this read-o...
...And 2 more matches
NPAPI plugin developer guide - Archive of obsolete content
to make your plugin scriptable from web pages, use npruntime. ...
...plugin scriptable from web pages, use npruntime. ...
...ess plug-ins the default plug-in using html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms
windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers ...
...And 2 more matches
NPEmbedPrint - Archive of obsolete content
platformprint additional platform-specific printing information. mac os: thprint unix: pointer to a npprintcallbackstruct. ...
... platformprint additional platform-specific printing information. mac os: thprint unix: pointer to a npprintcallbackstruct. ...
... platformprint additional platform-specific printing information. mac os: thprint unix: pointer to a npprintcallbackstruct. ...
...And 2 more matches
NP_Port - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary used on mac os only contains information required by the
window field of an np
window structure. syntax typedef struct np_port { cgrafptr port; /* grafport */ int32 portx; /* position inside the topmost
window */ int32 porty; } np_port; fields the data structure has the following fields: port standard mac os port into which the plug-in should draw. portx, porty top-left corner of the plug-in rectangle in port coordinates (taking the scroll position into account). ...
... np_port { cgrafptr port; /* grafport */ int32 portx; /* position inside the topmost
window */ int32 porty; } np_port; fields the data structure has the following fields: port standard mac os port into which the plug-in should draw. portx, porty top-left corner of the plug-in rectangle in port coordinates (taking the scroll position into account). description on mac os, the
window field of an np
window structure points to an np_port object, which is allocated by the browser. the np_port is valid for the lifetime of the np
window, that is, until npp_set
window is called again with a different value or the instance is destroyed. since the port is shared between the plug-in and other plug-ins and the browser, the plug-in should always do the following: draw only within the are...
...structure points to an np_port object, which is allocated by the browser. the np_port is valid for the lifetime of the np
window, that is, until npp_set
window is called again with a different value or the instance is destroyed. since the port is shared between the plug-in and other plug-ins and the browser, the plug-in should always do the following: draw only within the area designated by the np
window. save the current port settings before changing the port for drawing. ...
...And 2 more matches
Building a Theme - Archive of obsolete content
le structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g. c:\themes\my_theme\ or ~/themes/my_theme/). inside your new theme folder, create two new empty text files, one called chrome.manifest and the other called install.rdf. the file preview.png is shown as a preview of the theme in the themes panel of the add-ons
window. the file icon.png is used as an icon in the same panel. we'll leave both of them out for now, unless you have something picked out that you want to use. the remaining directories will be extracted from the default theme. first, you'll want to create a directory somewhere. copy your firefox installation's omni.ja into this directory. the location differs by operating system: linux: /usr/lib/moz...
...eave both of them out for now, unless you have something picked out that you want to use. the remaining directories will be extracted from the default theme. first, you'll want to create a directory somewhere. copy your firefox installation's omni.ja into this directory. 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. it contains several folders, modules, jssubloader and others. the files we will be needing are located under the chrome\toolkit\skin\classic folder. create a folder called chrome in your theme's folder. next, the contents of the foll...
...files are part of "chrome packages" - bundles of user interface components which are loaded via chrome:// uris. rather than load the browser from disk using a file:// uri (since the location of firefox on the system can change from platform to platform and system to system), mozilla developers came up with a solution for creating uris to content that the installed add-on knows about. the browser
window is: chrome://browser/content/browser.xul. try typing this url into the location bar in firefox! chrome uris consist of several components: firstly, the uri scheme (chrome) which tells firefox's networking library that this is a chrome uri. it indicates that the content of the uri should be handled as a (chrome). compare (chrome) to (http) which tells firefox to treat the uri as a web page. s...
...And 2 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
view a sample theme header here. ...
... view a sample theme header here. ...
...er here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the
window. the upper right-hand side of the image should have the most important information—as a user increases the width of the browser
window, the browser reveals more of the left-hand side of the image. online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser. photoshop — tweak, rotate and touch up photos with ph...
...And 2 more matches
:-moz-system-metric() - Archive of obsolete content
this page was auto-generated because a user created a sub-page to this page. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...
... formal syntax syntax not found in db! ...
... formal syntax syntax not found in db! ...
...And 2 more matches
Global object - MDN Web Docs Glossary: Definitions of Web-related terms
script, there's always a global object defined. in a web browser, when scripts create global variables, they're created as members of the global object. (in node.js this is not the case.) the global object's interface depends on the execution context in which the script is running. for example: in a web browser, any code which the script doesn't specifically start up as a background task has a
window as its global object. this is the vast majority of javascript code on the web. code running in a worker has a workerglobalscope object as its global object. scripts running under node.js have an object called global as their global object.
window object in the browser the
window object is the global object in the browser. any global variables or functions can be accessed as properties of the...
...as its global object. this is the vast majority of javascript code on the web. code running in a worker has a workerglobalscope object as its global object. scripts running under node.js have an object called global as their global object.
window object in the browser the
window object is the global object in the browser. any global variables or functions can be accessed as properties of the
window object. ...
... the web. code running in a worker has a workerglobalscope object as its global object. scripts running under node.js have an object called global as their global object.
window object in the browser the
window object is the global object in the browser. any global variables or functions can be accessed as properties of the
window object. access global variables var foo = "foobar"; foo ===
window.foo; // returns: true after defining a global variable foo, we can access its value directly from the
window object, by using the variable name foo as a property name of the global object
window.foo. ...
...And 2 more matches
HTML: A good basis for accessibility - Learn web development
n default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color. onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. ...
...
window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is recommended to use a <button> instead. in general you should only use an anchor for navigation using a proper url. 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. ...
...s 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. people experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab,
window, or application is opened unexpectedly. older versions of screen reading software may not even announce the behavior. ...
...And 2 more matches
HTML: A good basis for accessibility - Learn web development
n default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color. onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. ...
...
window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is recommended to use a <button> instead. in general you should only use an anchor for navigation using a proper url. 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. ...
...s 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. people experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab,
window, or application is opened unexpectedly. older versions of screen reading software may not even announce the behavior. ...
...And 2 more matches
How much does it cost to do something on the Web? - Learn web development
is. objective: review the complete process for creating a website and find out how much each step can cost. summary when launching a website, you may spend nothing, or your costs may go through the roof. in this article we discuss how much everything costs, and how you get what you pay (or don't pay). software text editors you likely have a text editor: such as, notepad on
windows, gedit on linux, textedit on mac. you'll have an easier time writing code if you choose an editor that color-codes, checks your syntax, and assists you with code structure. many editors are free, for example atom, brackets, bluefish, textwrangler, eclipse, netbeans, and visual studio code. some, like sublime text, you can test as long as you like, but you're encouraged to pay. some, like phpsto...
...ng simple html, css, and javascript, go with a simple editor. price does not reliably reflect a text editor's quality or usefulness. you have to try it for yourself and decide if it meets your needs. for example, sublime text is cheap, but comes with many free plugins that can greatly extend its functionality. image editors your system likely includes a simple image editor, or viewer: paint on
windows, eye of gnome on ubuntu, preview on mac. those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping. editors can be free (gimp, paint.net), moderately expensive (paintshop pro, less than $100), or several hundred dollars (adobe photoshop). you can use any of them, as they will have similar functionality, though some are so comprehensive yo...
...remiere pro, avid media composer, final cut pro). the software you received with your digital camera may cover all your needs. publishing tools you also need a way to upload files: from your hard drive to a distant web server. to do that you should use a publishing tool such as an (s)ftp client, rsync, or git/github. each operating system includes an (s)ftp client, as part of its file manager. ...
...And 2 more matches
How do you upload your files to a web server? - Learn web development
e transfer tools available. summary if you have built a simple web page (see html basics for an example), you will probably want to put it online, on a web server. in this article we'll discuss how to do that, using various available options such as sftp clients, rsync and github. sftp there are several sftp clients out there. our demo covers filezilla, since it's free and available for
windows, macos and linux. to install filezilla go to the filezilla downloads page, click the big download button, then install from the installer file in the usual way. note: of course there are lots of other options. see publishing tools for more information. open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider ...
...der.net/ — as you can see, so far there is nothing there: note: depending on your hosting provider, most of the time you'll see a page saying something like “this website is hosted by [hosting service].” when you first go to your web address. to connect your sftp client to the distant server, follow these steps: choose file > site manager... from the main menu. ...
... note: make sure your hosting provider offers sftp (secure ftp) connection to your hosting space. ftp is inherently insecure, and you shouldn't use it. ...
...And 2 more matches
HTML text fundamentals - Learn web development
tionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
...f(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
... solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<ol>\n<li>drive to the end of the road</li>\n<li>turn right</li>\n<li>go straight across the first two roundabouts</li>\n<li>turn left at the third roundabout</li>\n<li>the school is on your right, 300 meters up the road</li>\n</ol>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
...And 2 more matches
Introduction to events - Learn web development
roduces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. for example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. as a result, the plane can safely takeoff. in the case of the web, events are fired inside the browser
window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser
window. there are many different types of events that can occur. for example: the user selects a certain element or hovers the cursor over a certain element. the user chooses a key on the keyboard. the user resi...
... a web page finishes loading. a form is submitted. a video is played, paused, or finishes. an error occurs. you can gather from this (and from glancing at the mdn event reference) that there are a lot of events that can be responded to. ...
...s when the button is focused and unfocused; try pressing the tab to focus on the button and press the tab again to focus away from the button. these are often used to display information about filling in form fields when they are focused, or displaying an error message if a form field is filled with an incorrect value. btn.ondblclick — the color changes only when the button is double-clicked.
window.onkeypress,
window.onkeydown,
window.onkeyup — the color changes when a key is pressed on the keyboard. the keypress event refers to a general press (button down and then up), while keydown and keyup refer to just the key down and key up parts of the keystroke, respectively. note: it doesn't work if you try to register this event handler on the button itself — we've had to register it on the ...
...And 2 more matches
Handling common JavaScript problems - Learn web development
workflow with the minimum of hassle. many code editors have linter plugins, for example github's atom code editor has a jshint plugin available. to install it: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on
windows/linux) and choose the install option in the left-hand menu. in the search packages text field, type "jslint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-jshint plugin. after the packages have finished...
...ist of the series of functions that were invoked to cause the current function to be invoked. at the top, we have showheroes() the function we are currently in, and second we have onload, which stores the event handler function containing the call to showheroes(). under scopes, you'll see the currently active scope for the function we are looking at. we only have three — showheroes, block, and
window (the global scope). each scope can be expanded to show the values of variables inside the scope when execution of the code was stopped. we can find out some very useful information in here. expand the showheroes scope — you can see from this that the heroes variable is undefined, indicating that accessing the members property of jsonobj (first line of the function) didn't work. you can al...
... { main(); } else { loadscript('polyfills.js', main); } function main(err) { // actual app code goes in here } so first we run a conditional that checks whether the function browsersupportsallfeatures() returns true. if it does, we run the main() function, which will contain all our app's code. browsersupportsallfeatures() looks like this: function browsersupportsallfeatures() { return
window.promise &&
window.fetch; } here we are testing whether the promise object and fetch() function exist in the browser. if both do, the function returns true. if the function returns false, then we run the code inside the second part of the conditional — this runs a function called loadscript(), which loads the polyfills into the page, then runs main() after the loading has finished. loadscript(...
...And 2 more matches
CSUN Firefox Materials
rdinary people. firefox's "www for everyone" philosophy is also a great accessibility story. every user, regardless of what accomodations they need, can enjoy a less cluttered web, free of intrusions such as popup ads and spyware. the simple, uncluttered user interface is simply more pleasant. as a result, nearly everyone who tries firefox finds themselves hooked.. assistive technology support on
windows "i am a full firefox convert with the release of 1.5. at my next opportunity, i intend to convert my family over to it too. " -- darren paskell, from
window-eyes beta testing list firefox works with popular screen readers, with the best support currently coming from gw micro's
window-eyes 5.5. jaws support is quickly catching up as well. in recent articles from both afb's access world and nf...
... rather than tabbing through many links to get there. browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard. the f7 key toggles this feature on/off. tabbed browsing helps keyboard users by putting all of the browsed documents in one firefox application
window rather than cluttering the alt+tab order which makes keyboard navigation within the entire
windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances t...
...tab allows you to embed internet explorer into firefox tabs. 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 includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and
windows, plus much more. it also includes a full-featured session manager with crash recovery that can save and restore combinations of opened tabs and
windows. fire vox is a screen reader extension built just for firefox which can read mathml the accessibility extension, from the university of illinois, provides new menus and keyboard shortcuts for accessing every feature of a web page community c...
...And 2 more matches
Creating reftest-based unit tests
if they differ, the test fails. or, alternatively, the conditions can be reversed (a != test rather than an == test). the power of the tool comes from the fact that there is more than one way to achieve any given visual effect in a browser. so, if the effect of complex markup is being tested, put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect. reftest will then compare them and verify whether they produce the same bitmap. ...
...is a silly example, but this will step you through creating your first reftest. step 1 for now you must check out and build the browser in order to run the tests. see the build documentation for details on doing that. sorry about this, but the released builds and the nightly builds are built with the "--disable-tests" option and reftest will not work - see bug 369809. step 2 open a terminal
window. create a directory (inside firefox's source code tree) and make that your current directory (i.e. move to that directory). step 3 create a file named foo.html with the following: <html><head><title>reftest0001</title> <body><strong>hello!</strong></body> </html> step 4 create a file named bar.html with the following: <html><head><title>reftest0001</title> <body><b>hello!</b></body> </...
... there can be a lot of extra console output. the reftest.list file can be named whatever you want, not necessarily reftest.list (but it has to end with .list). more to do create more reftests. new tests can be added to the reftest.list file, which can contain any number of tests. the file can include other things, but it does not get very complicated. keep in mind new tests should fit a 600x600
window so we can test on mobile platforms easier. here is an example. include ../other.list == foo.html bar.html != aaa.html bbb.html the first line, as one might expect, includes another manifest. the second line should look familiar. it says that foo.html and bar.html should produce visually identical output. the third line says that aaa.html and bbb.html should not produce visually identical outpu...
...And 2 more matches
Debugging on Mac OS X
note that subdirectories may initially appear to be empty, but they too will progressively be populated as xcode processes the sourse files. once done, you should be able to open any file quickly by hitting cmd-shift-o and typing in the name of a file.) in the product menu, select scheme > new scheme and name your scheme (for example, "debug"). after you click ok, xcode should open the settings
window for the new scheme. (if not, then open its settings from the product > edit scheme menu.) select "run" on the left-hand side of the settings
window, then select the "info" tab. set the executable by clicking on "none" and selecting "other...". a new dialog titled "choose an executable to launch" will pop up. browse to the .app file that you want to debug (firefox.app, nightlydebug.app etc). the ...
... click the '+' below the "arguments passed on launch" field. add "-p profilename", where profilename is the name of a profile you created previously. repeat that to also add the argument "-no-remote". also in the "arguments" panel, you may want to add an environment variable moz_debug_child_process set to the value 1 to help with debugging e10s. select "build" from the left of the scheme editor
window, and check that there is nothing listed under targets (otherwise it may cause problems when you try to run the executable for debugging since you will get build errors). click "close" to close the scheme editor. at this point you can run the application from xcode, and when you pause or hit breakpoints it should show open the correct source file at the correct line. setting up lldb lldb is t...
...our task, so that you don't lose precious data like bookmarks, saved passwords, etc. so that you're not bothered with the profile manager every time you start to debug, expand the "executables" branch of the "groups & files" list and double click on the executable you added for mozilla. click the plus icon under the "arguments" list and type "-p <profile name>" (e.g. "-p mozilladebug"). close the
window when you're done. running a debug session make sure breakpoints are active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main
window). then click the "run" button or select "run" from the product menu. setting breakpoints setting a breakpoint is easy. j...
...And 2 more matches
Simple Instantbird build
o compile on slower machines, and having 8gb of ram is recommended (though you can probably still get away with 4gb). good internet connection for the initial source download. setup: depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions.
windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you get the source, you can opt to add the progressextension to your mercurial.ini (for
windows) or .hgrc (for *nix / mac) file. this will provide status feedback during the lengthy clone / download process. see: configure mercurial .hgrc file for progress extens...
...x build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you get the source, you can opt to add the progressextension to your mercurial.ini (for
windows) or .hgrc (for *nix / mac) file. this will provide status feedback during the lengthy clone / download process. see: configure mercurial .hgrc file for progress extension. get the source note: on
windows, you won't be able to build the instantbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings"). you can pick any other location, such as a new directory c:\instantbird-src. note: parts of the build process also have problems when the source code is in a directory where the path is long (nested many levels deep). on linux, this can manifest a...
... deep). on linux, this can manifest as problems setting up the virtualenv for running tests (failure to install pip or virtualenv because of os access denied errors, where access is denied not because of permission problems, but because the paths being accessed have been truncated, and so do not exist). having the source deep in a filesystem hierarchy can also cause problems with pymake builds on
windows. if you run into seemingly arbitrary problems in building and the source is deeply nested, try moving it close to the root of your machine and re-building. get the latest source code from mozilla's comm-central mercurial code repository: hg clone http://hg.mozilla.org/comm-central then, get all the repositories it depends on. the comm-central repository includes a script to do just that. thi...
...And 2 more matches
Message manager overview
nager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but different kind of script. there are three different subtypes of frame message manager: the global message manager, the
window message manager, and the browser message manager. all three enable chrome code to: load a script into a frame in the content the content process using a loadframescript() function. these scripts are called "frame scripts". communicate with frame scripts using addmessagelistener() and broadcastasyncmessage() or sendasyncmessage() functions. note that in this context, "browser" refers to th...
...functions. note that in this context, "browser" refers to the xul <browser> object, which is a frame that hosts a single web document. it does not refer to the more general sense of a web browser. global message manager the global message manager operates on every <browser> (that is, every open content tab). loadframescript() loads the given script into every <browser> in every browser
window. broadcastasyncmessage() sends the message to every <browser> in every browser
window. it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster you can access the global message manager like this: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsime...
...() sends the message to every <browser> in every browser
window. it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster you can access the global message manager like this: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager);
window message manager the
window message manager is associated with a specific browser
window, and operates on every <browser> (that is, every content tab) loaded into that
window: loadframescript() loads the given script into every <browser> in that browser
window broadcastasyncmessage() sends the message to every <browser> in that browser
window. it's a chromemessagebroadcaster object, which i...
...And 2 more matches
Script security
e is web content accessing objects in a chrome-privileged scope. compartments compartments are the foundation for gecko's script security architecture. a compartment is a specific, separate area of memory. in gecko, there's a separate compartment for every global object. this means that each global object and the objects associated with it live in their own region of memory. normal content
windows are globals, of course, but so are chrome
windows, sandboxes, workers, the contentframemessagemanager in a frame script, and so on. gecko guarantees that javascript code running in a given compartment is only allowed to access objects in the same compartment. when code from compartment a tries to access an object in compartment b, gecko gives it a cross-compartment wrapper. this is a proxy in c...
...partment b, gecko gives it a cross-compartment wrapper. this is a proxy in compartment a for the real object, which lives in compartment b. inside the same compartment, all objects share a global and are therefore same-origin with each other. therefore there's no need for any security checks, there are no wrappers, and there is no performance overhead for the common case of objects in a single
window interacting with each other. whenever cross-compartment access happens, the wrappers enable us to implement the appropriate security policy. because the wrapper we choose is specific to the relationship between the two compartments, the security policy it implements can be static: when the caller uses the wrapper, there's no need to check who is making the call or where it is going. cross-compa...
...licy. because the wrapper we choose is specific to the relationship between the two compartments, the security policy it implements can be static: when the caller uses the wrapper, there's no need to check who is making the call or where it is going. cross-compartment access same-origin as we've already seen, the most common scenario for same-origin access is when objects belonging to the same
window object interact. this all takes place within the same compartment, with no need for security checks or wrappers. when objects share an origin but not a global - for example two web pages from the same protocol, port, and domain - they belong to two different compartments, and the caller gets a transparent wrapper to the target object. transparent wrappers allow access to all the target's prop...
...And 2 more matches
How to Report a Hung Firefox
ing the stack trace. the crash report link for a hang, obtained by following the steps below. submit a crash report for a hung firefox the easiest way to help the firefox stability team to debug these kinds of hangs is to make the hung firefox crash and submit a crash report. then file a bug report with the crash report id. the steps to induce a crash are slightly different on each platform:
windows on
windows, the stability team has written a utility which will inject a crash into firefox which will trigger the crash reporter: download crashfirefox.exe here (source code). running this tool will search for firefox.exe and inject crashing code into it. the tool also has command-line options to kill processes with other names or by process id. run the crashfirefox.exe tool. the firefox c...
...ui should appear. please check the box to send the crash report to mozilla start firefox. type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. ...
...the crash report to mozilla start firefox. type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. 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"]. ...
...And 2 more matches
JavaScript-DOM Prototypes in Mozilla
ageelement) implements and chooses to expose to xpconnect through the object's class info. one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the standard interface), nsidomeventtarget, nsidomeventlistener, nsidom3node, and so on. the prototype object that xpconnect creates for the classes that have class info are shared within a scope (
window). because of this, the following holds true (assuming img1 and img2 are two different image objects in the same document): img1.__proto__ === img2.__proto__ if img1 would come from one document and img2 from another document, then the above would not be true. both prototypes would look identical, but they would be two different jsobject's. this sharing of prototypes lets users do cool things ...
.... it is not guaranteed to work or be error-free in any implementation. it is not standard and cannot be expected to have any result. here is an attempt to modify a host object: (function(){ try { image.prototype.src = 1; } catch(ex){ alert(ex); } })(); this demonstrates that the image constructor, a host object supported in nearly all browsers for mac and
windows, has a prototype property, and that an attempt to modify the prototype's src - property results in an error. another example would be modifying the pagex property of a mouseevent instance. the pagex property actually needs a patch because it doesn't get set correctly in initmouseevent bug 411031. here is a diagram that shows the prototype layout of a htmldivelement in mozilla: htmldiveleme...
...on is done, the nsdomclassinfo code uses the registry every time a named property is resolved on a global object (because of this, the nsscriptnamespacemanager needs to be pretty fast at looking things up in its registry; that's why it is a hash table). when a property is resolved on the global object, the nsdomclassinfo code will ask the nsscriptnamespacemanager if the name is a known name (in ns
windowsh::globalresolve()), and if the name is known, the code will look at the type of the name and act accordingly. if a class constructor or class prototype name is resolved, the class info code will define the constructor for that class, and also define the prototype property of that constructor (i.e. htmlimageelement.prototype). the prototype of a constructor will either be the prototype object th...
...And 2 more matches
JNI.jsm
ibrary allows calling java code running in java virtual machines (jvms), etc. the most common use for this module is in add-ons and other works on firefox for android (fennec). with this module, all of the android sdk functions that firefox has permissions for are at your fingertips. a note about firefox for android, this jsm file is already globally imported and is available from the privileged
window scope as
window.jni. there also exists a jenv variable in the
window scope, so if you need to run jni from the global scope, use a different variable name then jenv. jni.jsm contains all the js-ctypes needed to communicate with the jni libraries. the js-ctypes is abstracted away while all the underlying data is all ctype data. functions are declared similar to js-ctypes but in a very different s...
...); // 0 ia.get(1); // 0 ia.get(2); // 0 ia.get(3); // 0 ia.get(4); // 0 ia.set(2, 10); // void ia.get(2); // 10 ia.setelements(3, [50, 75]); // void ia.get(0); // 0 ia.get(1); // 0 ia.get(2); // 10 ia.get(3); // 50 ia.get(4); // 75 } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } casting this example shows how to cast, the casting happens at jni.classes.android.view.
windowmanager.__cast__(wm) below: function main() { var my_jenv; try { my_jenv = jni.getforthread(); var sig = {
windowmanager: 'landroid/view/
windowmanager;',
windowmanager_layoutparams: 'landroid/view/
windowmanager$layoutparams;', viewgroup_layoutparams: 'landroid/view/viewgroup$layoutparams;', view: 'landroid/view/view;', ...
...ass%3ct%3e%29 * public abstract object getsystemservice (string name) */ name: 'getsystemservice', sig: genmethodsig([ sig.string // name ], sig.object // return ) }], static_fields: [ { name: '
window_service', sig: sig.string } // http://developer.android.com/reference/android/content/context.html#
window_service // public static final string
window_service ] }); var
windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.
windowmanager), { methods: [ { name: 'addview', ...
...And 2 more matches
Preferences system
this document describes toolkit's preferences system. using this system it is possible to create preferences
windows that display and operate appropriately on various platforms (
windows, macos x and gnome). the system is implemented through a few xul elements and attributes. ...
...stem. using this system it is possible to create preferences
windows that display and operate appropriately on various platforms (
windows, macos x and gnome). the system is implemented through a few xul elements and attributes. reference information about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: pref
window | prefpane | preferences | preference | xul attributes use code for a typical preferences
window may look like this: <pref
window id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> .. ui elements tha...
...e1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> .. ...
...And 2 more matches
Build instructions
ke command line, e.g., gmake variable=value variable=value target1 target2 or defined in the environment, e.g. (for posix shells), variable=value; export variable gmake target1 target2 here are some (not all) of the make variables that affect nss builds: build_opt: if set to 1, means do optimized non-debug build. default is debug, non-optimized build. use_debug_rtl: if set to 1, on
windows, causes build with debug version of the c run-time library. ns_use_gcc: on platforms where gcc is not the native compiler, tells nss to build with gcc instead of the native compiler. default is to build with the native compiler. use_64: on platforms that support both 32-bit and 64-bit abis, tells nss to build for the 64-bit abi. default is 32-bit abi, except on platforms that do not support a ...
...ot the native compiler, tells nss to build with gcc instead of the native compiler. default is to build with the native compiler. use_64: on platforms that support both 32-bit and 64-bit abis, tells nss to build for the 64-bit abi. default is 32-bit abi, except on platforms that do not support a 32-bit abi. moz_debug_symbols: tells nss to build with debug symbols, even in an optimized build. on
windows, in both debug and optimized builds, when using msvc, tells nss to put symbols in a .pdb file. required to build with msvc 8 (2005 express). default is not to put debug symbols into optimized builds, and for msvc, is to put symbols into the .exe or .dll file. nsdistmode: if set to 'copy', mozilla/dist/<obj_stuff>/bin/* real files instead of symbolic links. these variables should be either und...
...bols in a .pdb file. required to build with msvc 8 (2005 express). default is not to put debug symbols into optimized builds, and for msvc, is to put symbols into the .exe or .dll file. nsdistmode: if set to 'copy', mozilla/dist/<obj_stuff>/bin/* real files instead of symbolic links. these variables should be either undefined, or set to "1". results are undefined for variables set to "0". for
windows, install the mozillabuild environment and microsoft visual studio 2010. (the free edition works, and other versions like visual studio 2008 and visual studio 2012 may also work.) use start-shell-msvc2010.bat from mozillabuild to get a bash shell with the path already configured, and execute these instructions from within that bash shell. for rhel-5, you need to use the new assembler. you can in...
...And 2 more matches
Building the WebLock UI
ant to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element. ...
...ck is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element. you also need to create the function that displays the weblock
window itself when the user clicks the weblock icon in the statusbar. 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. elements in the xul markup map to widget...
...me://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. elements in the xul markup map to widgets in the interface that gecko renders in a fairly straightforward way - so, for instance, the root element of an application
window is the element <
window/>, the root element of the dialog we'll be creating here is <dialog/>, and so forth. within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla. in using xpcom components you saw how xpcom objects are reflected into ...
...And 2 more matches
Mozilla internal string guide
d mac os x natively use utf-16.) latin1 - 8-bit encoding for the first 256 unicode code points. used for http headers and for size-optimized storage in text node and spidermonkey strings. latin1 converts to utf-16 by zero-extending each byte to a 16-bit code unit. note that this kind of "latin1" is not available for encoding html, css, js, etc. specifying charset=latin1 means the same as charset=
windows-1252.
windows-1252 is a similar but different encoding used for interchange. in addition, there exist multiple other (legacy) encodings. the web-relevant ones are defined in the encoding standard. conversions from these encodings to utf-8 and utf-16 are provided by mozilla::encoding. additonally, on
windows the are some rare cases (e.g. drag&drop) where it's necessary to call a system api with...
...is a similar but different encoding used for interchange. in addition, there exist multiple other (legacy) encodings. the web-relevant ones are defined in the encoding standard. conversions from these encodings to utf-8 and utf-16 are provided by mozilla::encoding. additonally, on
windows the are some rare cases (e.g. drag&drop) where it's necessary to call a system api with data encoded in the
windows locale-dependent legacy encoding instead of utf-16. in those rare cases, use multibytetowidechar/widechartomultibyte from kernel32.dll. do not use iconv on *nix. we only support utf-8-encoded file paths on *nix, non-path gtk strings are always utf-8 and cocoa and java strings are always utf-16. when working with existing code, it is important to examine the current usage of the strings that you...
...s to use 8-bit strings: either with utf-8 or latin1 (byte value is the unicode scalar value) semantics. js and dom prefer utf-16. most gecko code uses utf-16 for compatibility with js strings and dom string which are potentially-invalid utf-16. however, both dom text nodes and js strings store strings that only contain code points below u+0100 as latin1 (byte value is the unicode scalar value).
windows and cocoa use utf-16.
windows system apis take utf-16. cocoa nsstring is utf-16. gtk uses utf-8. gtk apis take utf-8 for non-file paths. in the gecko case, we support only utf-8 file paths outside
windows, so all gtk strings are utf-8 for our purposes though file paths received from gtk may not be valid utf-8. to assist with ascii, latin1, utf-8, and utf-16 conversions, there are some helper ...
...And 2 more matches
Components.utils.waiveXrays
d = components.utils.waivexrays(obj); parameters obj the object for which we wish to waive xrays. returns if the argument obj is an xray, this function returns a wrapper that transitively waives xray behavior on the underlying object and anything that comes off the object. if obj is not an xray, this function just returns obj. ...
... if the argument obj is an xray, this function returns a wrapper that transitively waives xray behavior on the underlying object and anything that comes off the object. if obj is not an xray, this function just returns obj. ...
...avior on the underlying object and anything that comes off the object. if obj is not an xray, this function just returns obj. ...
...And 2 more matches
IAccessible2
[propget] hresult attributes( [out] bstr attributes ); parameters attributes return value s_false returned if there is nothing to return, [out] value is null. s_ok. extendedrole() returns the extended role. an extended role is a role which is dynami...
...[propget] hresult attributes( [out] bstr attributes ); parameters attributes return value s_false returned if there is nothing to return, [out] value is null. s_ok. extendedrole() returns the extended role. an extended role is a role which is dynamically generated by the a...
...bad [in] passed. s_ok. states() returns the bit strip containing any iaccessible2 states. the iaccessible2 states are in addition to the msaa states and are defined in the ia2states enum. [propget] hresult states( [out] accessiblestates states ); parameters states return value s_ok. uniqueid() returns the unique id. the uniqueid is an identifier for this object, is unique within the current
window, and remains the same for the lifetime of the accessible object. the uniqueid is not related to: the msaa objectid which is used by the server to disambiguate between iaccessibles per hwnd or the msaa childid which is used to disambiguate between children being managed by an iaccessible. this value is provided so the at can have access to a unique runtime persistent identifier even when not hand...
...And 2 more matches
amIWebInstaller
toolkit/mozapps/extensions/amiwebinstaller.idlscriptable this interface is used to allow web pages to start installing add-ons. ...
... toolkit/mozapps/extensions/amiwebinstaller.idlscriptable this interface is used to allow web pages to start installing add-ons. ...
...llcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidom
window used in this interface were nsidom
window. methods installaddonsfromwebpage() installs an array of add-ons at the request of a webpage. boolean installaddonsfromwebpage( in astring amimetype, in nsidom
window a
window, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring aname...
...And 2 more matches
nsIParentalControlsService
ntrolsservice.idlscriptable this interface provides access to the operating system's parental controls feature, allowing code to detect whether such a service is enabled and to request overrides to bypass the feature. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: currently, this interface is only supported on microsoft
windows vista and newer as well as android 4.3 and newer. implemented by: @mozilla.org/parental-controls-service;1. to create an instance, use: var parentalcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview void log(in short aentrytype, in boolean a...
...read only. loggingenabled boolean true if t...
...read only. loggingenabled boolean true if the current user account has parental controls logging enabled. if this is true, applications should log relevant...
...And 2 more matches
nsIPrintingPrompt
see nsiprintingpromptservice for all documentation. this service enables embedders to implement their own print and progress dialogs. each platform has a "base" or "backstop" implementation of the service. ...
...see nsiprintingpromptservice for all documentation. this service enables embedders to implement their own print and progress dialogs. each platform has a "base" or "backstop" implementation of the service. ...
...n. this service enables embedders to implement their own print and progress dialogs. each platform has a "base" or "backstop" implementation of the service. the service is automatically registered at start up. historically, platform toolkits with native dialogs have implemented them in the gfx layer usually they were displayed when a new devicecontextspec specific to that platform was created.
windows: the gfx layer no longer supports default toolkit behavior for displaying the native print dialog. if an embedder implemented service returns any error code (other than ns_error_abort) printing will terminate. returning ns_ok assumes that the printsettings object was correctly filled in and if it does not have valid fields for printer name, and so on. it may also terminate. defaults for platf...
...And 2 more matches
nsITaskbarPreview
method overview void invalidate(); attributes attribute type description active boolean indicates whether or not the preview is marked as active (currently selected) in the taskbar. ...
...method overview void invalidate(); attributes attribute type description active boolean indicates whether or not the preview is marked as active (currently selected) in the taskbar. ...
...ntroller the controller for this preview. the controller provides the behavior and appearance for the taskbar preview, and is responsible for determining the size and contents of the preview, which buttons are displayed, and how the application responds to user actions on the preview. the controller is not allowed to be null. note: neither nsitaskbartabpreview or nsitaskbar
windowpreview makes full use of the controller; see the documentation for each interface for details on which controller methods are used. tooltip domstring a string containing the text displayed in the tooltip above the preview when the user hovers over it. by default, this is an empty string. visible boolean indicates whether or not the ...
...And 2 more matches
nsITaskbarPreviewButton
attributes attribute type description disabled boolean if true, the button is disabled. ...
...attributes attribute type description disabled boolean if true, the button is disabled. ...
...attributes attribute type description disabled boolean if true, the button is disabled. ...
...And 2 more matches
nsITaskbarPreviewController
widget/public/nsitaskbarpreviewcontroller.idlscriptable this interface is used on microsoft
windows to provide the behavior of taskbar previews. its methods and properties are used by the nsitaskbarpreview interface. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) clients should provide their own implementation of this interface. depending on whether the controller is connected to an nsitaskbartabpreview or nsitaskbar
windowpreview, only certain methods and attributes need to be implemented. method overview boolean drawpreview(in nsidomcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned ...
... ctx an nsidomcanvasrenderingcontext2d object representing the drawing context into which the preview is to be rendered. note that this context is not actually attached to a canvas element. return value true if you want a frame drawn around the preview, otherwise false. drawthumbnail() invoked by the taskbar preview when it needs to draw the thumbnail in the taskbar's application preview
window. boolean drawthumbnail( in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height ); parameters ctx an nsidomcanvasrenderingcontext2d object representing the drawing context into which the thumbnail is to be rendered. note that this context is not actually attached to a canvas element. width the width of the surface backing the drawing context. height ...
...height of the surface backing the drawing context. note: it's guaranteed that width ÷ height will equal the thumbnailaspectratio, within the margin of rounding errors. return value true if you want a frame drawn around the thumbnail, otherwise false. onactivate() invoked when the user clicks on the tab preview. boolean onactivate(); parameters none. return value true if the top level
window corresponding to the preview should be activated, false if activation is not accepted. onclick() invoked when one of the buttons on the
window preview's toolbar is clicked by the user. void onclick( in nsitaskbarpreviewbutton button ); parameters button an nsitaskbarpreviewbutton object representing the button that was pressed. this can be compared to the buttons returned by the nsitas...
...And 2 more matches
nsIWebProgress
the parent-child relationship of nsiwebprogress instances is not made explicit by this interface, but the relationship may exist in some implementations. ...
...the parent-child relationship of nsiwebprogress instances is not made explicit by this interface, but the relationship may exist in some implementations. ...
...the parent-child relationship of nsiwebprogress instances is not made explicit by this interface, but the relationship may exist in some implementations. ...
...And 2 more matches
XPCOM Interface Reference by grouping
ing and category names were made by somewhat arbitrary decision by the author. (i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.) the primary sections consist of: browser this section contains elements associated with the view pane or the content of the "browser
window" proper. it is wrapped by system, but displayed for convenience. data this section contains data wrappers and core object definitions. security this section contains apis for secure channel communications system this section contains application level interfaces including calls to external support elements (such as device calls). this is the root element and may contain some fun...
...listener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchrome
window nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjs
window nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidom
window nsidom
window2 nsidom
windowinternal nsidom
windowutils nsidynamiccontainer nsieditor ...
...nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsi
windowcreator nsi
windowmediator nsi
windowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner core action nsitransactionmanager process ...
...And 2 more matches
Working with Multiple Versions of Interfaces
the problem in this short note we illustrate how one can update an xpcom module in order for it to work in both firefox 2 and firefox 3, even if the interfaces have changed in the interim. in the extension that prompted this note, i needed to obtain the hwnd of the document (yes its on
windows) in order to identify each particular extension instance. to do this i used the accessibility framework: hwnd gethwnd(nsidomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6. nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiac...
...nce( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6. nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessibledocument> accdocnode; accdocnode = do_queryinterface(accnode, &rv); if(ns_failed(rv)){ return self; } rv = accdocnode->get
windowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.5. the problem arises when one tries to run an extension built with the latest sdk in an older version of firefox, say firefox 2. what happens is that the call to do_createinstance fails with nsresult ns_error_no_interface. this is because the call ...
...first the good news. plan b inside firefox 2 happily runs to completion. all the xpcom calls succeed, or at least think they succeed. the bad news is that the thing we get back is not a valid hwnd. the problem now is not just interface identifier mismatch, but class declaration ...
...And 2 more matches
Building a Thunderbird extension 6: Adding JavaScript
warning: this content is for older versions of thunderbird. much of it may no longer be relevant. see developer.thunderbird.net for newer information. in this step we will create a small piece of javascript code that inserts the current date into our statusbar widget. the statusbar is usually displayed at the bottom of the thunderbird
window. ...
...small piece of javascript code that inserts the current date into our statusbar widget. the statusbar is usually displayed at the bottom of the thunderbird
window. depending on the installed theme the result will look something like this: modify xul elements with javascript save the following javascript code into the content/ folder next to your myhelloworld.xul file and name it overlay.js. ...
...statusbar widget. the statusbar is usually displayed at the bottom of the thunderbird
window. depending on the installed theme the result will look something like this: modify xul elements with javascript save the following javascript code into the content/ folder next to your myhelloworld.xul file and name it overlay.js. ...
...And 2 more matches
Zombie compartments
compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (website) compartments, these compartments are also listed in more detail in the explicit allocations section. ...
......
... when are compartments created? any compartments with the following forms are created by firefox for its own internal use, and can usually be ignored when looking for zombie compartments. js-compartment([system principal], 0x7f10f1250000) compartment(atoms) js-compartment(about:home) js-co...
...And 2 more matches
ctypes
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. similar to errno in libc, available on all platforms. cannot be set. winlasterror number|undefined the value of the latest
windows error. similar to getlasterror under
windows, available only for
windows. cannot be set. constants abi constants these constants are used to specify the abi used to call a native function in the library. constant description default_abi corresponds to cdecl; standard libraries use this abi. you also use this for all system calls on mac os x and linux. s...
... predefined data types primitive types these types behave the same on all platforms. ...
...ive function in the library. constant description default_abi corresponds to cdecl; standard libraries use this abi. you also use this for all system calls on mac os x and linux. stdcall_abi used for calling functions declared with stdcall on
windows. these functions' names are automatically mangled for you by js-ctypes. winapi_abi used for calling
windows system functions. these are declared as stdcall on
windows, but do not have mangled names like those used by stdcall_abi above. predefined data types primitive types these types behave the same on all platforms. type description int8_t signed 8-bit integer. uint8_t unsigned 8-bit integer. int16_t signed 16-bit integer. uint16_t ...
...And 2 more matches
Initialization and Destruction - Plugins
f initialization, instance creation and destruction, and shutdown. initialization: the browser calls the plug-in api function np_initialize when the plug-in code is first loaded. instance creation: the browser calls the plug-in api function npp_new when the instance is created. instance destruction: the plug-in instance is deleted when the user leaves the instance page or closes the instance
window; the browser calls the function npp_destroy to tell the plug-in that the instance is being deleted. shutdown: when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory and the browser calls the function np_shutdown. plug-ins consume no resources, other than disk space, if not referenced. this chapter ends with initialize and shutdown example, which includes the n...
...itialize and shutdown example. during initialization, when the browser encounters data of a mime type registered for a plug-in (either embedded in an html page or in a separate file), it loads the plug-in code into memory (if it hasn't been loaded already) and creates a new instance of the plug-in. for more information, see registering plug-ins. plug-ins are native code libraries: .dll files on
windows, .so or .dso files on unix, and powerpc shared library files or 68k code resources on mac os. to reduce memory overhead, plug-ins are usually loaded only when needed and released as soon as possible. in the initialization process, the browser passes the plug-in two tables of function pointers for all api calls: one table lists all api calls from the plug-in to the browser. this table is fill...
...not in the function tables. however, because np_initialize is called at the end of the initialization process, you can call other methods, such as npn_memalloc and npn_status, from np_initialize. instance creation after initialization, the plug-in instance is created. 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. at this point, a plug-in can call the npn_setvalue function to specify whether it is
windowed (the default) or
windowless. plug-in instances are created with npp_new and destroyed with npp_destroy. npp_new informs the plug-in of the creation of a new instance with the specified mime type. you can allocate instance-specific private data at this time. npe...
...And 2 more matches
Preferences System
this document describes toolkit's preferences system. using this system it is possible to create preferences
windows that display and operate appropriately on various platforms (
windows, macos x and gnome). the system is implemented through a few xul elements and attributes. ...
...stem. using this system it is possible to create preferences
windows that display and operate appropriately on various platforms (
windows, macos x and gnome). the system is implemented through a few xul elements and attributes. reference information about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: pref
window | prefpane | preferences | preference | xul attributes use code for a typical preferences
window may look like this: <pref
window id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> .. ui elements tha...
...e1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> .. ...
...And 2 more matches
DOM Inspector FAQ - Firefox Developer Tools
inspect a url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url. this causes the document to be loaded in the browser pane. ...
... inspect a url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url. this causes the document to be loaded in the browser pane. ...
... inspect a url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url. this causes the document to be loaded in the browser pane. ...
...And 2 more matches
Introduction to DOM Inspector - Firefox Developer Tools
ve as a sanity check to verify the state of the dom, or it can be used to manipulate the dom by hand, if desired. note: starting with firefox 3, the dom inspector is not included in firefox by default; instead, you must download and install it from the mozilla add-ons web site. (note: this is now a dead link.) when you first start the dom inspector, you are presented with a two-pane application
window that looks a little like the main mozilla browser. like the browser, the dom inspector includes an address bar, and some of the same menus. in seamonkey additional global menus will be available. inspecting a document when the dom inspector opens, it may or may not load an associated document, depending on the host application. if the dom inspector doesn't automatically load a document or loa...
...menu, and it will list currently loaded content documents. in firefox and seamonkey browser, these will be the webpages you have opened in tabs. for thunderbird and seamonkey mail and news, any messages you're viewing will be listed here. inspecting chrome documents the inspect chrome document menupopup can be accessed from the file menu , and it will contain the list of currently loaded chrome
windows and subdocuments. a browser
window and the dom inspector are likely be already open and displayed in this list. the dom inspector keeps track of all the
windows that are open, so to inspect the dom of a particular
window in the dom inspector, simply access that
window as you would normally and then choose its title from this dynamically updated menulist. inspecting arbitrary urls you may als...
...n enter http://www.mozilla.org in the address bar and see the dom structure of the mozilla.org home page. you should not use this approach to inspect chrome documents. instead, ensure that the document loads via normal means and use the inspect chrome document menupopup to select it for inspection. when you inspect a web page with this method, a browser pane at the bottom of the dom inspector
window will open up, displaying the web page. this allows you to use the dom inspector without having to use a separate browser
window, or without embedding a browser in your application at all. if you find that the browser pane takes up too much space, you may close it, but you will not be able to observe any of the visual consequences of your actions. using the dom inspector once you've opened the d...
...And 2 more matches
Page inspector keyboard shortcuts - Firefox Developer Tools
command
windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active. command
windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane. ...
...cuts work while the node picker is active. command
windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane. ...
...+ c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is active enter return enter find the previous match in the markup, when searching is active shift + enter shift + return shift + enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused. ...
...And 2 more matches
AudioContext.createMediaElementSource() - Web APIs
urns a mediaelementaudiosourcenode. example this simple example creates a source from an <audio> element using createmediaelementsource(), then passes the audio through a gainnode before feeding it into the audiodestinationnode for playback. ...
...ionnode for playback. when the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall
window height. you can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down. note: you can also view this example running live, or view the source. ...
...hen the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall
window height. you can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down. note: you can also view this example running live, or view the source. ...
...And 2 more matches
Document.hasFocus() - Web APIs
nt interface returns a boolean value indicating whether the document or any element inside the document has focus. this method can be used to determine whether the active element in a document has focus. when viewing a document, an element with focus is always the active element in the document, but an active element does not necessarily have focus. ...
...ithin a popup
window that is not the foreground doesn't have focus. syntax var focused = document.hasfocus(); return value false if the active element in the document has no focus; true if the active element in the document has focus. example this example checks whether the document has focus every 300 milliseconds. to test the functionality of hasfocus(), click on the button to open a new
window, and try switching between the two pages. ...
...eturn value false if the active element in the document has no focus; true if the active element in the document has focus. example this example checks whether the document has focus every 300 milliseconds. to test the functionality of hasfocus(), click on the button to open a new
window, and try switching between the two pages. ...
...And 2 more matches
Examples of web and XML development using the DOM - Web APIs
es directly. in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="
window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document. you can access these stylesheets and their rules individually using the stylesheet, style, a...
...these latter types of styles can be retrieved with the more direct elt.style property, whose properties are listed in the dom css properties list. getcomputedstyle() returns a computedcssstyledeclaration object, ...
...it also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values. the properties of event objects differs greatly between browsers, the whatwg dom standard lists the standard properties, however many browsers have extended these greatly. put the following code into a blank text file and load...
...And 2 more matches
Fullscreen API - Web APIs
s to add the methods, properties, and event handlers needed to provide full-screen functionality. these are listed in the following sections. methods the fullscreen api adds methods to the document and element interfaces to allow turning off and on full-screen mode. methods on the document interface document.exitfullscreen() requests that the user agent switch from full-screen mode back to
windowed mode. returns a promise which is resolved once full-screen mode has been completely shut off. methods on the element interface element.requestfullscreen() asks the user agent to place the specified element (and, by extension, its descendants) into full-screen mode, removing all of the browser's ui elements as well as all other applications from the screen. returns a promise which is resol...
...o engage full-screen mode. this is false if full-screen mode is not available for any reason (such as the "fullscreen" feature not being allowed, or full-screen mode not being supported). event handlers the fullscreen api defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and
windowed modes. event handlers for these events are available on the document and element interfaces. note: these event handler properties are not available as html content attributes. in other words, you cannot specify event handlers for fullscreenchange and fullscreenerror in the html content. they must be added by javascript code. event handlers on documents document.onfullscreenchange an eve...
...rwise, this returns false. note: use the fullscreenelement property on the document or shadowroot instead; if it's not null, then it's an element currently being displayed in full-screen mode. events the fullscreen api defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and
windowed modes. fullscreenchange sent to a document or element when it transitions into or out of full-screen mode. fullscreenerror sent to a document or element if an error occurs while attempting to switch it into or out of full-screen mode. dictionaries fullscreenoptions provides optional settings you can specify when calling requestfullscreen(). controlling access the availability of ...
...And 2 more matches
History API - Web APIs
the dom
window object provides access to the browser's session history (not to be confused for webextensions history) through the history object. it exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack. concepts and usage moving backward and forward through the user's history is done using the back(), forward(), and go() methods. moving forward and backward to move backward through history:
window.history.back() this acts exactly as if the user clicked on the back button in their browser toolbar. ...
...ck. concepts and usage moving backward and forward through the user's history is done using the back(), forward(), and go() methods. moving forward and backward to move backward through history:
window.history.back() this acts exactly as if the user clicked on the back button in their browser toolbar. similarly, you can move forward (as if the user clicked the forward button), like this:
window.history.forward() moving to a specific point in history you can use the go() method to load a specific page from session history, identified by its relative position to the current page. ...
...oolbar. similarly, you can move forward (as if the user clicked the forward button), like this:
window.history.forward() moving to a specific point in history you can use the go() method to load a specific page from session history, identified by its relative position to the current page. (the current page's relative position is 0.) to move back one page (the equivalent of calling back()):
window.history.go(-1) to move forward a page, just like calling forward():
window.history.go(1) similarly, you can move forward 2 pages by passing 2, and so forth. ...
...And 2 more matches
KeyboardEvent.getModifierState() - Web APIs
difierstate(keyarg); returns a boolean parameters keyarg a modifier key value. the value must be one of the keyboardevent.key values which represent modifier keys, or the string "accel" . this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...pressed. ctrl key, control key or menu key pressed. "fn" not supported function key is pressed, but we're not sure what key makes the modifier state active. fn key on mac keyboard doesn't cause this active. ...
...keyboard doesn't cause this active. ...
...And 2 more matches
MediaElementAudioSourceNode - Web APIs
methods from its parent, audionode. example this simple example creates a source from an <audio> element using createmediaelementsource(), then passes the audio through a gainnode before feeding it into the audiodestinationnode for playback. ...
...ionnode for playback. when the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall
window height. you can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down. note: you can also view this example running live, or view the source. ...
...hen the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall
window height. you can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down. note: you can also view this example running live, or view the source. ...
...And 2 more matches
NavigatorID.appVersion - Web APIs
returns either "4.0" or a string representing version information about the browser. note: do not rely on this property to return the correct browser version. syntax
window.navigator.appversion value either "4.0" or a string representing version information about the browser. ...
... returns either "4.0" or a string representing version information about the browser. note: do not rely on this property to return the correct browser version. syntax
window.navigator.appversion value either "4.0" or a string representing version information about the browser. ...
... browser. note: do not rely on this property to return the correct browser version. syntax
window.navigator.appversion value either "4.0" or a string representing version information about the browser. example alert('your browser version is reported as ' + navigator.appversion); notes the
window.navigator.useragent property may also contain the version number (for example "mozilla/5.0 (
windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape 6/6.1"), but you should be aware of how easy it is to change the user agent string and "spoof" other browsers, platforms, or user agents, and also how cavalier the browser vendor themselves are with these properties. ...
...And 2 more matches
Page Visibility API - Web APIs
the page visibility api provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page. notes: the page visibility api is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible. when the user minimizes the
window or switches to another tab, the api sends a visibilitychange event to let listeners know the state of the page has changed. you can detect the event and perform some actions or behave differently. for example, if your web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab. the user doesn't lose their ...
...want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) developers have historically used imperfect proxies to detect this. for example, watching for blur and focus events on the
window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. the page visibility api addresses this. note: while onblur and onfocus will tell you if the user switches
windows, it doesn't necessarily mean it's hidden. pages only become hidden when the user switches tabs or minimizes the browser
window containing the tab. policies...
...ttled in background/inactive tabs to help improve performance. see reasons for delays longer than specified for more details. budget-based background timeout throttling is now available in modern browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage. this operates in a similar way across modern browsers, with the details being as follows: in firefox,
windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. chrome is very similar except that the budget is specified in seconds.
windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for
window timers (again, see reasons for delays longer than specified). in chrome, this v...
...And 2 more matches
Screen.width - Web APIs
see also screen.height. internet explorer will take into account the zoom setting when reporting the screen width. it will only return the real width of the screen if the zoom is set to 100%. ...
...see also screen.height. internet explorer will take into account the zoom setting when reporting the screen width. it will only return the real width of the screen if the zoom is set to 100%. ...
...see also screen.height. internet explorer will take into account the zoom setting when reporting the screen width. it will only return the real width of the screen if the zoom is set to 100%. ...
...And 2 more matches
Selection - Web APIs
a user may make a selection from left to right (in document order) or right to left (reverse of document order). the anchor is where the user began the selection and the focus is where the user ends the selection. if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button. ...
... current selection to a single point. this is an alias for collapse() — see selection.collapse() for more details. selection.tostring() returns a string currently being represented by the selection object, i.e. the currently selected text. ...
... single point. this is an alias for collapse() — see selection.collapse() for more details. selection.tostring() returns a string currently being represented by the selection object, i.e. the currently selected text. ...
...And 2 more matches
TextDecoder() - Web APIs
"csisolatin9", "iso-8859-15", "iso8859-15", "iso885915", "l9", "latin9" 'iso-8859-15' "iso-8859-16" 'iso-8859-16' "cskoi8r", "koi", "koi8", "koi8-r", "koi8_r" 'koi8-r' "koi8-u" 'koi8-u' "csmacintosh", "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-874", "iso-8859-11", "iso8859-11", "iso885911", "tis-620", "
windows-874" '
windows-874' "cp1250", "
windows-1250", "x-cp1250" '
windows-1250' "cp1251", "
windows-1251", "x-cp1251" '
windows-1251' "ansi_x3.4-1968", "ascii", "cp1252", "cp819", "csisolatin1", "ibm819", "iso-8859-1", "iso-ir-100", "iso8859-1", "iso88591", "iso_8859-1", "iso_8859-1:1987", "l1", "latin1", "us-ascii", "
windows-1252", "x-cp1252" '
windows-12...
... "cp1250", "
windows-1250", "x-cp1250" '
windows-1250' "cp1251", "
windows-1251", "x-cp1251" '
windows-1251' "ansi_x3.4-1968", "ascii", "cp1252", "cp819", "csisolatin1", "ibm819", "iso-8859-1", "iso-ir-100", "iso8859-1", "iso88591", "iso_8859-1", "iso_8859-1:1987", "l1", "latin1", "us-ascii", "
windows-1252", "x-cp1252" '
windows-1252' "cp1253", "
windows-1253", "x-cp1253" '
windows-1253' "cp1254", "csisolatin5", "iso-8859-9", "iso-ir-148", "iso8859-9", "iso88599", "iso_8859-9", "iso_8859-9:1989", "l5", "latin5", "
windows-1254", "x-cp1254" '
windows-1254' "cp1255", "
windows-1255", "x-cp1255" '
windows-1255' "cp1256", "
windows-1256", "x-cp1256" '
windows-1256' "cp1257", "
windows-1257", "x...
...1253" '
windows-1253' "cp1254", "csisolatin5", "iso-8859-9", "iso-ir-148", "iso8859-9", "iso88599", "iso_8859-9", "iso_8859-9:1989", "l5", "latin5", "
windows-1254", "x-cp1254" '
windows-1254' "cp1255", "
windows-1255", "x-cp1255" '
windows-1255' "cp1256", "
windows-1256", "x-cp1256" '
windows-1256' "cp1257", "
windows-1257", "x-cp1257" '
windows-1257' "cp1258", "
windows-1258", "x-cp1258" '
windows-1258' "x-mac-cyrillic", "x-mac-ukrainian" 'x-mac-cyrillic' "chinese", "csgb2312", "csiso58gb231280", "gb2312", "gb_2312", "gb_2312-80", "gbk", "iso-ir-58", "x-gbk" 'gbk' "gb18030" 'gb18030' "hz-gb-2312" 'hz-gb-2312' "big5", "big5-hkscs", "cn-big5", "csbi...
...And 2 more matches
VisualViewport - Web APIs
the visualviewport interface of the visual viewport api represents the visual viewport for a given
window. for a page containing iframes, each iframe, as well as the containing page, will have a unique
window object. each
window on a page will have a unique visualviewport representing the properties associated with that
window. you can get a
window's visual viewport using
window.visualviewport. note: only the top-level
window has a visual viewport that's distinct from the layout viewport. therefore, it's generally only the visualviewport object of the top-level
window that's useful. for an <iframe>, visual viewport metrics like visualviewport.width always correspond to layout viewport metrics like document.documentelement.clientwidth. properties visualviewport also inherits properties f...
...s hiding an overlaid box on zoom this example, taken from the visual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. this is a nice way to improve the user experience when zooming in on pages. a live sample is also available. ...
...t contain an advert, say) when the user zooms in. this is a nice way to improve the user experience when zooming in on pages. a live sample is also available. ...
...And 2 more matches
Visual Viewport API - Web APIs
the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. visual viewport concepts and usage the mobile web contains two viewports, the layout viewport and the visual viewport. the layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. when the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. ...
... when a web page element needs to be visible on screen regardless of the visible portion of a web page? for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? current browsers vary in how they handle this. the visual viewport lets web developers solve this by positioning elements relative to what's shown on screen. to access a
window's visual viewport, you can obtain a visualviewport object from the
window.visualviewport property. the object includes a set of properties describing the viewport. it also adds two events, onresize and onscroll, that fire whenever the visual viewport changes. these events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport. acces...
...rt, you can obtain a visualviewport object from the
window.visualviewport property. the object includes a set of properties describing the viewport. it also adds two events, onresize and onscroll, that fire whenever the visual viewport changes. these events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport. accessing the api
window.visualviewport read only a read-only reference to the
window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport represents the visual viewport for a given
window. ...
...And 2 more matches
WebGL best practices - Web APIs
such queries are not portable. still, applications must be conscious of vram usage and not just allocate as much as possible. one technique pioneered by the google maps team is the notion of a per-pixel vram budget: 1) for one system (e.g. a particular desktop / laptop), decide the maximum amount of vram your application should use. 2) compute the number of pixels covered by a maximized browser
window. e.g. (
window.innerwidth * devicepixelratio) * (
window.innerheight *
window.devicepixelratio) 3) the per-pixel vram budget is (1) divided by (2), and is a constant. this constant should generally be portable among systems. mobile devices typically have smaller screens than powerful desktop machines with large monitors. re-compute this constant on a few target systems to get a reliable estimate. ...
...table among systems. mobile devices typically have smaller screens than powerful desktop machines with large monitors. re-compute this constant on a few target systems to get a reliable estimate. now adjust all internal caching in the application (webglbuffers, webgltextures, etc.) to obey a maximum size, computed by this constant multiplied by the number of pixels covered by the current browser
window. this requires estimating the number of bytes consumed by each texture, for example. the cap also must typically be updated as the browser
window resizes, and older resources above the limit must be purged. keeping the application's vram usage under this cap will help to avoid out-of-memory errors and associated instability. consider rendering to a smaller backbuffer size a common (and easy) w...
...owser content (transaction) presentation step. (rpaf explainer) this allows as much time as possible for rendering each frame. devicepixelratio and high-dpi rendering handling devicepixelratio != 1.0 is tricky. while the common approach is to set canvas.width = width * devicepixelratio, this will cause moire artifacts with non-integer values of devicepixelratio, as is common with ui scaling on
windows, as well as zooming on all platforms. instead, we can use non-integer values for css's top/bottom/left/right to fairly reliably 'pre-snap' our canvas to whole integer device coordinates. demo: https://jdashg.github.io/misc/webgl/device-pixel-presnap.html resizeobserver and 'device-pixel-content-box' on supporting browsers (chromium?), resizeobserver can be used with 'device-pixel-content-box...
...And 2 more matches
Using the Web Storage API - Web APIs
e stores. 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. these mechanisms are available via the
window.sessionstorage and
window.localstorage properties (to be more precise, in supporting browsers the
window object implements the
windowlocalstorage and
windowsessionstorage objects, which the localstorage and sessionstorage properties are members of) — invoking one of these will create an instance of the storage object, through which data items can be set, retrieved, and removed. a different stor...
... verify that it is supported and available in the current browsing session. testing for availability note: this api is available in current versions of all major browsers. testing for availability is necessary only if you must support very old browsers, such as internet explorer 6 or 7, or in the limited circumstances described below. browsers that support localstorage have a property on the
window object named localstorage. however, just asserting that that property exists may throw exceptions. if the localstorage object does exist, there is still no guarantee that the localstorage api is actually available, as various browsers offer settings that disable localstorage. so a browser may support localstorage, but not make it available to the scripts on the page. for example, safari browser ...
...ng it unusable. conversely, we might get a legitimate quotaexceedederror, which means that we've used up all available storage space, but storage is actually available. our feature detection should take these scenarios into account. ...
...And 2 more matches
Functions and classes available to Web Workers - Web APIs
in addition to the standard javascript set of functions (such as string, array, object, json, etc), there are a variety of functions available from the dom to workers. this article provides a list of those. workers run in another global context, dedicatedworkerglobalscope, different from the current
window. by default, methods and properties of
window are not available to them, but dedicatedworkerglobalscope, like
window, implements
windowtimers and
windowbase64. comparison of the properties and methods of the different type of workers function dedicated workers shared workers service workers chrome workers outside workers atob() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes...
...obalscope, like
window, implements
windowtimers and
windowbase64. ...
... function dedicated workers shared workers service workers chrome workers outside workers atob() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on
window btoa() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on
window clearinterval() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on
window cleartimeout() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on
window dump() yes, on workerglobalscope yes, on workerglobalscope yes...
...And 2 more matches
Obsolete features - Web APIs
fullscreen always upsets users with large monitor screen or with dual monitor screen. forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users. ...
... fullscreen always upsets users with large monitor screen or with dual monitor screen. forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users. ...
... fullscreen always upsets users with large monitor screen or with dual monitor screen. forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users. ...
...And 2 more matches
Overview of events and handlers - Developer guides
onously and potentially will run repeatedly but in slightly different situations. notable events web browsers define a large number of events so it is not practical to list them all. the event reference attempts to maintain a list of the standard events used in modern web browsers. ...
...ly different situations. notable events web browsers define a large number of events so it is not practical to list them all. the event reference attempts to maintain a list of the standard events used in modern web browsers. ...
... although this list is currently incomplete. some notable events are: note: this list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. this will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. ...
...And 2 more matches
<input type="button"> - HTML: Hypertext Markup Language
you press it, it is disabled using button.disabled = true. a settimeout() function is then used to reset the button back to its enabled state after two seconds. hidden code 1 <input type="button" value="enabled"> const button = document.queryselector('input'); button.addeventlistener('click', disablebutton); function disablebutton() { button.disabled = true; button.value = 'disabled';
window.settimeout(function() { button.disabled = false; button.value = 'enabled'; }, 2000); } if the disabled attribute isn't specified, the button inherits its disabled state from its parent element. this makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <fieldset> element, and then setting disabled on the container. the exa...
...use the autocomplete attribute to control this feature. validation buttons don't participate in constraint validation; they have no real value to be constrained. examples the below example shows a ...
... background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width =
window.innerwidth; var height = canvas.height =
window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]...
...And 2 more matches
Large-Allocation - HTTP
triggered by a non-get request. when a post request is used to load a document, that load cannot currently be redirected into a new process. this error is displayed when loading a document with a large-allocation header with a non-get http method. this could be caused due to the document being loaded by a form submission, for example. 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. it can occur in these situations: the document with the large-allocation header was loaded in an <iframe>. firefox cannot move an iframe into a new process currently, so the doc...
...error means that the document was not loaded at the top level of an user-opened or noopener-opened tab or
window. it can occur in these situations: the document with the large-allocation header was loaded in an <iframe>. firefox cannot move an iframe into a new process currently, so the document must load in the current process. 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. these
windows must remain in the same process as their opener, as they can communicate, meaning that we cannot allow them to switch processes. ...
...this is for the same reason as above, namely that they can communicate and thus we cannot allow them to switch processes. a large-allocation header was ignored due to the document not being loaded out of process. ...
...And 2 more matches
Communicating using "postMessage" - Archive of obsolete content
worker's on function. ...
... reason to prefer user-defined events is that as soon as you need to send more than one type of message, then both sending and receiving messages gets more complex. suppose the content script wants to send mouseout events as well as mouseover. ...
...ayload, and implement a switch function in the receiver to dispatch the message: var pagemodscript = "
window.addeventlistener('mouseover', function(event) {" + " self.postmessage({" + " kind: 'mouseover'," + " element: event.target.tostring()" + " });" + "}, false);" + "
window.addeventlistener('mouseout', function(event) {" + " self.postmessage({" + " kind: 'mouseout'," + " element: event.target.tostring()" + " });" + " }, false);" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { ...
...n(worker) { worker.on('message', function(message) { switch(message.kind) { case 'mouseover': console.log('mouseover: ' + message.element); break; case 'mouseout': console.log('mouseout: ' + message.element); break; } }); } }); implementing the same add-on with user-defined events is shorter and more readable: var pagemodscript = "
window.addeventlistener('mouseover', function(event) {" + " self.port.emit('mouseover', event.target.tostring());" + "}, false);" + "
window.addeventlistener('mouseout', function(event) {" + " self.port.emit('mouseout', event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pag...
io/file - Archive of obsolete content
to ensure your add-on works for everyone, generate paths using the join function. ...
... to ensure your add-on works for everyone, generate paths using the join function. ...
...ified using the backslash path separator (\), and on unix-like systems like linux and os x paths are specified using the forward slash path separator (/). if your add-on uses literal
windows-style path specifications with this api, your add-on likely won't work when users run it on unix-like systems. likewise, if your add-on uses literal unix-style path specifications, it won't work for users on
windows. to ensure your add-on works for everyone, generate paths using the join function. unfortunately this api does not currently provide a way to obtain an absolute base path which you could then use with join. ...
...for example, to specify the file at c:\users\myk, you need to use the string "c:\\users\\myk", not "c:\users\myk". read more about escaping characters in strings. globals functions basename(path) the path parameter must be an absolute path, relative paths will cause an error. ...
Boxes - Archive of obsolete content
ntainer and when the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
...n the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
...<label value="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </
window> images if you put image in the contents, you should probably add align="start" attribute to the box. this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/sk...
...ss"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </
window> ...
On page load - Archive of obsolete content
to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent element (browsers) or messagepane (mail):
window.addeventlistener("load", function load(event){
window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ appcontent.addeventlistener("domcontentloaded", myextension.onpageload, true); } ...
...me cleanup code on page unload. to attach to the unload event in above example you can use the "pagehide" event like this: appcontent.addeventlistener("pagehide", myextension.onpageunload, false); for appcontent and similarly for messagepane messagepane.addeventlistener("pagehide", myextension.onpageunload, false); and add your code to onpageunload method. basic onpageload for a browser
window var myextension = { init: function() { // the event can be domcontentloaded, pageshow, pagehide, load or unload. if(gbrowser) gbrowser.addeventlistener("domcontentloaded", this.onpageload, false); }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered the event var win = doc.defaultview; // win is the windo...
...oaded", this.onpageload, false); }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered the event var win = doc.defaultview; // win is the
window for the doc // test desired conditions and do something // if (doc.nodename != "#document") return; // only documents // if (win != win.top) return; //only top
window. ...
...that triggered the event var win = doc.defaultview; // win is the
window for the doc // test desired conditions and do something // if (doc.nodename != "#document") return; // only documents // if (win != win.top) return; //only top
window. // if (win.frameelement) return; // skip iframes/frames alert("page is loaded \n" +doc.location.href); } }
window.addeventlistener("load", function load(event){
window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); references if you need to have a more complicated listener (not just onload), use progress listeners. see also domcontentloaded event in listening to events: simple dom events ...
Install Manifests - Archive of obsolete content
value for the application's os is encountered that requires any specific abi, the abi is considered important for that os and the application will refuse to install the add-on if it does not find a matching os/abi combination. this means that if all of the above examples would occur in one manifest, the add-on will install on any linux build of the application, regardless of its abi, but not on a
windows cygwin build. there may be builds of firefox and thunderbird which do not "know" their abi (most likely ports to rare platforms, or non-official builds). these builds will refuse to install any add-on that requires a specific abi for their platform. this property was added for firefox/thunderbird 1.5. previous versions of these applications will ignore the restrictions and install the add-on ...
...requires its files be unpacked into a directory in order to work or whether the extension can be loaded direct from the xpi. in versions before gecko 2.0 all extensions were unpacked, in gecko 2.0 and later the default is to not unpack. if an extension includes the following then it must request unpacking: binary xpcom components plugins search plugins dlls loaded with ctypes dictionaries
window icons examples <description about="urn:mozilla:install-manifest"> <em:id>extension@mysite.com</em:id> <em:unpack>true</em:unpack> ... </description> updatekey to ensure the security of update rdf data that is retrieved over plain http you must use a digital signature to verify the contents of the data. in order to do so you must include the public part of the cryptographic key in...
... the current application's locale. %update_type% update_type_compatibility(32), update_type_newversion(64) %compatibility_mode% related to default to compatible, values could be normal, ignore or strict. examples <em:updateurl>https://www.example.com/update.cgi?id=%item_id%&version=%item_version%</em:updateurl> <em:updateurl>https://www.example.com/extension/
windows.rdf</em:updateurl> for add-ons hosted on addons.mozilla.org: you may not specify an updateurl property. by default, mozilla applications using the add-on manager (such as firefox and thunderbird) will send update requests to addons.mozilla.org using the default web service. every time you upload a new version of your add-on or change its compatibility parameters through the author interface, y...
... the ($profile)/extensions and hkey_current_user install locations, on the other hand, are not restricted. ...
Appendix A: Add-on Performance - Archive of obsolete content
nimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that. startup this is the area where add-ons have the most noticeable impact. most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data. the problem with the onload event is that it runs before the main
window becomes visible, so all handlers need to complete before the user can see the
window. an add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out what having several add-ons will do. luckily, minimizing your startup time is easy, if you follow these guidelines: do not load or run code before it’s needed. add-ons can have...
... it as modular as you can, and only load modules as you require them. if your add-on is too simple for jsm, don’t worry about it. there’s still one more thing you can do. do as little as possible in your load handler. ask yourself: is there anything i can’t run 100 ms or even 500 ms later? if there is, just use an nsitimer or the settimeout function to delay running this code . the firefox
window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. the browser will now load faster, and your code will still load at startup for all practical purposes. the code is simple enough: // this is the function that is called in the load event handler. init : function() { let that = this...
...our startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. the browser will now load faster, and your code will still load at startup for all practical purposes. the code is simple enough: // this is the function that is called in the load event handler. init : function() { let that = this; // run this later and let the
window load.
window.settimeout(function() { that.postinit(); }, 500); }, postinit: function() { // actual init code goes here. }, how can you tell it works? the measuring startup wiki page includes a relatively simple test you can use to compare a clean firefox profile vs that profile with your add-on installed. page loads this is another critical route that many add-ons tap into. the intercept...
...klist. nevertheless, loading pages is pretty important in firefox, and users expect it to be fast. try your best to keep it that way. other recommendations always clean up after yourself. event listeners, observers and other handlers normally have both an add and a remove function. don't forget to remove what you don't need anymore! even if you need something during the whole existence of the
window, you should clean everything up in the unload event handler. even the unload event should be handled efficiently. even if it is not as important as other areas, firefox shutdown can also be slowed down because of add-ons. if there's anything you can unload before shutdown, or if there's anything you can do to unload things more efficiently, then it's important that you do. never use xmlhttprequ...
Connecting to Remote Content - Archive of obsolete content
esides xml, it can be used to retrieve data in other formats, for example json, html and plain text. in this section we'll look into the xml and json communication mechanisms. 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. you can see that an instance of the xmlhttprequest class is created and it holds all functionality for...
...data: {"shops": [{"name": "apple", "code": "a001"}, {"name": "orange"}], "total": 100} when the onload callback function is called, the response text is converted into a js object using the parse method. you can then use this object like any other javascript objects in your code. request.onload = function(aevent) { let text = aevent.target.responsetext; let jsobject = json.parse(text);
window.alert(jsobject.shops[1].name); // => "orange"
window.alert(jsobject.total); // => 2; }; the javascript object can also be serialized back with the stringify method. let string = json.stringify(jsobject); xml content xml is possibly the most popular data interchange format. let's assume that the xml returned from remote server is this: <?xml version="1.0"?> <data> <shops> <s...
...to display the data in the ui or store it into a local datasource. request.onload = function(aevent) { let responsexml = aevent.target.responsexml; let rootelement = responsexml.documentelement; if (rootelement && "parseerror" != rootelement.tagname) { let shopelements = rootelement.getelementsbytagname("shop"); let totalelement = rootelement.getelementsbytagname("total")[0];
window.alert(shopelements[1].getelementsbytagname("name")[0].firstchild.nodevalue); // => orange
window.alert(totalelement.firstchild.nodevalue); // => 2 } }; using dom functions is good for simple xml documents, but dom manipulation code can become too complicated if the documents are more complex. there are a couple of tools you can use to process these docu...
...utomatic update urls for extensions, and the behavior of web applications such as gmail. if you click on the "start tamper" button, for every request made you will get a popup dialog for tampering with it before it is sent. you can use it to view or even modify the data in a request, and then inspect the result. this can be a lot of work because there is a lot of web activity in a normal firefox
window, so use it sparingly. a tutorial on tamper data can be found here. note: you should always test your connection code to cover edge cases, like when there is no internet connection, or the computer is connected to a local network with no internet access (like at an airport or hotel room). make sure you're not telling users everything is ok, or worse, bombarding them with error messages. « p...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
ocument.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chrome
window) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", ...
...barbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton123" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document,
window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfragment); alert("capturednodes contains any created nodes that have optionally been captured (for later convenient javascript access) by gi...
...amic content. great care must be taken in these situations. under no circumstances should code resembling 'callback("' + str + '")' appear anywhere in your add-on. closures by far the best way to create dynamic event listeners is to use closures. the following two code fragments are roughly equivalent: function clickify(elem, address) { elem.addeventlistener("click", function (event) { open
window(address) }, false); } function clickify(elem, address) { elem.onclick = function (event) { open
window(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(...
...se); } function clickify(elem, address) { elem.onclick = function (event) { open
window(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", "open
window(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. generating scripts in this matter is deprecated and should be avoided wherever possible, but is relatively safe and s...
Session store API - Archive of obsolete content
note in firefox 3 and later, if you need to detect when a tab is about to be closed so that you can update data associated with the tab before it is closed, you can watch for the "sstabclosing" event, which is sent to the tab. restoring without restarting firefox 3.6 note this section applies to firefox 3.6 and later. firefox 3.6 knows how to save session store data when the last browser
window closes, even if there are still other
windows open. similarly, it can now restore the user's session while in that state. in other words, it's now possible for sessions to be restored even without the browser quitting and being relaunched. this is something you may need to keep in mind if you rely on the behavior of the session store system. the session restore process the exact sequence of eve...
...ting and being relaunched. this is something you may need to keep in mind if you rely on the behavior of the session store system. the session restore process the exact sequence of events that occurs when a session is being restored is: a session state is about to be restored. this can be on startup or in response to undo close tab, since closed tabs are restored as single-tab sessions. 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. after that, the following steps are taken for each tab being restored: either an existing tab is reused or a new tab is created. in the latter case, a tabopen event is sent. the tab's persistent xul attributes (those saved due to calls to persistt...
...f there is no value saved for that key name. deleting a value associated with a tab to delete a value from a tab, you can use code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; ss.deletetabvalue(currenttab, "key-name-here"); remarks the
window value save and restore functions work exactly like the tab-based functions by similar names. starting in firefox 3.5, notifications are sent after reading session store data and before using it, as well as immediately before writing it back to disk. see the list in observer notifications. using the session store api in seamonkey there are a number of differences between the session store api i...
...ee the list in observer notifications. using the session store api in seamonkey there are a number of differences between the session store api in firefox and the api in seamonkey 2.0: the class name is @mozilla.org/suite/sessionstore;1 var ss = components.classes["@mozilla.org/suite/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); when restoring a
window, closed tabs in that
window are not currently restored. when closing a tab, seamonkey does not generate sstab events. this means that you cannot currently tell if a tab has been saved or restored. however seamonkey reuses the browser element (up to the undo close tab limit) which means that you can set state on the browser element and it will be restored with the tab. ...
Source code directories overview - Archive of obsolete content
idl interfaces, the value of the public directory diminishes. src contains the bulk of the source code. tests contains c harnesses, html or xul that exercise this module. tools contains scripts for automatically generating certain source code and other special tools for building this module. there are also platform dependent subdirectories which contain source code for specific platforms.
windows contains source code for
windows 95,
windows 98 and
windows nt 4.0. mac contains source code for macos: both the powerpc and 68000 versions. gtk contains source code for gtk (a.k.a. the gimp toolkit) which runs on x-
windows on unix. motif contains source code for motif, a toolkit which runs on x-
windows on unix. os2 contains source code for os/2 warp. rhapsody contains source code for mac ...
...s nt 4.0. mac contains source code for macos: both the powerpc and 68000 versions. gtk contains source code for gtk (a.k.a. the gimp toolkit) which runs on x-
windows on unix. motif contains source code for motif, a toolkit which runs on x-
windows on unix. os2 contains source code for os/2 warp. rhapsody contains source code for mac os x server (which is based on nextstep which is based on x-
windows on unix) using yellow box (cocoa). beos contains source code for beos. qt contains source code for the qt toolkit, a c class library which runs on x-
windows on unix,
windows 95,
windows 98 and
window nt 4.0. photon contains source code for photon, a microkernel
windowing system used in several real-time operating systems from qnx software systems ltd. seamonkey seamonkey is the development...
...nt" node and manipulate it according to any later javascript commands. editor contains c interfaces, c code and xul for the embeddable editor component which can edit both plain text and html. it is used for the html editor (i.e. composer in mozilla classic), for plain text and html mail composition and for text fields and text areas throughout the product. the editor is designed like a "browser
window with editing features" with extra classes for editing text and managing undo/redo. embedding contains c interfaces and code for generic high-level browser functions (e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g. activex) that is being supported. extensions contains c interfaces, c code, xul and jav...
... originated as the reference implementation for the jpeg specification from the independent jpeg group. js contains c code for tokenizing, parsing, interpretting and executing javascript scripts. this code originated in mozilla classic. l10n contains code for building localizations. layout contains the c interfaces and code for the layout engine. the layout engine decides how to divide up the "
window real estate" among all the pieces of content. it resizes and aligns pieces of content according to the css1 and css2 (cascading style sheets), alignment styles and the content itself. it does not actually render the content; it just assigns different pieces of the
window to various content items. this is known as "reflowing" the content. this code is also known by the names, "nglayout" and "gecko...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
nts the np api and hosts most netscape-compatible plug-ins. now you can use your plug-ins in any recent version of ie or in any other activex container for that matter. the control itself is implemented in a dll called pluginhostctrl.dll which is standalone from the rest of the mozilla project. if you're wondering how microsoft used to support the np api, look for a file called plugin.ocx in your
windows system directory. this 100k activex control contains the entire np api implementation and probably worked much like pluginhostctrl.dll does now. the sections below tell you how to fetch, build and use the pluginhostctrl.dll . get the source you need cvs to get the source code. assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs...
...rol in any way then you must also change the clsid from {dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2} to something else and any other guids this control relies upon (iid, libids etc). this is necessary so that your control may coexist with the generic version and any other versions that other plug-ins vendors may have installed. it is advisable to rename the control and not to install somewhere like the
windows directory where it is likely to be overridden. use a tool such as guidgen.exe or uuidgen.exe to create the new guids. package it there is a subdirectory named cab/ which contains a script and a readme.txt for producing your own signed cab files. manual installation assuming you have the precompiled pluginhostctrl.dll and wish to install it on a machine, you must register it either through an i...
...ectory named cab/ which contains a script and a readme.txt for producing your own signed cab files. manual installation assuming you have the precompiled pluginhostctrl.dll and wish to install it on a machine, you must register it either through an install script or manually: regsvr32 pluginhostctrl.dll you must have administrator privileges to install a new control on operating systems such as
windows nt, 2000 & xp. usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2" width="500" height="300"> <param name="type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute...
...empt to use the mime type of this stream to create the correct plug-in. <param name="pluginspage" ...> is equivalent to pluginspagespecifies a url where the plug-in may be installed from. the default plug-in will redirect you to this page when you do not have the correct plug-in installed. you may also supply any custom plug-in parameters as additional <param> elements. still to do only hosts
windowed plug-ins. an official pluginhostctrl.cab file. doesn't work for the adobe acrobat plug-in yet. plug-ins cannot create writeable streams or seek in readable streams. liveconnect scripting is not supported. if you need scripting functionality, consider shipping a modified pluginhostctrl.dll that exposes methods you wish to call on your plugin. ...
Structure of an installable bundle - Archive of obsolete content
trapped extensions are not processed by a supporting application. (>=2.0) /chrome.manifest chrome registration manifest (>=1.8) /components/* xpcom components (*.js, *.dll), and interface files from *.xpt (>=1.7) /defaults/preferences/*.js default preferences (>=1.7) /plugins/* npapi plugins (>=1.8) /chrome/icons/default/*
window icons (>=1.8) /icon.png extension icon, for display in the add-ons manager, 32px × 32px (>=1.9.2) /icon64.png extension icon, for display in the add-ons manager, 64px × 64px (>=2.0) /options.xul extension options, for display in the add-ons manager (>=7.0) ... additional resources (such as chrome:// or resource:// providers can be regi...
...hich registers the theme and a jar file. platform-specific files gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) removed support for platform-specific subdirectories, described below. instead, you need to use manifest flags, such as the os and abi flags, in your chrome manifest to specify components that should be loaded for specific platforms. for example: binary-component components/
windows/mycomponent.dll abi=winnt_x86-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x86-gcc3 binary-component components/mac/mycomponent64.dylib abi=darwin_x86_64-gcc3 binary-component components/linux/mycomponent.so abi=linux_x86-gcc3 this also means you can no longer have platform-specific preference files in your bundle. platform-specific subdirectories: gecko 1.9.2.x and earli...
...e format of the platform string is: {os_target}_{target_xpcom_abi} all of the files which are loaded from the main extension directory are loaded from the subdirectory /platform/{platform string} if it exists. ...
...de the following files: /platform/linux_x86-gcc3/plugins/libmyplugin.so /platform/winnt_x86-msvc/plugins/myplugin.dll /platform/darwin_ppc-gcc3/plugins/libmyplugin.dylib because xpt files are not platform-specific, any associated xpt files would go in the generic components directory: /components/myplugin.xpt if an extension has non-binary platform-specific code (such as code which uses the
windows registry from script), it can also use just the operating system identifier as a platform-subdirectory: /platform/winnt/components/registerdoctype.js when platform-specific jar files are used, each platform directory should have its own chrome.manifest file: chrome.manifest chrome/mytheme-base.jar platform/darwin/chrome.manifest platform/darwin/chrome/mytheme-mac.jar platform/winnt/chrome.ma...
Code snippets - Archive of obsolete content
ript. all of the in this page must be executed in a chrome-privileged console. to access a chrome-privileged console, open an about page (like about:about) then open a web console via the web developer menu. tabs from other computers this snippet shows how to load all tabs from other computers. components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox
window. ...
... in this page must be executed in a chrome-privileged console. to access a chrome-privileged console, open an about page (like about:about) then open a web console via the web developer menu. tabs from other computers this snippet shows how to load all tabs from other computers. components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox
window. ...
...page must be executed in a chrome-privileged console. to access a chrome-privileged console, open an about page (like about:about) then open a web console via the web developer menu. tabs from other computers this snippet shows how to load all tabs from other computers. components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox
window. ...
...interface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidom
window); // obtain a reference to sync's tabs "engine." let tabsengine = weave.service.enginemanager.get("tabs"); // iterate over each client having data. for each (let client in tabsengine.getallclients()) { for each (let tab in client.tabs) { let url = tab.urlhistory[0]; // load the tab via the tabbed browser api. main
window.gbrowser.addtab(url); } } partially corrupt a server...
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
tamarin-central rev 703:2cee46be9ce0 was declared stable on 12/02/08. the announcement sent to tamarin-devel can be read here. testing summary acceptance tests have passed on the following supported platforms: *
windows, 32 & 64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit *
windows mobile arm version asc-4200 of the actionscript compiler was used for all tests. performance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player 10. the key takeaway is that the interpreter is much improved. osdefault-jitinterpretedaggressive jit mac (os/x 10.4 inte...
...as current against the vm in flash player 10. the key takeaway is that the interpreter is much improved. ...
...no linux comparison due to a linux memstat bug only recently resolved in the tamarin-central branch. ...
...arin-central compiled size (tc-703) versus the prior build (tc-700) as well as the current build against the vm in flash player 10. buildsize flash10576k tc-700740k tc-703655k known issues known failures in the acceptance testsuite include: number failures in testsuite when running on linux
windows mobile system.privatebytes and -memstats privatebytes always returns 0 amd64 longjmp hack needs reengineering on non-
windows platforms different runtime errors when -dforcemir set in acceptance test run arm: math failures running with thumb or arm jit and interp. recursive pcre testcases kills the stack on pocketpc builds ...
browser.type - Archive of obsolete content
« xul reference home type type: one of the values below. the type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the
window containing the browser. more precisely: the document loaded into a chrome
window is always of chrome type. ...
...the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. ...
...the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. ...
... is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the
window for the primary content can be retrieved more conveniently using
window.content. content-targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome ...
Building accessible custom components in XUL - Archive of obsolete content
thers are column headers. they each get the appropriate role, "wairole:rowheader" or "wairole:columnheader". each label element is an individual cell and needs a role of "wairole:gridcell". this means we actually need to declare two namespaces, the xhtml 2 namespace and the wairole namespace. we can declare both of them at the top of our .xul file and then reuse them as often as we need. <code> <
window id="accjax" title="accjax spreadsheet" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:x2="http://www.w3.org/tr/xhtml2" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/guiroletaxonomy#" > </code> once the namespaces are in place, we define the roles for each component of our spreadsheet. <code> <grid x2:role="wairole:spreadsheet" class="spreads...
...he spreadsheet regains focus (by pressing shift-tab, or cycling all the way around the tab order and coming back into the spreadsheet), we need to programmatically reset the focus to the previously focused cell. this is handled in the spreadsheet_focus function, which is registered as a handler for the focus event. ...
...scell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { e.target.focus(); } </code> finally, we'll add two lines to our .xul file to link in the javascript file (accjax.js) and call the install_handlers function when the spreadsheet is loaded. ...
...nt) { var row = get_index_within_parent(current); var column = get_index_within_parent(current.parentnode); var columns = current.parentnode.parentnode.childnodes; return column == columns.length - 1 ? null : columns[column + 1].childnodes[row]; } </code> finally, we need to register the spreadsheet_keypress event handler. <code> function install_handlers() { var spreadsheet =
window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('keypress', spreadsheet_keypress, true); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } </code> with this new event handler and associated helper functions, we can navigate between cells and headers using the arrow keys. inspect3...
List of commands - Archive of obsolete content
the following lists commands which might be usable by <command> or command dispatchers/controllers. ...
...ser: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_openinnew
window cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_close
window cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_h...
... cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_close
window cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimize
window 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...
...also obtained from http://www.mozilla.org/unix/customizing.html ...
Special per-platform menu considerations - Archive of obsolete content
for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in the application, followed by redo, cut, copy, paste, and so forth. some menu items have specific common labels or locations where certain menu items would go that differ on each platform. for instance, on
windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. for instance, this is the proper place to put the menu items which open the applicat...
...item. aboutname the item which opens the about dialog for the application. menu_mac_services a menu which provides system services. menu_mac_hide_app selecting this item will hide the application. menu_mac_hide_others selecting this item will hide all other applications except this one. menu_mac_show_all selecting this item will show the
windows for all applications. checkforupdates the item that opens the update dialog for the application, for applications that have one (such as seamonkey; firefox does not have this item). the last five items aren't normally used but are listed for completeness. here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuite...
... the update dialog for the application, for applications that have one (such as seamonkey; firefox does not have this item). the last five items aren't normally used but are listed for completeness. here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="
window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms. when moved to the application menu, the label and shortcut keys are overridden by platform conventions. however, regardless of the platform, the command event will be fired on the menu item w...
...n it is activated by the user. notes for firefox extension developers on the mac, some elements, once moved to the application menu, are no longer accessible from xul overlays or from javascript injected into browser.xul. for example, using document.getelementbyid() for the quit menu item returns the hidden item that still sits in the file menu. to change these items in firefox, overlay hidden
window.xul instead. ...
The Joy of XUL - Archive of obsolete content
, a mini case study of a calendar application written in xul will reinforce the benefits of building applications with mozilla. key features and benefits powerful widget-based markup language the goal of xul is to build cross platform applications, in contrast with dhtml which is intended for developing web pages. for this reason, xul is oriented toward application artifacts such as
windows, labels, and buttons instead of pages, heading levels, and hypertext links. in fact, many developers invest a significant amount of effort to achieve these results in their dhtml web applications but at the cost of complexity and performance and without any supporting standards. based on existing standards xul is an xml language based on w3c standard xml 1.0. applications wri...
...cation is no longer listed on their site) integrated its calendar application with the core mozilla product. the calendar application is comprised of a xul front end and an xpcom component that leverages libical, a native library written in c, for date operations and calendar data storage. the calendar was initially developed exclusively for linux but was successfully ported to both macintosh and
windows within a week. xul provides a rich set of ui components.the user interface for the calendar is written entirely in xul, javascript, and css, which is a testament to the power and flexibility of this application building framework. it uses simple xul components like boxes, grids, and stacks to compose views for the weeks, days, and months. the initial implementation of calendar did not exploit x...
...views was practically rewritten while the application logic remained virtually unchanged. porting xul applications to other platforms is trivial.the calendar originated as a linux application with no consideration given to porting it to other platforms. but later, when the original developer (oeone corporation) contributed the source to the mozilla project, the calendar had to be migrated to the
windows and macintosh platforms. the ui for the xul application required zero porting effort because it worked with almost no alteration on both new platforms. similarly, since the ui code is written in javascript, the interaction logic worked with no effort. however, since the libical library is written in c, more significant effort was required to migrate this component to the other platforms. fortun...
...ant effort was required to migrate this component to the other platforms. fortunately, an implementation of the libical library was already available for macintosh so, with the cross platform nature of xpcom, a macintosh calendar implementation was working within a few days. however, there was no existing win32 port available, so developers had to undertake a porting effort to migrate libical to
windows. within a week this too was complete and mozilla had a working calendar for all three primary platforms: linux, macintosh, and
windows. xpinstall is easy for developers and for users.the calendar is not a planned deliverable for the mozilla 1.0 release, and therefore is not included as a standard component in regular nightly and milestone release builds. developers who are equipped with the sof...
Things I've tried to do with XUL - Archive of obsolete content
rk (hopefully with explanations), and workarounds for both of the above. feel free to add your own xul experiences here. how do i use percentage-based height/width with xul? short answer: you can't easily, at least not yet. this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that sizes sanely when the user resizes the
window is unfortunately very difficult. (to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the
window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox. <vbox flex="1"> <box height="30%" flex="1" style="ba...
...nts have the non-standard clientwidth/clientheight properties (see http://www.mozilla.org/docs/dom/domr...entheight.html); no equivalent exists for xul. ...
...eight of the box, regardless of the actual visible portion of the box (clipped by the
window borders, for example). this is assuming no scrolling is going on. resize event problems going with the inability to obtain the clientwidth/clientheight of xul elements, it's impossible to handle the "resize" event yourself to grow/shrink content as needed -- as you grow the content, when you shrink the
window, the content will simply be clipped (because now it has a bigger size than the
window). you have no way of finding out what the clipped size is, so you can never shrink the content. ...
...<html:body id="invisible_element" flex="1" > <svg xmlns="http://www.w3.org/2000/svg" version="1.1"><!-- ...or _visible_ xul content or whatever... --></svg> </html:body> ... ...
Custom toolbar button - Archive of obsolete content
book overlay chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul optionally remove the sections for toolbars that you do not need. save the file. explanation: this file defines the extension's content. it adds a stylesheet to the toolbar customization
window. then it specifies an overlay for each toolbar. 5. create a directory named chrome. perform the following steps in that directory, creating five files there. explanation: the chrome directory contains files that specify what the extension does. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. paste it into the new file: ...
...lbar to use small buttons. 10. download the extension image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same directory as the files you have just created. ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager
window. testing your new button restart the application. either get a context menu for the application's toolbar (for example, by right-clicking it) and choose customize..., or choose view – toolbars – customize... from the application's menu bar. drag your new button to where you want it on the toolbar. press done to close the toolbar palette
window. click the button to test it. you should se...
...the application deletes the directory the next time it starts. restart the application. troubleshooting if the button does not appear in the toolbar customization palette, or if you find some other problem, check that you have followed all the steps exactly. ...
...ombutton" to something else throughout all the files. optionally change: the button image or images the extension icon, icon.png the version and home page in your install.rdf file use a jar tool or zip tool to pack the contents of the directory. name the packed file with the extension .xpi and make it available to other users. users can install the xpi file in an application's extensions
window in the normal way. ...
Toolbar customization events - Archive of obsolete content
none of these events contain any data; if you need details, you'll need to look at the toolbar. beforecustomization this event is delivered when the user starts the toolbar customization process; for example, by right-clicking on a toolbar and choosing "customize". customizationchange this event is delivered when the user makes a change to a toolbar while editing the toolbars, either by dragging an item to the toolbar or by dragging an item out of it. ...
...either by dragging an item to the toolbar or by dragging an item out of it. aftercustomization this event is delivered when the user closes the toolbar customization panel. in all cases, the event.target is the toolbox being customized. you can look at the contents of that element and its children to determine what changes were made. example in this example, we watch for toolbar changes. ...
... it. aftercustomization this event is delivered when the user closes the toolbar customization panel. in all cases, the event.target is the toolbox being customized. you can look at the contents of that element and its children to determine what changes were made. example in this example, we watch for toolbar changes. ...
...r closes the toolbar customization panel. in all cases, the event.target is the toolbox being customized. you can look at the contents of that element and its children to determine what changes were made. example in this example, we watch for toolbar changes. ...
Adding Labels and Images - Archive of obsolete content
it should be used when you want to place a descriptive label beside a control, such as a button. an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed. ...
...it should be used when you want to place a descriptive label beside a control, such as a button. an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed. ...
...rapped text goes here."; internally, both the label element and the description elements are the same. the label element is intended for labels of controls, such as text fields. the control attribute is only supported for labels. the description element is intended for other descriptive text such as informative text at the top of a dialog box. images xul has an element to display images within a
window. this element is appropriately named image. note that the tag name is different than html (image instead of img). you can use the src attribute to specify the url of the image file. the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image url. a later section will...
... « previousnext » ...
Creating a Wizard - Archive of obsolete content
ween pages. the wizards are often used to help the user perform a complex task. each page contains a single question or a set of related questions. after the last page, the operation is carried out. xul provides a wizard element which can be used to create wizards. attributes placed on the wizard are used to control the wizard navigation. when creating a wizard, use the wizard tag instead of the
window tag. the content of the wizard element includes the content of each page of the wizard. the pages of the wizard are created using the wizardpage element. you can place whatever content you want inside each wizardpage. note that wizards currently only work properly from chrome urls. the wizard consists of several sections. the exact layout will vary according to the os for the platform. wizards...
... the exact layout will vary according to the os for the platform. wizards will generally be displayed using customs that are familiar to the user of a particular os. a typical layout will include a title across the top, a set of navigation buttons across the bottom and the page contents in between. ...
... a title across the top, a set of navigation buttons across the bottom and the page contents in between. the title across the top is created using the title attribute, much like one would use for regular
windows. the navigation buttons are created automatically. ...
...e first page. handling page changes you will generally want to do something once the finish button is pressed. you can set an attribute onwizardfinish on the wizard element to accomplish this. set it to a script which performs whatever task you want and then returns true. this script might be used to save the information that the user entered during the wizard. for example: <wizard id="example-
window" title="select a dog wizard" onwizardfinish="return savedoginfo();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was entered. if the function returns true, the wizard closes. if it returns false, then the wizard doe...
Custom Tree Views - Archive of obsolete content
me to set or change the view. function setview(){ document.getelementbyid('my-tree').view = treeview; } the following presents the example together. an inline script has been used here to simplify the example. normally, you would put the script in an external script file. ...
...on setview(){ document.getelementbyid('my-tree').view = treeview; } the following presents the example together. an inline script has been used here to simplify the example. normally, you would put the script in an external script file. ...
...you can change the view at any time. one thing to note is that the getcelltext() function is only called when necessary to display the contents. in the 10,000 row example a...
...you can change the view at any time. ...
Manifest Files - Archive of obsolete content
to read multiple manifest files, use the manifest command in that file to import additional manifests. use manifest flags to configure the scenarios in which the secondary manifest is imported. if you just want to try testing privileged xul code in the firefox browser, you can do this easily by just using a manifest with only one line in it: create a new directory somewhere. for example, on a
windows machine, you might use c:\testfiles create a new ascii1 file called test.manifest in the chrome directory. it doesn't actually matter what the file is called as long as it has the .manifest extension. ( 1. doesn't work with utf-8 with bom.) add the following line to it: content tests file:///c:/testfiles/ the file path in that line should point to the directory created above. if you aren't ...
...s of the file above to your own information. the red text 'myapplication' should be the id of your application. you make this up, but typically, the id is similar to your application's name. replace the blue highlighted text above with your application's title and author. if the 'chrome:extension' field is true, the application is a mozilla firefox extension and it will show up in the extensions
window of the browser. if false, it will not appear. save the contents.rdf and make sure it is in the directory you created in step 1. open the file <mozilla-directory>/chrome/installed-chrome.txt, where <mozilla-directory> is the directory where mozilla is installed. exit mozilla before you do this. next, you are going to register the new application with mozilla so it will know where to find it. ad...
...s there, you are probably using the wrong chrome url when you load the file. try deleting the <mozilla-directory>/chrome/chrome.rdf file. it will get regenerated. also delete the entire <mozilla-directory>/chrome/overlayinfo/ directory if you are using overlays. make sure that the url in the line you added to installed-chrome.txt ends with a slash and the file itself ends with a blank line. on
windows, file urls are of the form file:///c:/files/app/, where c is the drive letter. make sure the contents.rdf file is in the right directory and is well-formed. open the contents.rdf file in mozilla to see if it parses as well-formed xml. if not, you will see an error on a yellow background. if you are using a debug build of mozilla, some info will be printed to the terminal when starting up indic...
...low background. if you are using a debug build of mozilla, some info will be printed to the terminal when starting up indicating what chrome applications are being checked. check if your application is listed. the error message "xml parsing error: undefined entity" in your xul file can be caused by an error in the manifest or in the jar file referenced by the manifest. for example, in <!doctype
window system "chrome://fireclipse/locale/fireclipse.dtd"> the dtd file must exist and its directory must be correctly addressed in the "locale" manifest or xml parsing will fail. for more information about manifest files, see chrome registration. in the next section, we will start looking into the xul language. « previousnext » ...
Modifying the Default Skin - Archive of obsolete content
in about:config in order to load userchrome.css or usercontent.css files. this documentation has not been fully updated for firefox quantum. support for the userchrome.css file and any of its elements described below are not guaranteed in future versions of firefox. using it may lead to hard-to-diagnose bugs or crashes. use at your own risk! this section describes how to modify the skin of a
window. skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file. by applying a different skin, you can change the look of a
window without changing its functionality. firefox provides a skin by default, and you may download others. the xul for any skins is the same, however the style sheets and images used are different. for a simple personalized look to a fir...
...larger changes can be done by creating an entirely new skin. firefox has a theme manager for changing the default skin. ...
... archives themselves. this directory should be created when you create a profile and some examples placed there. the file 'usercontent.css' customizes web pages, whereas 'userchrome.css' customizes chrome files. for example, by adding the following to the end of the file, you can change all menubar elements to have a red background. menubar { background-color: red; } if you open any firefox
window after making this change, the menu bars will be red. because this change was made to the user style sheet, it affects all
windows. this means that the browser menu bar, the bookmarks menu bar and even the find files menu bar will be red. skin packages to have the change affect only one
window, change the style sheet associated with that xul file. for example, to add a red border around the menu...
... menuitem { border: 1px solid red; } if you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. the style sheets refer to the images. ...
More Event Handlers - Archive of obsolete content
ding on the speed at which the mouse moves and the mouse is usually moved some distance past the border by the time the next event fires. obviously, it would be much too inefficient to send a mousemove event for every pixel the mouse is moved. element relative coordinates you will often want to get the coordinates of an event relative to the element where the event occurred rather than the entire
window. you can do this by subtracting the element's position from the event position, as in the following code. var element = event.target; var elementx = event.clientx - element.boxobject.x; var elementy = event.clienty - element.boxobject.y; xul elements have a box object that can be retrieved using the boxobject property. we'll learn more about the box object in a later section, but it holds inform...
...rieved using the boxobject property. we'll learn more about the box object in a later section, but it holds information pertaining to how the element is displayed, including the x and y position of the element. in this example code, these coordinates are subtracted from the event coordinates to get the event position relative to the element. load events the load event is sent to the document (the
window tag) once the xul file has finished loading and just before the content is displayed. this event is commonly used to initialize fields and perform other tasks that need to be done before the user can use the
window. you should use a load event to do these kinds of things as opposed to adding a script at the top level outside of a function. this is because the xul elements may not have loaded or f...
...you can use this event to save any changed information, for example. ...
...ings as opposed to adding a script at the top level outside of a function. this is because the xul elements may not have loaded or fully initialized yet, so some things may not work as expected. to use a load event, place an onload attribute on the
window tag. call code within the load handler which will initialize the interface as necessary. there is also an unload event which is called once the
window has closed, or in a browser context, when the page is switched to another url. you can use this event to save any changed information, for example. next, we'll find out how to add keyboard shortcuts. « previousnext » ...
Persistent Data - Archive of obsolete content
« previousnext » this section describes how to save the state of a xul
window. remembering state when building a large application, you will typically want to be able to save some of the state of a
window across sessions. for example, the
window should remember which toolbars are collapsed even after the user exits. one possibility would be to write a script to collect information about what you would like to save and then save it to a file. however, that would be a pain to do for every application. conveniently, xul provides such a mechanism to save the state of a
window. the information is collected and stored in a rdf file (localstore.rdf) in the same directory as other user preferences. it holds state information about each
window. this method has the advantage that it works with m...
...persist attribute to allow the saving of state, you simply add a persist attribute to the element which holds a value you want to save. the persist attribute should be set to a space-separated list of attributes of the element that you want to save. ...
...ayed or not, but you can save almost anything. persist attribute to allow the saving of state, you simply add a persist attribute to the element which holds a value you want to save. the persist attribute should be set to a space-separated list of attributes of the element that you want to save. the element must also have an id attribute in order to identify it. for example, to save the size of a
window, you would do the following: <
window id="some
window" width="200" height="300" persist="width height" . . . the two attributes of the
window element, the width and the height will be saved. you could add additional attributes by adding a space and another attribute name to the persist attribute. you can add the persist attribute to any element and store any attribute. you might use ...
...ll be saved. you could add additional attributes by adding a space and another attribute name to the persist attribute. you can add the persist attribute to any element and store any attribute. you might use unusual values if you adjust attributes using a script. our find files example let's add the persist attribute to some of the elements in the find files dialog. to save the position of the
window. to do this, we need to modify the
window. <
window id="findfile-
window" title="find files" persist="screenx screeny width height" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this will cause the x and y position of the
window and the width and height of the
window to be saved. we could extend it further to save the collapsed state of th...
RDF Datasources - Archive of obsolete content
file, including the period. this property is only available on platforms that use file extensions. possible files roots nc:filesroot top level of the filesystem (usually the list of drives) a file url by using a file url for the ref attribute, you can select a specific directory to be returned. for example, you might use file:///
windows or files:///usr/local. the files datasource is an example of a datasource that determines its resources only when necessary. we don't want every file in the filesystem to be determined before the data is displayed. instead, only the files and directories that the tree element (or other elements) will need to display at a given time will be determined. composite datasources you can speci...
... wanted to, we could set the ref attribute to any of the other about attribute values to limit the set of data that is returned. for example, to display only the reptiles, use a value of http://www.some-fictitious-zoo.com/reptiles. setting the ref attribute example the example below shows how to display a particular piece of an rdf datasource by setting the ref attribute. ...
...set the ref attribute to any of the other about attribute values to limit the set of data that is returned. for example, to display only the reptiles, use a value of http://www.some-fictitious-zoo.com/reptiles. setting the ref attribute example the example below shows how to display a particular piece of an rdf datasource by setting the ref attribute. ...
...you will notice that the value of the ref attribute in the example is http://www.some-fictitious-zoo.com/mammals which corresponds to one of the seq elements in the rdf file. this causes only the descendants of this list to be returned. two rules have been used here. the first rule catches all the resources tha...
Skinning XUL Files by Hand - Archive of obsolete content
overall look of that file by changing its style information. in the very near future, it will be possible to skin xul files dynamically and completely -- by pressing a button, selecting a skin from a menu, or by accepting a skin from over the web. when this day comes, skins defined in a global skin file will be applied to a whole application -- like the mozilla browser -- so that all the various
windows and parts will look consistent. in the meantime, however, skinning a file requires some manual interaction. this article can help you get started understanding skins and creating skins for xul. it presumes you have at least basic understanding of xul and the application object model that xul describes. following the instructions here, you are going to create a skin for a xul file and apply it by...
...file, appropriately named drxul.css. as you will see, css provides a lot of flexibility for defining styles to individual elements, to classes of elements, to pseudo-classes, and to anonymous classes. by the way, in contrast to the term skin, "chrome" refers to the skin and the content and whatever localization and platform-specific files are necessary for a particular part of the application or
window. the skin is just the style or appearance of an interface, where the chrome is the style, content, and structure. the chrome is everything in the front end of an application. much of what makes xul look (and act!) the way it does comes from the css for each xul element. css2, for example, gives you control over the absolute positioning of any element within its parent element. also, most of the ...
...forementioned contextual subgrouping, which searches the entire subtree of an element for the subelement. finally, mozilla provides some special extensions to the cascading style sheets specification that allow even more control over the way that xul is skinned within the browser. on to the actual global.css file: after some comments, the css file contains basic style information for the <
window> and <dialog> elements. after these, the global skin defines styles for some of the xul widgets: statusbar, statusbarpanel and so on. most widgets have their styles defined in separate css files in the same directory that the global.css file. note that much of the style attributes in these rules have to do with borders, font information, color, margin, native appearance. in general, these are th...
...eem daunting. the purpose of this split between xul and its skins -- and between the global skin and whatever custom styles you might create -- is to enable the dynamic skinning of applications such as the mozilla browser. what you have done manually in this article will be done dynamically and much more completely by a mechanism called thechrome registry. this needs rewording: , which, like the
windows registry, is a database in which information about a user's software and environment can be recorded and accessed as necessary. software components and users will be able to update the chrome registry and change the global skin. and with the advent of new css2 conventions like positioning, the changes you can make to the presentation and behavior of the basic structure in a xul file is dramatic.
The Chrome URL - Archive of obsolete content
ome://<package name>/<part>/<file.xul> the text <package name> is the package name, such as messenger or editor. all package names are case insensitive, but lowercase names are preferred. the <part> is either 'content', 'skin' or 'locale' depending on which part you want. <file.xul> is simply the filename. example: chrome://messenger/content/messenger.xul the example here refers to the messenger
window. you could point to a file that is part of a skin by replacing 'content' with 'skin' and changing the filename. similarly, you can point to a file that is part of a locale by using 'locale' instead of '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. the mapping between ...
...les. note how none of the urls specify which theme or locale is used and none specify a specific directory. chrome://messenger/content/messenger.xul chrome://messenger/content/attach.js chrome://messenger/skin/icons/folder-inbox.gif chrome://messenger/locale/messenger.dtd to refer to subdirectories, you can just add them to the end of the chrome url. ...
...folder-inbox.gif chrome://messenger/locale/messenger.dtd to refer to subdirectories, you can just add them to the end of the chrome url. the following url will refer to the bookmarks
window, listed for firefox: chrome://browser/content/bookmarks/bookmarksmanager.xul you can enter chrome urls anywhere normal urls can be used. you can even enter them directly into the url bar in a firefox browser
window. if you enter the url mentioned above into the browser's address bar, you should see that
window appear like a web page might do and for the most part will function as if it was a separate
window. some dialog boxes may not work right, however, as they may be expecting arguments to be supplied from the
window that opened them. you will also see chrome urls without specified filenames, such as: chr...
...ge name and part is specified. this type of reference will automatically select an appropriate file from that right directory. for content, a file with the same name of the package and a xul extension is selected. in the above example, the file browser.xul is selected. for messenger, messenger.xul would be selected. when creating your own applications, you will want to create a file for your main
window with the same name as the package, so it can be referred to using this shorter form. this is convenient since all a user needs to know is the package name to be able to open the application. of course, for extensions that modify the browser interface, the user will not need to know the url, as the extension will present itself in the ui. for a skin, the file <package name>.css is selected; for a ...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with html, the type="content" attribute should be specified. however, this attribute causes any xul loaded in the browser to have issues with jaws 7.10. we believe they are using the
window class to determine that it is content rather than dialog, but does not support content mode for xul. therefore, with jaws 7.10, to use xul inside of a browser, the type attribute cannot not be used. caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> ...
...ption2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups. i don't see a means of accessing a popup brought up via the popup attribute. using context="popupid" allows access via shift+f10 on
windows and linux. progressmeter <progressmeter mode="determined" value="10" /> as progress advances, jaws indicates percentage to the user radio see radiogroup radiogroup <label value='<!--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radio...
...<!--fergus-->" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> there is no keyboard access to the column picker (the widget visually to the right of the column headers) or the column headers themselves (for sorting by column). these functions must be replicated elsewhere (like in the main menu, e.g. the manage bookmarks
window in firefox 2 or the places
window in firefox 3). jaws 7.10 can not read the column headers. the main tree is accessible like a regular tree control. firefox exposes the position, cardinality, and depth of each tree item through the accessible description fixme: exact format? treecell see tree treechildren see tree treecol ...
... see tree treecol see tree treecols see tree treeitem see tree treerow see tree elements that do not expose anything to screen readers/have no discovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox
window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane pref
window resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem to...
The Implementation of the Application Object Model - Archive of obsolete content
t is xul? xul (pronounced zool) used to be a ravening demon intent upon taking over the earth in ghost busters. in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, transformed into something far worse than a demon. it became a markup language. xul stands for "extensible user interface language". it is an xml-based language for describing the contents of
windows and dialogs. xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus. where html describes the contents of a single document, xul describes the contents of an entire
window (which could itself contain multiple html documents). the html content tree structure for a single document is represented as a set of objects ...
...this is referred to as the aom (application object model). how are xml dom/aom trees represented in nglayout? nglayout has its own objects for holding content trees. ...
... local annotations are sucked in and superimposed on top of the structure described by the file. the resulting structure is what the user actually ends up viewing. forget xul! let's just use serialized rdf! well, that's just plain cool! i say forget xul! let's just use serialized rdf to represent the ui! that would be an unwise decision for a variety of reasons. rdf is a graph structure, and
windows and dialogs are actually content trees. because rdf can express arbitrary relationships between nodes, the serialized form of rdf in xml has to contain extra syntax. in other words, the traditional relationship of "containment" is not the only kind of relationship expressible in rdf. in html or xul, when you put one tag inside another tag, a relationship of containment can safely be assumed. not...
...e. the persistent attribute has values of true and false, with true specifying that local annotations that are persistent are desired. the default assumption if this attribute is not present is that local annotations are not allowed. one subtree nested inside another subtree can specify a different value for the persistent attribute, thus allowing the xul writer to specify a default for the whole
window, but to still selectively override it for certain subtrees. note that even if the persistent attribute is set to false, that changes can still be made to a
window's content tree. they simply won't be remembered across sessions. preventing the persistence of attributes: the discardable attribute individual attributes can be specified as non-persistent (i.e.,discardable) through the use of the d...
key - Archive of obsolete content
when a key matching the attributes on the key element is pressed, the command will be fired on the key element. the key pressed must match the key attribute (or keycode attribute) as well as the modifiers attribute in order for the key element to be activated. for the shortcut defined using the key element to work, you must specify a command attribute (or an oncommand handler) on the key element. ...
... will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. ...
...eys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. ...
...mbinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. os:
windows logo key on
windows, super or hyper key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut key. accel: the key used for keyboard shortcuts on the user's platform, which is control on
windows and linux, and command on mac. usually, this would be the value you would use. access: the access key for activating menus and other elements. on
windows, this is the alt key, used in conjuction with an element's accesskey. any: indicates that all modifiers preceding it are optional. oncommand type: script code this event handler is called when the command is activated. this occurs wh...
toolbar - Archive of obsolete content
ribute. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox element. you can associate an external toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar. 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. more information is available in the xul tutorial. note: starting in gecko 1.9.1, toolbar items are moved ...
..."users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user. when set to false, the default, the toolbar is visible. this only has an effect on
windows and needs to be combined with type="menubar" and a menubar element. currentset not in seamonkey 1.x type: comma-separated string the current set of displayed items on the toolbar. this will be modified when the user customizes the toolbar. the value of this attribute should be a comma-separated list of item ids from the toolbarpalette or, additionally, any of the following strings: "sep...
...otherwise, this option will be ignored for this toolbar and it will always be visible. related elements toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
...otherwise, this option will be ignored for this toolbar and it will always be visible. related elements toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
er web pages within native and java applications. xulrunner 1.8.0.4 is now available as a security/stability update; all users should install this new version. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english: download xulrunner for
windows download xulrunner for mac os x download xulrunner for linux
windows unpack the zip file to a new directory using a archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.1 . to register xulrunner with the system, open a command prompt and run xulrunner.exe ...
...low the directions. linux unpack the tarball to a new directory using tar -xzf xulrunner-1.8.0.1.en-us.linux-i686.tar.gz. the following directory is recommended: /opt/xulrunner/1.8.0.1 . register xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner
windows/linux from a command prompt, run xulrunner --unregister-global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/...
...installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. ...
...ation.xpi the application will be installed to /applications/vendor/appicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.1/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! this is a developer preview release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases. ...
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
web pages within native and java applications. as of december 2008,xulrunner 1.9.0.4 is available in the "gecko 1.9.0" branch upon which firefox 3 is based. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english: download xulrunner for
windows download xulrunner for mac os x download xulrunner for linux
windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.4 . to register xulrunner with the system, open a command prompt and run xulrunner.exe -...
...runner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory.
windows from a command prompt, run xulrunner.exe --unregister-global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /libra...
...talled versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. ...
...xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! this is a developer preview release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases. ...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
ce code snapshot as firefox 3.5.x. current version the current version of xulrunner is 1.9.1.19, matching firefox 3.5.19 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english: download xulrunner for
windows download xulrunner for mac os x download xulrunner for linux
windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9.1 . to register xulrunner with the system, open a command prompt and run xulrunner.exe -...
...ulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory.
windows from a command prompt, run xulrunner.exe --unregister-global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /librar...
...installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. ...
...cation.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9.1/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases. i'm writing a xul appli...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
ode snapshot as firefox 3.6.x. current version the current version of xulrunner 1.9.2 is 3.6.26, matching firefox 3.6.26 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english: download xulrunner for
windows download xulrunner for mac os x download xulrunner for linux
windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9.2 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-...
...er xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory.
windows from a command prompt, run xulrunner.exe --unregister-global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/fram...
...on reinstalling a different version. type sudo rm /var/db/receipts/org.mozilla.xulrunner.* installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. ...
...pplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9.2/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases. i'm writing a xul application, how can i dep...
XULRunner 1.9 Release Notes - Archive of obsolete content
code snapshot as firefox 3. current version the current version of xulrunner is 1.9.0.17, matching firefox 3.0.17 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english: download xulrunner for
windows download xulrunner for mac os x download xulrunner for linux
windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --reg...
...runner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory.
windows from a command prompt, run xulrunner.exe --unregister-global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /libra...
...talled versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. ...
...ion.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases. i'm writing a xul application, how can ...
XULRunner 2.0 Release Notes - Archive of obsolete content
ion the current version of xulrunner 2.0 is 2.0, matching firefox 4.0 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements (nb: that page will change for firefox 4 shipping). the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english. the releases directory can be found here. specific runtimes can be found at: download xulrunner for
windows download xulrunner for mac os x download xulrunner for 32-bit linux download xulrunner for 64-bit linux (warning: links may become out-of-date at times).
windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the ...
...er xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory.
windows from a command prompt, run xulrunner.exe --unregister-global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/fram...
...l installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. ...
...yapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/2.0/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application. on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar. frequently asked questions why is installing xulrunner so painful? why isn't there a nice installer? because nobody has written that code yet! additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases. i'm writing a xul application, how can i dep...
toolkit.defaultChromeURI - Archive of obsolete content
...
... ...
... ...
...tions 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. see also: xulrunner:specifying startup chrome
window, toolkit.defaultchromefeatures, toolkit.singleton
windowtype. ...
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
in the callback function for the asynchronous operation after the call to debug.mstraceasyncoperationcompleted. note: some debugging tools do not display the information sent to the debugger. asyncoperationid must correspond to the operation name previously returned from debug.mstraceasyncoperationstarting. example the following code provides an example of tracing an asynchronous call for a
windows 8.x store app. function asyncwrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccallbackstarting(opid); // process result of async operation. }, function (error) { debug.mstraceasyn...
... ...
... ...
... asyncwrapperfunction(); requirements supported in the internet explorer 11 standards document mode. also supported in store apps (
windows 8.1 and
windows phone 8.1). not supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards. not supported in
windows 8. ...
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
tion id previously returned from debug.mstraceasyncoperationstarting. the possible values for status include: debug.ms_async_op_status_success debug.ms_async_op_status_canceled debug.ms_async_op_status_error note: some debugging tools do not display the information sent to the debugger. example the following code provides an example of tracing an asynchronous call for a
windows 8.x store app. function asyncwrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccallbackstarting(opid); // process result of async operation. }, function (error) { debug.mstraceasyn...
... ...
... ...
... asyncwrapperfunction(); requirements supported in the internet explorer 11 standards document mode. also supported in store apps (
windows 8.1 and
windows phone 8.1). not supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards. not supported in
windows 8. ...
Using the Right Markup to Invoke Plugins - Archive of obsolete content
te and retrieve the activex control. additional param elements (which are "children" of the above object element) specify configuration parameters for the flash plugin. for instance, the param name="movie" tells the flash plugin the location of the swf file to start playing. with the release of netscape 7.1, this kind of activex use of the object element is supported for use with the microsoft®
windows media player. only the
windows media player is supported as an activex control in netscape 7.1. the details are covered in another article. browsers such as netscape 7 will not render the flash plugin if the above kind of markup is used, because netscape 7 does not support activex or activex-based component invocations, with the exception of
windows media player in netscape 7.1. mozilla-based b...
...wser way (with architecture specific obtainment mechanisms), the best course of action is to dynamically write object elements based on architecture. for example, on browsers that support activex, such as ie, create an object element with a classid attribute, and on browsers that support the netscape plugin architecture, use a mime type. ...
... unique identifier. each major version of the plugin has a unique identifier. for instance, this is an example of the type of markup that will invoke the jre 1.4.1 in ie, using the unique identifier for the jre 1.4.1: <!-- ie only code --> <object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" width="460" height="160" codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-
windows-i586.cab#version=1,4,1"> <param...> <param...> </object> the above invocation won't work for mozilla-based browsers such as netscape 7 because of the same reason mentioned above: classid used in conjunction with a unique identifier references an architecture (activex) that mozilla code (and thus netscape 7) does not support. you can invoke the java plugin for netscape 7 and other moz...
...lement embed element plugin api reference on embed element on devedge-temp java html 4.01 applet definition (deprecated) java plugin homepage sun documentation on object, embed, and applet and different plugin versions sun demonstration of web pages using applet element sun demonstration of web pages using object/embed elements bugs and future directions in netscape and mozilla
windows media in netscape netscape 7.1 and the
windows media activex control bug 180378 bug 167601 bug 180411 ...
Game distribution - Game development
ogle play's requirements are less strict, so the store is polluted with low quality games. it's still quite hard to be noticed there as the number of apps submitted daily is huge. it's harder to earn money here too — most of the paid games from ios are published as free games on android, with monetization coming from in-app purchases (iaps) or ads. other stores for native mobile platforms like
windows phone or blackberry are working hard to get a piece of the cake, and are way behind the competition. it can be good to submit your game there as it will be a lot easier to be noticed. if you're looking for more information about the different types of app stores you can check the list of mobile software distribution platforms article on wikipedia. native desktop to broaden your audience you ...
...eck the list of mobile software distribution platforms article on wikipedia. native desktop to broaden your audience you can hit the desktop ecosystem with your html5 games too — just remember all the popular aaa games that take most of the market share, and think carefully about whether this suits your strategy. to do the desktop thing properly you should support all three operating systems:
windows, mac os and linux. the biggest desktop store for games is definitely steam — indie developers can get on steam via the steam direct program. remember that you have to deal with the cross-platform issues yourself by uploading separate versions for different platforms. after you've covered steam, there's plenty of buzz around initiatives like humble bundle where the most popular indie games get...
...ed on canvas and supports many game frameworks. ejecta — a tool specifically for packaging games created with the impactjs framework for ios, built by the impactjs author. it provides seamless integration with impactjs, but it only supports only one framework and app store. nw.js — formerly known as node-webkit, this is the first choice when it comes to building a desktop game that works on
windows, mac and linux. the distributions are packaged with the webkit engine to provide rendering on any platform. other alternative tools are: intel xdk — an exciting alternative, similar to cocoonio. electron — known as atom shell — is an open-sourced and cross-platform tool from github. manifold.js — this tool from the microsoft team can create native distributions of html5 games from...
...he distributions are packaged with the webkit engine to provide rendering on any platform. other alternative tools are: intel xdk — an exciting alternative, similar to cocoonio. electron — known as atom shell — is an open-sourced and cross-platform tool from github. manifold.js — this tool from the microsoft team can create native distributions of html5 games from ios, android, and
windows. summary distribution is the way to give the world access to your game. there are many options available and there's no single good answer as to which is the best. when you've published the game it's time to focus on promotion — letting people know your game exists. without promotion, they wouldn't even be able to learn about it and play it. ...
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. html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width =
window.innerwidth; var height =
window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space. the first <script> element includes the three.js library in the p...
...ins some basic information like the document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space. the first <script> element includes the three.js library in the page, and we will write our example code inside the second. there are two helper variables already included, which store the
window's width and height. before reading further, copy this code to a new text file, and save it in your working directory as index.html. renderer a renderer is a tool which displays scenes right in your browser. there are a few different renderers: webgl is the default, and others you can use are canvas, svg, css, and dom. they differ in how everything is rendered, so the webgl implementation will ...
...d. let's explain values we are setting for the code above: the value we set for the field of view, 70, is something we can experiment with: the higher the value, the greater the amount of scene the camera will show. imagine a normal camera view, versus a fish eye effect, which allows a lot more to be seen. the default value is 50. the aspect ratio is set to the current width and height of the
window so it will be dynamically adjusted. we could set a fixed ratio — for example 16 ⁄ 9, which is the aspect ratio of a widescreen tv. the default value is 1. the z position, with the value of 50 units, is the distance between the camera and the center of the scene on the z axis. here we're moving the camera back, so the objects in the scene can be viewed. 50 feels about right. it's not too near...
...ne, camera); } render(); on every new frame the render function is invoked, and the renderer renders the scene and the camera. right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely. again, add this new code below your previous additions. try saving the file and opening it in your browser. you should now see a gray
window. congratulations! geometry now our scene is properly rendering, we can start adding 3d shapes. to speed up development, three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. there's cubes, spheres, cylinders, and more complicated shapes available. detail like drawing required vertices and faces, for a given shape, is handled b...
Visual-js game engine - Game development
( + server engine tools + server part of web apps ) -3d part : webgl based on three.js engine -3d part : webgl2 based on glmatrix 2.0 -2d part (new): this is typescript based game engine (client part ts). with strong connection with webpack physics done with (matter.js) matter ts this part is removed from this project. ...
... 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 applicati...
... 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 ap...
... now you can use on-page-editor (nice for visual setup , checking positions and dimensions ...
Gecko FAQ - Gecko Redirect 1
or more information see the wikipedia article on gecko. what is a layout engine? basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen. it paints the browser's content area, which is the blank area inside the browser
window's chrome. formally, a layout engine defines the placement policy for a document and places content on a page. gecko's core is a very fast layout engine. gecko also offers the ability to parse various document types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins. gecko is so fast and so powerful th...
...." gecko's robust support for these standards makes gecko the platform of choice for web content and web application developers worldwide. are gecko's apis based on activex? com? javabeans? gecko is reusable on all platforms thanks to xpcom, a subset of com that works across platforms. com, developed by digital and later adopted by microsoft, is the de facto standard for modular interfaces on
windows platforms. additionally, on the
windows platform, gecko's xpcom interfaces are wrapped in an activex control that vb developers can utilize (activex wrappers are not available on other platforms because activex is a
windows-only technology). a javabean wrapper is not currently under development, but there is nothing in gecko's architecture that precludes such development in the future. source ...
...oems and contributors from the net participating in mozilla.org are porting gecko to other platforms. such porting efforts are underway for solaris, hp/ux, aix, irix, os/2, openvms, beos, and amiga, among others. ...
...gy). a javabean wrapper is not currently under development, but there is nothing in gecko's architecture that precludes such development in the future. source code and documentation for these interfaces are available through mozilla.org. for future embedding api plans, see wikimo:mozilla 2:embedding apis. which platforms does gecko run on? gecko runs today on win32 (
windows xp service pack 2,
windows vista,
windows 7,
windows 8,
windows 8.1,
windows 10), mac os x 10.5 and later, and linux. oems and contributors from the net participating in mozilla.org are porting gecko to other platforms. such porting efforts are underway for solaris, hp/ux, aix, irix, os/2, openvms, beos, and amiga, among others. older versions of gecko supported earlier versions of win32 and mac os x. what are the compo...
Responsive design - Learn web development
s: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts and history of responsive design. historic website layouts at one point in history you had two options when designing a website: you could create a liquid site, which would stretch to fill the browser
window or a fixed width site, which would be a fixed size in pixels. these two approaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the ex...
...which would be a fixed size in pixels. these two approaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your browser
window in and out to see how this looks at different sizes. the fixed-width site risked a horizontal scrollbar on screens smaller than the site width (as seen below), and lots of white space at the edges of the design on larger screens. note: see this simple fixed-width layout: example, source code. again, observe the result as you change the browser
window size. note: the screenshots above a...
...es don't just change their layout between breakpoints, they are built on flexible grids. a flexible grid means that you don't need to target every possible device size that there is, and build a pixel perfect layout for it. that approach would be impossible given the vast number of differently-sized devices that exist, and the fact that on desktop at least, people do not always have their browser
window maximized. by using a flexible grid, you only need to add in a breakpoint and change the design at the point where the content starts to look bad. for example, if the line lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows. in the early days of responsive design, our only option for performing layout was to use floats...
...it down. this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach. the image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser
window. in addition, you may not want the same image aspect ratio on mobile as on desktop. for example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size. these things can't be a...
How do you set up a local testing server? - Learn web development
prerequisites: you need to first know how the internet works, and what a web server is. objective: you will learn how to set up a local testing server. local files vs. 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... and navigating to the html file. there are many ways to achieve this. if the web address path starts with file:// followed by the path to the file on your local hard drive, a local file is being used. in contrast, if you view one of our examples hosted on github (or an example on some other remote server), the web address will start with http:// or https://, to show t...
... to get around the problem of async requests, we need to test such examples by running them through a local web server. one of the easiest ways to do this for our purposes is to use python's simplehttpserver (or http.server, depending on the version of python installed.) to do this: install python. if you are using linux or macos, it should be available on your system already. if you are a
windows user, you can get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section, click the link for python "3.xxx". at the bottom of the page, choose the
windows x86 executable installer and download it. when it has downloaded, run it. on the first installer page, make sure you check the "add python 3.xxx to path" ...
...to check python is installed, enter the following command: python -v # or you might have the py command available, # in which case try py -v this should return a version number. ...
...s should return a version number. if this is ok, navigate to the directory that your example is inside, using the cd command. # include the directory name to enter it, for example cd desktop # use two dots to jump up one directory level if you need to cd .. enter the command to start up the server in that directory: # if python version returned above is 3.x python3 -m http.server # on
windows try "python" instead of "python3", or "py -3" # if python version returned above is 2.x python -m simplehttpserver by default, this will run the contents of the directory on a local web server, on port 8000. you can go to this server by going to the url localhost:8000 in your web browser. here you'll see the contents of the directory listed — click the html file you want to run. not...
Basic native form controls - Learn web development
eld example: <input type="text" id="comment" name="comment" value="i'm a text field"> single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server. the following screenshot shows default, focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on
windows 10. note: html5 enhanced the basic original single line text field by adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to entering urls or numbers. we'll cover those in the next article, the html5 input types. password field one of the original input types was the password text field type: <input type="pass...
...heckbox. <input type="checkbox" id="carrots" name="carrots" value="carrots" checked> including the checked attribute makes the checkbox checked automatically when the page loads. clicking the checkbox or its associated label toggles the checkbox on and off. the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on
windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked. any that are currently checked match the :checked pseudoclass. due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many developers and designers expanding on the default checkbox styling to create buttons tha...
... actual buttons the radio button isn't actually a button, despite its name; let's move on and look at actual buttons! there are three input types that produce buttons: submit sends the form data to the server. for <button> elements, omitting the type attribute (or an invalid value of type) results in a submit button. reset resets all form widgets to their default values. button bu...
...n their content, which is inserted between the opening and closing <button> tags. <input> elements on the other hand are empty elements; their displayed content is inserted inside the value attribute, and therefore only accepts plain text as content. the following examples show default, focused, and disabled button input types — in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on
windows 10. image button the image button control is rendered exactly like an <img> element, except that when the user clicks on it, it behaves like a submit button. an image button is created using an <input> element with its type attribute set to the value image. this element supports exactly the same set of attributes as the <img> element, plus all the attributes supported by other form buttons.
How to build custom form controls - Learn web development
u want to learn more about this topic, you should check out the following helpful resources: uxmatters.com uxdesign.com the ux design section of smashingmagazine note: also, in most systems there is a way to open the <select> element with the keyboard to look at all the available choices (this is the same as clicking the <select> element with a mouse). this is achieved with alt + down on
windows. we didn't implement this in our example, but it would be easy to do so, as the mechanism has already been implemented for the click event. defining the html structure and (some) semantics now that the control's basic functionality has been decided upon, it's time to start building it. the first step is to define its html structure and to give it some basic semantics. here is what we need to ...
...hidden; } this css visually hides one of the elements, but it is still available to screen readers. now we need a javascript switch to determine if the script is running or not. this switch is a couple of lines: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the <select> element and the custom control. ...
...we remove the highlight from all options optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); // we highlight the right option option.classlist.add('highlight'); }; you need these in order to handle the various states of the custom control. next, we bind these functions to the appropriate events: // we handle the event binding when the document is loaded. ...
...tion getindex(select) { // we need to access the native control for the given custom control // in our example, that native control is a sibling of the custom control var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; with these two functions, we can bind the native controls to the custom ones: // we handle event binding when the document is loaded. ...
Getting started with HTML - Learn web development
lution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
...tarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
...ote: you can also find this basic html template on the mdn learning area github repo. you can now open this file in a web browser to see what the rendered code looks like. edit the code and refresh the browser to see what the result is. initially the page looks like this: in this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample
window below (the editable sample
window represents just the contents of the <body> element, in this case). sharpen your skills by implementing the following tasks: just below the opening tag of the <body> element, add a main title for the document. this should be wrapped inside an <h1> opening tag and </h1> closing tag. edit the paragraph content to include text about a topic that you find interest...
...rs is neal peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/rush_%28band%29" title="rush wikipedia article">rush</a>.\ my favourite rush album is currently <a href="http://www.deezer.com/album/942295">moving pictures</a>.</p>\ <img src="https://udn.realityripple.com/samples/4b/9bb5edda5d.jpg">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
Choosing the right approach - Learn web development
idsafari on iossamsung internetsettimeoutchrome full support 30edge full support 12firefox full support 1 full support 1 full support 52notes notes setinterval now defined on
windoworworkerglobalscope mixin.ie full support 4opera full support 4safari full support 1webview android full support 4.4chrome android full support 30firefox android ...
... 1webview android full support 4.4chrome android full support 30firefox android full support 4 full support 4 full support 52notes notes setinterval now defined on
windoworworkerglobalscope mixin.opera android full support 10.1safari ios full support 1samsung internet android full support 3.0supports parameters for callbackchrome full support yesedge full support ...
...dsafari on iossamsung internetsetintervalchrome full support 30edge full support 12firefox full support 1 full support 1 full support 52notes notes setinterval now defined on
windoworworkerglobalscope mixin.ie full support 4opera full support 4safari full support 1webview android full support 4.4chrome android full support 30firefox android ...
... 1webview android full support 4.4chrome android full support 30firefox android full support 4 full support 4 full support 52notes notes setinterval now defined on
windoworworkerglobalscope mixin.opera android full support 10.1safari ios full support 1samsung internet android full support 3.0supports parameters for callbackchrome full support yesedge full support ...
Introduction to web APIs - Learn web development
ost common categories of browser apis you'll use (and which we'll cover in this module in greater detail) are: apis for manipulating documents loaded into the browser. the most obvious example is the dom (document object model) api, which allows you to manipulate html and css — creating, removing and changing html, dynamically applying new styles to your page, etc. every time you see a popup
window appear on a page or some new content displayed, for example, that's the dom in action. find out more about these types of api in manipulating documents. apis that fetch data from the server to update small sections of a webpage on their own are very commonly used. this seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock li...
...the pixel data contained in an html <canvas> element to create 2d and 3d scenes. for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl. such apis are often combined with apis for creating animation loops (such as
window.requestanimationframe()) and others to make constantly updating scenes like cartoons and games. audio and video apis like htmlmediaelement, the web audio api, and webrtc allow you to do really interesting things with multimedia such as creating custom ui controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web c...
...to the page. we don't include any default browser controls. next, we include a <button> that we'll use to play and stop the music, and an <input> element of type range, which we'll use to adjust the volume of the track while it's playing. next, let's look at the javascript for this example. ...
...nclude any default browser controls. next, we include a <button> that we'll use to play and stop the music, and an <input> element of type range, which we'll use to adjust the volume of the track while it's playing. next, let's look at the javascript for this example. ...
Setting up your own test automation environment - Learn web development
actually is on your machine): #add webdriver browser drivers to path export path=$path:/users/bob save and close this file, then restart your terminal/command prompt to reapply your bash configuration. check that your new paths are in the path variable by entering the following into your terminal: echo $path you should see it printed out in the terminal. to set your path variable on
windows, follow the instructions at how can i add a new folder to my system path? ok, let's try a quick test to make sure everything is working. create a new file inside your project directory called google_test.js: give it the following contents, then save it: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; const driver = new webdriver.builde...
...rname can be found at automation dashboard const username = '{username}'; // accesskey: accesskey can be generated from automation dashboard or profile section const key = '{accesskey}'; // gridurl: gridurl can be found at automation dashboard const grid_host = 'hub.lambdatest.com/wd/hub'; function searchtextongoogle() { // setup input capabilities const capabilities = { platform: '
windows 10', browsername: 'chrome', version: '67.0', resolution: '1280x800', network: true, visual: true, console: true, video: true, name: 'test 1', // name of the test build: 'nodejs build' // name of the build }; // url: https://{username}:{accesstoken}@hub.lambdatest.com/wd/hub const gridurl = 'https://' + username + ':' + key + '...
...an use it to send requests to the rest api. add the following line at the very top of your code: const request = require("request"); now we'll update our capabilities object to include a project name — add the following line before the closing curly brace, remembering to add a comma at the end of the previous line (you can vary the build and project names to organize the tests in different
windows in the browserstack automation dashboard): 'project' : 'google test 2' next we need to access the sessionid of the current session, so we know where to send the request (the id is included in the request url, as you'll see later). include the following lines just below the block that creates the driver object (let driver ...) : let sessionid; driver.session_.then(function(sessiondata) { ...
...e: inside your project directory, create a new file called sauce_google_test.js. ...
Simple Sunbird build
less-tools-devel mesa-libgl-devel mac: install xcode tools. insert "mac os x install disc 2", then open xcodetools.mpkg. (for some mac os x versions, you will find it in a directory called "optional installs".) install macports. run these commands to install the other build tools: sudo port sync sudo port install mercurial libidl autoconf213 problems? see mac os x build prerequisites.
windows: if you're using
windows xp, you must have
windows xp service pack 2 and .net framework 2.0. install visual c++ 2005 or 2008. both the professional edition and the express edition will work. you may need to install one or more
windows sdks. see
windows sdk versions for a quick guide. install mozillabuild, a package of additional build tools. (if you get a message saying this application did no...
... have
windows xp service pack 2 and .net framework 2.0. install visual c++ 2005 or 2008. both the professional edition and the express edition will work. you may need to install one or more
windows sdks. see
windows sdk versions for a quick guide. install mozillabuild, a package of additional build tools. (if you get a message saying this application did not install properly then you should see a
windows dialog giving you the option to re-install with the 'correct settings'. 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). problems? ...
...k guide. install mozillabuild, a package of additional build tools. (if you get a message saying this application did not install properly then you should see a
windows dialog giving you the option to re-install with the 'correct settings'. 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). problems? see
windows build prerequisites. building sunbird building sunbird requires at least 2.5 gb of disk space, 500 mb of ram, and lots of available swap space. on
windows, if you open the command prompt you are usually in your user profile folder which often contains spaces ( c:\documents and settings\...). this causes problems while building. to avoid this issue, change to a directory without spaces (i.e.
...he "cd" command to do so. # get the source hg clone http://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # setup a basic .mozconfig file echo 'ac_add_options --enable-application=calendar' > .mozconfig # let's build sunbird... echo 'mk_add_options moz_objdir=@topsrcdir@/objdir-sb-release' >> .mozconfig # ...in this directory... # use this only if not on
windows! parallel compilation on
windows is # unreliable now due to bug 524149. echo 'mk_add_options moz_make_flags="-j4"' >> .mozconfig # ...quickly. # build make -f client.mk for a debug build, you need different configuration options in your .mozconfig file. this requires more disk space, about 2.5 gb. mk_add_options moz_objdir=@topsrcdir@/objdir-sb-debug ac_add_options --en...
mach
rmer case, people don't need to discover your tool from a blog post, wiki page, or word of mouth). so this 3rd point does not make much sense, does it? are there any known issues? yes, of course several! mach is still relatively young ("born" in 2012) and there are a number of bugs and numerous areas for improvement. some larger known issues include: mintty (alternative terminal emulator on
windows) doesn't work. text encoding issues (especially on
windows where latin-1 is not the default system encoding). failed commands spew lots of extra error output, e.g. you will see a big mach error message when all that happened was an invoked command returned a non-0 exit code - possibly expectedly so in mozilla! generally, mach is known to work pretty well without issues for most people and wo...
...in the testing product. how is building with mach different from building with client.mk, from using make directly? currently, mach build simply invokes client.mk as an ersatz makefile. there are no differences in terms of how the build is performed (well, at least there should not be any ideally). ...
...k, from using make directly? ...
...not all warnings are currently detected. do not rely on mach as a substitute for raw build output. mach will invoke make in silent mode. ...
Frame script loading and lifetime
ntly selected tab. the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a
window message manager, loadframescript() may load the script multiple times, once in each applicable frame. chrome: urls extension developers usually use a chrome:// url to refer to the frame scripts. to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/...
...frame scripts. to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a
window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call. for example: var mm =
window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this
window, and all new tabs opened afterwards. ...
... true here. because a browser message manager only corresponds to a single browser tab, its loadframescript() function will only ever load the frame script into that one tab. passing allowdelayedload is a way to ensure that the script is loaded correctly, in case the tab is not ready when making the call. if you use allowdelayedload, you can cancel it by using removedelayedframescript: var mm =
window.messagemanager; mm.removedelayedframescript("chrome://my-e10s-extension/content/frame-script.js"); this means we will stop loading the script into new tabs. note that this function will not remove any scripts which have been loaded earlier. frame script lifetime frame scripts are loaded as soon as loadframescript() is called. if you've set allowdelayedload, the script is loaded into a new tab ...
...age. so once you load them, they will stay loaded until the tab is closed, even if you reload the document or navigate. if you want to limit a script to the lifetime of a page you can create a sandbox instead, where the current content page is used as prototype. if you want a frame script to do something when a new document is loaded, you need to listen for an appropriate dom event, generally dom
windowcreated, domcontentloaded, or load. unloading frame scripts frame scripts are automatically unloaded when their hosting tab is closed. there is currently no way to unload them when loaded, other than closing the tab they were loaded into. to listen for an event, when your frame script is unloaded (due to tab close for instance), you must set the third argument of addmessagelistener to true. for...
Performance
oilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics. performance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescript.js", true) // framescript.js const precomputedconstants = // ... function helper(
window, action) { // ... do some work on the
window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {something: result}) } addmessagelistener("my-addon:request-from-parent", dosomething) why is this bad? because declared functions are also objects. and since frame scripts get evaluated for each tab this means new func...
... while it may seem fairly innocencous in this toy example, real scripts often have a lot more functions and initialize some fairly heavyweight objects. better: addon.js as above // framescript.js components.utils.import("resource://my-addon/processmodule.jsm", {}).addframe(this) // processmodule.jsm const exported_symbols = ['addframe']; const precomputedconstants = // ... ...
...oy example, real scripts often have a lot more functions and initialize some fairly heavyweight objects. better: addon.js as above // framescript.js components.utils.import("resource://my-addon/processmodule.jsm", {}).addframe(this) // processmodule.jsm const exported_symbols = ['addframe']; const precomputedconstants = // ... function helper(
window, action) { // ... ...
...trigger the callbacks in all tabs. additionally the example above does not clean unregister itself, thus leaking objects each time a tab is closed. frame message manager message and event listeners are limited in their lifetime to that of the frame itself, this does not apply to observer registrations. ...
mozbrowsershowmodalprompt
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the
window.alert(),
window.confirm(), or
window.prompt() methods. 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 type of event. bubbles read only ...
...nt is cancellable or not. details read only object a custom object. details the details property is an anonymous javascript object with the following properties: prompttype a domstring defining the type of the prompt. it can be alert, confirm, or prompt. title a domstring representing the title of the prompt. message a domstring representing the value passed to the
window.alert(),
window.confirm(), or
window.prompt() methods within the browser <iframe>'s content. returnvalue a domstring representing the return value for the
window.prompt() methods. this should be set by the embedder. unblock() a function to be called when the iframe is unblocked. note that if the embedder calls preventdefault() on this event, the iframe is blocked until unblock() is called. ...
...be set by the embedder. unblock() a function to be called when the iframe is unblocked. note that if the embedder calls preventdefault() on this event, the iframe is blocked until unblock() is called. obsolete properties of details msg_name a string representing the type of message. for that event, it's always showmodalprompt. initialvalue a string representing the initial value for the
window.prompt() methods. example 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 mozbrowserloca...
...le 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 mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Browser API
e html <iframe> element that allows web apps to implement browsers or browser-like applications. it currently works in (privileged) chrome code on firefox desktop (version 47 and above). browser api concepts and usage the browser api consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser
window to the embedded content. this means that
window.top,
window.parent,
window.frameelement, etc. should not reflect the frame hierarchy. api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface. browser api interfaces to support the requirement of a browser <iframe>, the html...
...meelement.findall() searches for a string in a browser <iframe>'s content; if found, the first instance of the string relative to the caret position will be highlighted. htmliframeelement.findnext() highlights the next or previous instance of a search result after a findall() search has been carried out. htmliframeelement.getcontentdimensions() retrieves the x and y dimensions of the content
window. htmliframeelement.getmanifest() retrieves the manifest of an app loaded in the browser <iframe> and returns it as json. htmliframeelement.getscreenshot() takes a screenshot of the browser <iframe>'s content. this is particularly useful to get thumbnails of tabs in a tabbed browser app. htmliframeelement.purgehistory() clears all the resources (cookies, localstorage, cache, etc.) associated...
...eceiving app. mozbrowserasyncscroll sent when the browser <iframe> content scrolls (the apcz version.) see also mozbrowserscroll. note that this is obsolete. mozbrowseraudioplaybackchange sent when audio starts or stops playing within the browser <iframe> content. mozbrowsercaretstatechanged sent when the text selected inside the browser <iframe> content changes. mozbrowserclose sent when
window.close() is called within a browser <iframe>. mozbrowsercontextmenu sent when a browser <iframe> tries to open a context menu. this allows handling of the <menuitem> element available within the browser <iframe>'s content. mozbrowserdocumentfirstpaint sent when a new paint occurs on any document in the browser <iframe>. mozbrowsererror sent when an error occurs while trying to load content ...
...r <iframe> starts to load a new page. mozbrowserlocationchange sent when a browser <iframe>'s location changes. 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. mozbrowsermetachange sent when a <meta> elelment is added to, removed from or changed in the browser <iframe>'s content. mozbrowseropen
window sent when
window.open() is called within a browser <iframe>. mozbrowseropentab sent 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.) mozbrowserresize sent when the browser <iframe>'s
window size has changed. mozbrowserscroll sent when the browser <iframe> content scrolls. mozbrow...
Gecko Keypress Event
that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character. when the keypress event includes modifier keys, sometimes the charcode value is replaced with an ascii character according to the following rules. the accel key depends on the platform. ctrl is the accel key on
windows and linux, while meta (i.e. command) is the accel key on mac. when the accel key is down, the charcode of a keypress event may be replaced with a character from a latin keyboard layout only when the original character is not an ascii character. this behavior helps the internationalization of web applications that have custom shortcut keys. if gecko doesn't replace the charcode with an ascii ch...
...ode with an ascii character, the web application developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.). the charcode value depends on the state of capslock and numlock (except they are currently ignored if alt (option) is down on mac - see bug 432953). there are also some differences between the platforms, as described in the following sections.
windows the charcode is replaced only when ctrl is down but alt is not down. if the os-provided character cannot be entered without using the ctrl key, then, gecko does not replace the character. e.g., ctrl+shift+'2' on persian keyboard layout inputs a zwnj, though shift+'2' inputs '@', and so, if gecko were to replace the charcode in this case, users would not be able to input zwnj (bug 414130). oth...
...aracters will not be available for shortcuts. therefore, web application developers should use only letters, ascii numerals, plus sign, and minus sign for custom shortcut keys. linux the charcode is replaced only when ctrl is down but alt and meta are not down. if the character provided by the keyboard layout cannot be entered without ctrl key, then, gecko does not replace the character (as on
windows). mac the charcode is replaced when meta (command) or ctrl is down. if the current keyboard layout is dvorak-qwerty layout or a non-latin layout, the command key switches the keyboard layout to the us qwerty keyboard layout temporary. gecko uses the character from this keyboard layout for the ctrl key also. however, when ctrl is down, gecko 1.9 currenly only replaces the charcode only when t...
...e to be able to use latin access keys of en-us builds (including nightly builds) without needing to switch keyboard layout (bug 399939). problem 3 users with non-latin keyboard layouts would like to be able to use latin access keys in web pages without switching to a latin layout (bug 429510). problem 4 the shift key must be down (with default preferences) to use accesskeys in web contents on
windows and linux. this makes it impossible for users to distinguish between accesskeys using two different characters on the same key (when the shift modifier is usually used to select one of the characters). the pairs of characters that might be on the same key depend on the keyboard layout. (bug 359638 partially addressed this issue by trying both characters on the key, but bug 303192 would provide ...
IPDL Tutorial
e parent, the child will block until the parent receives the message and the response arrives, and in asynchronous semantics from the parent to the child the parent will not block. when creating a plugin instance, the browser should block until instance creation is finished, and needs some information returned from the plugin: sync protocol pplugininstance { child: sync init() returns (bool
windowless, bool ok); }; we added two new keywords to the plugin protocol, sync and returns. sync marks a message as being sent synchronously. the returns keyword marks the beginning of the list of values that are returned in the reply to the message. async message return values bug 1313200 introduced the ability to use returns with async messages: protocol pplugininstance { child: async asynci...
... we added two new keywords to the plugin protocol, sync and returns. sync marks a message as being sent synchronously. the returns keyword marks the beginning of the list of values that are returned in the reply to the message. async message return values bug 1313200 introduced the ability to use returns with async messages: protocol pplugininstance { child: async asyncinit() returns (bool
windowless, bool ok); async otherfunction() returns (bool ok); }; for the caller side, each async message messagename with a returns block will generate two overloads for sendmessagename. the first overload will have a resolve callback and reject callback as its final two parameters; the second overload will not have any additional parameters, but it will return a pprotocol{parent,child}::messagen...
...ts strongest message semantics, where synchronous semantics is called "stronger than" asynchronous. that means asynchonous protocols cannot declare a synchronous message without violating this type rule, while synchronous protocols can declare an asynchronous message. a proper protocol with a synchronous message is shown below. ...
...thout violating this type rule, while synchronous protocols can declare an asynchronous message. a proper protocol with a synchronous message is shown below. sync protocol pplugininstance { child: sync init() returns (bool
windowless, bool ok); }; the generated c++ code for this method uses outparam pointers for the returned values: class pplugininstanceparent { ... bool sendinit(bool*
windowless, bool* ok) { ... }; }; class pplugininstancechild { ... virtual bool recvinit(bool*
windowless, bool* ok) = 0; } rpc semantics "rpc" stands for "remote procedure call," and this third semantics models procedure call semantics. a quick summary of the difference between rpc and sync semantics is that rpc allows "re-entrant" message handlers: while an actor is blocked waiting for an "ans...
Following the Android Toasts Tutorial from a JNI Perspective
small popup. it only fills the amount of space required for the message, and the current activity remains visible and interactive. for example, navigating away from an email before you send it triggers a "draft saved" toast to let you know that you can continue editing later. toasts automatically disappear after a timeout. ...
...h jni; they are exposed by the native
window feature on firefox for android, see toast documentation. java code let's start with the following java code, which invokes a toast and says "hello, firefox!". context context = getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); native
window code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the native
window object. ...
...duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); native
window code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the native
window object. the java code example above can be done with privileged javascript from firefox for android with the following code:
window.native
window.toast.show("hello, firefox!", "short"); converting java to jni.jsm the first step is to look at the java code and see all the different types, methods, constructors, and fields that are being used. in the toast code we have the following: types - context, charsequence, int, toast, and void methods - maketext, show fields - length_short no constructors are used. declare the...
...ad the classes and the java environment, this is good for performance. this is the template that will follow our object of signatures: var my_jenv = null; try { my_jenv = jni.getforthread(); // do the jni work here } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } the reason we choose my_jenv for a variable name, and not jenv, is because the global privileged
window scope of firefox for android has a variable jenv already, and we don't want to mix. declare constructors, methods, and fields now that the sig's and java environment is ready, it is now possible to declare the constructors, methods, and fields. load the class the first step is to load the class. every constructor, method, and field belongs to a class. in our case, we have a class called toast...
JavaScript OS.Constants
fined. error values eacces permission denied eagain resource temporarily unavailable ebadf bad file descriptor eexist file exists efault bad address efbig file too large einval invalid argument eio input/output error eisdir is a directory eloop (not always available under
windows) too many levels of symbolic links. 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 n...
... exdev cross-devic...
...o 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
windows) operation not supported. eoverflow (not always available under
windows) value too large to be stored in datatype. eperm operation not permitted erange result too large etimedout (not always available under
windows) operation timed out. ewouldblock (not always available under
windows) operation would block. exdev cross-device link opening files unix access rights defined on all platforms but mea...
... o_rdwr open the file for read and write. o_rsync o_shlock atomically obtain a shared lock. o_symlink allow opening of symbolic links. o_sync (linux only) open for purely synchronous access. o_trunc truncate the file. o_wronly open the file for write only. os.constants.win constants for interacting with the
windows api. os.constants.win is undefined on non-
windows platforms. useful mostly in conjunction with js-ctypes. (tbd) ...
OS.File.Info
that may be serialized and transmitted between threads or processes. value an instance of os.file.info. instances of os.file.info cross-platform attributes isdir true if the file is a directory, false otherwise. issymlink true if the false is a symbolic link, false otherwise. (as of firefox 38 this is always true on all systems, this is a bug: bugzilla 1145885) (on
windows this returns false for hard links) size the number of bytes in the file. creationdate deprecated in bugzilla :: bug 807875. before deprecation, this used to be the date at which the file was created on
windows and mac os x, as a javascript date object. on unix systems it was returning the last modified date and thus it was deprecated. there is talk of reinstating this wit...
... creationdate deprecated in bugzilla :: bug 807875. before deprecation, this used to be the date at which the file was created on
windows and mac os x, as a javascript date object. on unix systems it was returning the last modified date and thus it was deprecated. there is talk of reinstating this with proper functionality in bugzilla :: bug 1167143. the creationdate can be obtained on
windows by winbirthdate and on mac os x by macbirthdate. on older unix filesystems it is not possible to get a creation date as it was never stored, on new unix filesystems creation date is stored but the method to obtain this date differs per filesystem, bugzilla :: bug 1167143 explores implementing solutions for all these different filesystems) lastaccessdate the date at which the file was...
...of the unix owner of this file. unixgroup a number holding the identifier of the unix group of this file. unixmode a number holding the unix access rights to this file. unixlaststatuschangedate date. this is the date of the latest write/renaming/mode change/... where ... is any write/set of inode information (such as owner, group, link count, mode, etc).
windows winbirthdate a date representing the time at which the file was created. may not be exact on all file systems. winattributes hidden boolean readonly boolean system boolean macos x macbirthdate a date representing the time at which the file wa...
... boolean system boolean macos x macbirthdate a date representing the time at which the file was created. may not be exact on all file systems. (as of firefox 38 this attribute is not found, see screen shots below, bugzilla :: bug 1156060) screenshot of info object in variable viewer macosx 10.10.1 ubuntu 14.04.1
windows 8.1 see also os.file.directoryiterator.entry ...
DMD
ox (mac) build build with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/macosx64/common-opt or a similar file before pushing. launch use mach run --dmd; use --mode to choose the mode. add --debug to run under lldb. trigger follow the trigger instructions for linux. note that on mac this step can take 30+ seconds. desktop firefox (
windows) build build with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/win32/common-opt. also, add this line to build/mozconfig.common: moz_crashreporter_upload_full_symbols=1 launch on a local build, use mach run --dmd; use --mode to choose the mode. on a build done by the try server, follow these instructions instead. trigger follo...
...sizes: 512 x 124; 256 x 242; 192 x 813; 128 x 54,664; 64 x 48,648 1.35% of the heap (48.65% cumulative) 1.64% of once-reported (59.18% cumulative) allocated at { #01: (no stack trace recorded due to --stacks=partial) } reported at { #01: mozilla::dmd::dmdfuncs::report(void const*) (/home/njn/moz/mi5/go64dmd/memory/replace/dmd/../../../../memory/replace/dmd/dmd.cpp:1646) #02:
windowsmallocsizeof(void const*) (/home/njn/moz/mi5/dom/base/ns
windowmemoryreporter.cpp:189) #03: nsattrandchildarray::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/nsattrandchildarray.cpp:880) #04: mozilla::dom::fragmentorelement::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/fragmentorelement.cpp:2337) #05: nsi...
... "live" mode output for "live" mode, dmd.py's output describes what live heap blocks are p...
... "live" mode output for "live" mode, dmd.py's output describes what live heap blocks are present. this output is broken into multiple sections. "invocation". this tells you how dmd was invoked, i.e. what option...
Profile Manager
ication, and has many features not found in firefox's built-in version. downloading binaries you can download profile manager builds from https://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/ note: there is no installer; just extract the files from the archive. ...
... by default, profile manager will manage firefox profiles, but you can also use it to work with profiles of other xulrunner apps, like thunderbird or seamonkey. ...
...a profile to create a new profile, just click the new button from profile manager's toolbar. a dialog will appear that allows you to specify the profile's name, and optionally the profile's path, and the version of firefox (or other application) that will be used with this profile: launching firefox with a profile to launch firefox with a specific profile, select the profile in the main
window, and hit the "start firefox" button: firefox will be launched with that profile, and profile manager will terminate. the version of firefox which will be launched is indicated in the "firefox version" dropdown in the launch options box: there are several additional launch options available for firefox. these cause firefox to be launched with various command-line arguments. see command li...
...nstance of firefox without passing it the -no-remote command line argument. for this reason, if you attempt to launch firefox using profile manager, and it detects that another instance of firefox is already running, it will automatically add the -no-remote argument for you, regardless of whether this launch option was checked. locked profiles some profiles may be shown as locked in the main
window. such profiles are currently being used by an instance of firefox. if you attempt to perform any operation on a locked profile, you'll get a warning; if you choose to continue despite the warning, you may encounter errors or corrupt a profile. it's strongly recommended to avoid operations on locked profiles. if you need to do something with a locked profile, close the instance of firefox w...
Introduction to Network Security Services
e 1, below, shows a simplified view of the relationships among the three shared libraries listed above and nspr, which provides low-level cross platform support for operations such as threading and i/o. (note that nspr is a separate mozilla project; see netscape portable runtime for details.) figure 1 relationships among core nss libraries and nspr naming conventions and special libraries
windows and unix use different naming conventions for static and dynamic libraries:
windows unix static .lib .a dynamic .dll .so or .sl in addition,
windows has "import" libraries that bind to dynamic libraries. so the nss library has the following forms: libnss3.so - unix shared library libnss3.sl - hp-ux shared library libnss.a - unix static ...
... the following static libaries aren't included in any shared libraries libcrmf.a/crmf.lib provides an api for crmf operations. ...
... the following static libaries aren't included in any shared libraries libcrmf.a/crmf.lib provides an api for crmf operations. libjar.a/jar.lib provides an api for creating jar files. ...
... the following static libaries aren't included in any shared libraries libcrmf.a/crmf.lib provides an api for crmf operations. libjar.a/jar.lib provides an api for creating jar files. ...
PKCS11 FAQ
the certificate need to be imported into nss's internal certificate database? if so, is there a way to get the certificate from an external token into nss's internal certificate database? nss searches all the installed pkcs #11 modules when looking for certificates. once you've installed the module, the module's certificates simply appear in the list of certificates displayed in the certificate
window. what version of pkcs #11 does nss support? nss requires at least pkcs #11 version 2.0, but can support some features of later versions of nss, including nss 2.20. nss does not use all the features of later versions of pkcs #11. what are the expectations in terms of session manipulation? will nss potentially open more than one session at a time? read-only sessions, read/write sessions, serial,...
... good reason. much of nss's token selection is based on where the key involved is currently stored. if the token that has your private keys doesn't also do symmetric operations, for example, it's likely that the internal token will end up doing the symmetric operations. is the pkcs #11 module supplied with nss accessible through a shared library? yes, the token is call softokn3 (softokn3.dll on
windows, libsoftokn3.so on most unix platforms). the nss softokn3 is not a complete pkcs #11 module, it was implemented only to support nss, though other products have managed to get it to work in their environment. there are a number of bugs against softoken's non-compliance, but these bugs have lower priority than fixing nss's non-complient uses of pkcs #11 or adding new features to nss. if multiple ...
... to the smartcard, and how is the public key sent to the server (with wrapping?). the private key is created using c_generatekeypair or stored using c_createobject (depending on who generates the key). nss does not keep a copy of the generated key if it generates the key itself. key generation in mozilla clients is triggered either by the standard <keygen> tag, or by the keygen functions off the
window.crypto object. this is the same method used for generating software keys and certificates and is used by certificate authorities like verisign and thawte. (red hat certificate server also uses this method). the public key is sent to the server base-64-der-encoded with an (optional) signed challenge. are persistent objects that are stored on the token, such as private keys and certificates, creat...
...ser. if i have my smart card which has initial pin set at '9999', i insert it into my reader and download with my certificate (keygen completed), can i issue 'change password' from the firefox to set a new pin to the smart card? any scenario that you can give me similar to this process (a way to issue a certificate on an initialized new card)? yes. first open the tools/options/advanced/security
window in mozilla and click security devices. then select your pkcs #11 module, click view/edit, select the token, and click change password. for this to work, you must supply a c_setpin function that operates as cku_user. mozilla, thunderbird, and netscape products that use nss have different ui to get the the security devices dialog. to get a key into an initialized token, go to your local certificat...
NSS_3.12.3_release_notes.html
eturn revocation status of a cert bug 412468: modify certutil bug 417092: modify pkix_certselector api to return an error if cert was rejected. ...
...ead assignment in devutil.c::nssslotarray_clone() bug 465926: during import of pkcs #12 files bug 466180: ssl_configmpserversidcache with default parameters fails on {net bug 466194: cert_decodetruststring should take a const char * input trusts string. ...
...fails on
windows ce bug 467298: sql db code uses local cache on local file system bug 468279: softoken crash importing email cert into newly upgraded db bug 468532: trusted ca trust flags not being honored in cert_verifycert bug 469583: coverity: uninitialized variable used in sec_pkcs5createalgorithmid bug 469944: when built with microsoft compilers bug 470351: crlutil build fails on
windows because it calls undeclared isatty bug 471539: stop honoring digital signatures in certificates and crls based on weak hashes bug 471665: nss reports incorrect sizes for (aes) symmetric keys bug 471715: add cert to nssckbi to override rogue md5-collision ca cert bug 472291: crash in libpkix object leak tests due to null pointer dereferencing in pkix_build.c:3218. bug 472319: vfychain v...
... flag is set. bug 474532: softoken cannot import certs with empty subjects and non-empty nicknames bug 474777: wrong deallocation when modifying crl. bug 476126: cert_asciitoname fails when avas in an rdn are separated by '+' bug 477186: infinite loop in cert_getcertchainfromcert bug 477777: selfserv crashed in client/server tests. bug 478171: consolidate the coreconf/xxx.mk files for
windows bug 478563: add _msc_ver (the cl version) to coreconf. bug 478724: nss build fails on
windows since 20090213.1 nightly build. bug 478931: object leak in pkix_list_mergelists function bug 478994: allow softoken's fork check to be disabled bug 479029: ocsp response signature cert found invalid if issuer is trusted only for ssl bug 479601: wrong type (utf8 string) for email addresses in...
NSS Tools modutil
ment process generally begins with creating the keys and key database necessary to generate and manage certificates and the certificate database. this document discusses security module database management. for information on certificate database and key database management, see using the certificate database tool. availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and
windows nt 4.0. syntax to run the security module database tool, type the command modutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section. each command takes one option. each option may take zero or more arguments. to see a usage string, issue the command without options. options and arguments options specify an ...
...se this option only after manually testing each planned operation to check for warnings and to ensure that bypassing the prompts will cause no security lapses or loss of database integrity. arguments -dbdir directory specify the database directory in which to access or create security module database files. on unix, the security module database tool defaults to the user's netscape directory.
windows nt has no default directory, so -dbdir must be used to specify a directory. -dbprefix prefix specify the prefix used on the cert8.db and key3.db files (for example, my_cert8.db and my_key3.db). this option is provided as a special case. changing the names of the certificate and key databases is not recommended. -libfile library-file specify a path to the dll or other library file containing...
...un time with the directory relative to which files should be installed; for example, it may be the server's root directory or the netscape communicator root directory. the "%temp%" directory is created at the beginning of the installation and destroyed at the end. the purpose of "%temp%" is to hold executable files (such as setup programs) or files that are used by these programs. for example, a
windows installation might consist of a setup.exe installation program, a help file, and a .cab file containing compressed information. all these files could be installed in the temporary directory. files destined for the temporary directory are guaranteed to be in place before any executable file is run; they are not deleted until all executable files have finished. absolutepath specifies the desti...
... cipherenableflags{0x0000} files { crypto.dll { relativepath{ %root%/system32/crypto.dll } } setup.exe { executable relativepath{ %temp%/setup.exe } } } } win95::x86 { equivalentplatform { winnt::x86 } } } to install from the script, use the following command. the root directory should be the
windows root directory (for example, c:\\
windows, or c:\\winnt). c:\modutil> modutil -dbdir "c:\databases" -jar install.jar -installdir "c:/winnt" the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases. if communicator iscurrently running, you should exit communicator before continuing this...
JSAPI User Guide
sing spidermonkey and jsapi. what spidermonkey does the javascript engine compiles and executes scripts containing javascript statements and functions. the engine handles memory allocation for the objects needed to execute scripts, and it cleans up—garbage collects—objects it no longer needs. the word javascript may bring to mind features such as event handlers (like onclick), dom objects,
window.open, and xmlhttprequest. but in mozilla, all of these features are actually provided by other components, not the spidermonkey engine itself. spidermonkey provides a few core javascript data types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions to javascript code. br...
... functions, convert javascript data from one type to another, create objects, and so on. almost all jsapi functions require a jscontext * as the first argument, just like most <stdio.h> functions require a file *. global objects. lastly, the global object contains all the classes, functions, and variables that are available for javascript code to use. ...
... almost all jsapi functions require a jscontext * as the first argument, just like most <stdio.h> functions require a file *. global objects. lastly, the global object contains all the classes, functions, and variables that are available for javascript code to use. whenever javascript code does something like
window.open("http://www.mozilla.org/"), it is accessing a global property, in this case
window. jsapi applications have full control over what global properties scripts can see. the application starts out by creating an object and populating it with the standard javascript classes, like array and object. then it adds whatever custom classes, functions, and variables (like
window) the application wants to provide; see custom objects below. each time the application runs a js script (using, ...
...ontextprivate and js_getcontextprivate to associate application-specific data with a context. initializing built-in and global js objects for a complete list of built-in objects provided by spidermonkey, see js_initstandardclasses. the global object that an application provides to scripts largely determines what those scripts can do. for example, the firefox browser uses its own global object,
window. to change the global object for your application, call js_setglobalobject. creating and initializing custom objects in addition to using the engine's built-in objects, you will create, initialize, and use your own js objects. this is especially true if you are using the js engine with scripts to automate your application. custom js objects can provide direct program services, or they can serve...
Setting up an update server
firefox update. obtaining an update mar updates are served as mar files. there are two common ways to obtain a mar to use: download a prebuilt one, or build one yourself. downloading a mar prebuilt nightly mars can be found here on archive.mozilla.org. be sure that you use the one that matches your machine's configuration. for example, if you want the nightly mar from 2019-09-17 for a 64 bit
windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar. prebuilt mars for release and beta can be found here. beta builds are those with a b in the version string. after locating the desired version, the mars will be in the update directory. you want to use the mar labelled...
...x elsewhere. if you update the installation without moving it, attempts at further incremental builds will not work properly, and a clobber will be needed when building next. to move the installation, first call ./mach package, then you can either copy <obj dir>/dist/firefox to a new "install directory" elsewhere, or run the installer located in the <obj dir>/dist/install/sea. if you are running
windows and want the mozilla maintenance service to be used, there are a few additional steps to be taken here. first, the maintenance service needs to be "installed". most likely, a different maintenance service is already installed, probably at c:\program files (x86)\mozilla maintenance service\maintenanceservice.exe. backup that file to another location and replace it with <obj dir>/dist/bin/maintena...
...ete.mar, the file https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.checksums contains the sha512 for that file as well as for all the other win64 files that are part of that nightly release). if you've built your own mar, you can obtain its sha512 checksum by running the following command, which should work in linux, macos, or
windows in the mozillabuild environment: shasum --algorithm 512 <filename> on
windows, you can get the exact file size in bytes for your mar by right clicking on it in the file explorer and selecting properties. you'll find the correct size in bytes at the end of the line that begins "size", not the one that begins "size on disk". be sure to remove the commas when you paste this number into the xml fi...
...es/fileutils.jsm"); fileutils.getdir("updrootd", [], false).path once you have determined the update directory, close firefox, browse to the directory and remove the subdirectory called updates. next, you need to change the update url to point to the local xml file. this can be done most reliably with an enterprise policy. the policy file location depends on the operating system you are using. ...
Gecko states
is not determined. the check box is neither checked nor unchecked and is therefore in the third or mixed state. state_readonly the object is designated read-only. state_hottracked the object is hot-tracked by the mouse, which means that its appearance has changed to indicate that the mouse pointer is located over it. isn't used state_default this state represents the default button in a
window. state_expanded children of this object that have the role_outlineitem role are displayed. state_collapsed children of this object that have the role_outlineitem role are hidden. state_busy the control cannot accept input at this time. state_floating children "owned" not "contained" by parent state_checkable indicates scrolling or moving text or graphics. state_animated the object's a...
...lso set. if this second state is defined, then clients can communicate the information about the object to users. for example, a list box can have both state_invisible and state_offscreen set. in this case, the client application can communicate all items in the list to users. state_offscreen scrolled off state_sizeable the object can be resized. for example, a user could change the size of a
window by clicking the border with a mouse and dragging the mouse. state_moveable indicates that the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object w...
...d. state_important isn;t used. state_invalid indicates a validation failure. ...
...sed. state_invalid indicates a validation failure. ...
Implementation Details
introduction this article is a reference how gecko implements at apis. ...
...ction highlights special features of at apis implementation by gecko. unsupported features we do not support some at apis features. please refer to pages below for interesting at api: msaa ia2 at-spi differences with other applications this section provides information about implementation differences between gecko based applications and other applications. msaa at-spi how to find the content
window and load the document in xul-based clients, screen readers may need to find the content
window so that they know where to start grabbing the accessible tree, in order to load the current document into a buffer in their own process. refer to specific pages for interested at api. msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive technology's responsibility to watch for events tha...
...in addition, state_defunct is set on objects that should be released by the assistive technology. mutation events should be watched to invalidate the cache. ...
... to start grabbing the accessible tree, in order to load the current document into a buffer in their own process. refer to specific pages for interested at api. msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive technology's responsibility to watch for events that indicate when
windows or content subtrees are being destroyed, and to release all accessible objects related to that
window. in addition, state_defunct is set on objects that should be released by the assistive technology. mutation events should be watched to invalidate the cache. under msaa/ia2, watch for event_hide under atk/at-spi, watch for children-changed:remove to help developers in that regard, there is memory leak monitor, a firefox extension. ...
Feed content access API
romstream(), or directly from an url using parseasync(). the actual processing of the parsed feed is done by a method called handleresult() on the feedtestresultlistener object. ...
...rom an url using parseasync(). the actual processing of the parsed feed is done by a method called handleresult() on the feedtestresultlistener object. ...
...c(). the actual processing of the parsed feed is done by a method called handleresult() on the feedtestresultlistener object. ...
... of items in the feed by looking at the feed.items nsiarray. this array contains nsifeedentry objects that describe each feed item. we build the contents of the document by looking at the title, link, summary, and content properties for each item. the full url of the link is retrieved using the link's resolve() method. to initialize a fetch of the feed, we simply call fetch(url). this opens a new
window containing the feed contents, with each item's title a clickable link that takes you to the article itself. for details on each of the feed access interfaces, visit their respective reference pages. ...
XPCOM glue
ould not link against xpcom_core.lib. this is the case for xpcom components, because they are loaded into mozilla which already has full xpcom loaded and initialized. frozen linkage: standalone glue (no dll dependencies) note: support for locating a standalone glue was removed in gecko 6.0. use this when you have a custom application where you want to embed gecko to show webpages in your own
window. i.e. this linkage strategy is used when an embedder needs to bootstrap xpcom by finding a compatible gre on disk and loading it. in order to use xpcom, the embedding application first needs to find where the xpcom runtime is located. this is typically done using gre_getgrepathwithproperties. then, the code must call xpcomgluestartup, which will dynamically link against the xpcom runtime. only t...
...ternal linkage to frozen linkage. sample compiler/linker flags code compiled using xpcom headers should always #include "xpcom-config.h" from the sdk, to ensure that xpcom #defines are correct. ...
...ways #include "xpcom-config.h" from the sdk, to ensure that xpcom #defines are correct. ...
...t load (in optimized builds). in principle, #include "mozilla-config.h" should also work, if it's the first #include in .cpp, but preprocessor option is how it's usually included. for xulrunner 2.0, you also need to link against mozalloc. this is not a backwards-compatible change with 1.9.x and earlier. on linux and mac, add "-lmozalloc" exactly after "-lnspr4" in your linker invocation. on
windows, add "mozalloc.lib" after "nspr4.lib". please see xpcom glue without mozalloc to learn how to create xpcom components that aren't dependant on mozalloc, and thus are compatible with versions of xulrunner prior to 2.0. to link against xpcom using recent versions of the firefox sdk (at least version 42, but possibly earlier versions as well), you need to link against xul (libxul/xul.lib). to li...
Components.utils.createObjectIn
cope of the specified object's compartment. this function is made available as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor. note that this function is now mostly obsolete when you are using sandbox, because you can create an object in a different compartment using new. for example, to create a new object in the compartment identified by content
window: var newobject = new content
window.object(); but it is really needeed from firefox 30 onwards when trying to manipulate the dom
window. see details in https://blog.mozilla.org/addons/2014/04/10/changes-to-unsafe
window-for-the-add-on-sdk/. syntax var newobject = components.utils.createobjectin(obj, options); parameters obj an object indicating the compartment in which the new object sho...
...bj an object indicating the compartment in which the new object should be created; the new object will be created in the scope of this object's compartment. options an object containing a single option defineas, which determines the name of the object in the target compartment. return value a new object in the specified scope. ...
... option defineas, which determines the name of the object in the target compartment. return value a new object in the specified scope. ...
...e, value: value }; } var myobject = components.utils.createobjectin(my
window); var proplist = { name: genpropdesc("name"), date: genpropdesc("date"), id: genpropdesc("id"), func: genpropdesc(function() { alert("called func!"); }) }; object.defineproperties(myobject, proplist); components.utils.makeobjectpropsnormal(myobject); this sets up the new object in the scope of the object my
window, then adds properties by calling object.defineproperties(), then normalizes them by calling components.utils.makeobjectpropsnormal(). to create an object with a specified name, use defineas: var foo = components.utils.createobjectin(my
window, {defineas: "foo"}); now the target compartment's
window has a new global object named foo. ...
Components.utils.getWeakReference
om node) to verify the object is truly what you want. syntax weakref = components.utils.getweakreference(obj); parameters obj the object for which to obtain a weak reference. note: in gecko 11.0, this method was changed to throw an exception if obj is null. ...
...arameters obj the object for which to obtain a weak reference. note: in gecko 11.0, this method was changed to throw an exception if obj is null. in gecko 12.0, the previous behavior of silently failing has been restored. example in this example here, a weak reference to a
window is held. ...
...o throw an exception if obj is null. in gecko 12.0, the previous behavior of silently failing has been restored. example in this example here, a weak reference to a
window is held. and then later on it is matched in the array and used. ...
...j is null. in gecko 12.0, the previous behavior of silently failing has been restored. example in this example here, a weak reference to a
window is held. and then later on it is matched in the array and used. ...
nsIAccessNode
if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed. ...
...if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed. ...
... nsiaccessnode the last nsiaccessnode child. read only. obsolete since gecko 2.0 nextsiblingnode nsiaccessnode the next nsiaccessnode sibling. read only. obsolete since gecko 2.0 numchildren long the number of dom children for the dom node, which matches the number of nsiaccessnode children for this nsiaccessnode. read only. obsolete since gecko 2.0 owner
window voidptr the os
window handle for the
window this node is being displayed in. read only. native code only! obsolete since gecko 8.0 parentnode nsiaccessnode the parent nsiaccessnode. read only. obsolete since gecko 2.0 previoussiblingnode nsiaccessnode the previous nsiaccessnode sibling. read only. obsolete since gecko 2.0 rootdocument nsiaccessibled...
... ...
nsIAccessibleText
4 do not use in new code. boundary_line_start 5 boundary_line_end 6 boundary_attribute_range 7 coordinate type constants obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. constant value description coord_type_screen 0 coord_type_
window 1 methods addselection() void addselection( in long startoffset, in long endoffset ); parameters startoffset endoffset getattributerange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) get the accessible and start/end offsets around the given offset. this accessible get return the dom node and layout frame with the uniform attri...
... which to return its bounding box. the valid range is 0..length. x x coordinate of the bounding box of the referenced character. y y coordinate of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. coordtype specifies if the coordinates are relative to the screen or to the parent
window (see constants declared in nsiaccessiblecoordinatetype.constants). getoffsetatpoint() get the text offset at the given point, or return -1 if no character exists at that point. long getoffsetatpoint( in long x, in long y, in unsigned long coordtype ); parameters x the position's x value for which to look up the index of the character that is rendered on to the display at that point. y th...
...acter exists at that point. long getoffsetatpoint( in long x, in long y, in unsigned long coordtype ); parameters x the position's x value for which to look up the index of the character that is rendered on to the display at that point. y the position's y value for which to look up the index of the character that is rendered on to the display at that point. coordtype screen coordinates or
window coordinates (see constants declared in nsiaccessiblecoordinatetype). return value offset - index of the character under the given point or -1 if the point is invalid or there is no character under the point. getrangeextents() the virtual character after the last character of the represented text, that is the one at position length is a special case. it represents the current input position and w...
... which to return its bounding box. the valid range is 0..length. x x coordinate of the bounding box of the referenced character. y y coordinate of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. coordtype specifies if the coordinates are relative to the screen or to the parent
window (see constants declared in nsiaccessiblecoordinatetype.constants. getselectionbounds() void getselectionbounds( in long selectionnum, out long startoffset, out long endoffset ); parameters selectionnum startoffset endoffset gettext() string methods may need to return multibyte-encoded strings, since some locales can not be encoded using 16-bit chars. so this method might return utf-1...
nsIAlertsService
can be used to notify the user of something that does not require an immediate reaction. for example, it can be used to notify the user that their downloads are complete or that they have new mail. 1.0 66 introduced gecko 1.7 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) by default a message is displayed in a small
window that slides up from the bottom of the screen, holds there for a few seconds, then slides down. the specific appearance varies from platform to platform. note: prior firefox 22, the alerts service was only supported on
windows in gecko 1.7, had no effect on mac os x in gecko 1.8, but was fully supported in mac os x in gecko 1.9. note: since gecko 22, the notifications are provided by firefox an...
...ing cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification
window. note: if you are calling this function from javascript, you should wrap it in a try/catch because it can fail on mac os x prior to firefox 22. void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional ...
... getservice(components.interfaces...
... = cc['@mozilla.org/alerts-service;1'].getservice(ci.nsialertsservice); var notiflistener = { observe: function(asubject, atopic, adata) { console.error('incoming notification observer:', asubject, atopic, adata); if (atopic == 'alertclickcallback') { console.error('user clicked trying to throw click'); services.prompt.alert(services.wm.getmostrecent
window('navigator:firefox'), 'focus firefox', 'will now focus fireox and then focus the tab'); } else if (atopic == 'alertshow') { console.log('just showed notification'); } else if (atopic == 'alertfinished') { console.log('just alertfinished') } } }; as.showalertnotification('chrome://branding/content/icon64.png', 'stackoverflow - new messages', 'th...
nsIDOMParser
when you create a domparser from a privileged script, you can pass parameters to the constructor, more on that below. ...
...you don't need to do that. if you come across a situation when these matter, feel free to ask questions in mozilla.dev.tech.dom and update this documentation to mention these cases. when a domparser is instantiated by calling new domparser(), it inherits the calling code's principal (except that for chrome callers the principal is set to the null principal) and the documenturi and baseuri of the
window the constructor came from. if the caller has universalxpconnect privileges, it can pass parameters to new domparser(). if fewer than three parameters are passed, the remaining parameters will default to null. the first parameter is the principal to use; this overrides the default principal normally inherited. the second parameter is the documenturi to use. the third parameter is the baseuri to u...
...ow in the error console in parsing errors, in particular. supposedly, if you want to create objects that some particular set of unprivileged code will be able to access (see discussion in bug 565480). parsing a string once you've created a domparser object, you can use its parsefromstring method to parse xml or html as described in the web platform documentation. ...
...articular set of unprivileged code will be able to access (see discussion in bug 565480). parsing a string once you've created a domparser object, you can use its parsefromstring method to parse xml or html as described in the web platform documentation. ...
nsIDownloadManager
rivate); 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 nsidom
window aparent, in nsidownload adownload); obsolete since gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidom
window 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, in long long aen...
... 6 the download has been blocked, either by parental controls or the virus scanner determining that a file is infected and cannot be cleaned. download_scanning 7 the download is being scanned by a virus checking utility. download_dirty 8 a virus was detected in the download. the target will most likely no longer exist. download_blocked_policy 9
windows specific: request was blocked by zone policy settings. (see bug 416683) download_type_download 0 the download type used by adddownload. is the type for a "generic file download" according to the .idl file. methods adddownload() creates an nsidownload and adds it to the list of activities being managed by the download manager. note: adding a download doesn't automaticall...
...uraged since it could be removed at any time. try to avoid using it. called when the download manager front end is closed. useful for third party managers to let us know when they've closed. void onclose(); parameters none. 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 nsidom
window aparent, in nsidownload adownload ); parameters aparent the parent, or opener, of the front end. adownload a download to pass to the manager
window. useful if, for example, you want the
window to select a certain download. openprogressdialogfor() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some br...
...openprogressdialogfor() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. opens an individual progress dialog displaying progress for the download. void openprogressdialogfor( in nsidownload adownload, in nsidom
window aparent, in boolean acanceldownloadonclose ); parameters adownload the download object to display progress for, as returned by getdownload() or adddownload(). aparent the parent, or opener, of the front end. acanceldownloadonclose whether closing the dialog should cancel the download. pausedownload() pauses the specified download. void pausedownload( in unsigned long aid ); pa...
nsIDragService
ject. dragdrop_action_move 2 the drag and drop operation should move the object. dragdrop_action_link 4 the drag and drop operation should link the object. dragdrop_action_uninitialized 64 the action is not initialized. methods native code only!dragmoved programmatically changes the drag position of the drag session. this is used on mac and
windows to update the position of a popup being used as a drag image during the drag operation. it's not used on gtk, which handles the drag popup itself. [noscript] void dragmoved( in long ax, in long ay ); parameters ax the x coordinate to which to move the popup being dragged. ay the y coordinate to which to move the popup being dragged. enddragsession() tells the drag service to end ...
... ax the x coordinate to which to move the popup being dragged. ay the y coordinate to which to move the popup being dragged. enddragsession() tells the drag service to end a drag session. this is called when an external drag occurs. void enddragsession( in prbool adonedrag ); parameters adonedrag if adonedrag is true, the drag has finished, otherwise the drag has just left the
window. firedrageventatsource() obsolete since gecko 43 (firefox 43 / thunderbird 43 / seamonkey 2.40)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. fire a drag event at the source of the drag. this was changed in gecko 43, see the following section. void firedrageventatsource( in unsign...
...session with an array of transferables void invokedragsession( in nsidomnode adomnode, in nsisupportsarray atransferables, in nsiscriptableregion aregion, in unsigned long aactiontype ); parameters adomnode the source node on which the drag gesture was started. atransferables an array of transferables to be dragged. aregion a region containing rectangles for cursor feedback, in
window coordinates. aactiontype specified which of copy/move/link are allowed. invokedragsessionwithimage() starts a modal drag session using an image. a custom image may be specified using the aimage argument. if this is supplied, the aimagex and aimagey arguments specify the offset within the image where the cursor would be positioned. that is, when the image is drawn, it is offset up and left t...
...siscriptableregion aregion, in unsigned long aactiontype, in nsidomnode aimage, in long aimagex, in long aimagey, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer ); parameters adomnode the source node on which the drag gesture was started. atransferables an array of transferables to be dragged. aregion a region containing rectangles for cursor feedback, in
window coordinates. aactiontype specified which of copy/move/link are allowed. aimage image object. aimagex x position of image. aimagey y position of image. adragevent the drag gesture event that initiated the drag. adatatransfer a data transfer object that is available on the current drag session. invokedragsessionwithselection() start a modal drag session using the selection as the dr...
nsIFilePicker
rbird 17.0 / seamonkey 2.14) implemented by: @mozilla.org/filepicker;1. ...
...ilepicker dialog. if you would like to use another you must append it separately before the others you want to go into the drop down list. filtermask a combination of the filters you wish to use. you may or multiple filters together; for example filterall | filterhtml. init() initialize the file picker widget. the file picker is not valid until this method is called. void init( in nsidom
window parent, in astring title, in short mode ); parameters parent the nsidom
window parent. this dialog will be dependent on this parent. must be non-null. title the file picker dialog title. if this is null, the dialog will have the default title. mode one of the mode constants, indicating the type of picker to create. open() opens the file dialog asynchrounously. the passed in object...
...fox 57.0 / thunderbird 57.0 / seamonkey 2.54) displays the file picker dialog. the dialog is displayed modally. short show(); parameters none. return value one of the return constants. example here's an example: const nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(
window, "dialog title", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); fp.open(function (rv) { if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string. note that you usually won't // need to work with the string paths. var path = fp.file.path; // work with returned nsiloca...
...dfilters(nsifilepicker.filterall | nsifilepicker.filtertext); fp.open(function (rv) { if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string. note that you usually won't // need to work with the string paths. var path = fp.file.path; // work with returned nsilocalfile... } }); if your code is a component and
window is not defined, you can get one using nsi
windowmediator. when selecting multiple files: .... fp.init(
window, "dialog title", nsifilepicker.modeopenmultiple); .... var files = fp.files; var paths = []; while (files.hasmoreelements()) { var arg = files.getnext().queryinterface(components.interfaces.nsilocalfile).path; paths.push(arg); } ...
nsIMsgDBView
iewsorttypevalue 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 nsimessenger amessengerinstance, in nsimsg
window amsg
window, in nsimsgdbviewcommandupdater acommandupdater); void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean ...
...wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturiforviewindex(in nsmsgviewindex index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsg
window amsg
window, in nsimsgdbviewcommandupdater acommandupdater); void geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); ...
... the interface: nsmsgviewsortorder. viewflags other flags to be used. defined in the interface: nsmsgviewflagstype. return values acount upon return, the count variable may contain the number of messages loaded. close() close the current list of messages. void close(); init() initializes the database view for use. void init(in nsimessenger amessengerinstance, in nsimsg
window amsg
window, in nsimsgdbviewcommandupdater acommandupdater); parameters amessengerinstance amsg
window acommandupdater sort() sorts the currently loaded messages. void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); parameters sorttype a nsmsgviewsorttypevalue designating the sort type used. defined in the interface: nsmsgviews...
...sage at the given index. acstring geturiforviewindex(in nsmsgviewindex index); parameters index the index to get the url for>. nsmsgviewindex is defined as a unsigned long in mailnewstypes2.idl. return value a string containing the messages url. clonedbview() clones this nsimsgdbview. nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsg
window amsg
window, in nsimsgdbviewcommandupdater acommandupdater); parameters amessengerinstance the nsimessenger to use in the clone. amsg
window the nsimsg
window to use in the clone. acommandupdater the nsimsgdbviewcommandupdater to use in the clone. geturisforselection() gets an arry of urls for all currently selected messages. void geturisforselection([array, ...
XPCOM
defined in a dialect of idl called xpidl. xpcom itself provides a set of core components and classes, e.g. file and memory management, threads, basic data structures (strings, arrays, variants), etc. the majority of xpcom components are not part of this core set and are provided by other parts of the platform (e.g. gecko or necko) or by an application or even by an extension. accessing the
windows registry using xpcomwhen implementing
windows-specific functionality, it is often useful to access the
windows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in several mozilla products.aggregating the in-memory datasourcealready_a...
...c++ using visual studio. xpcom is mozilla’s cross platform component object model, similar to microsoft’s com technology. xpcom components can be implemented in c, c++, and javascript, and can be used from c, c++, and javascript. that means you can call javascript methods from c++ and vice versa. ...
...el, similar to microsoft’s com technology. xpcom components can be implemented in c, c++, and javascript, and can be used from c, c++, and javascript. that means you can call javascript methods from c++ and vice versa. for more information on the workings of xpcom look elsewhere.how to pass an xpcom object to a new
windowif you want to be able to call functions within an xpcom object from a xul
window's code, you can do so if you pass the xpcom object as one of the arguments to the
window creation method.interfacing with the xpcom cycle collectorthis is a quick overview of the cycle collector introduced into xpcom for firefox 3, including a description of the steps involved in modifying an existing c++ class to participate in xpcom cycle collection. if you have a class that you think is involv...
...ave changed in the interim.working with out parameterswrappedjsobjectwrappedjsobject is a property sometimes available on xpconnect wrappers. when available, it lets you access the javascript object hidden by the wrapper.xpcom abixpcom abi is the binary interface of xpcom components. while xpcom components written in a scripting language (such as javascript) can be moved across platforms (such as
windows and os x) without adaptation, those written in a compiled language (such as c++) require recompilation when moving to a different platform. often, compiled xpcom components are called 'binary' or 'native'.xpcom category image-sniffing-servicesin versions of firefox prior to firefox 3, extensions could add decoders for new image types. however, such decoders relied on servers sending correct mime...
Adding items to the Folder Pane
ata for the folder pane's display. this data is returned in the form of an array of folder-tree-items. listening for folder pane rebuilds every time the folder pane rebuilds, it fires a "maprebuild" event, which is the ideal opportunity for extensions to step in and modify the display data. ...
...this property is an array of folder-tree-items. ...
... } 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.nsipromptservice) .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: [], getprope...
...thus, our _insert function becomes _insert: function gne__insert() { // only insert our nodes into the "all" mode if (gfoldertreeview.mode != "all") return; gfoldertreeview._r...
Console messages - Firefox Developer Tools
which dom nodes are affected by the error. reflow events the web console also logs reflow events under the css category. a reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. reflows occur when a change has happened to a page that the browser thinks affects the layout. many events can trigger reflows, including: resizing the browser
window, activating pseudoclasses like :hover, or manipulating the dom in javascript. because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. by logging reflow events the web console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows ...
..."reflows". each message is labeled "reflow" and shows the time taken to execute the reflow. if the reflow is a synchronous reflow triggered from javascript, it also shows a link to the line of code that triggered the reflow. click the link to open the file in the debugger. synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser
window is resized or some javascript modifies an element's css — the layout is not recalculated immediately. instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). in this way the browser can save up a collection of invalidating changes and recalculate their effect at once. however, if some javascript code rea...
...me the browser repaints). in this way the browser can save up a collection of invalidating changes and recalculate their effect at once. however, if some javascript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. ...
... if some javascript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. for example, code like this will cause an immediate, synchronous, reflow, when it calls
window.getcomputedstyle(thing).height: var thing = document.getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight =
window.getcomputedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow. security the security messages shown in the web console help developers find potential or actual vulnerabilities...
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. ...
...ear 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. ...
...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 autocomplete suggestions page up p...
...te suggestions page up page up page up page down through autocomplete suggestions page down page down page down scroll to start of autocomplete suggestions home home home scroll to end of autocomplete suggestions end end end global shortcuts these shortcuts work in all tools that are hosted in the toolbox. command
windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 ...
Ambient Light Events - Web APIs
ast of the user interface (ui) or by changing the exposure necessary to take a picture. light events when the light sensor of a device detects a change in the light level, it notifies the browser of that change. when the browser gets such a notification, it fires a devicelightevent event that provides information about the exact light intensity (in lux units). ...
...vice detects a change in the light level, it notifies the browser of that change. when the browser gets such a notification, it fires a devicelightevent event that provides information about the exact light intensity (in lux units). this event can be captured at the
window object level by using the addeventlistener method (using the devicelight event name) or by attaching an event handler to the
window.ondevicelight property. ...
...exact light intensity (in lux units). this event can be captured at the
window object level by using the addeventlistener method (using the devicelight event name) or by attaching an event handler to the
window.ondevicelight property. once captured, the event object gives access to the light intensity expressed in lux through the devicelightevent.value property. ...
...intensity (in lux units). this event can be captured at the
window object level by using the addeventlistener method (using the devicelight event name) or by attaching an event handler to the
window.ondevicelight property. once captured, the event object gives access to the light intensity expressed in lux through the devicelightevent.value property. ...
AudioListener.dopplerFactor - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.forwardX - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.forwardY - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.forwardZ - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.positionX - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.positionY - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.positionZ - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.setOrientation() - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.setPosition() - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.speedOfSound - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.upX - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.upY - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener.upZ - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
AudioListener - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
BaseAudioContext.createPanner() - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
Using channel messaging - Web APIs
when the ifram...
...); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; input.value = ''; } we start off by creating a new message channel by using the messagechannel() constructor. when the iframe has loaded, we register an onclick handler for our button and an onmessage handler for messagechannel.port1. finally we transfer messagechannel.port2 to the iframe using the
window.postmessage method. let's explore how the iframe.content
window.postmessage line works in a bit more detail. it takes three arguments: the message being sent. for this initial port transfering this message could be an empty string but in this example it is set to 'init'. the origin the message is to be sent to. * means "any origin". an object, the ownership of which is transferred to the rec...
... communicate with the main page. when our button is clicked, we prevent the form from submitting as normal and then send the value entered in our text input to the iframe via the messagechannel. ...
...this saves the transferred port and register an onmessage handler that will be called each time a message is passed through our messagechannel. when a message is received from the main page we create a list item and insert it in the unordered list, setting the textcontent of the list item equal to the event's data attribute (this contains the act...
Client - Web APIs
client.url read only the url of the client as a string. ...
... client.url read only the url of the client as a string. ...
... client.url read only the url of the client as a string. ...
... client.url read only the url of the client as a string. specifications specification status comment service workersthe definition of 'client' in that specification. working draft initial definition. ...
Clients - Web APIs
the clients interface provides access to client objects. access it via self.clients within a service worker. methods clients.get() returns a promise for a client matching a given id. clients.matchall() returns a promise for an array of client objects. an options argument allows you to control the types of clients returned. clients.open
window() opens a new browser
window for a given url and returns a promise for the new
windowclient. clients.claim() allows an active service worker to set itself as the controller for all clients within its scope. examples the following example shows an existing chat
window or creates a new one when the user clicks a notification. addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await cli...
...er for all clients within its scope. examples the following example shows an existing chat
window or creates a new one when the user clicks a notification. ...
... working draft initial definition ...
...ready 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.open
window('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe definition of 'clients' in that specification. working draft initial definition ...
DOMHighResTimeStamp - Web APIs
urate to within 5 microseconds if the device supports it) elapsed between two points in time. the starting time can be either a specific time determined by the script for a site or app, or the time origin. the time origin the time origin is a standard time which is considered to be the beginning of the current document's lifetime. ...
... can be either a specific time determined by the script for a site or app, or the time origin. the time origin the time origin is a standard time which is considered to be the beginning of the current document's lifetime. it's calculated like this: if the script's global object is a
window, the time origin is determined as follows: if the current document is the first one loaded in the
window, the time origin is the time at which the browser context was created. if during the process of unloading the previous document which was loaded in the
window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable. if neither of the above de...
... if the script's global object is a workerglobalscope (that is, the script is running as a web worker), the time origin is the moment at which the worker was created. in all other cases, the time origin is undefined. methods this type has no methods. ...
...lobalscope (that is, the script is running as a web worker), the time origin is the moment at which the worker was created. in all other cases, the time origin is undefined. methods this type has no methods. usage notes you can get the current timestamp value—the time that has elapsed since the context was created—by calling the performance method now(). this method is available in both
window and worker contexts. example to determine how much time has elapsed since a particular point in your code, you can do something like this: let starttime = performance.now(); /* ... do things for a while ... */ let elapsedtime = performance.now() - starttime; upon completion, the value of elapsedtime is the number of milliseconds that have elapsed since you recorded the starting time in lin...
Detecting device orientation - Web APIs
ationevent is more commonly found in mobile devices. processing orientation events all you need to do in order to begin receiving orientation change is to listen to the deviceorientation event: note: gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. this is useful for overcoming some of the differences in device support for device orientation.
window.addeventlistener("deviceorientation", handleorientation, true); after registering your event listener (in this case, a javascript function called handleorientation()), your listener function periodically gets called with updated orientation data. the orientation event contains four values: deviceorientationevent.absolute deviceorientationevent.alpha deviceorientationevent.beta deviceorie...
... warning: chrome and firefox do not handle the angles the same way, so on some axes the direction are reversed. processing motion events motion events are handled the same way as the orientation even...
... 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. ...
...ick here to open this example in a new
window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers. warning: chrome and firefox do not handle the angles the same way, so on some axes the direction are reversed. processing motion events motion events are handled the same way as the orientation events except that they have their own event's name: devicemotion
window.addeventlistener("devicemotion", handlemotion, true); what's really changed are the information provided within the devicemotionevent object passed as a parameter of the handlemotion function. the motion event contains four properties: devicemotionevent.acceleration devicemotionevent.accelerationincludinggravity devicemotionevent.rotationrate devicemotionevent.interval motion values exp...
Element: mousewheel event - Web APIs
alue along the horizontal axis. when a user operates the device for scrolling to right, the value is negative. otherwise, i.e., if it's to left, the value is positive. the wheeldeltay attribute value indicates the wheeldelta attribute value along the vertical axis. the sign of the value is the same as the wheeldelta attribute value. internet explorer the value is the same as the delta value of
windows' wm_mousewheel or wm_mousehwheel. it means that if the mouse wheel doesn't support high resolution scroll, the value is 120 per notch. the value isn't changed even if the scroll amount of system settings is page scroll. chrome on
windows, the value is the same as the delta value of wm_mousewheel or wm_mousehwheel. and also, the value isn't changed even if the scroll amount of system settings i...
... on mac, the value is complicated. ...
... on mac, the value is complicated. the value is changed if the device that causes the native wheel event supports continuous scroll. if the device supports continuous scroll (e.g., trackpad of macbook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount. ...
...opers cannot know if mousewheel event is caused by which device. see webinputeventfactory::mousewheelevent of the chromium's source code for the detail. safari the value is always computed from accelerated scroll amount. this is really different from other browsers except chrome with continuous scroll supported device. opera (presto) the value is always the detail attribute value ✕ 40. on
windows, since the detail attribute value is computed from actual scroll amount, the value is different from other browsers except the scroll amount per notch is 3 lines in system settings or a page. on linux, the value is 80 or -80 per native wheel event. this is different from other browsers. on mac, the detail attribute value is computed from accelerated scroll amout of native event. the value is u...
GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events. the contextmenu event typically fires when the right mouse button is clicked on the
window. unless the default behavior is prevented, the browser context menu will activate. syntax target.oncontextmenu = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the
window. the context menu typically appears upon a right click. html <p>try openi...
.... only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the
window. the context menu typically appears upon a right click. 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. html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: f...
... living standard ...
... living standard ...
Working with the History API - Web APIs
ml5 introduced the pushstate() and replacestate() methods for add and modifying history entries, respectively. these methods work in conjunction with the onpopstate event. adding and modifying history entries using pushstate() changes the referrer that gets used in the http header for xmlhttprequest objects created after you change the state. the referrer will be the url of the document whose
window is this at the time of creation of the xmlhttprequest object. example of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exis...
...ox 4 / thunderbird 3.3 / seamonkey 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the passed object is serialized using json. starting in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), the object is serialized using the structured clone algorithm. this allows a wider variety of objects to be safely passed. in a sense, calling pushstate() is similar to setting
window.location = "#foo", in that both will also create and activate another history entry associated with the current document. but pushstate() has a few advantages: the new url can be any url in the same origin as the current url. in contrast, setting
window.location keeps you at the same document only if you modify only the hash. you don't have to change the url if you don't want to. in contrast...
... you can associate arbitrary data with your new history entry. ...
...er to load bar2.html or even check that bar2.html exists. suppose now that the user navigates to http://www.microsoft.com, then clicks the back button. at this point, the url bar will display http://mozilla.org/bar2.html. if the user now clicks back again, the url bar will display http://mozilla.org/foo.html, and totally bypass bar.html. the popstate event a popstate event is dispatched to the
window every time the active history entry changes. if the history entry being activated was created by a call to pushstate or affected by a call to replacestate, the popstate event's state property contains a copy of the history entry's state object. see
window.onpopstate for sample usage. reading the current state when your page loads, it might have a non-null state object. this can happen, for ex...
Intersection Observer API - Web APIs
ries received by the callback includes one entry for each target which reporting a change in its intersection status. check the value of the isintersecting property to see if the entry represents an element that currently intersects with the root. be aware that your callback is executed on the main thread. it should operate as quickly as possible; if anything time-consuming needs to be done, use
window.requestidlecallback(). also, note that if you specified the root option, the target must be a descendant of the root element. how intersection is calculated all areas considered by the intersection observer api are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. similarly, if the visible portion of ...
...ode(template, true)); // set up the observer for this box observeroptions.threshold = thresholdsets[i]; observers[i] = new intersectionobserver(intersectioncallback, observeroptions); observers[i].observe(document.queryselector("#" + boxid)); } // scroll to the starting position document.scrollingelement.scrolltop = wrapper.firstelementchild.getboundingclientrect().top +
window.scrolly; document.scrollingelement.scrollleft = 750; } intersectioncallback = (entries) => { entries.foreach((entry) => { let box = entry.target; let visiblepct = (math.floor(entry.intersectionratio * 100)) + "%"; box.queryselector(".topleft").innerhtml = visiblepct; box.queryselector(".topright").innerhtml = visiblepct; box.queryselector(".bottomleft").innerhtml = visib...
...ding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen. setting up first, we need to prepare some variables and install the observer. const numsteps = 20.0; let boxelement; let prevratio = 0.0; let increasingcolor = "rgba(40, 40, 190, ratio)"; let decreasingcolor = "rgba(190, 40, 40, ratio)"; // set things up
window.addeventlistener("load", (event) => { boxelement = document.queryselector("#box"); createobserver(); }, false); the constants and variables we set up here are: numsteps a constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0. prevratio this variable will be used to record what the visibility ratio was the last time a threshold was cross...
...ll apply to the target element when the visibility ratio is increasing. the word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured. decreasingcolor similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing. we call
window.addeventlistener() to start listening for the load event; once the page has finished loading, we get a reference to the element with the id "box" using queryselector(), then call the createobserver() method we'll create in a moment to handle building and installing the intersection observer. creating the intersection observer the createobserver() method is called once page load is complete to h...
KeyboardEvent - Web APIs
board layout while typing text in a different language. keyboardevent.location read only returns a number representing the location of the key on the keyboard or other input device. a list of the constants identifying the locations is shown above in keyboard locations. keyboardevent.metakey read only returns a boolean that is true if the meta key (on mac keyboards, the ⌘ command key; on
windows keyboards, the
windows key (⊞)) was active when the key event was generated. keyboardevent.repeat read only returns a boolean that is true if the key is being held down such that it is automatically repeating. keyboardevent.shiftkey read only returns a boolean that is true if the shift key was active when the key event was generated. methods this interface also inherits methods of its...
...mplementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keycode. warning: this attribute is deprecated; you should use keyboardevent.key instead, if available. events the following events are based on the keyboardevent type. they can be delivered to any object which implements globaleventhandlers, including element, document, and
window. in the list below, each event links to the documentation for the document handler for the event, which applies generally to all of the recipients. keydown a key has been pressed. keyup a key has been released. obsolete events keypress a key that normally produces a character value has been pressed. this event was highly device-dependent and is obsolete. you should not use it. usa...
...ss, and keyup. for most keys, gecko dispatches a sequence of key events like this: when the key is first pressed, the keydown event is sent. if the key is not a modifier key, the keypress event is sent. when the user releases the key, the keyup event is sent. special cases some keys toggle the state of an indicator light; these include keys such as caps lock, num lock, and scroll lock. on
windows and linux, these keys dispatch only the keydown and keyup events. on linux, firefox 12 and earlier also dispatched the keypress event for these keys. however, a limitation of the macos event model causes caps lock to dispatch only the keydown event. num lock was supported on some older laptop models (2007 models and older), but since then, macos hasn't supported num lock even on external key...
... keyup <<repeating until the user releases the key>> keyup in these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly. auto-repeat handling prior to gecko 5.0 before gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), keyboard handling was less consistent across platforms.
windows auto-repeat behavior is the same as in gecko 4.0 and later. mac after the initial keydown event, only keypress events are sent until the keyup event occurs; the inter-spaced keydown events are not sent. linux the event behavior depends on the specific platform. it will either behave like
windows or mac depending on what the native event model does. note: manually firing an event does not ...
LocalFileSystemSync - Web APIs
jects. about this document this document was last updated on march 2, 2012 and follows the w3c specifications (working draft) drafted on april 19, 2011. this specification is more or less abandonned, failing to get significant traction. basic concepts you can request access to a sandboxed file system by requesting localfilesystemsync object from within a web worker. ...
...ted on april 19, 2011. this specification is more or less abandonned, failing to get significant traction. basic concepts you can request access to a sandboxed file system by requesting localfilesystemsync object from within a web worker. the global methods in the
window object requestfilesystemsync() and resolvelocalfilesystemsyncurl() methods are exposed to the worker's global scope. calling
window.requestfilesystemsync() for creates new storage for your web app. ...
...emsync object from within a web worker. the global methods in the
window object requestfilesystemsync() and resolvelocalfilesystemsyncurl() methods are exposed to the worker's global scope. calling
window.requestfilesystemsync() for creates new storage for your web app. for more concepts, see the counterpart article for the asynchronous api. example //taking care of the browser-specific prefix
window.requestfilesystemsync =
window.requestfilesystemsync ||
window.webkitrequestfilesystemsync; // the first parameter defines the type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors. var fs = requestfilesystemsync(temporary, 1024*1024 /*1mb*/);...
...nsient storage that can be be removed by the browser at its discretion. persistent 1 storage that stays in the browser unless the user or the app expunges it. methods requestfilesystemsync() requests a file system where data should be stored. you access a sandboxed file system by requesting a localfilesystemsync object from within a web worker using this global method,
window.requestfilesystemsync(). [ research ] filesystemsync requestfilesystemsync( in unsigned short type, in unsigned long long size ); parameters type the storage type of the file system. the values can be either temporary or persistent. size the storage space—in bytes—that you need for your app. returns filesystemsync an object that represents the file system. exceptions this...
MessageEvent - Web APIs
channel messaging (see messageport.postmessage() and messageport.onmessage). ...
... channel messaging (see messageport.postmessage() and messageport.onmessage). ...
...properties this interface also inherits properties from its parent, event. messageevent.data read only the data sent by the message emitter. messageevent.origin read only a usvstring representing the origin of the message emitter. messageevent.lasteventid read only a domstring representing a unique id for the event. messageevent.source read only a messageeventsource (which can be a
windowproxy, messageport, or serviceworker object) representing the message emitter. messageevent.ports read only an array of messageport objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker). methods this interface also inherits methods from its parent, event. init...
...ge event. do not use this anymore — use the messageevent() constructor instead. examples in our basic shared worker example (run shared worker), we have two html pages, each of which uses some javascript to perform a simple calculation. the different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different
windows. the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. if the onmessage event is attached using addeventlistener, the port is manually started using its start(...
Navigator.onLine - Web APIs
onnected." therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. to learn more, see the html5 rocks article, working off the grid. in firefox and internet explorer, switching the browser to offline mode sends a false value. ...
... article, working off the grid. in firefox and internet explorer, switching the browser to offline mode sends a false value. until firefox 41, all other conditions return a true value; testing actual behavior on nightly 68 on
windows shows that it only looks for lan connection like chrome and safari giving false positives. you can see changes in the network state by listening for the events on
window.ononline and
window.onoffline. syntax online =
window.navigator.online; value online is a boolean true or false. example view a live example. ...
...ng actual behavior on nightly 68 on
windows shows that it only looks for lan connection like chrome and safari giving false positives. you can see changes in the network state by listening for the events on
window.ononline and
window.onoffline. syntax online =
window.navigator.online; value online is a boolean true or false. example view a live example. to check if you are online, query
window.navigator.online, as in the following example: if (navigator.online) { console.log('online'); } else { console.log('offline'); } if the browser doesn't support navigator.online the above example will always come out as false/undefined. ...
...ample view a live example. to check if you are online, query
window.navigator.online, as in the following example: if (navigator.online) { console.log('online'); } else { console.log('offline'); } if the browser doesn't support navigator.online the above example will always come out as false/undefined. to see changes in the network state, use addeventlistener to listen for the events on
window.online and
window.offline, as in the following example:
window.addeventlistener('offline', function(e) { console.log('offline'); });
window.addeventlistener('online', function(e) { console.log('online'); }); specifications specification status comment html living standardthe definition of 'navigator.online' in that specification. living standard initial defi...
PannerNode.distanceModel - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
PannerNode.maxDistance - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
PannerNode.panningModel - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
PannerNode.setOrientation() - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
PannerNode.setPosition() - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
PannerNode.setVelocity() - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
PannerNode - Web APIs
ound the boom box to see how the sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
... sound changes! note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
Screen Capture API - Web APIs
this stream can then be recorded or shared with others over the network. screen capture api concepts and usage the screen capture api is relatively simple to use. its sole method is mediadevices.getdisplaymedia(), whose job is to ask the user to select a screen or portion of a screen to capture in the form of a mediastream. ...
...ts.cursor a constraindomstring indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion. mediatrackconstraints.displaysurface a constraindomstring indicating what type of display surface is to be captured. the value is one of application, browser, monitor, or
window. mediatrackconstraints.logicalsurface indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). a value of true indicates a logical display surface is to be captured. mediatracksettings mediatracksettings.cursor a string which indicates whether or not the display surface ...
...cates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. the value is one of always, motion, or never. mediatracksettings.displaysurface a string indicating what type of display surface is currently being captured. the value is one of application, browser, monitor, or
window. mediatracksettings.logicalsurface a boolean value which is true if the video being captured doesn't directly correspond to a single onscreen display area. mediatracksupportedconstraints mediatracksupportedconstraints.cursor a boolean which is true if the user agent and device support the mediatrackconstraints.cursor constraint. mediatracksupportedconstraints.displaysurface a boolean wh...
...rovide the value for the cursor property for the settings and constraints. the possible values are always, motion, and never. displaycapturesurfacetype an enumerated string type which is used to identify the kind of display surface to capture. this type is used for the displaysurface property in the constraints and settings objects, and has the possible values application, browser, monitor, and
window. feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow) can specify a desire to use the screen capture api using the policy control directive display-capture: <iframe allow="display-capture" src="/some-other-document.html"> the default allow list is self, which lets the any content within the document use ...
SubtleCrypto.decrypt() - Web APIs
lgorithm parameters of invalid sizes, or there was an error decrypting the ciphertext). supported algorithms the decrypt() method supports the same algorithms as the encrypt() method. examples note: you can try the working examples on github. rsa-oaep this code decrypts ciphertext using rsa-oaep. see the complete code on github. ...
...e code on github. function decryptmessage(privatekey, ciphertext) { return
window.crypto.subtle.decrypt( { name: "rsa-oaep" }, privatekey, ciphertext ); } aes-ctr this code decrypts ciphertext using aes in ctr mode. note that counter must match the value that was used for encryption. see the complete code on github. function decryptmessage(key, ciphertext) { return
window.crypto.subtle.decrypt( { name: "aes-ctr", counter, length: 64 }, key, ciphertext ); } aes-cbc this code decrypts ciphertext using aes in cbc mode. note that iv must match the value that was used for encryption. see the complete code on github. ...
...hub. function decryptmessage(key, ciphertext) { return
window.crypto.subtle.decrypt( { name: "aes-ctr", counter, length: 64 }, key, ciphertext ); } aes-cbc this code decrypts ciphertext using aes in cbc mode. note that iv must match the value that was used for encryption. see the complete code on github. function decryptmessage(key, ciphertext) { return
window.crypto.subtle.decrypt( { name: "aes-cbc", iv: iv }, key, ciphertext ); } aes-gcm this code decrypts ciphertext using aes in gcm mode. note that iv must match the value that was used for encryption. see the complete code on github. ...
...omplete code on github. function decryptmessage(key, ciphertext) { return
window.crypto.subtle.decrypt( { name: "aes-cbc", iv: iv }, key, ciphertext ); } aes-gcm this code decrypts ciphertext using aes in gcm mode. note that iv must match the value that was used for encryption. see the complete code on github. function decryptmessage(key, ciphertext) { return
window.crypto.subtle.decrypt( { name: "aes-gcm", iv: iv }, key, ciphertext ); } specifications specification status comment web cryptography apithe definition of 'subtlecrypto.decrypt()' in that specification. recommendation initial definition. ...
SubtleCrypto.generateKey() - Web APIs
d: syntaxerror raised when the result is a cryptokey of type secret or private but keyusages is empty. syntaxerror raised when the result is a cryptokeypair and its privatekey.usages attribute is empty. examples note: you can try the working examples on github. rsa key pair generation this code generates an rsa-oaep encryption key pair. see the complete code on github. ...
...-oaep encryption key pair. see the complete code on github. let keypair =
window.crypto.subtle.generatekey( { name: "rsa-oaep", moduluslength: 4096, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256" }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair. see the complete code on github. let keypair =
window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ); hmac key generation this code generates an hmac signing key. see the complete code on github. ...
..." }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair. see the complete code on github. let keypair =
window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ); hmac key generation this code generates an hmac signing key. see the complete code on github. let key =
window.crypto.subtle.generatekey( { name: "hmac", hash: {name: "sha-512"} }, true, ["sign", "verify"] ); aes key generation this code generates an aes-gcm encryption key. see the complete code on github. ...
... namedcurve: "p-384" }, true, ["sign", "verify"] ); hmac key generation this code generates an hmac signing key. see the complete code on github. let key =
window.crypto.subtle.generatekey( { name: "hmac", hash: {name: "sha-512"} }, true, ["sign", "verify"] ); aes key generation this code generates an aes-gcm encryption key. see the complete code on github. let key =
window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256 }, true, ["encrypt", "decrypt"] ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.generatekey()' in that specification. recommendation initial definition. ...
SubtleCrypto.sign() - Web APIs
mplete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await
window.crypto.subtle.sign( "rsassa-pkcs1-v1_5", privatekey, encoded ); rsa-pss this code fetches the contents of a text box, encodes it for signing, and signs it with a private key. see the complete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { const messagebox = document.qu...
...he complete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { const messagebox = document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await
window.crypto.subtle.sign( { name: "rsa-pss", saltlength: 32, }, privatekey, encoded ); ecdsa this code fetches the contents of a text box, encodes it for signing, and signs it with a private key. see the complete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { const...
... the complete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { const messagebox = document.queryselector(".ecdsa #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await
window.crypto.subtle.sign( { name: "ecdsa", hash: {name: "sha-384"}, }, privatekey, encoded ); hmac this code fetches the contents of a text box, encodes it for signing, and signs it with a secret key. see the complete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { ...
...e the complete source code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation. */ function getmessageencoding() { const messagebox = document.queryselector(".hmac #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await
window.crypto.subtle.sign( "hmac", key, encoded ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.sign()' in that specification. recommendation initial definition. ...
SubtleCrypto.verify() - Web APIs
message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. */ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await
window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ? "valid" : "invalid"); } rsa-pss this code uses a public key to verify a signature. see the complete code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation. */ function getmessageencoding() { const...
...oded message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. */ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await
window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ? "valid" : "invalid"); } ecdsa this code uses a public key to verify a signature. see the complete code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation. */ function...
...ncoded message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. */ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await
window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ? "valid" : "invalid"); } hmac this code uses a secret key to verify a signature. see the complete code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation. */ fu...
...e encoded message-to-sign and verify it against the stored signature. * if it checks out, set the "valid" class on the signature. * otherwise set the "invalid" class. */ async function verifymessage(key) { const signaturevalue = document.queryselector(".hmac .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await
window.crypto.subtle.verify( "hmac", key, signature, encoded ); signaturevalue.classlist.add(result ? "valid" : "invalid"); } specifications specification status comment web cryptography apithe definition of 'subtlecrypto.verify()' in that specification. recommendation initial definition. ...
TextEncoder.prototype.encodeInto() - Web APIs
ead: ' + encodedresults.read + ' | bytes written: ' + encodedresults.written + ' | encoded result: ' + utf8; polyfill the polyfill below may be a bit long because of the switch cases and utilization of native textencoder.prototype.encode in safari when available, but it is well worth the length because of the gains in performance. ...
...e switch cases and utilization of native textencoder.prototype.encode in safari when available, but it is well worth the length because of the gains in performance. ...
...rth the length because of the gains in performance. ...
... break; } default: break putchars; } //read = read + ((char >>> 6) !== 2) |0; u8arr[i] = char; } return {"written": i, "read": inputlength < read ? ...
Web audio spatialization basics - Web APIs
object. this represents the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. the pannernode can then calculate its sound position relative to the position of the listener. ...
... the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. the pannernode can then calculate its sound position relative to the position of the listener. ...
...are facing. they remain static. the pannernode can then calculate its sound position relative to the position of the listener. let's create our context and listener and set the listener's position to emulate a person looking into our room: const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); const listener = audioctx.listener; const posx =
window.innerwidth/2; const posy =
window.innerheight/2; const posz = 300; listener.positionx.value = posx; listener.positiony.value = posy; listener.positionz.value = posz-5; we could move the listener left or right using positionx, up or down using positiony, or in or out of the room using positionz. here we are setting the listener to be in the middle of the viewport and slightly in front of our bo...
...w we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released: // for each of our controls, move the boombox and change the position values movecontrols.foreach(function(el) { let moving; el.addeventlistener('mousedown', function() { let direction = this.dataset.control; if (moving && moving.frameid) {
window.cancelanimationframe(moving.frameid); } moving = moveboombox(direction); }, false);
window.addeventlistener('mouseup', function() { if (moving && moving.frameid) {
window.cancelanimationframe(moving.frameid); } }, false) }) summary hopefully, this article has given you an insight into how web audio spatialization works, and what each o...
Using the Web Speech API - Web APIs
s a main controller interface for this — speechrecognition — plus a number of closely-related interfaces for representing grammar, results, etc. generally, the default speech recognition system available on the device will be used for the speech recognition — most modern oses have a speech recognition system for issuing voice commands. think about dictation on macos, siri on ios, cortana on
windows 10, android speech, etc. note: on some browsers, like chrome, using speech recognition on a web page involves a server-based recognition engine. your audio is sent to a web service for recognition processing, so it won't work offline. demo to show simple usage of web speech recognition, we've written a demo called speech color changer. when the screen is tapped/clicked, you can say an html ...
...oad) 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. browser support support for web speech api speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: firefox desktop and mobile support it in gecko 42+ (
windows)/44+, without prefixes, and it can be turned on by flipping the media.webspeech.synth.enabled flag to true in about:config. firefox os 2.5+ supports it, by default, and without the need for any permissions. chrome for desktop and android have supported it since around version 33, without prefixes. html and css the html and css are again pretty trivial, simply containing a title,...
...l><input type="range" min="0" max="2" value="1" step="0.1" id="pitch"> <div class="pitch-value">1</div> <div class="clearfix"></div> </div> <select> </select> </form> javascript let's investigate the javascript that powers this app. ...
... </select> </form> javascript let's investigate the javascript that powers this app. setting variables first of all, we capture references to all the dom elements involved in the ui, but more interestingly, we capture a reference to
window.speechsynthesis. this is api's entry point — it returns an instance of speechsynthesis, the controller interface for web speech synthesis. ...
Web Workers API - Web APIs
ng can be performed in a separate thread, allowing the main (usually the ui) thread to run without being blocked/slowed down. web workers concepts and usage a worker is an object created using a constructor (e.g. worker()) that runs a named javascript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current
window. this context is represented by either a dedicatedworkerglobalscope object (in the case of dedicated workers - workers that are utilized by a single script), or a sharedworkerglobalscope (in the case of shared workers - workers that are shared between multiple scripts). you can run whatever code you like inside the worker thread, with some exceptions. for example, you can't directly manipulate t...
... the case of dedicated workers - workers that are utilized by a single script), or a sharedworkerglobalscope (in the case of shared workers - workers that are shared between multiple scripts). you can run whatever code you like inside the worker thread, with some exceptions. for example, you can't directly manipulate the dom from inside a worker, or use some default methods and properties of the
window object. but you can use a large number of items available under
window, including websockets, and data storage mechanisms like indexeddb. see functions and classes available to workers for more details. data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage event handl...
... long as those workers are hosted within the same origin as the parent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null. in addition to dedicated workers, there are other types of worker: shared workers are workers that can be utilized by multiple scripts running in different
windows, iframes, etc., as long as they are in the same domain as the worker. they are a little more complex than dedicated workers — scripts must communicate via an active port. see sharedworker for more details. serviceworkers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). they are intended, among other things, to enable the creati...
...bstracts properties and methods common to all kind of workers (i.e. worker or sharedworker). worker represents a running worker thread, allowing you to pass messages to the running worker code. workerlocation defines the absolute location of the script executed by the worker. sharedworker represents a specific kind of worker that can be accessed from several browsing contexts, being several
windows, iframes or even workers. workerglobalscope represents the generic scope of any worker (doing the same job as
window does for normal web content). different types of worker have scope objects that inherit from this interface and add more specific features. dedicatedworkerglobalscope represents the scope of a dedicated worker, inheriting from workerglobalscope and adding some dedicated featur...
XRSession.requestAnimationFrame() - Web APIs
the specified callback is executed once before the next repaint; if you wish for it to be executed for the following repaint, you must call requestanimationframe() again. this can be done from within the callback itself. the callback takes two parameters as inputs: an xrframe describing the state of all tracked objects for the session, and a time stamp you can use to compute any animation updates needed. you can cancel a previously scheduled animation by calling cancelanimationframe(). ...
... the callback takes two parameters as inputs: an xrframe describing the state of all tracked objects for the session, and a time stamp you can use to compute any animation updates needed. you can cancel a previously scheduled animation by calling cancelanimationframe(). note: despite the obvious similarities between these methods and the global requestanimationframe() function provided by the
window interface, you must not treat these as interchangeable. there is no guarantee that the latter will work at all while an immersive xr session is underway. syntax requestid = xrsession.requestanimationframe(animationframecallback); parameters animationframecallback a function which is called before the next repaint in order to allow you to update and render the xr scene based on elapsed ...
...wport = xrwebgllayer.getviewport(xrview) gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height) // webgl draw calls will now be rendered into the appropriate viewport. } }) }) the following example was taken directly from the spec draft. this example demonstrates a design pattern that ensures seamless transition between non-immersive animations created via
window.requestanimationframe and immersive xr animations. let xrsession = null function on
windowanimationframe(time) {
window.requestanimationframe(on
windowanimationframe) // this may be called while an immersive session is running on some devices, // such as a desktop with a tethered headset. to prevent two loops from // rendering in parallel, skip drawing in this one until the session ends.
...ion = null function on
windowanimationframe(time) {
window.requestanimationframe(on
windowanimationframe) // this may be called while an immersive session is running on some devices, // such as a desktop with a tethered headset. to prevent two loops from // rendering in parallel, skip drawing in this one until the session ends. if (!xrsession) { renderframe(time, null) } } // the
window animation loop can be started immediately upon the page loading.
window.requestanimationframe(on
windowanimationframe) function onxranimationframe(time, xrframe) { xrsession.requestanimationframe(onxranimationframe) renderframe(time, xrframe) } function renderframe(time, xrframe) { // shared rendering logic. } // assumed to be called by a user gesture event elsewhere in code. function sta...
<color> - CSS: Cascading Style Sheets
of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module. they are now deprecated. for use on public web pages. activeborder active
window border. activecaption active
window caption. should be used with captiontext as foreground color. appworkspace background color of multiple document interface. background desktop background. buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border. buttonshadow the color of the border awa...
...r facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border. buttonshadow the color of the border away from the light source for 3-d elements that appear 3-d due to that layer of surrounding border. captiontext text in caption, size box, and scrollbar arrow box. should be used with the activecaption background color. inactiveborder inactive
window border. inactivecaption inactive
window caption. should be used with the inactivecaptiontext foreground color. inactivecaptiontext color of text in an inactive caption. should be used with the inactivecaption background color. infobackground background color for tooltip controls. should be used with the infotext foreground color. infotext text color for tooltip controls. s...
...g border. threedlightshadow the color of the darker (generally inner) of the two borders facing the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border. threedshadow the color of the lighter (generally inner) of the two borders away from the light source for 3-d elements that appear 3-d due to two concentric layers of surrounding border.
window window background. should be used with the
windowtext foreground color.
windowframe
window frame.
windowtext text in
windows. should be used with the
window background color. mozilla system color extensions -moz-buttondefault the border color that goes around buttons that represent the default action for a dialog box. -moz-buttonhoverface the background color of a...
... with the -moz-fieldtext foreground color. in gecko versions prior to 1.9, use -moz-field. see also -moz-eventreerow. -moz-win-communicationstext should be used for text in objects with -moz-appearance: -moz-win-communications-toolbox;. -moz-win-mediatext should be used for text in objects with -moz-appearance: -moz-win-media-toolbox. -moz-win-accentcolor used to access the
windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc. -moz-win-accentcolortext used to access the color of text placed over the
windows 10 custom accent color in the start menu, taskbar, title bars, etc. mozilla color preference extensions -moz-activehyperlinktext user's preference for text color of active links. should be used with the default ...
transition-delay - CSS: Cascading Style Sheets
roperty: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top co...
...-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-delay: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top col...
...-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:2s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-delay: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top col...
... working draft initial definition ...
transition-duration - CSS: Cascading Style Sheets
width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top ...
...y: width height background-color font-size left top transform -webkit-transform color; transition-duration:1s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top ...
...y: width height background-color font-size left top transform -webkit-transform color; transition-duration:2s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid =
window.setinterval(updatetransition, 7000); transition-duration: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top ...
... working draft initial definition ...
DOM onevent handlers - Developer guides
t access any data from the event object, you can leave out the event when calling onclick(). this continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling stoppropagation() on the event object itself. non-element objects event handlers can also be set with properties on non-element objects that generate events, like
window, document, xmlhttprequest, and others. for example, for the progress event on instances of xmlhttprequest: const xhr = new xmlhttprequest(); xhr.onprogress = function() { … }; html onevent attributes html elements have attributes named onevent which can be used to register a handler for an event directly within the html code. when the element is built from the html, the value of its onevent ...
...(the html specification names these: onblur, onerror, onfocus, onload, and onscroll.) event handler's parameters, this binding, and the return value when the event handler is specified as an html attribute, the specified code is wrapped into a function with the following parameters: event — for all event handlers except onerror. event, source, lineno, colno, and error for the oner...
...sing algorithm" in the html specification. when the event handler is invoked tbd (non-capturing listener) terminology the term event handler may refer to: any function or object that is registered to be notified of events or more specifically, to the mechanism of registering event listeners via on… attributes in html or properties in web apis, such as <button onclick="alert(this)"> or
window.onload = function() { … }. when discussing the various methods of listening to events: event listener refers to a function or object registered via eventtarget.addeventlistener() event handler refers to a function registered via on… attributes or properties specifications specification status comment html living standardthe definition of 'event handlers' i...
...ving standardthe definition of 'event handlers' in that specification. living standard html5the definition of 'event handlers' in that specification. recommendation browser compatibility detecting the presence of event handler properties you can detect the presence of an event handler property with the javascript in operator. for example: if ("onsomenewfeature" in
window) { /* do something amazing */ } event handlers and prototypes you can't set or access the values of any idl-defined attributes on dom prototype objects. that means you can't, for example, change
window.prototype.onload. in the past, event handlers (onload, etc.) weren't implemented as idl attributes in gecko, so you were able to do this for those. now you can't. this improves compatibility. ...
Using the application cache - HTML: Hypertext Markup Language
cation cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache. subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). in addition, the browser also sends a checking event to the
window.applicationcache object, and fetches the manifest file, following the appropriate http caching rules. if the currently-cached copy of the manifest is up-to-date, the browser sends a noupdate event to the applicationcache object, and the update process is complete. note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows ...
...nd clearing the offline cache in chrome you can clear the offline cache by selecting "clear browsing data..." in the preferences or by visiting chrome://appcache-internals/. safari has a similar "empty cache" setting in its preferences but a browser restart may also be required. in firefox, the offline cache data is stored separately from the firefox profile—next to the regular disk cache:
windows vista/7: c:\users\<username>\appdata\local\mozilla\firefox\profiles\<salt>.<profile name>\offlinecache mac/linux: /users/<username>/library/caches/firefox/profiles/<salt>.<profile name>/offlinecache in firefox the current status of the offline cache can be inspected on the about:cache page (under the "offline cache device" heading). the offline cache can be cleared for each site separately us...
...ut not yet activated using the swapcache() method. obsolete the application cache group is now obsolete. testing for updates to the cache manifest you can programmatically test to see if an application has an updated cache manifest file, using javascript. since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test
window.applicationcache.status. function onupdateready() { console.log('found new version!'); }
window.applicationcache.addeventlistener('updateready', onupdateready); if(
window.applicationcache.status ===
window.applicationcache.updateready) { onupdateready(); } to manually start testing for a new manifest file, you can use
window.applicationcache.update(). gotchas never access cached files b...
... parameters in the hash part of the link, such as other-cached-page.html#whatever?parametername=value. when applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. you must update the cache manifest file itself before the browser retrieves and uses the updated files. you can do this programmatically using
window.applicationcache.swapcache(), though resources that have already been loaded will not be affected. to make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal. it's a good idea to set expires headers on your web server for *.appcache files to expire immediately. this avoids the risk of caching manifest files. for example, in apache you can spe...
User-Agent - HTTP
ings, see the firefox user agent string reference. the ua string of firefox is broken down into 4 components: mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the browser is mozilla-compatible. for historical reasons, almost every browser today sends it. platform describes the native platform the browser is running on (
windows, mac, linux, android, etc.), and if it's a mobile phone. firefox os phones simply say mobile — the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. rv:geckoversion indicates the release version of gecko (such as "17.0"). in recent browsers, geckoversion is the same as firefoxversion. gecko/geckotrail indicates ...
...examples. rv:geckoversion indicates the release version of gecko (such as "17.0"). in recent browsers, geckoversion is the same as firefoxversion. gecko/geckotrail indicates that the browser is based on gecko. (on desktop, geckotrail is always the fixed string 20100101.) firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "17.0"). examples mozilla/5.0 (
windows nt 6.1; win64; x64; rv:47.0) gecko/20100101 firefox/47.0 mozilla/5.0 (macintosh; intel mac os x x.y; rv:42.0) gecko/20100101 firefox/42.0 chrome ua string the chrome (or chromium/blink-based engines) user agent string is similar to firefox’s. for compatibility, it adds strings like khtml, like gecko and safari. examples mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko...
... opera ua string the opera browser is also based on the blink engine, which is why it almost looks the same, but adds "opr/<version>". ...
.../10.00 opera/9.60 (
windows nt 6.0; u; en) presto/2.1.1 safari ua string in this example, the user agent string is mobile safari’s version. it contains the word "mobile". ...
Web audio codec guide - Web media technologies
btain a patent license through via licensing [1] due to patent issues, firefox does not directly support aac. instead, firefox relies upon a platform's native support for aac. this capability was introduced on each platform in different firefox releases: aac support in firefox using external library, by platform platform first firefox version with aac support
windows (vista and later) 22 android 20 linux (depends on gstreamer) 26 macos 35 [2] chrome supports aac only in mp4 containers, and only supports aac's main profile. in addition, aac is not available in chromium builds. alac (apple lossless audio codec) the apple lossless audio codec (alac or apple lossless) is a lossless codec developed by apple. after i...
...april 16, 2017; now free to use [1] for patent reasons, firefox did not directly support mp3 prior to version 71; instead, platform-native libraries were used to support mp3. this capability was introduced on each platform in different firefox releases: mp3 support with external library, by platform, in firefox platform first firefox version with mp3 support
windows (vista and later) 22 android 20 linux (depends on gstreamer) 26 macos 35 opus the opus audio format was created by the xiph.org foundation as a fully open audio format; it has been standardized by ietf as rfc 6716. it's a good general-purpose audio codec that can efficiently handle both low-complexity audio such as speech as well as music and other ...
...he format used while encoding the audio. a few popular options: ffmpeg arguably the best-known and most widely regarded open source codec packages available, ffmpeg supports the majority of the most popular audio formats and provides command-line tools and libraries for encoding, decoding, and performing format conversions of both audio and video. binaries are available for macos, linux, and
windows. handbrake a highly popular open source front-end to ffmpeg which adds a graphical user interface that makes it much easier to control the wide variety of options ffmpeg offers while encoding audio and/or video. binaries are available for macos, linux, and
windows. audacity an open source audio editor that supports loading audio from many different formats, editing, filtering, and adjusting ...
...t much easier to control the wide variety of options ffmpeg offers while encoding audio and/or video. binaries are available for macos, linux, and
windows. audacity an open source audio editor that supports loading audio from many different formats, editing, filtering, and adjusting the audio, and saving it back out in either the original format or a new format. available for macos, linux, and
windows. lame a high quality open source mp3 encoder with support for cbr, abr, and vbr encoding as well as a variety of other options. distributed only in source form by the lame project, but can be installed using homebrew or similar tools. ...
Add to Home screen - Progressive web apps (PWAs)
o do as a developer to allow your users to take advantage of it. why a2hs? a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. part of this is the simple gesture of accessing an app by tapping its icon on your home screen, and then having it appear neatly in its own
window. a2hs makes this possible. what browsers support a2hs? a2hs is supported in all mobile browsers, except ios webview. it's also supported in some chromium desktop browsers. firefox has had mobile support since v58 and is working on desktop support. see caniuse.com for exact details. how do you use it? we've written a very simple example web site (see our demo live, and also see the source co...
...sets using the cache api, and serve them from the cache instead of the network using the code in the sw.js file. a2hs on desktop while originally intended to improve user experience on mobile oses, there is movement to make pwas installable on desktop platforms too. note: at the time of writing, the functionality described below was only supported in newer versions of chrome — by default on
windows, and behind the #enable-desktop-pwas flag on macos. adding an install button to make our pwa installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture: <button class="add-button">add to home screen</button> we then gave it some...
... display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display = 'none'; we hide the button initially because the pwa will not be available for install until it follows the a2hs criteria. when this happens, supporting browsers will fire a beforeinstallprompt event. we can then use a handler like the one below to handle the installation:
window.addeventlistener('beforeinstallprompt', (e) => { // prevent chrome 67 and earlier from automatically showing the prompt e.preventdefault(); // stash the event so it can be triggered later. deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; addbtn.addeventlistener('click', (e) => { // hide our user interface that shows...
...mpt event object. set deferredprompt to null since it is no longer needed. so when the button is clicked, the install prompt appears. if the user selects install, the app is installed (available as standalone desktop app), and the install button no longer shows (the onbeforeinstallprompt event no longer fires if the app is already installed). 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. note: the code for this section was mostly taken from app install banners/add to home screen by pete lepage. ...
Secure contexts - Web security
many web apis and features are accessible only in a secure context. the primary goal of secure contexts is to prevent mitm attackers from accessing powerful apis that could further compromise the victim of an attack. why should some features be restricted? some apis on the web are very powerful, giving an attacker the ability to do the following and more: invade a user's privacy. get low-level access to a user's computer. get access to data such as user credentials. ...
...omputer. get access to data such as user credentials. when is a context considered secure? a context is considered secure when it meets certain minimum standards of authentication and confidentiality defined in the secure contexts specification. ...
... be in a secure context when it is the active document of a top-level browsing context (basically, a containing
window or tab) that is a secure context. for example, even for a document delivered over tls within an <iframe>, its context is not considered secure if it has an ancestor that was not also delivered over tls. 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. that’s because the determination of whether or not a particular document is in a secure context is based only on considering it within the top-level browsing context with which it is associated — and not whether a non-secure context happ...
... }); } specifications specification status comment secure contexts candidate recommendation editor’s draft ...
Cross-domain Content Scripts - Archive of obsolete content
file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe =
window.document.getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.content
window.document.getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the add-on should successfully retrieve the iframe's content...
... ...
...h[0].$; } finally, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://datapoint.metoffice.gov.uk"] } content permissions and unsafe
window if you use "cross-domain-content", then javascript values in content scripts will not be available from pages. suppose your content script includes a line like: // content-script.js: unsafe
window.mycustomapi = function () {}; if you have included the "cross-domain-content" key, when the page script tries to access mycustomapi this will result in a "permission denied" exception. ...
Communicating using "port" - Archive of obsolete content
sent from the other side, use port.on() messages are asynchronous: that is, the sender does not wait for a reply from the recipient but just emits the message and continues processing. here's a simple add-on that sends a message to a content script using port: var tabs = require("sdk/tabs"); var alertcontentscript = "self.port.on('alert', function(message) {" + "
window.alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript: alertcontentscript }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); in total, the port object defines four functions: emit(): emit a message. on(): listen to a message. removelistener(): stop listening to a mes...
...r api directly: instead, each time a content script is attached to a page, the worker associated with the page is supplied to the page-mod in its onattach function. by supplying a target for this function in the page-mod's constructor you can register to receive messages from the content script, and take a reference to the worker so as to emit messages to the content script. ...
...to the content script. ...
Working with Events - Archive of obsolete content
by registering a listener function to an event emitter an add-on can receive notifications of these events. we talk about content scripts in more detail in the working with content scripts guide. additionally, if you're using content scripts to interact with web content, you can define your own events and use them to communicate between the main add-on code and the content scripts. ...
... this guide only covers the first of these; the second is explained in the working with content scripts guide. adding listeners you can add a listener to an event emitter by calling its on(type, listener) method. it takes two parameters: type: the type of event we are interested in, identified by a string. many event emitters may emit more than one type of event: for example, a browser
window might emit both open and close events. the list of valid event types is specific to an event emitter and is included with its documentation. listener: the listener itself. this is a function which will be called whenever the event occurs. the arguments that will be passed to the listener are specific to an event type and are documented with the event emitter. for example, the following ...
... adding listeners in constructors event emitters may be modules, as is the case for the ready event above, or they may be objects returned by constructors. in the latter case the options object passed to the constructor typically defines properties whose names are the names of supported event types prefixed with "on": for example, "onopen", "onready" and so on. then in the constructor...
ui - Archive of obsolete content
icon, a label, and a click handler: var ui = require("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar. if it's standalone, it appears in the toolbar at the top right of the browser
window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox. so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked. it's otherwise identical to the action button. attaching panels to buttons is only supported from firefox 30 onwards. from f...
...you initialize a sidebar with a url pointing to an html document supplied under your add-on's "data" directory. this document can refer to bundled css and javascript files, and your main add-on can communicate with a frame script using message passing. var ui = require("sdk/ui"); var sidebar = ui.
...an html document supplied under your add-on's "data" directory. this document can refer to bundled css and javascript files, and your main add-on can communicate with a frame script using message passing. var ui = require("sdk/ui"); var sidebar = ui.sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); it appears on the left of the content
window: ...
url - Archive of obsolete content
e port number of the url, null if none was specified. path the path component of the url. contains everything after the host of the url. compare with pathname. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.path); // /add-ons?example=true&visible=yes#top hostname the domain of the url, as a string. mirrors
window.location.hostname. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.hostname); // developer.mozilla.org pathname an initial '/' followed by the path of the url, as a string. compare with path. mirrors
window.location.pathname. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-on...
...stname); // developer.mozilla.org pathname an initial '/' followed by the path of the url, as a string. compare with path. mirrors
window.location.pathname. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.pathname); // /add-ons hash a '#' followed by the fragment identifier of the url, as a string. mirrors
window.location.hash. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.hash); // #top href the whole url as a string. mirrors
window.location.href. origin the canonical form of the origin for this url, as a string. mirrors
window.location.origin. protocol the protocol of the url, including the final ':', as a str...
...url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.hash); // #top href the whole url as a string. mirrors
window.location.href. origin the canonical form of the origin for this url, as a string. mirrors
window.location.origin. protocol the protocol of the url, including the final ':', as a string. compare with scheme. mirrors
window.location.protocol. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.protocol); // https: search if any parameters are present, a '?' followed by the parameters of the url, as a string. mirrors
window.location.search. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=...
remote/child - Archive of obsolete content
modules". it provides two main things: access to web content loaded into this child process port mechanisms to communicate with the main process interacting with web content to interact with web content, the sdk/remote/child module provides a frames property that's a list of all content frames loaded into this child process. each frame then has a content property that's the top-level dom
window for the frame, and addeventlistener/removeeventlistener functions that enable you to listen to dom events dispatched by the frame. communicating with the parent process to communicate with the parent process, the process, frames, and frame objects in sdk/remote/child have a port object that you can use to receive messages from, and send messages to, code in the parent. see the documentation fo...
...ain process or not. frames a list of the content frames in this process. each element in this list is a frame. listen to attach and detach events to hear as frames are created and destroyed. methods forevery calls the callback for every existing frame and any new frames created in the future. this is a shortcut for enumerating existing frames and then listening for attach events. getframefor
window finds the frame for a top level dom
window. addeventlistener adds an event listener for dom events dispatched to any existing and future frames. removeeventlistener removes an event listener that was previously registered. properties port an event emitter that sends and receives events from every frame in this process. events attach triggered when a new content frame is opened (for exa...
...nd unload events from any content that is loaded in the frame. listeners are automatically removed when this frame is destroyed. removeeventlistener(event, listener, iscapturing) removes an event listener that was previously registered. properties port an event emitter that can be used to send and receive frame specific events to and from code in the main process. content the top level dom
window currently displaying in this frame. istab a boolean property indicating whether this frame displays in one of the application's main browser tabs. events detach event emitted when this frame disconnects from the application. ...
ui/toolbar - Archive of obsolete content
showing and hiding toolbars by default, a toolbar is shown when it is created, although you can specify that a toolbar should be hidden initially by passing hidden:true as an option in its constructor. after that, though, you can't show or hide the toolbar programmatically. toolbars get a close button at the right-hand side, and users can show ...
...hidden state persists even over create/destroy cycles: if a toolbar is created, then hidden, then destroyed, and another toolbar with the same title is then created, the new toolbar will be in the hidden state. toolbar events toolbars get attach and detach events when their content is loaded and unloaded, and show and hide events when the uses shows or hides them. working with multiple browser
windows there's only a single toolbar for all browser
windows, so operations like show and hide work across all browser
windows. if you need to customize content for a particular browser
window, you can do that by messaging the
window-specific frame hosted by that toolbar. globals constructors toolbar(options) creates a toolbar. the only mandatory option is title, but for the toolbar to contain any...
... this property is read-only and is not available until after the attach event is emitted. hidden boolean indicating whether the toolbar is hidden. this property is read-only and is not available until after the attach event is emitted. events attach this event is emitted when the toolbar is first loaded. 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. after this event the toolbar's properties are available: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar", items: [frame] }); toolbar.on("attach", attached); function attached() { console.log("attached"); con...
Release notes - Archive of obsolete content
details github commits made between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools. jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. ...
...ithub commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. added tab.readystate. added a browser
window parameter to sidebar.show() and sidebar.hide(), to control the
window for which the sidebar will be shown or hidden. details github commits made between firefox 32 and firefox 33. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 32 and firefox 33. this will not include any uplifts made after this release entered aurora. firefox 32 highligh...
...ow includes a console and a scratchpad. details github commits made between firefox 31 and firefox 32. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 31 and firefox 32. this will not include any uplifts made after this release entered aurora. firefox 31 highlights add-on debugger added the ability to convert between high-level browser
window objects and dom
windows, and between high-level tab objects and xul tabs. updated the default theme used for panels on mac os x. added contentstyle and contentstylefile options to panel. details github commits made between firefox 30 and firefox 31. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 30 and firefox 31. this will not include a...
Add a Context Menu Item - Archive of obsolete content
xt menu item. the item is displayed whenever something in the page is selected. when it's clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text =
window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the add-on, load a web page, select some text and right-click. you should see the new item appear: click it, and the selection is logged to the console (or the shell, if you're running an instance of fi...
...e context menu item. typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text =
window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35. from firefox 35 you can specify an access key using the accesskey option. this must be a single-character string. pressing the key sel...
... you can specify an access key using the accesskey option. this must be a single-character string. 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) { console.log(selectiontext); } }); learning more to learn more about the context-menu module, see the context-menu api reference. ...
Storing annotations - Archive of obsolete content
-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); }); }); it builds the dom for the panel from the array of annotations it is given. 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. so the content script binds a click handler to the links which will send the url to the add-on. save this file in data/list as annotation-list.js. annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="tex...
.../notifications"); (it should be obvious that this is an incredibly unhelpful way to deal with the problem. a real add-on should give the user a chance to choose which data to keep, and prevent the user from adding any more data until the add-on is back under quota.) respecting private browsing since annotations record the user's browsing history we should avoid recording annotations in private
windows. there's a very simple way to do this: do nothing. by omitting the "private-browsing" key from the annotator's "package.json" file, the annotator opts out of private browsing altogether. this means that its widget will not appear on any private
windows and its selector and matcher content scripts won't run, so the user won't be able to enter any annotations in private
windows. try it: execute...
... do this: do nothing. by omitting the "private-browsing" key from the annotator's "package.json" file, the annotator opts out of private browsing altogether. this means that its widget will not appear on any private
windows and its selector and matcher content scripts won't run, so the user won't be able to enter any annotations in private
windows. try it: execute cfx run and open a new private
window: you should no longer see the annotator's widget. now we can create and store annotations, the last piece is to display them when the user loads the page. ...
Forms related code snippets - Archive of obsolete content
ondayclick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie */
window.event; var boutside = true; for (var onode = oevt.target || /* ie */ oevt.srcelement; onode; onode = onode.parentnode) { if (onode.classname === sprefs + "-calendar" || onode.classname === sdpclass) { boutside = false; break; } } if (boutside) { return; } ainstances[onode.id.replace(rbgnnan, "")].container.style.zindex = nzindex++; } function o...
...attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/css">...
..."t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000;
window.addeventlistener ? addeventlistener("load", buildcalendars, false) :
window.attachevent ? attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collap...
HTML to DOM - Archive of obsolete content
ions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome). see using a hidden iframe element to parse html to a
window's dom below. parsing complete html to dom loading an html document seems much simpler if it's loaded using the xmlhttprequest object. 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 ...
...create your own function using unique name, id, and so forth. var frame = document.getelementbyid("sample-frame"); if (!frame) { // create frame frame = document.createelement("iframe"); // iframe (or browser on older firefox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content")...
... name, id, and so forth. ...
Preferences - Archive of obsolete content
erences in a certain branch. note that it need not be your own extension's preferences; you can set an observer on any preference or branch. when a change is made to the preferences, you can take the appropriate action (such as reinitializing variables or toggling display properties in xul components). this technique will work no matter how or where the preferences are changed: in another browser
window, directly in the about:config interface, or even by another extension. note: during gecko 13 development, nsiprefbranch2 was deprecated, and its methods moved to nsiprefbranch. calling .queryinterface(components.interfaces.nsiprefbranch2) is no longer required, although it still works. here is a straightforward example: var myprefobserver = { register: function() { // first we'll need th...
...ef guide to mozilla preferences — describes preferences system from user's/administrator's pov mozilla xpcom interfaces of the preferences system most used interfaces (these are frozen and will not change): nsiprefbranch and nsiprefservice nsiprefbranch2 interface (before gecko 1.8 it was called nsiprefbranchinternal) preferences system - an easy way to create a xul options
window for your extension or application syncing preferences across clients using sync lxr pages for libpref, the source code module that implements the preferences system a javascript wrapper for preferences api adding preferences to an extension — a simple tutorial with a working extension that illustrates the use of preference observers inline options - how to use the new preference ui that ap...
... fixme: ...
JavaScript timers - Archive of obsolete content
delay. the setinterval() function is commonly used to set a delay for functions that are executed again and again, such as animations. the setimmediate() function can be used instead of the settimeout(fn, 0) method to execute heavy operations in ie. the requestanimationframe() function tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the
window for the next animation frame. documentation settimeout() calls a function or executes a code snippet after specified delay. setinterval() calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function. setimmediate() calls a function immediately after the browser has completed other operations, such as events and display updates. clear...
...t control of an interactive user. in javascript programming language, all daemons are processes created by javascript timers or by a worker instantiation. here are some code snippets which simplify and abstract the management of daemons. requestanimationframe() requestanimationframe() tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the
window for the next animation frame. the method takes as an argument a callback to be invoked before the repaint. performance.now() performance.now() returns a timestamp, measured in milliseconds, accurate to one thousandth of a millisecond. this timestamp is equal to the number of milliseconds since the navigationstart attribute of the performance.timing interface. date.now() date.now() returns...
...ose. basic animations since we're using script to control canvas elements it's also very easy to make (interactive) animations. unfortunately the canvas element was never designed to be used in this way (unlike flash) so there are limitations. timer.jsm the timer.jsm javascript code module contains pure-javascript implementations of settimeout and cleartimeout that are compatible with the dom
window functions, but that can be used by code that does not have access to a dom
window (for example, javascript code modules or content frame scripts). ...
View Source for XUL Applications - Archive of obsolete content
method overview gviewsourceutils exposes several methods, but the only one you should be using directly is the viewsource method. ...
... method overview gviewsourceutils exposes several methods, but the only one you should be using directly is the viewsource method. ...
...iewsource opens a viewer to the source code for some document or uri. parameters the viewsource method takes an object as its first and only parameter. the object can include the following properties: url (required) a string url for the document to view the source of. browser (optional) the browser containing the document that we would like to view the source of. this is optional if outer
windowid is not passed. outer
windowid (optional) the outer
windowid of the content
window containing the document that we want to view the source of. pass this if you want to attempt to load the document source out of the network cache. linenumber (optional) the line number to focus on once the source has loaded. deprecated api this api is likely to go away in the future, and should no longer be ...
Code snippets - Archive of obsolete content
ll code samples) available for developers of extensions for the various mozilla applications. many of these samples can also be used in xulrunner applications, as well as in actual mozilla code itself. these examples demonstrate how to accomplish basic tasks that might not be immediately obvious. general examples and demos from mdn articles a collection of examples and demos from articles.
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. xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-...
...ferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations. miscellaneous miscellaneous useful code fragments html to dom using a hidden browser element to parse html to a
window's dom javascript libraries here are some javascript libraries that may come in handy. stringview a library that implements a stringview view for javascript typed arrays. this lets you access data in typed arrays using c-like string functions. rosetta by default, the only possible standardized scripting language for html is ecmascript. hence, if you are going to use another scripting lang...
...a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar changing style of scrollbars. applies to scrollbars in browser and iframe as well. autocomplete code used to enable form autocomplete in a browser boxes tips and tricks when using boxes as containers tabbox removing and manipulating tabs in a tabbox
windows-specific finding
window handles (hwnd) (firefox) how to use
windows api calls to find various kinds of mozilla
window handles.
window handles can be used for ipc and accessibility purposes. using the
windows registry with xpcom how to read, write, modify, delete, enumerate, and watch registry keys and values. external links the content at mozillazine example code is slowly being moved h...
Extension Packaging - Archive of obsolete content
he extension, such as its unique id, version, author, and compatibility information. after the extension files and install.rdf have been prepared, there are several ways to prepare an extension for installation: zip the extension directory into a user-installable xpi (xpinstall) file, unpack the extension directly into the user's application or profile directory, or register the extension in the
windows registry. note: starting in gecko 2.0, xpi files are no longer unpacked when extensions are installed. instead, the xpi itself is placed in the extensions directory, and files are loaded directly out of the package. making an extension xpi an xpi (xpinstall) file is simply a zip file, containing the extension files, with the install.rdf file at the root of the zip. users can download xpi fi...
...ead, the xpi itself is placed in the extensions directory, and files are loaded directly out of the package. making an extension xpi an xpi (xpinstall) file is simply a zip file, containing the extension files, with the install.rdf file at the root of the zip. 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. the xpi file must contain only uncompressed files, or files compressed using the deflate algorithm. the mime type recognized by firefox for xpi files is application/x-xpinstall. since most http servers are not configured to return this mime type for the .xpi extension by default, you will probably need to configure your http server. in the apache http server, this can be done by adding the foll...
...zed application can include add-ons, including extensions and themes, by placing the unpacked (that is, not the xpi files, but the packages' contents) in the <appdir>/distribution/extensions directory. this directory containing the add-on must be named the same as the id of the add-on or theme. add-ons packaged in this way will not be visible to the user. register an extension location using the
windows registry external installers, such as the java runtime, may wish to install application integration points as an extension, even if the application is not yet installed. this can be accomplished on
windows using the registry. multi-item extension xpis in some cases, a single xpi file may wish to install multiple extensions/themes. a special kind of extension xpi, called the multiple item pack...
Extension Theming Guidelines - Archive of obsolete content
exist in a chrome skin package. custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content. ...
... may then register a replacement for your skin package allowing them to provide their own styles for all of your content. branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new
window that your extension adds and for every
window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. while it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly target the right
windows. css selectors when writing stylesheet rules for
windows that you are overlaying always try to be specific with the css selector. if you are not then you ...
... xul guidelines xbl bindings xbl bindings are applied using style rules. however these are rarely part of the style of the widgets but more about adding custom widgets. ...
Extension Etiquette - Archive of obsolete content
coding practices namespace conflicts there are many namespaces which extensions often must share with other consumers, be they other add-ons, web code, or the browser itself. these often include areas such as: object prototypes, such as string.prototype, which are often extended to add methods to native objects. global variables, such as top-level declarations on scripts loaded into shared
windows or web pages. expando properties of shared objects, such as document objects, or dom nodes. ids and class names in html and xul documents, when extensions add elements to web pages or browser
windows. chrome: or resource: packages, which are often defined in chrome.manifest files. about: page urls. xpcom contract ids, which are often registered in chrome.manifest files. while these are am...
...n-, or short prefixes such as ffx-, are likely to be used elsewhere, and therefore unsuitable to the purpose. call .noconflict(true) where applicable many common libraries which create global variables provide a method called noconflict, or similar, which revert any global variables they've declared, and return the object itself. for instance, calling jquery.noconflict(true) will remove the
window.jquery and
window.$ variables, and return the jquery object itself, for future use by the caller. when available, these methods should always be used to prevent conflicts with third-party code. names and metadata naming be creative! don't be redundant and include "extension," "mozilla/firefox/thunderbird," or the version number in the name. be original! descriptions use something that i...
...if providing your extension in one language. it will make translation of your extension to another language easier. it occurs more often than you would think. options firefox users like options. lots of options. try to include everything a user could ever want to customize in your extension, remembering more can be added later. for a large number of options for your extension, break the options
window into multiple pages (tabs) that are well labeled. don't hesitate to give long descriptions for each preference, as long as they are easy to understand, even for non-computer-savvy users. however, please make sure the default set of preferences is adequate — don't require people to tweak options in order to get your extension's core functionality. preferences' internal names internal firefox p...
Interaction between privileged and non-privileged pages - Archive of obsolete content
heir own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as shown below (also see: accessing the elements of the top-level document from a child
window). var main
window =
window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interface...
...main
window =
window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidom
window); main
window.document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); if you need to to pass lots of data, consider using cdata sections instead of the simple attributes on a custom element. note: if you're using html5's postmessage() to send a message from unprivileged code to privileged code, adding 'true' to the end of your event listener in yo...
...mal network protocol and use xml. with element attributes and e4x, this is fairly easy. you do need to convert your data to/from e4x objects, though. and your chrome needs to carefully check every value passed (you need to do that either way). ...
Offering a context menu for form controls - Archive of obsolete content
firefox 3 changed the behavior of right-click on form controls to no longer display a context menu by default. this article describes how an extension can override this change in a particular
window, enabling context menus to work on form controls. this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the
window in which you want to allow context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script ty...
...context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. ...
...", function() { 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. as a result, all controls in the
window will support a context menu when right-clicked, since we've changed the core behavior of context menus to override their default behavior of doing nothing on form controls.
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
ixme: figure 1: uncheck “exclude browser files.” set up quicknote for the purposes of this explanation, we’re going to use the file-storage mechanism in quicknote1 for our debugger. install quicknote from the following url and relaunch firefox. https://addons.mozilla.org/firefox/46/. after relaunching firefox, activate quicknote. then select tools:quicknote:float to display it in its own
window. using venkman read in source code activate venkman, and then select open
windows:quicknote.xul:files on the top-left of the screen. double-click on quicknote.js to open it in source-code view (figure 2). fixme: figure 2: selecting source code inserting breakpoints now you’ll want to set some breakpoints. try inserting one within the quicknote_savenote function, around line 345 (figure 3)...
...ting 1). save this as a file called calc.js. listing 1: calc.js (stage 1) function rpncalc() { } rpncalc.prototype = { init: function() { }, push: function(val) { }, plus: function() { }, pop: function() { } } implement the addition operation create test case begin by creating the test case. first, select the menu item tools:mozlab:open mozunit runner to bring up the mozunit
window. select the menu item file:new, and save test_calc.js in the same directory as the file that is the test target. next, click the edit button to set up the “2 1+” test case (listing 2). note that in this file, the method names serve as the test names. in junit and similar packages, methods containing tests that start with testhoge are recognized as tests. mozunit uses the same kind of notatio...
......
Adding Events and Commands - Archive of obsolete content
« previousnext » event handlers just like with html, most javascript code execution is triggered by event handlers attached to dom elements. the most commonly used event is the onload event, which is used in overlays and other
windows to detect when the
window has loaded and then run initialization code: // rest of overlay code goes here.
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need. please read appendix a for recommendations on how to use the load event to initialize your add-on without having a negative performance impact on firefox. another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xul...
...since most events have a default behavior associated to them. custom events this is a very powerful tool that you should know, even if it isn't that frequently used. the dom createevent function allows you to create custom events that you can dispatch and capture. custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between
window xul and web page content. it isn't hard for xul code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension xul code to receive information from pages in a secure manner. this is because it would be very insecure to have a website js controlling the behavior of firefox and running javascript code with chrome privileges. suppose y...
...> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs. your ui can easily scale this way. you can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of xul code in the process. commands and broadcasters also facilitate working with complex form
windows and dialogs. you should always keep them in mind when adding the event-driven code for your extension. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...
Appendix F: Monitoring DOM changes - Archive of obsolete content
tor of nodes about which you * want to be notified. * @param {function(event)} callback the function which is to be called * when matching nodes become available. * @param {document} doc the document in which to watch for new nodes. * @optional @default document * * @returns {function} a function which may be called to unregister the * listener. ...
... want to be notified. * @param {function(event)} callback the function which is to be called * when matching nodes become available. * @param {document} doc the document in which to watch for new nodes. * @optional @default document * * @returns {function} a function which may be called to unregister the * listener. ...
... do without weak references. ...
Custom XUL Elements with XBL - Archive of obsolete content
complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements. as explained earlier, xul is really just boxes, text and images. we'll look into xbl using a modified version of the hello world extension. download the hello world xbl project, build it and test it for a while. 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. xbl basics in order to create an xbl binding you'll need 2 files: the xbl file and a css file that binds an element name to your xbl declaration. if you look into the content directory, you'll see both files: person.xml - this is the main binding file. it holds all the code necessary to control the new element we created. we'll look into the code throug...
... you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well). handlers the handlers and handler xbl elements are used to define event handlers for the element. we have a "click" handler that displays the greeting when the "person" element is clicked: <handler phase="bubbling" event="click"><![cdata[
window.alert(this.greeting); ]]></handler> handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. in those cases you just add regular event attributes to the nodes inside the content tag. note that with handlers a convenience arises in the fact that "this" refers to the xbl element, and so internal components...
...ots of time. replacing existing xul elements as seen in the beginning of this section, the actual binding process is determined by a simple css rule that associates the tag name with the binding. this means that you can change the binding for pretty much any element in firefox by just adding a css rule! this is very powerful: it allows you to change almost any aspect of the interface of any xul
window. in conjuntion with inheritance, it's even easy to do. you can enrich the ui of a firefox
window by extending and replacing elements, which is what the console² extension does in order to improve the error console
window. replacing elements should always be a last resort solution, specially if it is done on the main browser
window. it's very easy to break the ui of the application or other exte...
Using Dependent Libraries In Extension Components - Archive of obsolete content
null) include $(topsrcdir)/config/rules.mk defines += -dmoz_dll_prefix=\"$(dll_prefix)\" extensions/stub/bdsstubloader.cpp // copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> #include "nscore.h" #include "nsmodule.h" #include "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { // dependent1.dll on
windows, libdependent1.so on linux moz_dll_prefix "dependent1" moz_dll_suffix, moz_dll_prefix "dependent2" moz_dll_suffix, nsnull // note: if the dependent libs themselves depend on other libs, the subdependencies // should be listed first. }; // component.dll on
windows, libcomponent.so on linux static char krealcomponent[] = moz_dll_prefix "component" moz_dll_suffix; nsresult nsgetmodule...
...ed for os x by walter johnson <zinkyu@gmail.com>, sept. 2008 */ //include the stuff from mozilla glue that we need #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" //include things from the mach-o libraries that we need for loading the libraries. ...
...clude <mach-o/dyld.h> static char const *const kdependentlibraries[] = { // dependent1.dll on
windows, libdependent1.so on linux, libdependent1.dylib on mac moz_dll_prefix "dependent1" moz_dll_suffix, moz_dll_prefix "dependent2" moz_dll_suffix, nsnull // note: if the dependent libs themselves depend on other libs, the subdependencies // should be listed first. }; // component.dll on
windows, libcomponent.so on linux, libcomponent.dylib on mac static char krealcomponent[] = moz_dll_prefix "component" moz_dll_suffix; // forward declaration of a convienience method to look up a function symbol. static void* lookupsymbol(const mach_header* alib, const char* asymbolname); extern "c" ns_export nsresult nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) ...
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
] of redundant <font> tags inside every cell was probably enough to double file size. my initial attempts at the markup and css for the wired news design eliminated the majority of our tables, but left one master table to control the primary columns of each page. that approach meant that the content of every column would have to be loaded and calculated before it would be rendered in the browser
window. that wasn't good enough. around that time, i started discovering great sites like glish.com and bluerobot.com. both presented and documented viable means of producing multi-column layouts without a single table. despite some initial setbacks with those approaches due to our own unique scenarios, it wasn't long before i discovered a variation of one of their methods that worked for the wired news...
...mary navigation, this content order requirement of float usage may produce desired and advantageous behavior. i also found a lot of trouble ensuring a consistent vertical start position of columns using floats. two column layouts using floats seemed easy. but adding a third column to the mix created too many width variables for some browsers to dynamically calculate a total. resizing the browser
window often resulted in one column getting pushed to the bottom of another. using absolute positioning for left and right columns allowed the markup for each column to fall in any order. there are some technicalities in the order of our markup and some ad units that would require too much to cover here. but positioning did allow the center column to fall first in the markup. it also guarantees each co...
...mn will start in the same vertical position. to be fair, i did note two disadvantages of positioning. when one or more columns is positioned absolutely, there is no way to ensure a footer would always appear at the bottom of the longest column. we ended up confining the footer to the width of the center column to avoid any possible overlap. the other disadvantage comes into play at small browser
window sizes. while floats automatically reconfigure if they don't fit within the
window width, absolute positioned columns always remain in the same place, even if it means content in one column begins to overlap another column. both of these put together weren't enough to dissuade me from the advantages of positioning over floats. how does the new design perform when the pages are printed? we have o...
Getting the page URL in NPAPI plugin - Archive of obsolete content
n still do it, by asking the browser for the page url during plugin initialization. then you can just refuse to do anything, if you don't like the url, or you can compare it with the other url you want to contact. so, how do we get at that page url, i.e. the url of the html which embeds the plugin, i.e. which caused the plugin to load? there are at least 3 solutions (quoting newsgroup posts): via
window location from robert platt: // get the dom
window object. npn_getvalue( m_pnpinstance, npnv
windownpobject, &s
windowobj ); // create a "location" identifier. npidentifier identifier = npn_getstringidentifier( "location" ); // declare a local variant value. npvariant variantvalue; // get the location property from the
window object (which is another object). bool b1 = npn_getproperty( m_pnpinstance...
...npobject *locationobj = variantvalue.value.objectvalue; // create a "href" identifier. identifier = npn_getstringidentifier( "href" ); // get the location property from the location object. ...
...cdaniel: if you want the uri of the resource for which the plug-in is invoked, the most npapi-friendly way to do that is to get it from the npstream that is passed to npp_newstream. tradeoffs: npapi only probably works in all browsers, all versions is sort of backwards (?) advantages / disadvantages ? via dom from benjamin smedberg: the npapi gives you the ability to get access to the nsidom
window object which contains the current plugin via the npnvdomelement enum passed to npn_getvalue. this returns an addrefed nsidomelement interface pointer from which you can call .ownerdocument (on nsidomnode), queryinterface that object to nsidom3document, and call .documenturi. tradeoffs: is inherently incompatible with other non-mozilla browsers (i.e. does not work in opera, safari etc.) compati...
Notes on HTML Reflow - Archive of obsolete content
nt of the html document. reflow proceeds recursively through some or all of the frame hierarchy, computing geometric information for each frame object that requires it. reflow may have the side-effect of creating new continuation frames, for example, for a text frame when the text must be wrapped. some reflows are immediate in response to user or script actions; for example, resizing the
window or changing the document's default font. these are dispatched directly from the presentation shell (e.g., nsipresshell::stylechangereflow), and affect the entire frame tree. other reflows are incremental and are dealt with asynchronously; for example, when content streams in from the network. incremental reflows are queued by the presentation shell for batched dispatch. reflow state the ...
...rmation "down" from parent frames to child frames. for example, a <div> with a constrained width (e.g., set via the css width property) would note this in the reflow state object before flowing its children. when reflow begins, the root reflow state is initialized with information about the top-level container for the document's presentation; e.g., the width and height of the application
window. this is passed as an argument to the reflow method of the root frame in the frame hierarchy. each container frame constructs a new reflow state object (based on its container's reflow state object) in which the container will reflow its children. most of the constraints in the new reflow state are computed when the state is created; for example, the available space in the new r...
...ion shell: an initial reflow is performed when the presentation shell is initialized to flow the shell's initial frame hierarchy. incremental reflows are dispatched en masse when the presentation shell's incremental reflow queue is asynchronously serviced. a resize reflow is performed when the presentation shell's dimensions change; e.g., because the user resized the shell's
window. a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font. a dirty reflow is never performed directly from the presentation shell. instead, a dirty reflow is detected when an incremental reflow reaches its target frame , described below. reflow metrics the ...
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 ${profile...
...efault settings firefox-bin -p testprofile -chrome chrome://tests/content/quit.xul<code> the above process may exit before the profile is completely created. ...
... code with chrome privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the domcontentloaded event chrome
window.addeventlistener('domcontentloaded',callbackfunction,false); ...
Finding the file to modify - Archive of obsolete content
rting with the structure layer. the structure layer consists of xul files. xul, which is short for xml-based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces. it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers). each
window and dialog box in mozilla is defined by a single xul file (in some cases other xul files called overlays contribute portions of another
window's structure). to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the browser
window. the best way to find a xul file for a
window is to use the dom inspector. the dom inspector is a tool bundled with mozi...
...in some cases other xul files called overlays contribute portions of another
window's structure). to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the browser
window. the best way to find a xul file for a
window is to use the dom inspector. the dom inspector is a tool bundled with mozilla that allows you to examine the dom of web pages and xul
windows. to access it, go to the "tools" menu, select the "web development" submenu, then select the "dom inspector" item. the dom inspector will load in a new
window. in the dom inspector
window, go to the file menu, select the inspect a
window submenu, then select the mozilla browser
window item (named after the page currently loaded in the browser). the dom inspector will display the url of the xul ...
... a chrome url is a url used internally by mozilla to refer to files in the chrome subdirectory of the mozilla installation directory. chrome urls have paths that do not necessarily refer to a precise directory hierarchy. ...
Getting Started - Archive of obsolete content
rectory. a .jar file is in reality a renamed zip archive. opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. however, if your application doesn't detect classic.jar as a standard zip archive, rename the file classic.zip and continue extraction. classic.jar locations linux: folder_with_seamonkey/chrome/classic.jar
windows: folder_with_seamonkey\chrome\classic.jar for mac os x: folder_with_seamonkey/chrome/classic.jar copy classic.jar to another easily accessible folder -- classic is recommended -- extract the contents of that folder, being sure to maintain the directory structure. directories inside classic.jar is one directory, skin. skin skin simply contains another directory, classic which holds all the good ...
... of that folder, being sure to maintain the directory structure. directories inside classic.jar is one directory, skin. skin skin simply contains another directory, classic which holds all the good stuff. skin\classic classic contains the following directories. skin\classic\communicator communicator contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences
window. skin\classic\editor editor contains files of composer. skin\classic\global global contains almost all of the important css files that define the appearance of the suite. this is the most critical directory in a theme. skin\classic\help help contains all the files for theming the help dialog
window. skin\classic\messenger messenger contains styles of the mail client. skin\classic\messenger-newsbl...
...t to myskin.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. you can also just open the themes
window in mozilla and drag and drop your .jar file onto it. now to change your folder(s) back into a .jar well it's easy! what you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar ...
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
ic.jar as a standard zip archive, rename the file classic.zip and continue extraction. note: starting in gecko 2.0, the new omni.jar file contains the skin, among other resources. see theme changes in firefox 4 for details on how to extract skin files from firefox 4 or later. classic.jar locations linux: /usr/lib/mozillafirefox/chrome/classic.jar or /usr/lib/firefox-*.*.*/chrome/classic.jar
windows: \program files\mozilla firefox\chrome\classic.jar for mac os x: go to your applications folder control click application icon(firefox icon), choose show package contents. go to contents/macos/chrome/classic.jar copy classic.jar to another easily accessible folder -- classic is recommended -- extract the contents of that folder, being sure to maintain the directory structure. directorie...
...ectory structure. directories inside classic.jar is one directory, skin, as well as two files, preview.png and icon.png. skin skin simply contains another directory, classic which holds all the good stuff. skin\classic classic contains the following directories. skin\classic\browser browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences
window. skin\classic\communicator doesn't do a whole lot and can typically be forgotten about promptly. skin\classic\global global contains almost all of the important css files that define the appearance of the browser. this is the most critical directory in a theme. skin\classic\help help contains all the files for theming the help dialog
window. skin\classic\mozapps mozapps contains all the s...
..._theme.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. you can also just open the themes
window in mozilla and drag and drop your .jar file onto it. now to change your folder(s) back into a .jar well it's easy! what you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar ...
Editor Embedding Guide - Archive of obsolete content
in the beginning there is makeeditable given an nsiwebbrowser instance, get an nsidom
window from the getcontentdom
window call. then simply call nsiwebbrowser->do_getinterface on the nsiwebbrowser to retrieve the nsieditingsession from it. from there you call editingsession->make
windoweditable(dom
window, editortype, pr_true). the first parameter is the nsidom
window you just retrieved, the second is the editor type you want to create, and the third is whether you want the
window editable immediately or when the document is done loading. in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!! nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(edi...
...s whether you want the
window editable immediately or when the document is done loading. ...
... the
window editable immediately or when the document is done loading. ...
Layout System Overview - Archive of obsolete content
e decision about when to apply css-specified formatting and when to apply legacy formatting is controlled by the document's doctype specification. these layout modes are referred to as 'standards' and 'navquirks' modes. (doctype and modes are explained in more detail in article mozilla's doctype sniffing. galley and page presentations: the presentation generally is constrained by the width of the
window in which the presentation is to be displayed, and a height that extends as far as necessary. this is referred to as the galley mode presentation, and is what one expects from a typical browser. additionally, layout must support a paginated presentation, where the width of the presentation is constrained by the dimensions of the printed output (paper) and the height of each page is fixed. this pag...
... galley presentation, namely how to break up elements that are larger than a single page, and how to handle changes to page dimensions. the original design of the layout system allowed for multiple, possibly different, presentations to be supported simultaneously from the same content model. in other words, the same html or xml document could be viewed as a normal galley presentation in a browser
window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthesizer. to date the only real use of this multiple presentation ability is seen in printing, where multiple presentations are managed, all connected to the same content model. (note: it is unclear if this is really a benefit - it may have been better to use a copy of the cont...
...a. if you write your own code, document it. much of the existing code <b>isn’t very well documented</b>. in the process of figuring things out, try and document your discoveries. if you’d like to contribute, let us know. </p> there is one block that corresponds to the <p> element, and then a number of lines of text that correspond to the text. as the width of the block changes (due to the
window being resized, for example) the length of the lines within it changes, and thus more or less text appears on each line. the block is responsible for managing the lines. note that lines may contain only inline elements, whereas block may contain both inline elements and other blocks.other layout models: xul in addition to managing css-defined formatting, the layout system provides a way to integra...
Repackaging Firefox - Archive of obsolete content
or distributing firefox. you must have written authorization from mozilla to distribute a modified version of firefox. to do this, please contact trademarks@mozilla.com. getting started now, on to the technical details. the following diagram represents an overview of the process and the pieces involved: you will need the following to get started: a macintosh computer (even for repackaging
windows or linux only); it may be either powerpc or intel based. the repackager tool. currently that page mentions only firefox 1.5.x, but it supports firefox 2. the pristine firefox 2 installer files (
windows .exe, mac .dmg, or linux .tar.gz) for each of the locales you need. at the time of writing this document, the latest builds are here. a "distro" extension that makes the changes you desire. o...
...re a few options that you will need to set to ensure a smooth upgrade path for users. at the very least, don't skip the "important extension preferences" section below. sample dex the best way to get started is probably to look at a simple dex and modify it for your own purposes. download the sample. xpi files are specially crafted zip files in disguise. you can use any zip program (winzip on
windows, zip on mac or linux, etc) to extract it. this xpi has the following contents chrome.manifest components/partnerbookmarks.js defaults/preferences/partner.js install.rdf locale/ar/partner.properties locale/cs/partner.properties locale/da/partner.properties locale/de/partner.properties locale/el/partner.properties locale/en-gb/partner.properties locale/partner.properties locale/es-ar/partner.prop...
...t. the "additional xpi" section lets you select a second extension to bundle into your customized installer. if you don't wish to install a second extension, you can leave this blank. the "repackaging" section is where you configure the actual repackaging job itself. first, set the source directory by clicking its "choose" button. the source directory is a directory that contains the
windows installer, mac disk image (.dmg), and/or linux tarball of the standard firefox that you wish to customize. second, set the destination directory to the directory into which you wish to save the customized installers. the "platforms" section lets you select the platforms for which you wish to generate customized installers. check the boxes next to each one you want to generate. make sure...
Creating a Help Content Pack - Archive of obsolete content
in the attributes as follows: rdf:about must be urn:root or your pack won't work. this attribute marks the start point in the rdf graph described by the file, and the help viewer searches for this element in order to query for further information (stored in child elements) about the content pack being parsed. nc:title is where you specify the title (e.g., "mozilla firefox help") for the help
window. this attribute is required. nc:defaulttopic will hold the rdf:id of the topic you want displayed when the viewer first loads if none has been specified. this attribute also specifies what topic is loaded when the user hits the home button in the viewer. we'll get to exactly how to fill in this attribute later. this attribute is optional, with fallback to the value welcome. nc:base contains the...
...ted, the information in the data sources applies to all platforms. the attribute is a space-separated list of platform strings. strings recognized from 1.8 onward are win, mac, os2, and unix; more will be added as required. unrecognized strings are ignored during parsing. an example of how to use this attribute follows: <!-- assumptions: win-toc.rdf contains
windows- and os/2-specific info, unix-toc.rdf contains linux- and mac-specific info. --> <rdf:li> <rdf:description nc:panelid="toc" nc:platform="win os2" nc:datasources="win-toc.rdf"/> </rdf:li> <rdf:li> <rdf:description nc...
...ink specifies what uri should be shown when the pseudo-result "no results found" is accessed. this attribute is required. the sample page chrome://help/locale/welcome.xhtml has a section on searching which may be a useful link to use here. note that you can use the nc:datasources attribute to inherit content from other content packs. one common use of this is to inherit the small using the help
window article provided with the viewer. for example, the following code uses a datasource outside the content pack you have created to include the article in a table of contents: <rdf:li> <rdf:description nc:panelid="toc" nc:datasources="chrome://help/locale/help-toc.rdf chrome://foo/locale/help/glossary.rdf"/> </...
Helper Apps (and a bit of Save As) - Archive of obsolete content
ncher to manage the load. the nsexternalapphandler (which implements nsihelperapplauncher) uses the nsimimeinfo and an nsihelperapplauncherdialog to decide what to do with the data. the nsexternalapphandler does whatever it decided to do. nsimimeinfo lookup look in built-in list which the user cannot override (types we handle internally). look in user preferences. ask the os: registry on
windows. internet config on the mac. mailcap/mime.types on linux. look in second built-in list, which the user can override. nsexternalapphandler details implements nsistreamlistener. gets notifications from necko as the data comes in. four primary tasks: sets up temporary file and instantiate the nsihelperapplauncherdialog in onstartrequest. puts the data in the file as ondataavailable noti...
...ow what the user picked saving to disk if a user decides to "save to disk", we just move/copy the temporary file over to the chosen location once the download completes. if an error occurs while we do this we delete the temp file and put up an error dialog. ...
...checks happen in onstartrequest, in the helper app dialog, and as a last ditch in the launching code. limitations of nsimimeinfo no way to say "do whatever the os default is." no support for command-line arguments. ...
Monitoring downloads - Archive of obsolete content
revious versions of firefox, it was previously only possible for one observer to do so at a time. firefox 3 introduces new api that allows any number of listeners to observe downloads. this article demonstrates how to monitor downloads in firefox 3, using the download manager. as a nice bonus, it also demonstrates how to use the storage api to issue sqlite commands on a database. 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. in the list is the name of the file, the start and end times of the download, the download speed, and the status of the download. a tooltip is included that displays the full source url of the file. download the full sample. setting up when the extensio...
...his simply opens the database and builds and executes a update sqlite command that finds the download item whose source uri and start time match the download that has completed and updates its information. by looking for a record with both the same uri and start time, we properly support the case where the user downloads the same file multiple times. displaying the download log the download log
window's code is encapsulated in an object called downloadlogger_dl
window. since this is a simple example, it's a one-shot log
window; it doesn't monitor for further changes to the log. it simply displays the state of downloads at the moment the
window was opened. that means all its work can be done in its load event handler, which looks like this: onload: function() { // open the database thi...
...to that expected by javascript. to right-justify the numeric columns, we set the appropriate cells' style attribute to text-align:right. exercises for the reader there are some obvious things that could be done to improve this extension. if you're learning to use the download manager or storage apis, they're things you might look into doing for practice: add code to update the download log
window on the fly, instead of generating a static list when it's first opened. add additional statistics. what's the average download speed across all downloads? what times of day do you get the best download performance? add buttons to delete items from the log, or to delete all items that have finished downloading. add searching. see also storage, nsidownloadmanager, nsidownload, nsidow...
Plugin Architecture - Archive of obsolete content
ance independent of that, it tells the content node that it exists now (nsiobjectloadingcontent::hasnewframe). that function will post an event and when that fires, asks the frame to instantiate the plugin. ...
...node that it exists now (nsiobjectloadingcontent::hasnewframe). that function will post an event and when that fires, asks the frame to instantiate the plugin. ...
...sn't fully set up yet) in layout note: some of this should move to content an instance owner is created the
window passed to the plugin is adjusted (the np
window, http://devedge-temp.mozilla.org/libr...nt.html#999221) the plugin host is asked to instantiate the plugin this will call back to the instance owner / the object frame in order to create a widget to draw to (if the plugin is not
windowless) nsplugininstanceowner::set
window set
window is called on the plugin ...
Configuration - Archive of obsolete content
here is the list of parameters: id the unique name of this web application. remember that other people can create different webapps using the same uri and this webapp is only your particular instance or mashup. so make sure the identifier is not only unique to the web application, but also to you. ...
...his webapp is only your particular instance or mashup. so make sure the identifier is not only unique to the web application, but also to you. this identifier becomes the name of the profile folder where your webapp is installed: google.mail@your.name uri the uri/url of the web app: http://mail.google.com name the display name of the application: gmail icon the icon you want to use for the prism
window when running this web app. the actual icon file should be stored in the webapp bundle. status turns the status messages on or off for this web app: yes or no location turns the readonly location bar on or off for this web app: yes or no navigation turns the hotkey history navigation (alt+left, alt+right and alt+home) on or off for this web app: yes or no splashscreen filename of an html page to ...
...t should be opened in the web app, rather than in the default browser. an asterisk is used to match any string. 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. syntax is the same as for include. trayicon indicates that a system tray (notification area) icon should be displayed for the application on
windows: yes or no. 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. launch prism with -webapp [bundle] to load the specified web profile and install the webapp to your prism profile folder. once the webapp is installed, it can be launched us...
Scripting - Archive of obsolete content
prism allows for some client-side web application customization. the web application bundle is allowed to hold a javascript file named webapp.js (called the webapp script). this file will be loaded into the prism chrome
window very much like a firefox extension is loaded into the browser chrome
window. it can contain the following functions: startup when the app starts, before the user interface is displayed. since the web application has not yet loaded, the
window object is still undefined. preload just before the user interface is displayed. returning false causes the application to terminate. load after the main application
windows has finished loading. the
window object has been initialized and can be used. error if there is an error loading the main app page (e.g. the server is no...
...face is displayed. returning false causes the application to terminate. load after the main application
windows has finished loading. the
window object has been initialized and can be used. error if there is an error loading the main app page (e.g. the server is not accessible). shutdown just before the application terminates. prism exposes desktop integration features through an property of the
window object called platform. the platform property implements the nsiplatformglue interface, whose methods are described in the following section. methods of the
window.platform object can be called from webapp.js or from web content. ...
...currently, the webapp script also has access to full xpcom functionality, just like a firefox extension. this level of functionality is commonly called chrome-level privileges. ...
PyDOM - Archive of obsolete content
introduction this is the documentation for the binding of python and the mozilla dom. this allows you to use python code (almost) anywhere you can use javascript. globals and namespaces this is taken from a mail to the pyxpcom list - it should be expanded, but a copy-paste will do for now normal module semantics don't exist here. the globals are 'bound' to the global object (i.e., the
window), instead of to a module's __dict__ as you expect in the python world. note that we don't actually 'import' anything here - the scripts and event handlers do not exist in a python module. the intent is to provide similar semantics to js. for example, when a top-level
window has something like: <
window ... script="foo = 1" ... an event handler like: <button onclick="print foo"/> should be able to refe...
...the event handler could also have used getelementbyid - the point is that both the event handler and top-level script share the same namespace. using python ideally, you just tell mozilla you are using python, and magically you can use python instead of javascript. once you set the script type for a node, it is the default for that node and all children. this means that if you set the scr...
...could also have used getelementbyid - the point is that both the event handler and top-level script share the same namespace. using python ideally, you just tell mozilla you are using python, and magically you can use python instead of javascript. once you set the script type for a node, it is the default for that node and all children. this means that if you set the script-type to python for the
window, python is the default script type for all child elements in the
window. xul use a script-type attribute on your elements. for example, <
window script-type="application/x-python" .../> html <meta http-equiv="content-script-type" content="application/x-python" /> should work (but possibly doesn't - see bug 100924). but addeventlistener within a <script type="application/x-python"> block does. al...
Remotely debugging Firefox for Metro - Archive of obsolete content
this article explains how to use remote debugging to inspect and code running in the new
windows 8 ("metro-style") firefox app, using the developer tools in firefox on the desktop. prerequisites you will need:
windows 8 (metro-style) firefox running in the touch-friendly "metro" mode on a
windows 8 computer. firefox running in classic "desktop" mode on
windows, mac os x, or linux, either on a separate computer or in a separate profile on the same computer. set up firefox for metro go to about:config in firefox for metro, and set the following required preference: devtools.debugger.remote-enabled = true you may also want to set these optional preferences: devtools.debugger.force-local = false (if you want to connect from a different machine over the network) devtools.deb...
...elect "connect...". you'll see a page that looks like this: if you are running firefox for metro on the same computer with the default settings, use the default host (localhost) and port (6000), and press the "connect" button. if you are connecting to firefox for metro on a different computer or a different port, enter the appropriate hostname and port number and then press "connect." in the
windows 8 (metro) browser next you'll see a dialog in firefox for metro asking you to confirm the connection. press the "ok" button to continue. tip: if the remote connection times out, flip to the desktop via the desktop tile and check if
windows firewall has thrown up an incoming connection permissions prompt. on the desktop next, the desktop shows you a dialog that looks something like this: ...
...ill attach the debugging tools to the web content hosted by that tab. if you want to debug your web content, you'll choose the relevant content tab. you'll see one entry under "available remote processes": this is the browser process itself. you'll choose this option if you want to debug the browser's own code. let's choose to attach to the mozilla.org website. 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. ...
Supporting private browsing mode - Archive of obsolete content
firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. this includes cookies, history information, download information, and so forth. when private browsing mode is enabled, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing mode is turned off, and the regular databases are re-activated. the temporary cookie and local storage databases start out empty. ...
...publishing the information in private browsing mode. note: it is not acceptable for an extension that records things like urls or domains visited to even offer the option to opt out of private browsing mode. private browsing for theme designers if you want to make your theme look different when used in private browsing mode, you can do so quite easily by using the browsingmode attribute in the
window element in browser.xul. this attribute has the value "normal" when the user isn't in private browsing mode, and is "private" when in private browsing mode. for example, if you want to use a different background color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to ...
...owsing mode, and is "private" when in private browsing mode. for example, if you want to use a different background color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-
window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-
window-inactive) { -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-right-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); } this snippet is pulled directly from the standard skin; you can customize as you see fit. private browsing for plug-in a...
Tamarin Acceptance Testing - Archive of obsolete content
...
... ...
... tests built-in self tests see instructions in doc/selftest.html in the tamarin repository. avmdiff see instruction in doc/avmdiff.txt in the tamarin repository. misc the acceptance and performance tests can be run on
windows mobile devices connected to
windows desktop machine with activesync. to build and setup the tools see building_tamarin_
windows_mobile_utilities. ...
Venkman Internals - Archive of obsolete content
07 (pst) venkman-debugger.js sets hooks in to the jsdidebuggerservice. initdebugger(). scriptmanager in initdebugger() the previous loaded scripts are passed to an onscriptcreated() method which binds them to a scriptmanager. there is one scriptmanager per url (web page). this method is set into jsdiscripthook.onscriptcreated venkman-views.js views are the panels shown within the venkman
window. for example, the "open
windows" view shows the browser's
windows. venkman-records.js a "record" seems to be data underlying a view. for example, framerecord represents a javascript stack frame. venkman-msg.js localization code, reads venkman.properties from a subdirectory of "locale" and injects variables. things like msg.alert define variables msg_alert. venkman-utils.js defines the dd...
... to obtain the antecedent files: doc.getelementsbytagname("script"); then extract the urls from the src attributes. ...
... venkman-records.js a "record" seems to be data underlying a view. for example, framerecord represents a javascript stack frame. venkman-msg.js localization code, reads venkman.properties from a subdirectory of "locale" and injects variables. things like msg.alert define variables msg_alert. venkman-utils.js defines the dd debug dump and friends
windowrecord representation of the open
windows. filecontainerrecord - list of script tags found in the parent record's
window.document property. to obtain the antecedent files: doc.getelementsbytagname("script"); then extract the urls from the src attributes. scriptwrapper newsgroup, 2002, rgrinda here is a bit more information about how venkman tracks files and functions... a scriptwrapper is a pure js object defined only inside ven...
Install Wizards (aka: Stub Installers) - Archive of obsolete content
the stub installer calls some glue code: xpistub which ...
...the stub installer calls some glue code: xpistub which resides at: < ht...
...hrough xpistub the libxpnet code that is statically linked in the stub installers are written in code native to the platform using native widget toolkits including the
windows api for
windows, the mac toolbox for the mac, and gtk for the unix version. to learn more about the three platform-specific versions of the stub installer follow the links below: unix stub installer mac stub installer
windows stub installer what do we mean by xpistub? the xpinstall engine is not called directly by the stub installer. the stub installer calls some glue code: xpistub which resides at: < http://lxr.mozilla.org/seamonkey/sou...pinstall/stub/> this "glue" code initialized xpcom and registers the xpinstall engine and requisite components to prepare for use by the stub installer. the stub installer hands...
confirm - Archive of obsolete content
underlying implementation can freely decide where each of the three buttons is placed. the following examples show the result of calling confirm() with three buttons 0='a', 1='b' and 2='c'. firefox on linux mozilla application suite on win32 it is therefore recommended to only use two buttons wherever possible, and to keep in mind that button 1 has the same return value as "
window closed" (see below). abutton0title custom title for button 0. abutton1title custom title for button 1. abutton2title custom title for button 2. acheckmsg a string to display as a checkbox label. acheckstate an object with a boolean value property representing the state of the checkbox: when the dialog box is shown, it...
... custom title for button 1. abutton2title custom title for button 2. acheckmsg a string to display as a checkbox label. acheckstate an object with a boolean value property representing the state of the checkbox: when the dialog box is shown, its checkbox will be checked when this object's value is true. after the user presses a button (or closes the
window), the value property is updated according to the checkbox. var check = { value: false }; var button = confirm("are you sure you want to install foobar 0.1?", "confirm", std_yes_no_buttons, null, null, null, "install fluxcompensator 0.4 as well", check...
... std_yes_no_buttons, null, null, null, "install fluxcompensator 0.4 as well", check); returns the return value is an integer indicating which button the user selected: value button 0 'cancel' or button 1. also: user closed the dialog
window 1 'ok' or button 0 2 the third button previous versions of the xpinstall api stated the return value of confirm() to be a boolean. that is incorrect, confirm() always returned a plain integer (in pre-gecko-1.8 versions either 0 or 1). notes the preferred method for detecting support for custom dialog boxes is querying the existence of the butto...
Learn XPI Installer Scripting by Example - Archive of obsolete content
o the verifications at the front end of the installation, then at a minimum, the install scripts mustinitialize, add the files to be installed, and execute. note also that when you call methods on the install--as you do so often in installation scripts (getfolder, initinstall, addfile, and performinstall are all examples of common install object methods)--the install object is implicit; like the
window object in regular web page scripts, the install object does not need to be prefixed to the method. initializing the installation all installations must begin with initinstall(). the initinstall() method on the install object creates a new installation for the specified software and version. in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamo...
... example, like the browser.xpi install does, you need to alert the chrome registry to these changes, so that skins, user preferences, packaging lists, and localization bundles will all track the new software. for registering software with the win32 operating system, the xpinstall api provides two special install objects, winprofile and winreg. these two objects provide programmatic access to the
windows user profile and the
windows registry, respectively. the browser.xpi install script does not demonstrate the use of these objects, but see the xpinstall api reference for more information about registering software with the win32 operating systems and other operating systems. to register new netscape 6-based software (e.g., plug-ins, new components, new themes, new packages) with the chrome reg...
...: call initinstall with the name and version of the executable (the version is not optional, though you may or may not use the version in subsequent installations or updates) find somewhere to put the installed files. in the example below, getfolder is used with the "program" keyword to specify the browser's program directory as the target for installation. since i am using ns6 right now on a
windows machine, that target directory is "c:\program files\netscape\netscape 6\". add files to the initialized installation using addfile. call performinstall to execute the installation. here is an example of small but complete installation script. var xpisrc = "cd_ripper.exe"; var xpidoc = "readme_cdrip"; initinstall("my cd ripper", "cdrip", "1.0.1.7"); f = getfolder("program"); setpackagefolde...
modifiers - Archive of obsolete content
will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. ...
...eys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. ...
...mbinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. os:
windows logo key on
windows, super or hyper key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut key. accel: the key used for keyboard shortcuts on the user's platform, which is control on
windows and linux, and command on mac. usually, this would be the value you would use. access: the access key for activating menus and other elements. on
windows, this is the alt key, used in conjuction with an element's accesskey. any: indicates that all modifiers preceding it are optional. ...
wait-cursor - Archive of obsolete content
« xul reference home wait-cursor type: boolean set this attribute to true to have the cursor switch to a waiting cursor while the mouse is hovering over the element. usually, you would only use this on the
window element or other top-level elements. in order to revert to the normal cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear. ...
... this on the
window element or other top-level elements. in order to revert to the normal cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear. ...
...r other top-level elements. ...
Panels - Archive of obsolete content
t. it is used when supporting temporary popup displays for selecting or entering data. the panel element the panel element is used to create panels. the panel will display whatever elements are placed as children of the panel element. for example, the following panel displays a textbox for entering a name. note that the panel is not placed in a separate file and is instead placed inside another
window. <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </
window> many panels will be associated with a button, as in this example. when the button is pr...
...king elsewhere, the panel should always provide a means to close the panel itself. in this example a cancel button has been added. for more information about these types of panels, see floating panels. focus in panels elements within panels may be focused with the mouse, and the currently focused element may be adjusted by pressing the tab key. when a popup is opened, if an element in the main
window is focused, that element is unfocused, and a blur event is fired at it. although no element within the popup panel is focused by default, the user may focus the first element within the panel by pressing the tab key. if you want to set the focus to an element by default when a panel is opened, adjust the focus within a popupshown event handler. for instance, to have the textbox initially focused ...
... the focus within a popupshown event handler. for instance, to have the textbox initially focused in the example above: <panel id="search-panel" onpopupshown="document.getelementbyid('search').focus()"> to disable the adjusting of focus when a panel is opened, set the noautofocus attribute to true: <panel noautofocus="true"> this will cause the focus to remain on the element within the main
window that has focus when the panel is opened. note that this will also keep the focus within the panel when it is closed. when a panel is closed, the focus is removed from the element within the panel which has the focus event, if any, and whatever element was focused before the panel was opened is refocused. you can prevent the focus from being removed by setting the noautofocus attribute to true as...
PopupKeys - Archive of obsolete content
this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary. on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. ...
...us in a chain of submenus. when letter keys are pressed, the accesskeys within the menu are selected. if an access key is a pressed that does not correspond to an item within the menu, items that don't have access keys can be selected if the key pressed corresponds to the first letter of the label. other keys are ignored by the menu key listener, however, the event does not propagate to the main
window. this is because the key listener is a capturing listener attached to the document. for a panel, the only key that is handled by default is the escape key to close the panel. the other keys do not apply. focus in popups a menu does not take the keyboard focus. the menu key listener described above captures key events on the document. thus, a key listener added to a <menupopup> will not receive a...
...nt. for a panel, the only key that is handled by default is the escape key to close the panel. the other keys do not apply. focus in popups a menu does not take the keyboard focus. the menu key listener described above captures key events on the document. thus, a key listener added to a <menupopup> will not receive any key events. instead, you must add a capturing key listener to the document or
window if you want to listen for keys pressed within a menu. note that the last argument here is true to listen for events during the capturing phase of event propagation:
window.addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself. while a menu is open, the focus remains where it...
Notes - Archive of obsolete content
some more links on the matter: a mozillazine post. ...
...some more links on the matter: a mozillazine post. ...
...some more links on the matter: a mozillazine post. a blog post. ...
Sorting and filtering a custom tree view - Archive of obsolete content
ues are loaded via javascript. this will not work for other types of trees, for example rdf-backed or ones created with dom methods. for the sake of simplicity, strings are not localized and the data loaded is hard coded. because of bug 340478, this code will only work from privileged script. ...
...aded via javascript. this will not work for other types of trees, for example rdf-backed or ones created with dom methods. for the sake of simplicity, strings are not localized and the data loaded is hard coded. because of bug 340478, this code will only work from privileged script. ...
...this is useful if this is an editable table //to prevent the user from losing the row they edited var topvisibler...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
se any encoding except unicode. if your language uses accents or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file, type some of the special characters that your language uses. save the file. open the file in seamonkey (for example, by dragging it and dropping it in the navigator
window, or by choosing file – open file... from seamonkey's menu bar). from seamonkey's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to customize the images. you can ...
...lowing method to find it. from seamonkey's menu bar, choose tools – web development – javascript console. copy the following code. it is one very long line ending in path—make sure that you get all of it: components.classes["@mozilla.org/file/directory_service;1"].getservice( components.interfaces.nsiproperties).get("achrom", components.interfaces.nsifile).path in the javascript console
window, paste the code in the field near the top. presss the return or enter key, or the evaluate button. the console displays the location of seamonkey's chrome directory. explanation: the chrome directory contains program files that are part of seamonkey itself, together with other files that are provided by extensions. your toolbar button will be an extension. 2. delete these two files: ...
... <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- address book --> <rdf:li> <rdf:seq about="chrome://messenger/content/addressbook/addressbook.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- message --> <rdf:li> <rdf:seq about="chrome://messenger/content/message
window.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- message compose --> <rdf:li> <rdf:seq about="chrome://messenger/content/messengercompose/messengercompose.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- mail --> <rdf:li> <rdf:seq about="chrome://mess...
Box Objects - Archive of obsolete content
n the box as displayed, instead of their order as they are stored in the dom. retrieving position and size the box object provides six read only properties, x, y, screenx, screeny, width and height, for determining the currently displayed position and size of an element. all values returned are in pixels. x, y the x and y coordinates are referenced from the top left corner of the document in the
window (that portion which excludes the
window border and title bar) and refer to the top left corner of the element, including css padding. css margins and borders* are excluded. the top left corner of the document is that which is obtained from screen.mozinnerscreenx, screen.mozinnerscreeny screenx, screeny the screenx and screeny coordinates are referenced from the absolute top left corner of the s...
... or size. the collapsed attribute will have the same effect to the user element visually, except that it leaves the element on screen and keeps the layout objects intact, but changes the size of the element to 0. this means that while both hidden and collapsed elements have 0 width and height, hidden elements have a x and y position of 0, while collapsed elements will retain their position in the
window. to retrive or modify the hidden or collapsed state use the corresponding properties as in the following example. example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> ...
...d. example 3 : source view <hbox> <button label="button 1" oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 2" hidden="true"/> <button label="button 3" oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a
window, the elements are ordered according to a number of properties, for instance the orientation, their ordinal group and their direction. orient attribute the orientation is commonly modified using the orient attribute. there is also a corresponding css property -moz-box-orient which may be used instead, depending on the situation. this attribute was explained earlier in the section on boxes. ordinal...
Introduction to XBL - Archive of obsolete content
although you can use any element, even one you make up yourself). by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...
... a binding to only those boxes that belong to that class. the following example demonstrates this. ...
...the box has been declared to have a class of okcancelbuttons. the style sheet associated with the file says that boxes with the class okcancelbuttons have a specialized binding, defined in the xbl file. you may use other elements besides the box, even your own custom tags. we'll look more at the details of the xbl part in the next section. however, to summarize, it causes two b...
List Controls - Archive of obsolete content
mary ellen" /> <listcell label="candle maker" /> </listitem> <listitem> <listcell label="roger" /> <listcell label="swashbuckler" /> </listitem> </listbox> in this example, the flex attribute is used to make the column flexible. this attribute will be described in a later section, but here it allows the column to fill all of the remaining space horizontally. you can resize the
window to see that the column stretches as the
window does. if you shrink the size horizontally, the labels on the cells will crop themselves automatically using an ellipsis. you can use the crop attribute on the cells or items set to the value none to disable the ellipsis. drop-down lists drop-down lists can be created in html using the select element. the user can see a single choice in a textbox an...
...ically using an ellipsis. you can use the crop attribute on the cells or items set to the value none to disable the ellipsis. drop-down lists drop-down lists can be created in html using the select element. the user can see a single choice in a textbox and may click the arrow or some similar such button next to the textbox to make a different selection. the other choices will appear in a pop-up
window. ...
...the third, menuitem, creates the individual choices. ...
Splitters - Archive of obsolete content
you can also hide the sidebar by clicking the notch. splitter element this feature is accomplished using an element called a splitter. it creates a skinny bar between two sections which allows these sections to be resized. ...
...you can also hide the sidebar by clicking the notch. splitter element this feature is accomplished using an element called a splitter. it creates a skinny bar between two sections which allows these sections to be resized. ...
... before the splitter will collapse. here, it is the iframe. as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up. the resizeafter attribute has been set to grow so that the elements after the splitter push themselves down when the splitter is dragged down. this results in the content of the frame growing to any size. it should be noted that the
window does not resize itself automatically. you'll also notice that this is a horizontal splitter because it has been placed in a vertical box. normal state: collapsed state: find files example so far : source view next, we'll find out how to create toolbars. « previousnext » ...
The Box Model - Archive of obsolete content
although a box is the fundamental part of xul element layout, it follows a few very simple rules. ...
...although a box is the fundamental part of xul element layout, it follows a few very simple rules. a box can lay out its children in one of two orientations, either horizontally or vertically. ...
...the buttons so that they are oriented horizontally, all you need to do is change the vbox element to a hbox element. login prompt example you can add as many elements as you want inside a box, including other boxes. in the case of a horizontal box, each additional element will be placed to the right of the previous one. the elements will not wrap at all so the more elements you add, the wider the
window will be. similarly, each element added to a vertical box will be placed underneath the previous one. the example below shows a simple login prompt: example 2 : source view <vbox> <hbox> <label control="login" value="login:"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" value="password:"/> <textbox id="pass"/> </hbox> <button id="ok" label="ok"/> <but...
Toolbars - Archive of obsolete content
« previousnext » a toolbar is usually placed along the top of a
window and contains a number of buttons that perform common functions. xul has a method to create toolbars. adding a toolbar like a number of elements, xul toolbars are a type of box. usually, a row of buttons would appear in the toolbar, but any element can be placed in a toolbar. for example, the mozilla browser
window contains a textbox that displays the page url. toolbars may be placed on any side of the
window, either horizontally or vertically. of course you wouldn't normally put a textbox in a vertical toolbar. actually, because toolbars are just boxes they can actually go anywhere you want, even in the middle of a
window. typically however, a set of toolbars would appear along the top of a
window. when more ...
...hat creates the actual toolbar. inside it are placed the individual toolbar items, usually buttons, but they can be other elements. in the example above, only one toolbar was created. multiple toolbars can be created just as easily by adding more toolbar elements after the first one. the toolbox is a container for toolbars. in some applications, you will have several toolbars along the top of the
window. you can put them all inside a toolbox. you do not have to put toolbar elements inside a toolbox. customizable toolbars firefox or other toolkit applications have customizable toolbars; therefore, many extensions add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar. for more information about customizable toolbars, see creating toolbar buttons. our ...
... a toolbar with two buttons has been added here. in the image, you can see them appear horizontally along the top. notice that the toolbar has been placed inside the vertical box just above the tabbox. this is because we need the vertical orientation so that the toolbar will appear above everything else. the find files example so far: source view next, we'll find out how to add a menu bar to a
window. « previousnext » ...
Trees - Archive of obsolete content
hierarchical lists using a tree. the tree one of the more complex elements in xul is the tree. a tree may be used to display rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, resize and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks
window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may only contain text and images. (using advanced features, progress meters or che...
...s flexible if your tree is flexible, so that the columns stretch as the tree does. in this example, the second column will be approximately twice as wide as the first column. all of the columns should be placed directly inside a treecols element. in this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. you may have to resize the
window to see anything since there isn't any data to display. since the tree has been marked as flexible, the body will stretch to fit the available space. making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. however, you may specify a specific number of rows to appe...
...hem with the mouse, or by highlighting them with the keyboard. the user can select multiple items by holding down the shift or control keys and clicking additional rows. to disable multiple selection, place a seltype attribute on the tree, set to the value single. with this, the user may only select a single row at a time. add a tree to our find files example let's add a tree to the find files
window where the results of the search would be displayed. the tree will use a content tree view. the following code should be added in place of the iframe. <tree flex="1"> <treecols> <treecol id="name" label="filename" flex="1"/> <treecol id="location" label="location" flex="2"/> <treecol id="size" label="size" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> ...
XUL Tutorial - Archive of obsolete content
this tutorial describes xul, the xml user-interface language. this language was created for the mozilla application and is used to describe its user interface. ...
...he has graciously given us permission to use it as part of the mdn. original document information author: nei...
...he has graciously given us permission to use it as part of the mdn. original document information author: neil deakin copyright informatio...
XUL Accesskey FAQ and Policies - Archive of obsolete content
on macintosh, accesskeys are available only in html not in xul, and they are activated using ctrl+letter instead of alt. ...
... the case of the accesskey specified. mozilla's accesskey implementation will first try to underline a letter of the same case, but if there isn't one it will fall back on a letter of the opposite case. our preference is to underline the first letter of one of the words, so it's important to be aware of this quirk. avoid duplicates don't use the same accesskey letter twice in the same
window. be especially careful of drop down menus in the same
window. for example, in the manage bookmarks dialog, don't use f, e, v, t or h (file, edit, view, tasks, help). help wanted: it would be useful to have an automated tool to check for duplicate and missing accesskeys in xul files. make it easy to see use letters at the beginning of the first or second word of the label. use...
... y. example: p, g, q, y. letters next to a letter with a descender. letters that are only one pixel wide, such as i or l. example: i, l. make it easy to remember do the most important prompts first, so that they get the best accesskeys. see if a similar prompt has an accesskey elsewhere in mozilla, and use the same accesskey. there are standard accesskeys used in
windows as well, like properties. if not, try the first letter of the first word in the prompt. next, try the first letter of another word in the prompt. finally, use any non-silent letter in an action word (do these after the rest of the dialog has accesskeys chosen). common elements that don't get accesskeys ok buttons. cancel buttons. close buttons. tab panel labels. ...
XUL Reference - Archive of obsolete content
nt datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane pref
window progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbo...
...tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where
window wizard wizardpage categorical list of all xul elements « xul reference «
windows
window wizard wizardpage titlebar
window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and ...
...oolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page
window wizard wizardpage preference preferences prefpane pref
window browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring...
XUL accessibility tool - Archive of obsolete content
ddons.mozilla.org. the version currently on xulplanet is compatible with the following xul applications: firefox 1.5+ thunderbird 3.0a+ recent sunbird builds recent songbird builds. it probably also works on seamonkey, but i haven't verified this. use to launch the tool after installation, look for an entry in the tools menu of the host application, or hit ctrl+alt+shift+f12. 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. be aware that the report might take a little while to be ready depending on the complexity of the application being analyzed and the speed of your machine. future work the following things have been suggested or are planned for a future version of the tool: ...
...sskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives). new features: (aaronlev) automatically test any new
windows as they are opened. (aaronandy) highlight or blink source element in original xul app upon click of referencing line in report. (aaronlev) compatibility with more xul applications. (aaronandy) maybe an online tool to automatically generate a xul a11y tool compatible with a user-specified xul app. (aaronandy) link report sections to relevant part of xul a11y guidelines. (aaronandy) enable tab...
...k source element in original xul app upon click of referencing line in report. (aaronlev) compatibility with more xul applications. (aaronandy) maybe an online tool to automatically generate a xul a11y tool compatible with a user-specified xul app. (aaronandy) link report sections to relevant part of xul a11y guidelines. (aaronandy) enable tabs, context menu, and other browser extras in report
window. (aaronandy) xul runner version that can run from the command line, check a text file, and output the results somewhere. known bugs: test for lowercase i or l as accesskey (sometimes?) flags upppercase i and l too. possible false positives in some of the other tests processing is slower than we would like. ideas for further work on xul a11y some general ideas for using the tool and gui...
menupopup - Archive of obsolete content
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. it may be attached to any element using the popup attribute. ...
...npopupshowing type: script code this event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. 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. position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing relative to the mouse cursor. this value can be specified either as a single word offeri...
... be off of the screen. the x and y coordinates are measured in css pixels. 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. there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the
window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup will be positioned relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears relative to the element. ...
toolbox - Archive of obsolete content
ore information is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events. ...
... is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events. ...
..."toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </
window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position...
tooltip - Archive of obsolete content
width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the
window. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. if this ...
...onpopupshowing type: script code this event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. 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. page type: boolean setting the page attribute to true will result in the tooltip being filled automatically as appropriate for a browser content area tooltip, i.e. the tooltip text is set according to the dom element in the browser that the user hovered over. example <tooltip id="pagetooltip" page="true"/> <browser tooltip="pagetooltip"/> position ...
...to be off of the screen. the x and y coordinates are measured in css pixels. 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. there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the
window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup will be positioned relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears relative to the element. ...
tree - Archive of obsolete content
ighted when an item in the tree is selected. otherwise, the entire row will be highlighted. to see the difference, compare the selection style in the folder list and the message list in mozilla mail. tabindex type: integer gets and sets the value of the tabindex attribute. treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the
window. this object implements the nsitreeboxobject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree. this property is equivalent to the boxobject property. view type: nsitreeview the view for the tree, which is the object which generates the data to be displayed. you can assign an object which implements nsit...
...tree: var t = document.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following. ...
...this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: url("") } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells. cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an ima...
Using LDAP XPCOM with XULRunner - Archive of obsolete content
ng --enable-ldap build option. see the build_documentation for more information about how to build xulrunner. when configuring build options, just add: ac_add_options --enable-ldap to your .mozconfig file. this will create two files in the components directory of the build package: mozldap.dll (or libmozldap.so or...) mozldap.xpt and two files in the root directory of the build package: on
windows: nsldap32v50.dll nsldappr32v50.dll on linux: libldap50.so libprldap50.so those are the native ldap library. if you copy as usual those files in the components directory of your xul app, this can't work. actually, the ldap interfaces are available (for exemple, components.interfaces.nsildapconnection is not null), but the components can't be loaded (for example, components.classes["@m...
...de "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { #ifdef ns_win32 moz_dll_prefix "nsldap32v50" moz_dll_suffix, moz_dll_prefix "nsldappr32v50" moz_dll_suffix, #endif //ns_win32 #ifdef ns_unix moz_dll_prefix "ldap50" moz_dll_suffix, moz_dll_prefix "prldap50" moz_dll_suffix, #endif //ns_unix nsnull }; // component.dll on
windows, libcomponent.dll on linux static char krealcomponent[] = moz_dll_prefix "mozldap" moz_dll_suffix; nsresult nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) { nsresult rv; nscomptr<nsifile> libraries; rv = alocation->getparent(getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_que...
...oc = (nsgetmoduleproc) pr_findfunctionsymbol(lib, ns_get_module_symbol); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, aresult); } then change your .mozconfig to add this line: ac_add_options --enable-extensions=ldapstub rebuild xulrunner. this will create a new file in the components subdirectory of the built package, mozldap_stub.dll (on
windows) or libmozldap_stub.so (on linux). copy mozldap.xpt and mozldap_stub.dll into your components xul app subdirectory. create a libraries subdirectory in your xul app directory, and copy mozldap.dll (or libmozldap.so), and the native ldap binaries into it. don't forget to clean your profile. you can now use the ldap components. ...
nsIContentPolicy - Archive of obsolete content
o load. type_websocket 16 indicates a websocket load. type_csp_report 17 indicates a content security policy report. type_xslt 18 indicates a style sheet transformation. type_beacon 19 indicates a beacon post. type_fetch 20 indicates a load initiated by the globalfetch.fetch() method, which is available as a global in both
window and worker contexts. type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>. type_web_manifest 22 indicates a request to load a web manifest. type_internal_script 23 an internal constant used to represent scripts loaded using <script> elements. important: this type is mapped to type_script before be...
...l arequestprincipal ); parameters acontenttype the type of content being tested. this will be one one of the content types listed above. acontentlocation the uri of the content being checked; must not be null. arequestorigin {optional_inline}} the location of the resource that initiated this load request; can be null if inapplicable. acontext {optional_inline}} the nsidomnode or nsidom
window that initiated the request, or something that can queryinterface() to one of those; can be null if inapplicable. 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). amimetypeguess optional. a guess for the requested content's mi...
... parameters acontenttype the type of content being tested. this will be one of the type_* constants. acontentlocation optional. the location of the resource being requested: may be, e.g., a post-redirection uri for the resource. arequestorigin optional. the location of the resource that initiated this load request; can be null if inapplicable. acontext optional. the nsidomnode or nsidom
window that initiated the request, or something that can query interface to one of those; can be null if inapplicable. amimetype the mime type of the requested resource (for example, image/png), as reported by the networking library, if available (may be empty if inappropriate for the type, e.g., type_refresh). aextra an optional argument, pass-through for non-gecko callers to pass extra data to cal...
2006-10-13 - Archive of obsolete content
large discussion about why the use of the sequence 2.0.0.*. discussions everyone and his goldfish thinks bug 300198 should be fixed large response to the discussion about the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=300198, regarding middle clicking on a tab. annoying firefox 2 save dialog instead of open/save ones. ...
...king on a tab. 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. a way to recover the toolbars from popup
windows that hide it a suggestion for a way to recover toolbars from a popup
window that disables it. user suggests 3 ways, and suggests a default. (no responses as of yet) selected tab looks too close to unselected tab discussion about how to change the colour of a selected tab and an unselected tab. it's suggested that its a os problem in the desktop theme, as opposed to problem with firefox. ...
...e context menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture website content before it is displayed. firefox add-on wanted user is inquiring if there is such an application to automatically save pieces of a webpage everytime is it updated. 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. this function was disabled, see bug: https://bugzilla.mozilla.org/show_bug.cgi?id=180048 meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-12-01 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - november 24, 2006 - december 1, 2006 announcements none this week. 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. this implementation was removed in 2002 to fight against popups. xml in firefox is a major problem a major debate surrounding the use of xml for customizing rss feeds. devs say this is the way its supposed to be, others say its a bug! the debate continues. discussion of support for modal
windows within firefox 2.0 a lengthy post regarding the re-implementation of modal
windows into firefox. basic feature that i think is a must in any web broswer a discussion revolving around th...
...ng around the idea of having firefox automatically convert mistaken non-english characters to english so that web addresses will be completed. mozstorage documentation up a revisted discussion surround the mozstorage documentation. rich results for searches a proposal to implement "rich results", a set of registered sites that would provide information as it relates to a user's search.
windows dde shell integration removal a call for responses or concerns regarding the removal of the dde shell integration. how do allow an internal web site to have universalbrowserwrite? a question regarding having an internal website use universalbrowserwrite on a local intranet. developping microsummary generator questions and discussion surrounding microsummaries in ff 2.0. applying exte...
...browserwrite? a question regarding having an internal website use universalbrowserwrite on a local intranet. developping microsummary generator questions and discussion surrounding microsummaries in ff 2.0. applying extensions question regarding the proper application of ff extensions. finding out how blur() works... question regarding how to access the functionality that arises when
window.blur() is called. ff2 not responding to click on link concerns regarding ff 2.0 not responding to button or link clicks until the button or link is clicked a second time. dual screen browsing discussion regarding browsing across dual screens and simplifying the process. suggestion for status bar suggestion that a new status bar be implemented that would have a hover>appear style of op...
2006-11-03 - Archive of obsolete content
rs the following problem: no rule to make target `../../dist/lib/components/libpipboot.a', needed by `minimo'. he has also created a bug entry on bugzilla with the bug id of opened bug #344854. problem compiling with vs 2003 .net phil is trying to compile firefox for the first time and is getting an error when doing so: building deps for /cygdrive/c/mozilla/toolkit/airbag/airbag/src/common/
windows/guid_string.cc make[1]: leaving directory `/cygdrive/c/mozilla/obj-i686-pc-cygwin' make: *** [build] error 2 he also noted that he is using make 3.80-1. on november 1st gavin sharp responded phil's question. he said that the problem that phil is experiencing is a known issue. he also mentioned that airbag doesn't build with msvc 7.1. (http://www.google.com/url?sa=d&q=htt...tail%3fid%3d64) ...
...d] error 2 he also noted that he is using make 3.80-1. on november 1st gavin sharp responded phil's question. he said that the problem that phil is experiencing is a known issue. he also mentioned that airbag doesn't build with msvc 7.1. (http://www.google.com/url?sa=d&q=htt...tail%3fid%3d64) gavin recommended that phil should add |ac_add_options --disable-airbag| to his .mozconfig. new
windows compatibility issue? originally posted on november 1st: dale dale has set up a
windows machine in order to perform mozilla builds but has been unsuccessful to do so. according to him he has followed the
windows build requirements recommended by mozilla. he also noted that he has had different results (error messages when compiling) on different machines. dale has discovered that there are oth...
...ost_libidl_libs originally posted on october 29th: gery gery claims to have discovered a problem when he compiles mozilla across different platforms when pkg_config is used. on november 1st peter weilbacher responded gery's question. he told gery to create a bug for this problem in bugzilla. on november 2nd gery replied with the bug number 358706. problems building browser's trunk on
windows using vs 2005 originally posted on october 29th: ricardo sixel is trying to retrieve the trunk source code using the browser check out option. however it fails on him. he has created the following bug entry https://bugzilla.mozilla.org/show_bug.cgi?id=331404. announcements a change in tp2's numbers on october 31st adam guthrie announced that: rob helmer will be adding his patch to fix tp2...
2006-12-01 - Archive of obsolete content
firefox 1.5.0.9/2.0.0.1 update - we need help! jay patael calls for help getting the next update ff 1.5.x and 2.x. ...
... firefox 1.5.0.9/2.0.0.1 update - we need help! jay patael calls for help getting the next update ff 1.5.x and 2.x. ...
... firefox 1.5.0.9/2.0.0.1 update - we need help! jay patael calls for help getting the next update ff 1.5.x and 2.x. ...
NPN_PostURL - Archive of obsolete content
n delete the file. false: post the raw data in buf. returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npn_posturl works similarly to npn_geturl, but in reverse. npn_geturl reads data from the url and either displays it in the target
window or delivers it to the plug-in. npn_posturl writes data from a file or buffer to the url and either displays the server's response in the target
window or delivers it to the plug-in. if the target parameter is null, the new stream is passed to the plug-in regardless of mime type. when you use npn_posturl to send data to the server, you can handle the response in several different ways by specif...
...less of mime type. when you use npn_posturl to send data to the server, you can handle the response in several different ways by specifying different target parameters. if target is null, the server response is sent back to the plug-in. you can get the data and save it in a file or use it in a program. if you specify _current, _self, or _top, the response data is written to the same plug-in
window and the plug-in is unloaded. if you specify _new or _blank, the response data is written to a new browser
window. you can also write the response data to a frame by specifying the frame name as the target parameter. for http urls only, the browser resolves this method as the http server method post, which transmits data to the server. the data to post can be contained either in a local tempora...
...ly, the browser resolves this method as the http server method post, which transmits data to the server. the data to post can be contained either in a local temporary file or a new memory buffer. to post to a temporary file, set the flag file to true, the buffer buf to the path name string for a file, and len to the length of the path string. the file-type url prefix "file://" is optional. ms
windows and os x if a file is posted with any protocol other than ftp, the file must be text with unix-style line breaks ('\n' separators only). to post data from a memory buffer, set the flag file to false, the buffer buf to the data to post, and len to the length of buffer. possible url types include http (similar to an html form submission), mail (sending mail), news (posting a news article), and...
NPP_HandleEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary delivers a platform-specific
window event to the instance. for
windowed plug-ins: currently used only on mac os. for
windowless plug-ins: all platforms. syntax #include <npapi.h> int16 npp_handleevent(npp instance, void* event); parameters the function has the following parameters: instance pointer to the current plug-in instance. event platform-specific value representing the event handled by the function. values: ms
windows: pointer to npevent structure mac os: pointer to a standard mac os eventrecord unix/x11: pointer to a standard xlib xevent for a list of possible events, see npevent. returns if the plug-in handles the event, the function should return true. if the plug-in igno...
...e mac os: pointer to a standard mac os eventrecord unix/x11: pointer to a standard xlib xevent for a list of possible events, see npevent. returns if the plug-in handles the event, the function should return true. if the plug-in ignores the event, the function returns false. description the browser calls npp_handleevent to tell the plug-in when events take place in the plug-in's
window or drawable area. the plug-in either handles or ignores the event, depending on the value given in the event parameter of this function. for a list of event types the application is responsible for delivering to the plug-in, see the npevent structure. ms
windows the browser gives each
windowed plug-in its own native
window, often a child
window of the browser
window, to draw into. the plug-in h...
...nt, depending on the value given in the event parameter of this function. for a list of event types the application is responsible for delivering to the plug-in, see the npevent structure. ms
windows the browser gives each
windowed plug-in its own native
window, often a child
window of the browser
window, to draw into. the plug-in has complete control over drawing and event handling within that
window. mac os the browser does not give a
windowed plug-in a native
window, because the mac os platform does not support child
windows. instead, the
windowed plug-in draws into the graphics port associated with the the browser
window, at the offset that the browser specifies. for this reason, npp_handleevent is only way the plug-in can receive events from its host application on mac os. when npp_hand...
Sunbird Theme Tutorial - Archive of obsolete content
use themes. go to sunbird's program directory, then to the <tt>defaults</tt> directory there. in the <tt>pref</tt> directory, edit the file <tt>sunbird.js</tt> and search for the <tt>pref("extensions</tt> entries. add the line: pref("extensions.dss.enabled", false); save the file. using your theme to use your theme, restart sunbird. from the menu bar, choose tools – themes... in the themes
window, check that your new theme has appeared. select it and press the use theme button. restart sunbird again. if your theme is working, you see the effect of the changes that you made. developing your theme to develop your theme, make further changes to the theme files. you might prefer to do some design work in an image editor first, so that you have a clear design concept to implement. underst...
...same as in sunbird. note: sunbird's views changed at the end of december 2005. so do not waste time styling the old views. work with a recent test build so that your theme will be compatible with the next release. testing further changes when you make further changes to your theme, test them by restarting sunbird. to detect errors, choose tools – javascript console... the javascript console
window displays css errors, not just javascript errors. making an icon and preview the themes
window can display an icon and a preview graphic. you normally make these after you have designed the rest of your theme. make an image file 32 by 32 pixels, and save it as <tt>icon.png</tt> in your theme directory. make an image file about 200 by 100 pixels, and save it as <tt>preview.png</tt> in your theme...
...ny component directories. name the packed file with the <tt>.jar</tt> extension. for example, when i wrote this article i used this command in my theme directory: zip -9 testing-0.1.jar * chrome/testing.jar make this jar file available to users. installing a packaged theme install your packaged theme in the normal way, by dragging the jar (or a link to it) and dropping it in sunbird's themes
window. select the newly installed theme and press the use theme button. restart sunbird. ...
Tamarin Tracing Build Documentation - Archive of obsolete content
tamarin source versions the following instructions are for obtaining and building the tamarin tracing source code. ...
...e. ...
... commands to build tamarin tracing: $ hg clone http://hg.mozilla.org/tamarin-tracing $ cd tamarin-tracing $ mkdir objdir-debug $ cd objdir-debug $ python ../configure.py --enable-shell $ make ... $ shell/avmshell avmshell 1.0 build cyclone ... that's all. the avmplus executable is avmshell. for verbose build of tamarin, you can pass cppflags to make. $ make cppflags=-davmplus_verbose
windows mobile to build for arm: $ python ../configure.py --target=arm-
windows --enable-shell; make to build for thumb: $ python ../configure.py --target=thumb-
windows --enable-shell; make platform-specific builds project files for specific platforms/ides (microsoft visual studio, xcode, etc) are included in the source tree under tamarin-tracing/platform, but are not formally supported. running tam...
Using SSH to connect to CVS - Archive of obsolete content
-access cvs account to cvs.mozilla.org. anonymous/read-only access via ssh is not available at this time. please see our source code page for directions accessing read-only cvs, and our getting write access page for directions on obtaining write access. generating an ssh key first, install ssh. most linux, bsd, and osx distributions come with it installed already. 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. the following command should generate a suitable key pair: ssh-keygen -t dsa this will take a moment, followed by a prompt for a passphrase. once you have entered a passphrase, ssh-keygen will create two files, ~/.ssh/id_dsa and ~/.ssh/id_dsa.pub do n...
...passphrase requests by using ssh-agent. if you don't already run ssh-agent on your computer, it's probably easiest to start it up whenever you set up your environment to checkout and build mozilla. assuming you use a shell script or batch file to set things up, just add the commands below to the end of your file. posix shell eval `ssh-agent -s` ssh-add ~/.ssh/id_dsa $shell ssh-agent -k exit x
windows in "~/.xinitrc" add "ssh-add". this will bring up a graphic box just after login, and before the desktop loads, asking for your passphrase. the passphrase will be held for the length of the x session, and be passed on to all child shells. ms-dos command prompt cygwin for /f "tokens=1,2,3* delims=; " %%a in ('ssh-agent -c') do if "%%a"=="setenv" set %%b=%%c set home=/cygdrive/c/path/to/your/c...
...hrase. since it's important that you kill the agent when you're finished with it, the last three lines start a child environment that, when exited, will result in the agent's process being killed. the environment you will actually use to build is the child environment. there are a few things to note about the commands for the ms-dos command prompt. first of all they will only work in versions of
windows based on nt (nt/2000/xp). if you're building on win9x/winme you'll need to find an alternative solution. if you're typing the commands directly (as opposed to storing them in a batch file that you call), you'll need to replace the occurances of "%%" in the first line with "%". finally, note that ssh-add needs the environment variable home to be set with the cygwin path to your cygwin home direct...
Debug.write - Archive of obsolete content
the debug.write function sends strings to the script debugger. syntax debug.write([str1 [, str2 [, ... [, strn]]]]) paramaters str1, str2, ... , strn optional strings to send to the script debugger. remarks the debug.write function sends strings to the immediate
window of a script debugger at run time. if the script is not being debugged, the debug.write function has no effect. the debug.write function is almost identical to the debug.writeln function. the only difference is that the debug.writeln function sends a newline character after the strings are sent. example this example uses the debug.write function to display the value of the variable in the immediate
window of the script debugger. note: to run this example, you must have a script debugger installed and the scr...
... ...
...ugging from internet explorer. var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store apps (
windows 8 and
windows phone 8.1). ...
Debug.writeln - Archive of obsolete content
the debug.writeln function sends strings to the script debugger, followed by a newline character. syntax debug.writeln([str1 [, str2 [, ... [, strn]]]]) parameters str1, str2, ... , strn optional strings to send to the script debugger. remarks the debug.writeln function sends strings, followed by a newline character, to the immediate
window of the microsoft script debugger at run time. ...
...ebugger at run time. if the script is not being debugged, the debug.writeln function has no effect. the debug.writeln function is almost identical to the debug.write function. the only difference is that the debug.write function does not send a newline character after sending the strings. example this example uses the debug.writeln function to display the value of the variable in the immediate
window of the microsoft script debugger. note: to run this example, you must have a script debugger installed and the script must run in debug mode. internet explorer 8 includes the javascript debugger. if you are using an earlier version of internet explorer, see how to: enable and start script debugging from internet explorer. var counter = 42; debug.writeln("the value of counter is " + counter);...
...script debugging from internet explorer. var counter = 42; debug.writeln("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store apps (
windows 8 and
windows phone 8.1). applies to: debug ...
Unconventional controls - Game development
cursors = this.input.keyboard.createcursorkeys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow keys on the remote. how do you know the codes for the other remote keys? you can check them by printing the responses out in the console:
window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console. you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the ...
...ole.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console. you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game. all that is needed is checking for key presses:
window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ... } }, this); you can see it in action by watching this video. leap motion have you ever thought about controlling a game only with your hands? it's p...
...ectly. proximity api another interesting idea is to use the built-in proximity sensors of your hardware to detect how far an object, for example a hand, is from the given sensor. it could work similar to the doppler effect in terms of manipulating the player's ship on the screen by moving your hand closer or further from the device. an event listener for device proximity would look like this:
window.addeventlistener('deviceproximity', function(event) { var min = event.min; var max = event.max; var proximity = event.value; }); the min and max values are the minimum and the maximum distances respectively between which the sensor can detect the exact proximity value. all three are calculated in centimetres. note: see the deviceproximityevent reference page for more details. mak...
Flexbox - Learn web development
scuss this property in more detail later on. you might also notice that the last few children on the last row are each made wider so that the entire row is still filled. but there's more we can do here. first of all, try changing your flex-direction property value to row-reverse — now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser
window and flows in reverse. flex-flow shorthand at this point it is worth noting that a shorthand exists for flex-direction and flex-wrap — flex-flow. so for example, you can replace flex-direction: row; flex-wrap: wrap; with flex-flow: row wrap; flexible sizing of flex items let's now return to our first example, and look at how we can control what proportion of space flex items take up compa...
...of-type(3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space. after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the space is shared out. the real value of flexbox can be seen in its flexibility/responsiveness — if you resize the browser
window, or add another <article> element, the layout continues to work just fine. flex: shorthand versus longhand flex is a shorthand property that can specify up to three different values: the unitless proportion value we discussed above. this can be specified individually using the flex-grow longhand property. a second unitless proportion value — flex-shrink — that comes into play when the f...
...we did in the individual button example we saw earlier. article:nth-of-type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. this has a very interesting effect, which you'll see if you try resizing your browser
window width. the buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines. button { flex: 1 auto; margin: 5px; font-size: 18px; line-height: 1.5; } cross browser compatibility flexbox support is available in most new browsers — firefox, chrome, opera, micr...
Fundamental text and font styling - Learn web development
ed web safe fonts. most of the time, as web developers we want to have more specific control over the fonts used to display our text content. the problem is to find a way to know which font is available on the computer used to see our web pages. there is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (
windows, macos, the most common linux distributions, android, and ios). the list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the microsoft core fonts for the web initiative in the late 90s and early 2000s): name generic type notes ...
...ew roman font called times. it's considered best practice to use both with times new roman as the preferred alternative. trebuchet ms sans-serif you should be careful with using this font — it isn't widely available on mobile oses. verdana sans-serif note: among various resources, the cssfontstack.com website maintains a list of web safe fonts available on
windows and macos operating systems, which can help you make your decision about what you consider safe for your usage. note: there is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. this is a little bit more complex, and we will be discussing this in a separate article later on in the module. default fonts css defines...
... this assessme...
What are browser developer tools? - Learn web development
ey took to load. this article explains how to use the basic functions of your browser's devtools. 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. ...
...s and see the results of your changes reflected live in the browser viewport. if you don't see the inspector, tap/click the inspector tab. in internet explorer, tap/click dom explorer, or press ctrl + 1. in microsoft edge, or opera, tap/click elements. in safari, the controls are not so clearly presented, but you should see the html if you haven't selected something else to appear in the
window. press the style button to see the css. exploring the dom inspector for a start, right-click (ctrl-click) an html element in the dom inspector and look at the context menu. the available menu options vary among browsers, but the important ones are mostly the same: delete node (sometimes delete element). deletes the current element. edit as html (sometimes add attribute/edit text). lets y...
...o access the console in any browser: if the developer tools are already open, click or press the console tab. if not, firefox allows you to open the console directly using ctrl + shift + k or using the menu command: menu ➤ web developer ➤ web console, or tools ➤ web developer ➤ web console. on other browser, open the developer tools and then click the console tab. ...
What software do I need to build a website? - Learn web development
l straightforward, but lack special features for webpage coding. if you want something a bit fancier, there are plenty of third-party tools available. third-party editors often come with extra features, including syntax coloring, auto-completion, collapsible sections, and code search. ...
...github. note: ftp is inherently insecure. you should make sure your hosting provider allows use of a secure connection, e.g. sftp or rsync over ssh. uploading files to a web server is a very important step while creating a website, so we cover it in detail in a separate article. for now, here's a short list of free basic (s)ftp clients: operating system ftp software
windows winscp moba xterm filezilla (all os) linux nautilus/files (gnome) dolphin (kde) mac os cyberduck chrome os shiftedit (all os) browsing websites as you already know, you need a web browser to view websites. there are dozens of browser ...
...efox google chrome microsoft internet explorer apple safari if you're targeting a specific group (e.g., technical platform or country), you may have to test the site with additional browsers, like opera, konqueror, or uc browser. but testing gets complicated because some browsers only run on certain operating systems. apple safari runs on ios and mac os, while internet explorer runs only on
windows. it's best to take advantage of services like browsershots or browserstack. browsershots furnishes screenshots of your website as it will look in various browsers. browserstack actually gives you full remote access to virtual machines so you can test your site in the most common environments. alternatively, you can set up your own virtual machine, but that takes some expertise. (if you're going ...
Advanced form styling - Learn web development
react very differently when you try. ...
...span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (
windows 10) chrome 77 (macos), safari 13, opera chrome 63 (
windows 10) internet explorer 11 (
windows 10) edge 16 (
windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="c...
...box"] { -webkit-appearance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that
windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: bl...
Sending forms through JavaScript - Learn web development
ve web apps, single page apps, and framework based apps, it's common to use html forms to send data without loading a new document when response data is received. let's first talk about why this requires a different approach. gaining control of the global interface standard html form submission, as described in the previous article, loads the url where the data was sent, which means the browser
window navigates with a full page load. avoiding a full page load can provide a smoother experience by avoiding network lag, and possible visual issues like flickering. many modern uis only use html forms to collect input from the user, and not for data submission. when the user tries to send the data, the application takes control and transmits the data asynchronously in the background, updating only ...
...ing formdata bound to a form element you can also bind a formdata object to an <form> element. this creates a formdata object that represents the data contained in the form. ...
...xt" name="mytext" value="some text data" type="text"> </p> <p> <label for="thefile">file data:</label> <input id="thefile" name="myfile" type="file"> </p> <button>send me!</button> </form> as you see, the html is a standard <form>. there's nothing magical going on. the "magic" is in the javascript: // because we want to access dom nodes, // we initialize our script at page load. ...
Dealing with files - Learn web development
will contain the css code used to style your content (for example, setting text and background colors). create a folder called styles, inside your test-site folder. scripts folder: this folder will contain all the javascript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). create a folder called scripts, inside your test-site folder. ...
...g text and background colors). create a folder called styles, inside your test-site folder. scripts folder: this folder will contain all the javascript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). create a folder called scripts, inside your test-site folder. note: on
windows computers, you might have trouble seeing the file names, because
windows has an option called hide extensions for known file types turned on by default. generally, you can turn this off by going to
windows explorer, selecting the folder options... option, unchecking the hide extensions for known file types check box, then clicking ok. for more specific information covering your version of
windows, you can search on the web. file paths to make files talk to one an...
... directory above the invoking html file, write two dots. so for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg. you can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.jpg. for now, this is about all you need to know. note: the
windows file system tends to use backslashes, not forward slashes, e.g. c:\
windows. this doesn't matter in html — even if you are developing your website on
windows, you should still use forward slashes in your code. what else should be done? that is about it for now. your folder structure should look something like this: previous overview: getting started with the web next in this mo...
Installing basic software - Learn web development
next in installing basic software, we show you what tools you need to do simple web development and how to install them properly. what tools do the professionals use? a computer. maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer. for serious web development, it's better to invest in a desktop or laptop computer running
windows, macos or linux. a text editor, to write code in. this could be a text editor (e.g. visual studio code, notepad++, sublime text, atom, gnu emacs, or vim), or a hybrid editor (e.g. dreamweaver or webstorm). office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers. web browsers, to test code in. currentl...
...ools besides! what tools do i actually need, right now? that looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. in this article, we'll just set you up with a bare minimum — a text editor and some modern web browsers. installing a text editor you probably already have a basic text editor on your computer. by default
windows includes notepad and macos comes with textedit. linux distros vary; ubuntu comes with gedit by default. for web development, you can probably do better than notepad or textedit. we recommend starting with visual studio code, which is a free editor, that offers live previews and code hints. installing modern web browsers for now, we'll install a couple of desktop web browsers to test our code ...
...otepad or textedit. we recommend starting with visual studio code, which is a free editor, that offers live previews and code hints. installing modern web browsers for now, we'll install a couple of desktop web browsers to test our code in. choose your operating system below and click the relevant links to download installers for your favorite browsers: linux: firefox, chrome, opera, brave.
windows: firefox, chrome, opera, internet explorer, microsoft edge, brave (
windows 10 comes with edge by default; if you have
windows 7 or above, you can install internet explorer 11; otherwise, you should install an alternative browser). macos: firefox, chrome, opera, safari, brave (macos and ios come with safari by default). before going on, you should install at least two of these browsers and hav...
Advanced text formatting - Learn web development
on'; } updatecode(); }); const htmlsolution = '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...op.</p>\n</blockquote>\n\n<p>i also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com">the need to eliminate negative self talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>affirmations for positive thinking</cite></a>.)</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...{ textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<p><abbr title="national aeronautics and space administration">nasa</abbr> sure does some exciting work.</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
Creating hyperlinks - Learn web development
ame server. if you use absolute urls where relative urls would do, you're constantly making your browser do extra work, meaning that it will perform less efficiently. 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. for example: if you're on a low bandwidth connection, click a link, and then a multiple megabyte download starts unexpectedly. if you don't have the flash player installed, click a link, and then suddenly get taken to a page that requires flash. let's look at some examples, to see what kind of text can be used ...
...parate 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. here's an example with a download link to the latest
windows version of firefox: <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-us" download="firefox-latest-64bit-installer.exe"> download latest firefox for
windows (64-bit) (english, us) </a> active learning: creating a navigation menu for this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. this is one ...
...mailto: url scheme. in its most basic and commonly used form, a mailto: link simply indicates the email address of the intended recipient. for example: <a href="mailto:nowhere@mozilla.org">send email to nowhere</a> this results in a link that looks like this: send email to nowhere. in fact, the email address is optional. if you omit it and your href is simply "mailto:"), a new outgoing email
window will be opened by the user's email client with no destination address. this is often useful as "share" links that users can click to send an email to an address of their choosing. specifying details in addition to the email address, you can provide other information. in fact, any standard mail header fields can be added to the mailto url you provide. the most commonly used of these are "subject...
Index - Learn web development
and navigating to the html file. there are many ways to achieve this. 21 how do you upload your files to a web server? beginner, ftp, github, uploading, webmechanics, hosting, rsync, sftp if you have built a simple web page (see html basics for an example), you will probably want to put it online, on a web server. in this article we'll discuss how ...
...sibility? accessibility, beginner, html, learn, needscontent the following content describes specific features of html that can be used to make a web page more accessible to people with different disabilities. 25 what are browser developer tools? beginner, browser, css, codingscripting, dev tools, html, javascript, learn the devtools live inside your browser in a sub
window that looks roughly like this, depending on what browser you are using: 26 what are hyperlinks? beginner, infrastructure, navigation, needsactivelearning hyperlinks, usually called links, are a foundational concept behind the web. to explain what links are, we need to step back to the very basics of web architecture. 27 what do common web layouts contain? beginn...
...ork, and what you can do with them in your javascript code. you are probably excited to start actually doing some fun things with specific apis, so let's go! next up, we'll look at manipulating documents with the document object model (dom). 61 manipulating documents api, article, beginner, codingscripting, dom, document, document object model, javascript, learn, navigator, webapi,
window we have reached the end of our study of document and dom manipulation. at this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. most importantly, you should understand what the document object model is, and how to manipulate it to create useful functionality. 62 third-pa...
Looping code - Learn web development
t let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the code, returns a whole number between 0 and x-1. width and height are the width and height of the inner browser
window. you should get the basic idea — we are using a loop to run 100 iterations of this code, each one of which draws a circle in a random position on the page. the amount of code needed would be the same whether we were drawing 100 circles, 1000, or 10,000. only one number has to change. if we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw: ...
...'.output\');\noutput.innerhtml = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createelement(\'p\');\n if(i === 10) {\n para.textcontent = \'countdown \' + i;\n } else if(i === 0) {\n para.textcontent = \'blast off!\';\n } else {\n para.textcontent = i;\n }\n\n output.appendchild(para);\n\n i--;\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...textcontent += people[i] + \', \';\n } else {\n admitted.textcontent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textcontent = refused.textcontent.slice(0,refused.textcontent.length-2) + \'.\';\nadmitted.textcontent = admitted.textcontent.slice(0,admitted.textcontent.length-2) + \'.\';'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
Useful string methods - Learn web development
let i = 0; i < greetings.length; i++) {' + '\n let input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...lowercase();' + '\n let firstletter = lower.slice(0,1);' + '\n let capitalized = lower.replace(firstletter,firstletter.touppercase());' + '\n let result = capitalized;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...stations[i];' + '\n let code = input.slice(0,3);' + '\n let semic = input.indexof(\';\');' + '\n let name = input.slice(semic + 1);' + '\n let result = code + \': \' + name;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
Introduction to cross browser testing - Learn web development
ng on. if not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. you can also use a bit of intuition. so for example, you might be building an e-commerce site that serves customers in north america. the site should work entirely in the last few versions of the most popular desktop and mobile (ios, android,
windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari. it should also provide an acceptable experience on ie 8 and 9, and be accessible with wcag aa compliance. now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. for e...
...ou should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on determining your target browsers). for example: try to test the latest change on all the modern desktop browsers you can — including firefox, chrome, opera, ie, edge, and safari on desktop (mac,
windows, and linux, ideally). test it in common phone and tablet browsers (e.g. ios safari on iphone/ipad, chrome and firefox on iphone/ipad/android), also do tests in any other browsers you have included inside your target list. the most lo-fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a team). you should try to test it on real...
...ll those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). this is a very popular choice, especially in some circumstances — for example,
windows doesn't let you have multiple versions of
windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here. another option is user groups — using a group of people outside your development team to test your site. this could be a group of friends or family, a group of other employees, a class at a local university, or a professional user t...
Embedding API for Accessibility
atform, such as microsoft active accessibility or atk for linux and unix desktops. there are many other pieces, such as preferences to allow the user to change foreground and background colors, and font sizes. mozilla already supports some of these options. this document lays out what we already have, and what we'll need later, in the embedding api to support accessibility. text zoom on a per-
window basis the nsidom
window::gettextzoom(float *zoomfactor) and nsidom
window::settextzoom(float zoomfactor) methods can be used to set a wide range of text zoom factors on a content
window. a zoom factor of 1.0 represents 100%, or normal zoom. for double-sized text, use nsidom
window::settextzoom(2.0); using accessibility preferences there are a number of prefs related to accessibility. for the m...
...ationmode); animationmode: "normal", "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: ...
...dow.open off for particular sites: user_pref("capability.policy.popupsites.sites", "http://www.annoyingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.
windowinternal.open","noaccess"); // or turn it off everywhere: user_pref("capability.policy.default.
windowinternal.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_durin...
Software accessibility: Where are we today?
these operating systems were not designed with the needs of people with disabilities in mind. ...
...essibility aids and solutions. the most recent noteable attempt at solving this problem was put forth by microsoft in 1997, and is called microsoft active accessibility (msaa). realizing that complete accessibility was not possible without cooperation between applications and accessibility aids such as screen reading software or voice recognition software, microsoft active accessibility defines a
windows-based standard by which applications can communicate context and other pertanent information to accessibility aids. this solution has seen only partial success, largely due to the fact that it requires significant changes to applications which are made accessible. because most popular desktop and productivity applications are not open source, this forced disabled people to rely on the companies ...
...on platforms where that is appropriate. . the ideal situation would be for adaptive technology professionals to make money on rehab, trainingand support - something there is currently not enough of. each end user has a unique set problems, and in the open source world, providing highly customized solutions can be a business in itself. right now, gui's on linux are mostly not accessible. microsoft
windows is still far more accesible. gnome, kde, staroffice, koffice, mozilla and all other gui software packages in linux are unuseable by large numbers of disabled users. there has been some progress with the support of gnome's atk apis in many of these packages, and the development of gok (gnome onscreen keyboard) and gnopernicus (screenreader and magnifier). however, these solutions are not yet trul...
Accessibility and Mozilla
e difference between today's accessibility api's. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc.accessibility features in firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's
window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same keyboard commands are still available, so users can become comfortable and productive right away.accessibility ...
...r, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software. websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.embedding api for accessibilityevent process procedurethis diagram outlines how events are processed within gecko. gecko info for
windows accessibility vendorsplease contact the mozilla accessibility community.information for assistive technology vendorsboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.information for external developers dealing with acce...
...down of problems and the planned solutions:mozilla's section 508 compliancemozilla’s uaag evaluation reportthe uaag document contains a very rich set of accessibility guidelines, that broadly define how accessibility should be implemented by any user agent, i.e. software that renders web content. the uaag is not the basis for any government accessibility regulations at this time.multiprocess on
windowsa high-level overview of the ideas behind the a11y+e10s design is available on the wiki.software accessibility: where are we today?the accessibility of computer software has seen drastic improvements over the past two decades. this article reviews the progress and technology as it has developed.zoomtextwe've made a lot of progress with mozilla/zoomtext compatibility. ...
Browser chrome tests
the browser chrome test suite is an automated testing framework designed to allow testing of application chrome
windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser
window and report results using the same functions as the mochitest test framework. as all tests, they won't work in a build with tests disabled (--disable-tests). 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. it is possible to run specific groups of tests. as with mochitest, the path given as an argument is the path to a test or directory within the mozilla so...
...owser/base/content/test/ or without mach test_path=<path_to_the_tests> make -c <objdir> mochitest-browser-chrome to run tests in debugger the following should work ./mach mochitest -f browser --debugger gdb browser/base/content/test/ run ./mach help mochitest-browser for more options. writing browser chrome tests browser chrome tests are snippets of javascript code that run in the browser
window's global scope. a simple test would look like this: function test() { ok(gbrowser, "gbrowser exists"); is(gbrowser.tabs.length, 1, "browser has 1 tab"); } the test() function is invoked by the test harness when the test is run. the test file can contain other functions, they will be ignored unless invoked by test(). gbrowser is set in browser.js and is a tabbrowser element (the tabbro...
...the test() function is invoked by the test harness when the test is run. the test file can contain other functions, they will be ignored unless invoked by test(). gbrowser is set in browser.js and is a tabbrowser element (the tabbrowser with id="content" in browser.xul). note: be careful when naming your functions and variables. since the test files are executed in the same scope as the browser
window, conflicting variable names could cause trouble while running the tests. you should attempt to reduce the side effects of the testing code and "clean up" after yourself, to avoid influencing other tests. the comparison functions are identical to those supported by mochitests, see how the comparison functions work in the mochitest documentation for more details. the eventutils helper functions ar...
Building Mozilla
in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code. ...
... in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code. ...
... in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code. ...
Adding APIs to the navigator object
simply add an entry to the "javascript-navigator-property" category. the object must be implemented as an xpcom component. each method below of adding new objects to the navigator object requires that the new object is a registered xpcom component. you can read about creating and registering xpcom components in javascript. ...
...pcom components in javascript. ...
...", "myapi", my_contract_id, false, true); this adds a new object, myapi, to the
window.navigator object. the newly added object is a reference to the component specified by the contract id my_contract_id. you can learn more about contract ids are unique text identifiers for xpcom components. using a manifest to add an object to navigator you can also add an object to the
window.navigator object by using the chrome manifest of an add-on: component {ffffffff-ffff-ffff-ffff-ffffffffffff} mycomponent.js contract @mozilla.org/mycomponent;1 {ffffffff-ffff-ffff-ffff-ffffffffffff} category javascript-navigator-property mycomponent @mozilla.org/mycomponent;1 generate a guid and replace the "ffff" sections in both the component and contract lines with your guid. this adds a n...
Runtime Directories
default application installation and user profile directories firefox os application directory user profile directory temporary directory
windows vista/7 c:\program files\mozilla firefox\ c:\users\<username>\appdata\roaming\mozilla\firefox\ (or %appdata%\mozilla\firefox\) c:\users\<username>\appdata\local\mozilla\firefox\ (or %localappdata%\mozilla\firefox) and c:\users\<username>\appdata\local\virtualstore\program files\mozilla firefox\
windows 2000/xp c:\program files\mozilla firefox\ c:\documents and settings\<username>\application data\mozilla\firefox\ (or %appdata%\mozilla\firefox\) c:\documents and settings\<username>\local settings\application data\mozilla\firefox\ os x /applications/firefox.app ~...
...>\local settings\application data\mozilla\firefox\ os x /applications/firefox.app ~/library/application support/firefox/profiles/xxxxxxxx.default/ ~/library/caches/firefox/profiles/xxxxxxxx.default/ linux ???? ...
...tion directory user profile directory temporary directory
windows vista/7 c:\program files\mozilla thunderbird\ c:\users\<username>\appdata\roaming\thunderbird\ (or %appdata%\thunderbird\) c:\users\<username>\appdata\local\thunderbird\ (or %localappdata%\thunderbird\) and c:\users\<username>\appdata\local\virtualstore\program files\mozilla thunderbird\
windows 2000/xp c:\program files\mozilla thunderbird\ c:\documents and settings\<username>\application data\thunderbird\ (or %appdata%\thunderbird\) c:\documents and settings\<username>\local settings\application data\thunderbird\ os x /applications/thunderbird.app ~/library/thunderbird/profiles/xxxxxxxx.default/ ~/library/caches/thunderbird/profiles/xxxxxxxx.default/ ...
Experimental features in Firefox
enabled by default? nightly 80 no developer edition 80 no beta 80 no release 80 no preference name layout.css.prefers-contrast.enabled apis graphics: canvas, webgl, and webgpu interface: offscreencanvas the offscreencanvas interface provides a canvas that can be rendered offscreen. it is available in both the
window and worker contexts. see bug 1390089 for more details. release channel version added enabled by default? nightly 44 no developer edition 44 no beta 44 no release 44 no preference name gfx.offscreencanvas.enabled hit regions whether the mouse coordinates are within a particular area on the canvas is...
...it also supports events to monitor changes to this information. see bug 1550390 for more details. there currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in bug 1551302. release channel version added enabled by default? nightly 63 no developer edition 63 no beta ...
...you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. see bug 1245183 for further details. release channel version added enabled by default? nightly 42 no developer edition 42 no beta 42 no release 42 no preference name apz.allow_zooming and (on
windows) apz.
windows.use_direct_manipulation ...
Cross Process Object Wrappers
script addeventlistener("click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, { clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message. ...
...; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "center"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims. one of these shims provides the following behavior: whenever chrome code tries to access content directly (for example, through
window.content or browser.contentdocument), it is given back a cpow that wraps the content object. this means that examples like this will actually work, even in multiprocess firefox: gbrowser.selectedbrowser.contentdocument.body.innerhtml = "replaced by chrome code"; it's still important to keep in mind, though, that this is access through a cpow and not direct access to content. bidirectional cpows...
...stener("my-addon-message", function(message) { let wrapper = message.objects.element; wrapper.addeventlistener("click", function() { console.log("they clicked"); }); }); mapping content documents to xul browsers a common pattern is to get the xul <browser> that corresponds to a content document. to enable this, gbrowser.getbrowserfordocument and gbrowser.getbrowserforcontent
window can be passed a cpow for the content document and content
window, respectively, and return the xul <browser> that these documents /
windows belong to. both return null if no such browser can be found. limitations of cpows although cpows can be convenient they have several major limitations, which are listed below. cpows and platform apis you can't pass cpows into platform apis that expect to...
Frame script environment
may be null (see below) docshell the nsidocshell associated with the browser. addeventlistener() listen to events from content. removeeventlistener() stop listening to events from content. addmessagelistener() listen to messages from chrome. removemessagelistener() stop listening to messages from chrome. sendasyncmessage() send an asynchronous message to chrome. ...
... to messages from chrome. sendasyncmessage() send an asynchronous message to chrome. sendsyncmessage() send a synchronous message to chrome. dump() print a message to the console. atob() base64 decode. btoa() base64 encode. components the usual components object. in particular, note that a frame script accesses the dom
window using content, not
window: // frame script var links = content.document.getelementsbytagname("a"); all the frame scripts running in a tab share this global. however, any top-level variables defined by a script are not stored on the global: instead, top-level variables are stored in a special per-script object that delegates to the per-tab global. this means you don't have to worry about global ...
...frame script environment: unload fires when the frame script environment is shut down, i.e. when a tab gets closed. if you use a capturing event listener on the contentframemessagemanager, you should verify that its event.target is set to the contentframemessagemanager global object in order to avoid handling unload events from content. does not bubble. dom
windowcreated fires when a new content object is created. this can be used if a framescript needs to interact with individual dom
windows instead of simply listening for events bubbling up from content. another use is to interact with the content very early in the page load process, long before domcontentloaded event is fired. ...
Frame script environment
addeventlistener() listen to events from content. removeeventlistener() stop listening to events from content. addmessagelistener() listen to messages from chrome. removemessagelistener() stop listening to messages from chrome. sendasyncmessage() send an asynchronous message to chrome. ...
... to messages from chrome. sendasyncmessage() send an asynchronous message to chrome. sendsyncmessage() send a synchronous message to chrome. dump() print a message to the console. atob() base64 decode. btoa() base64 encode. components the usual components object. in particular, note that a frame script accesses the dom
window using content, not
window: // frame script var links = content.document.getelementsbytagname("a"); all of the frame scripts running in a tab share this global. however, any top-level variables defined by a script are not stored on the global: instead, top-level variables are stored in a special per-script object that delegates to the per-tab global. this means you don't have to worry about glob...
...rame script environment: unload bubbles no fires when the frame script environment is shut down, i.e. when a tab gets closed. if you use a capturing event listener on the contentframemessagemanager, you should verify that its event.target is set to the contentframemessagemanager global object to avoid handling unload events from content. dom
windowcreated fires when a new content object is created. this can be used if a framescript needs to interact with individual dom
windows instead of simply listening for events bubbling up from content. another use is to interact with the content very early in the page load process, long before domcontentloaded event is fired. ...
Storage access policy: Block cookies from trackers
red in cookies or site storage and using them to identify users across visits to multiple first parties. specifically, firefox does this by imposing the following restrictions: cookies: block cookie request headers and ignore set-cookie response headers. return an empty string for calls to document.cookie and ignore requests to set cookies via document.cookie. dom storage: localstorage:
window.localstorage: read and write attempts throw a securityerror exception. prior to firefox 70:
window.localstorage is null. thus, attempts to read and write using this object will throw a typeerror exception. sessionstorage: read and write attempts are permitted. indexeddb: attempting to access the indexeddb factory object throws a securityerror exception. messaging and workers: broadcast ch...
... intended to allow some third-party integrations that are common on the web to continue to function. they are intended to be temporary and will be removed in a future version of firefox. they should not be relied upon for current and future web development. 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 we discover that an origin is abusing this heuristic to gain tracking access, that origin will have the additional requirement...
...cess: the origin of the resource that is initially loaded in the pop-up
window is granted storage access on the opener document. if we discover that an origin is abusing this heuristic to gain tracking access, that origin will have the additional requirement that it must have received user interaction as a first party within the past 30 days. after the initial resource is loaded in the pop-up
window, the
window may go through a series of redirects to other hosts. 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. when there is a top-level redirect from a tracking origin to a non-tracking origin, the tracking origin receives short-lived storage access on the non-tracking origin...
Firefox and the "about" protocol
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 t...
...see ...
...ined in docshell/base/nsaboutredirector.cpp within the kredirmap array. the array maps most of the urls, like config to urls in the chrome: pseudo protocol, such as chrome://global/content/config.xul. the about location information is duplicated in docshell/build/nsdocshellmodule.cpp. note: you must access about: protocol pages by typing them into the address bar. attempts to navigate through
window.location will throw — error: access to 'about:addons' from script denied. ...
mozbrowserclose
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserclose event is fired when the content of a browser <iframe> calls the
window.close() method. 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 event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean ...
...arget in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...lable or not. ...
Roll your own browser: An embedding how-to
do i have to do? somewhere during the start of your application, you must initialize xpcom. you will also want to shut this down when you quit. other initialization must be done to start up event queues and load some string bundles. all of this is somewhat generic and has been isolated into a static library that you can simply call on. if you build mozilla/embedding/base/, a static library (on
windows) called baseembed_s.lib is built. just link this library to your application. there are two functions that are needed: nsresult ns_initembedding(const char *apath); nsresult ns_termembedding(); pretty self-explanatory. the apath parameter will be passed to ns_initxpcom. ns_initembedding() must be called from the main thread of your application, otherwise it won't work. do you have any simple...
...dded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl.
windows external projects k-meleon browser: the
windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys". implemented with mozilla embedding apis. (screenshots) neoplanet browser: a gecko add-on for the neoplanet browser. activestate's komodo: development environment, b...
...mbedding control.obsolete since gecko 7.0 nxzilla: a set of libraries that allow mozilla to be used with a nanox server. activex control: an activex control allowing for embedding the gecko layout engine.obsolete since gecko 7.0 llmozlib & ubrowser: a static library that allows you to embed gecko and render pages to memory. includes test applications that illustrate how to use it. versions for
windows and mac with linux to follow. mozilla examples mfcembed: standard mozilla embedding example application for win32. basic browser, menus, toolbar, urlbar, html area. winembed: obsoleted by mfcembed. a bare-bones browser with urlbar and html area. activex control: an activex control for mozilla using the gecko layout engine. more information at 1 and 2. mac external projects activesta...
How to get a stacktrace for a bug report
e one of the alternative methods listed below. note: when filing a crash report, it is important to know whether the crash occurs with firefox safe mode. this helps engineers determine whether a particular extension or plugin is the cause of the crash. how to get a crash id with the mozilla crash reporter 1. crash and submit a report to the system. the mozilla crash reporter
window should automatically come up after firefox crashes. if you have any additional information about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box. be sure that you check the "tell mozilla about this crash" checkbox and click the restart button. the crash reporter should now submit the crash report and ...
...ox crashes on startup you can still access your submitted crash reports. crash reports are accessible from all firefox profiles, so if a new profile does not crash you can use it to access them through "about:crashes" as above. accessing crash report ids outside of firefox if you cannot load firefox at all you can find the crash report files at this location depending on your operating system:
windows : %appdata%\mozilla\firefox\crash reports\submitted\ os x : ~/library/application support/firefox/crash reports/submitted/ linux : ~/.mozilla/firefox/crash reports/submitted/ each file in this folder contains one submitted crash report id. you can check the modified or creation time for each file to discern which crash reports are relevant to your bug report. alternative ways to get a stackt...
...itted/ linux : ~/.mozilla/firefox/crash reports/submitted/ each file in this folder contains one submitted crash report id. you can check the modified or creation time for each file to discern which crash reports are relevant to your bug report. alternative ways to get a stacktrace if the mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually:
windows see the article create a stacktrace with windbg for information on how to do this. for a full process dump, see how to get a process dump with
windows task manager [en-us] os x run /applications/utilities/console.app. expand "~/library/logs" and "crashreporter", then look for logs for "firefox-bin". linux note that for most distros, the package you need to get symbols for will be somethin...
How to investigate Disconnect failures
able to send the information over the bridge or when firefox crashes. usually disconnects happens when a modal dialog freezes and we cannot close it sp we close firefox with the modal frozen. we cannot investigate failures via mozmill, because we do not catch the crashes, so the crashes' information is not logged; we have to go to ci machines and investigate directly. ...
...crashes (not freezes) if we have a crash we always should submit it. ...
...crashes (not freezes) if we have a crash we always should submit it. under about:crashes we have links to all the crashes submitted by firefox to crash-stats. from there use “signature” as summary for bugzilla bug. ...
Downloads.jsm
.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing
window. private work on downloads that were started from a private browsing
window. all work on both downloads.private and downloads.public downloads. properties attribute type description error read only constructor constructor for a downloaderror object. when you catch an exception during a download, you can use this to verify if ex instan...
...entation of a download object. some of the most common properties in this object include: source: string containing the uri for the download source. alternatively, may be an nsiuri, a downloadsource object, or an object with the following properties: url: string containing the uri for the download source. isprivate: optional indicates whether the download originated from a private
window. if omitted, the download is public. referrer: optional string containing the referrer uri of the download source. can be omitted or null if no referrer should be sent or the download source is not http. target: string containing the path of the target file. alternatively, may be an nsifile, a downloadtarget object, or an object with the following properties: path: string con...
...tively, may be an nsiuri or a downloadsource object. atarget string containing the path of the target file. alternatively, may be an nsifile or a downloadtarget object. aoptions optional an optional object used to control the behavior of this function. you may pass an object with a subset of the following fields: isprivate: optional indicates whether the download originated from a private
window. if omitted, the download is public. promise resolves to undefined when the download has finished successfully and you can access the target file. promise can be rejected with downloaderror if the download failed. getlist() retrieves the specified type of downloadlist object. there is one download list for each type, and this method always retrieves a reference to the same download lis...
PopupNotifications.jsm
ations. to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/popupnotifications.jsm"); once you've imported the module, you can then use the popupnotifications object it exports; this object provides methods for creating and displaying popup notification panels. note: this code module is imported by firefox chrome
windows, so you don't have to do it yourself in most extensions. 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 ...
...f the notification panel is currently visible, false if it is not. methods locationchange() the consumer can call this method to let the popup notification module know that the current browser's location has changed. this lets the notification service update the active notifications as appropriate. note: you shouldn't need to call this when using the popupnotifications object in firefox
windows; firefox code takes care of this automatically. void locationchange(); parameters none. getnotification() retrieve a notification object associated with the browser/id pair. notification getnotification( string id xulelement browser ); parameters id the notification id to search for. browser the xul <xul:browser> element whose notifications should be searched. if null, the curre...
...o display in the notification panel. anchorid the id of the element that should serve as the anchor for the notification popup (that is, the element the arrow on the popup should point to). if you specify null, the notification will be anchored to the popupnotification object's icon box. this anchorid must point to an element contained inside the popupnotification object's icon box (for firefox
windows, the global popupnotifications object uses the notification-popup-box element). mainaction a javascript object literal containing fields that define the button to draw in the notification panel. see notification actions below for details. secondaryactions an array of notification action objects; these are used to populate the drop-down menu on the notification panel's button. options a jav...
Localizing with Koala
ght of the location bar, and by default points to the google search. if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar. requirements mercurial, linux,
windows or mac os x. instructions preparation install komodo edit. install koala extension. go to tools > add-ons. search for "koala". click add to komodo edit... restart komodo when the installation is complete. you should see a new button in komodo's toolbar, with two options: startpage and management. before you can use them, you need to create a new koala project. creating a new project cre...
...ge and management. before you can use them, you need to create a new koala project. creating a new project create a new koala project by going to file > new > new project from template... choose "koala" in the categories list. choose "koala" in the templates list. choose a name for your project (e.g. l10n.kpf). choose the directory in which the project will live in (e.g. c:\mozilla\l10n on
windows, /home/user/mozilla/l10n on linux or /users/user/mozilla/l10n on mac os x). due to a bug in koala (bug 21930), it is recommended that you don't choose a path that contains spaces (like c:\documents and settings\user\...). click "open" to create the project. koala will check for mercurial. make sure that your mercurial installation is in your system's $path. setup wizard will open. configur...
..., it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l10n\application\firefox\3.6". url: http://hg.mozilla.org/releases/mozilla-1.9.2. branch: default. revision: leave empty. click "ok". koala will now try to clone the en-us source repository from http://hg.mozilla.org/releases/mozilla-1.9.2. it's almost 1 gb worth of download, so it may take a while. click "ok". on
windows, if koala doesn't clone the repositories, you'll need to do it manually. 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 man...
Fonts for Mozilla's MathML engine
fonts with appropriate unicode coverage and open font format features are required for good math rendering. this wiki page describes how users can install and use such math fonts with mozilla's mathml engine. note that most of these instructions may as well apply to other web rendering engines. installation instructions
windows install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. open the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you will find a latinmodern-math font file. open the latinmodern-math font file and click the install button. download stixv2.0.2.zip. open the zip archive, move inside the /stixv2.0.0/fonts/otf/ directory. you will find the stixmath-regular, stix-regular, sti...
... the install button. download stixv2.0.2.zip. open the zip archive, move inside the /stixv2.0.0/fonts/otf/ directory. you will find the stixmath-regular, stix-regular, stix-bold, stix-italic, stix-bolditalic font files. open the stixmath-regular font file and click the install button. if desired, you may also do the same for the other font files. note:cambria math is installed by default on
windows 7 and later versions and should ensure relatively good mathml rendering. an enhancement request has been submitted to microsoft to install latin modern math and stix by default. os x install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. extract the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you wil...
...ft to install latin modern math and stix by default. os x install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. extract the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you will find a latinmodern-math font file. double-click the latinmodern-math font file click the "install the font" button from the
window that opens. download stixv2.0.2.zip. open the zip archive, move inside the /stixv2.0.0/fonts/otf/ directory. you will find the stixmath-regular, stix-regular, stix-bold, stix-italic, stix-bolditalic font files. open the stixmath-regular font file and click the "install the font" button from the
window that opens. if desired, you may also do the same for the other font files. note: a depreca...
Fonts for Mozilla 2.0's MathML engine
derbird 3.3 / seamonkey 2.1) until gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27). for the latest version see, this page. quick instructions try this test page to quickly determine whether you need to install additional fonts and to follow the instructions below. you may also want to check out the mozilla mathml torture test to test your installation against concrete examples. on
windows: use this mathml fonts installer. on mac os x lion (10.7) and higher versions, stix fonts are already installed and can be used for mathml. 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. on android, firefox os and other platforms where the instructions above d...
...(e.g. to write double-struck, script or fraktur text). all the fonts mentioned above may already be installed by default on your system or can easily be installed via your software manager. for convenience we provide a zip archive of mathml fonts. the fonts may be installed by extracting the font files (which have the .otf extension) from the zip archive, then following instructions for microsoft
windows, or copying the files to a ~/library/fonts folder on mac os x, or to a ~/.fonts/ directory (which may need to be created) on unix/linux systems. alternatively, follow dafont's "how to install a font". these fonts are opentype postscript fonts, which are supported by most modern operating systems. however some operating systems may not support these fonts. on such systems, it will be necessary to...
... dejavu serif and dejavu sans are freely available and installed with many linux distributions. they contain support for many mathematical characters, and mozilla will display some mathml reasonably on systems with these fonts installed, even without stix fonts. the font only contains glyphs for stretchy operators that have unicode assignments. cambria math is preinstalled on microsoft
windows vista, and also comes with miscrosoft office 2007 or microsoft powerpoint viewer 2007. the font has good support for mathematical characters, and so, with any of these products installed, mozilla will be able to display some mathml reasonably even without stix fonts. the font contains the necessary glyphs for stretchy operators but mozilla does not yet make use of all of these. the license allow...
Leak-hunting strategies and tips
ing part of the task under nstracerefcnt logging, gradually building up from as little as possible to the complete task, and fixing most of the leaks in the first steps before adding additional steps. (by most of the leaks, i mean the leaks of large numbers of different types of objects or leaks of objects that are known to entrain many non-logged objects such as js objects. seeing a leaked global
windowimpl, nsxulpdglobalobject, nsxbldocglobalobject, or nsxpcwrappedjs is a sign that there could be significant numbers of js objects leaked.) for example, start with bringing up the mail
window and closing the
window without doing anything. then go on to selecting a folder, then selecting a message, and then other activities one does while reading mail. once you've done this, and it doesn't leak m...
...hen i refer to the size of a graph of objects, i'm referring to the number of objects, not the size in bytes. ...
...s. these scripts are designed to be run on balance trees in addition to raw stacks; since they are rather slow, it is often much faster to generate balance trees (e.g., using make-tree.pl for the refcount balancer or diffbloatdump.pl --use-address for trace-malloc) andthen run the balance trees (which are much smaller) through the post-processing. getting symbol information for system libraries
windows setting the environment variable _nt_symbol_path to something like symsrv*symsrv.dll*f:\localsymbols*http://msdl.microsoft.com/download/symbols as described in microsoft's article. this needs to be done when running, since we do the address to symbol mapping at runtime. linux many linux distros provide packages containing external debugging symbols for system libraries. fix_stacks.py uses thi...
Profiling with the Firefox Profiler
ot yet be finished. tip: you can right-click on a function name to get an option to copy its name to the clipboard. a significant portion of time can be spent in idle, blocking calls like waiting for events. this is ideal for a responsive application to be ready to service incoming events. there are os-specific waiting functions like ntwaitformultipleobjects seen in the example above taken on
windows or mach_msg_trap on macos. tip: you can quickly go deeper into the call tree by holding down your right arrow key. alternatively, expand an entire tree segment by holding alt and clicking on the arrow to the left of the collapsed tree segment. as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases. this happens when a function has 2 or more non-...
... a loop, that's a bug to be fixed, since we're likely "layout thrashing". some more tips and answers to common questions are available in a mid-2017 faq document. it's a good idea to search bugzilla before filing a bug about a performance problem in firefox but sometimes it's hard to find issues that have already been reported. therefore, it's usually a good idea to file a bug. profiling local
windows builds if you built firefox for
windows locally and you would like to use the local symbols with the profiler, you will need to run an additional tool; see profiling with the firefox profiler and local symbols on
windows. profiling try builds profiling try builds is supported, but to have symbols in the profiles, they need to be available on the symbol server. symbols for try builds are not ...
...ide hot loops. a profile reporting that a large portion is spent in "unknown" code indicates that the area being executed doesn't have any sample labels. as we focus on using this tool and add additional sample labels coverage should improve. sharing, saving and loading profiles after capturing and viewing a profile you will see "share..." and "save as file..." buttons in the top-right of the
window. sharing will upload your profile to profiler.firefox.com and make it public. more information on sharing profiles is available. profiling a hung process it is possible to get profiles from hung firefox processes using lldb1. after the process has hung, attach lldb. type in2, : p (void)profiler_save_profile_to_file("somepath/profile.txt") clone mstange’s handy profile analysis reposi...
powermetrics
measurements powermetrics can also report measurements of backlight usage, network activity, disk activity, interrupt distribution, device power states, c-state residency, p-state residency, quality of service classes, and thermal pressure. these are less likely to be useful for profiling firefox, however. run with the --show-all to see all of these at once, but note that you'll need a very wide
window to see all the data. also note that powermetrics -h is a better guide to the the command-line options than man powermetrics. mach power you can use the mach power command to run powermetrics in combination with rapl in a way that gives the most useful summary measurements for each of firefox, chrome and safari. the following is sample output. total w = _pkg_ (cores + _gpu_ + other) + _ram...
... 454.05 172.74 0.00 google chrome helper 67304 55.23 64.83 0.03 0.00 9.43 4.33 19.17 google chrome 67301 63.77 68.09 29.46 0.13 76.11 22.26 0.00 google chrome helper 67320 38.30 66.70 17.83 0.00 45.78 19.29 0.00 com.apple.
windowserver 68 102.58 112.36 43.15 80.52
windowserver 141 103.03 58.19 60.48 6.40 112.36 43.15 80.53 com.apple.safari 499 267.19 110.53 46.05 1.69 com.apple.webkit.webcontent 67372 190.15 79.34 2.02...
... the default sample period is 30,000 milliseconds (30 seconds), but that can be changed with the -i option. ...
McCoy
o the applications can verify the integrity of a manifest retrieved over normally insecure channels. if you want to learn about the technical details of mccoy then visit the project wiki. installing mccoy to use mccoy you need to download and install it. mccoy is provided in the standard package for your operating system, just extract it where you like and run it. mccoy-0.5.en-us.win32.zip (
windows) mccoy-0.5.en-us.linux-i686.tar.bz2 (linux) mccoy-0.5.en-us.mac.dmg (mac os x universal) there are some known issues with running mccoy on linux. it will not run on older versions of linux and there are known problems even on up to date systems. we hope to resolve this for the next release - or around the year 2100. uninstalling mccoy to uninstall mccoy simply delete the applications files...
...coy simply delete the applications files. the cryptographic keys and other mccoy data are kept in a profile folder separate from the application so you can uninstall and reinstall without losing your precious keys. backing up data if you need to backup your data or move it from one machine to another you need to take a copy of the profile folder. this is located in: %appdata%\mozilla\mccoy (
windows) ~/.mozilla/mccoy (linux) ~/library/application support/mccoy (mac os x) it is highly recommended that you back up your profile folder and store it in a safe location whenever you create a new key; without a backup, there is no way to recover your private keys if they are lost! running mccoy to run mccoy simply run the mccoy executable (or the mccoy application on os x). the first time it ...
... (or the mccoy application on os x). the first time it runs it will ask you to create a master password. it is strongly recommended that you use a password to protect your mccoy data. once you have a password set you can change it from the keys menu and you will have to enter it each time you run mccoy. signing from command line currently there is no support to run mccoy from command line under
windows, but it is planned to add this support in the future. however, there are several external and unofficial tools which enable signing from command line: uhura - part of the mxtools package from softlights http://www.softlights.net/projects/mxtools/uhura.html signontheline - an extension to mccoy - important: you have to checkout rev 222, later revisions are not working in mccoy! https://fire...
Creating a Cookie Log
creating a cookie log is often necessary to troubleshoot problems with firefox's cookie handling. if you are reading this, you have probably been directed here from a bug report. please follow the instructions below to run firefox with cookie logging enabled. enabling cookie logging
windows open a command prompt (this is under programs or programs/accessories in normal installations of
windows). change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt", enter type "set nspr_log_modules=cookie:4" and press enter run firefox by typing "firefox.exe" and pressing enter. linux start a command shell (these instructions are for bash, if you use something else, you probably know how to modify these instructions already...
...w how to modify these instructions already). change to the installation directory for firefox, e.g. type "cd /applications/firefox.app/contents/macos" and press return. type "export nspr_log_file=~/desktop/cookie-log.txt" and press return. type "export nspr_log_modules=cookie:4" and press return. run firefox by typing "./firefox-bin" and pressing return (note that firefox will launch behind
windows for other applications). creating the log now that you have firefox running with logging enabled, please try to replicate the bug using the steps to reproduce from the bug report. once you have reproduced the bug, shut down firefox. close out of the command prompt/shell/terminal, and then launch firefox normally. finally, attach the cookie-log.txt file to the bug where it was requested (by cl...
...ave firefox running with logging enabled, please try to replicate the bug using the steps to reproduce from the bug report. once you have reproduced the bug, shut down firefox. close out of the command prompt/shell/terminal, and then launch firefox normally. finally, attach the cookie-log.txt file to the bug where it was requested (by clicking on create new attachment). it should be in c:\temp on
windows, your home directory on linux, or the desktop on mac os x. thanks for helping us make firefox better! original document information author(s): mike connor last updated date: december 4, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
NSPR build instructions
the easiest way to get these tools is to install the mozillabuild package. introduction the top level of the nspr source tree is the mozilla/nsprpub directory. although nsprpub is a subdirectory under mozilla, nspr is independent of the mozilla client source tree. building nspr consists of three steps: run the configure script. you may override the compilers (the cc environment variable) or specify options. ...
...ble-debug --enable-optimize specify these two options to generate an optimized (release) build. these two options can actually be used independently, but it's not recommended. --enable-64bit on a dual 32-bit/64-bit platform, nspr build generates a 32-bit build by default. to generate a 64-bit build, specify the --enable-64bit configure option. --target=x86_64-pc-mingw32 for 64-bit builds on
windows, when using the mozillabuild environment. --enable-win32-target=win95 this option is only used on
windows. nspr build generates a "winnt" configuration by default on
windows for historical reasons. we recommend most applications use the "win95" configuration. the "win95" configuration supports all versions of
windows. the "win95" name is historical; it should have been named "win32". to gener...
...nspr debug build uses the release c run-time library by default. to generate a debug build that uses the debug c run-time library, specify the --enable-debug-rtl configure option. makefile targets all (default) clean realclean distclean install release running the test programs the tests were built above, in the pr/tests directory. ...
Named Shared Memory
the chapter describes the nspr api for named shared memory. shared memory allows multiple processes to access one or more common shared memory regions, using it as an interprocess communication channel. the nspr shared memory api provides a cross-platform named shared-memory interface that is modeled on similar constructs in the unix and
windows operating systems. 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. pr_...
...lts. filenames the name passed to pr_opensharedmemory should be a valid filename for a unix platform. pr_opensharedmemory creates file using the name passed in. some platforms may mangle the name before creating the file and the shared memory. the unix implementation may use sysv ipc shared memory, posix shared memory, or memory mapped files; the filename may be used to define the namespace. on
windows, the name is significant, but there is no file associated with the name. no assumptions about the persistence of data in the named file should be made. depending on platform, the shared memory may be mapped onto system paging space and be discarded at process termination. all names provided to pr_opensharedmemory should be valid filename syntax or name syntax for shared memory for the target p...
... boot-time options or by setting the size of the system paging space to accommodate more and/or larger shared memory segment(s). security considerations on unix platforms, depending on implementation, contents of the backing store for the shared memory can be exposed via the file system. set permissions and or access controls at create and attach time to ensure you get the desired security. on
windows platforms, no special security measures are provided. named shared memory functions pr_opensharedmemory pr_attachsharedmemory pr_detachsharedmemory pr_closesharedmemory pr_deletesharedmemory ...
Index
. see crl-cript-file format below. if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard input. -d directory specify the database directory containing the certificate and key database files. on unix the certificate database tool defaults to $home/.netscape (that is, ~/.netscape). on
windows nt the default is the current directory. the nss database files must reside in the same directory. -i crl-import-file specify the file which contains the crl to import -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a pl...
...and with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser
window, enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following s...
...mand. data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window. to output a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accep...
Build instructions for JSS 4.3.x
you are ready to build jss. follow these steps: switch to the appropriate directory and check out jss from the root of your source tree. cvs co -r jss_4_3_1_rtm mozilla/security/jss or cvs co -r jss_4_3_rtm mozilla/security/jss setup environment variables needed for compiling java source. the java_home variable indicates the directory containing your java sdk installation. ...
... cvs co -r jss_4_3_rtm mozilla/security/jss setup environment variables needed for compiling java source. the java_home variable indicates the directory containing your java sdk installation. note, on
windows platforms it is best to have java_home set to a directory path that doest not have spaces. unix setenv java_home /usr/local/jdk1.5.0 (or wherever your jdk is installed)
windows set java_home=c:\programs\jdk1.5.0 (or wherever your jdk is installed)
windows (cygnus) java_home=/cygdrive/c/programs/jdk1.5.0 (or wherever your jdk is installed) export java_home
windows build configurations winnt vs win95 as of nss 3.15.4, nspr/nss/jss build generates a "win95" configuration by default on
windows. we recommend most applications use the "win95" configu...
...the "win95" name is historical; it should have been named "win32". to generate a "winnt" configuration, set os_target=winnt and build nspr/nss/jss win95. mac os x it has been recently reported that special build instructions are necessary to succeed building jss on osx. ...
Using JSS
d nss shared libraries jss uses the nspr and nss libraries for i/o and crypto. jss version 3.0 linked statically with nss, so it only required nspr. jss versions 3.1 and later link dynamically with nss, so they also require the nss shared libraries. the exact library names vary according to the convention for each platform. for example, the nspr library is called nspr4.dll or libnspr4.dll on
windows and libnspr4.so on solaris. the following table gives the core names of the libraries, omitting the platform-specific prefix and suffix. jss dependencies core library name description binary release location nspr4 nspr os abstraction layer http://ftp.mozilla.org/pub/mozilla.org/nspr/releases plc4 nspr stand...
...if you built jss from source, it is in mozilla/dist/<platform>/lib. if you are downloading binaries, get it from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/. jss classes if you built jss from source, the compiled jss classes are in mozilla/dist/classes[_dbg]. you can put this directory in your classpath to run applications locally; or, you can pac...
...leases/. setup your runtime environment you need to set some environment variables before building and running java applications with jss. classpath include the path containing the jss classes you built, or the path to jss42.jar. (the path to jss34.jar ends with the string "/jss42.jar". it is not just the directory that contains jss42.jar.) ld_library_path (unix) / path (
windows) include the path to the nspr, nss, and jss shared libraries. initialize jss in your application before calling any jss methods, you must initialize jss by calling one of the cryptomanager.initialize methods. see the javadoc for more details. ...
NSS environment variables
ese environment variables affect the build (compilation) of nss. note: this section is a work in progress and is not yet complete. variable type description introduced in version build_opt boolean (1 to enable) do an optimized (not debug) build. default is to do a debug build. ...
...le) needed on
windows to build with versions of msvc (such as vc8 and vc9) that do not understand /pdb:none 3.11 moz_debug_flags string when moz_debug_symbols is set, you may use moz_debug_flags to specify alternative compiler flags to produce symbolic debugging information in a particular format. 3.12.8 nsdistmode string on operating systems other than
windows, this controls whether copies, absolute symlinks, or relative symlinks of the output files should be published to mozilla/dist. the possible values are: copy: copies of files are published absolute_symlink: symlinks whose targets are absolute pathnames are published if not specified, default to relative symlinks (symlinks whose targets are relative pathnames). on win...
...only, when the target os is not the default for the system on which the build is performed. values understood: win95 before 3.0 use_64 boolean (1 to enable) on platforms that has separate 32-bit and 64-bit abis, nss builds for the 32-bit abi by default. this tells nss to build for the 64-bit abi. before 3.0 use_debug_rtl boolean (1 to enable) on
windows, msvc has options to build with a normal run time library or a debug run time library. this tells nss to build with the debug run time library. before 3.0 use_pthreads boolean (1 to enable) on platforms where posix threads are available, but are not the os'es preferred threads library, this tells nss and nspr to build using pthreads. before 3.0 nss_no_pkcs11_byp...
gtstd.html
when you have finished setting up the server and client certificate databases, verify that the client and server certificates are valid, as follows: >certutil -v -d server_db -u v -n myco.mcom.org certutil: certificate is valid >certutil -v -d client_db -u c -n "joe client" certutil: certificate is valid building nss programs on unix, use the gnu utility gmake to run the makefile. ...
...le. on
windows nt, use the nmake utility that comes with visual c++. if you create your own makefiles, be sure to include the libraries in the same order that they are listed in the sample makefiles. ...
...sure to include the libraries in the same order that they are listed in the sample makefiles. ...
NSS Tools ssltap
using the ssl debugging tool (ssltap) newsgroup: mozilla.dev.tech.crypto the ssl debugging tool is an ssl-aware command-line proxy. it watches tcp connections and displays the data going by. if a connection is ssl, the data display includes interpreted ssl records and handshaking. availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and
windows nt 4.0. description the ssltap command opens a socket on a rendezvous port and waits for an incoming connection from the client side. once this connection arrives, the tool makes another connection to the specified host name and port on the server side. it passes any data sent by the client to the server and vice versa. the tool also displays the data to the shell
window from which it was called. it can do this fo...
...the ssltap command with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: ssltap www.netscape.com:80 the program waits for an incoming connection on the default port 1924. in your browser
window, enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols: --> ...
...ich you issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: <-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window. to output a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, sw...
How to build an XPCOM component in JavaScript
ts { string hello(); }; note that you must generate a new uuid for each xpcom component that you create. see generating guids for more information. compiling the typelib your interface definition must be compiled into a binary format (xpt) in order to be registered and used within mozilla applications. the compilation can be done using the gecko sdk. ...
...te. see generating guids for more information. compiling the typelib your interface definition must be compiled into a binary format (xpt) in order to be registered and used within mozilla applications. the compilation can be done using the gecko sdk. you can learn how to get mac, linux, and
windows versions of the gecko sdk by reading the article gecko sdk. for code outside the tree note: on
windows if you download the gecko sdk without the whole build tree, you will be missing some required dlls for xpidl.exe and it will run with no errors but not do anything. to fix this download the mozilla build tools for
windows and copy the dlls from
windows\bin\x86 within the zip into the bin directory of the gecko sdk. note: the mac version of the sdk provided for download is powerpc-only. if you n...
...y of the gecko sdk. note: the mac version of the sdk provided for download is powerpc-only. if you need an intel version, you'll need to compile it yourself as described on that page. execute this command to compile the typelib. here, {sdk_dir} is the directory in which you unpacked the gecko sdk. {sdk_dir}/bin/xpidl -m typelib -w -v -i {sdk_dir}/idl -e helloworld.xpt helloworld.idl note: on
windows you must use forward slashes for the include path. note: (the -i flag is an uppercase i, not a lowercase l.) this will create the typelib file helloworld.xpt in the current working directory. for a new component in firefox/thunderbird/b2g if you are adding a new feature to applications in the mozilla-central repository, you can create a makefile listing the idl files and the build system wil...
XPCOM changes in Gecko 2.0
starting with firefox 4. your life would be much easier over the long term if you switch to using js-ctypes instead. also note that extensions using binary components must now use the unpack property in the install manifest. ...
...ary components must now use the unpack property in the install manifest. platform-specific directories the component/chrome system used to look in platform-specific subdirectories of an extension, such as platform/winnt_x86-msvc/chrome.manifest on
windows. this is no longer supported. you can use the os and abi chrome registration directives to achieve the same effect: binary-component components/
windows/mycomponent.dll abi=winnt_x86-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x86-gcc3 binary-component components/mac/mycomponent64.dylib abi=darwin_x86_64-gcc3 binary-component components/linux/mycomponent.so abi=linux_x86-gcc3 this also means that platform-specific preferences are no longer possible. if you need to adjust default preferences based on platform, you can do so...
...nd set properties created by the xbl binding—you will need to use the xpcnativewrapper property wrappedjsobject to access wrapped objects. if you need to be able to call functions or access properties defined by web content, you'll need to do this as well. this may be the case if, for example, you've written an extension that adds a delete button to a web mail service, and the service defines a
window.delete() function that you need to call. if, on the other hand, all you're doing with content is accessing dom methods and properties, you've never needed to be using xpcnativewrappers=no in the first place, and should simply remove it from your manifest. miscellaneous xpcnativewrapper changes using the delete operator on "expando" properties of an xpcnativewrapper no longer throws a security ex...
Finishing the Component
ents in a document, but our policy is more restrictive: if the url isn't on the white list, the entire page should be blocked. in the weblock component, the shouldload method looks like this: ns_imethodimp weblock::shouldload(print32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidom
window *
window, prbool *_retval) uniform resource locators the method passes in an interface pointer of type nsiuri, which is based on the uniform resource identifier, or uri. this type is defined by the world wide web consortium as: the naming scheme of the mechanism used to access the resource. the name of the machine hosting the resource. the name of the reso...
...set of the url string is utf-8, and also assuming that every url string is absolute. see the intro to the html 4 specification for more information about relative urls. ...
...he url string is utf-8, and also assuming that every url string is absolute. see the intro to the html 4 specification for more information about relative urls. ...
Components.utils.importGlobalProperties
using this api you can import these objects into such a system scope. this function is not intended for sandboxes but for system-privileged scopes. to import these objects into a sandbox, use the wantglobalproperties option in the sandbox constructor. this function is passed an array of strings. each string is the name of an object to import, and will be defined on the importing scope's global. ...
...e reason this works is because js code modules actually have blob and file. cu.import() will return the full global of a code module. knowing that, we can just get a valid blob by importing a known module that has the objects, such as services.jsm const {blob, file, services} = cu.import("resource://gre/modules/services.jsm", {}); reference: stackoverflow :: use blob on firefox add-on hiddendom
window the hidden dom
window has all of these objects automatically imported. the downside of using hiddendom
window is that on startup of firefox, the hiddendom
window objects cannot be accessed until it is fully loaded. therefore readystate must be checked, if it is not complete, then a load listener must be attached. once readystate is complete then the objects can be used. for example this is how to ...
...mported. the downside of using hiddendom
window is that on startup of firefox, the hiddendom
window objects cannot be accessed until it is fully loaded. therefore readystate must be checked, if it is not complete, then a load listener must be attached. once readystate is complete then the objects can be used. for example this is how to ues the file object. ...
amIWebInstallPrompt
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable called when installation by websites is currently disabled. ...
... toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable called when installation by websites is currently disabled. ...
...sites is currently disabled. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void confirm(in nsidom
window a
window, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); prior to gecko 8.0, all references to nsidom
window used in this interface were nsidom
window. methods confirm() gets a confirmation that the user wants to start the installs. void confirm( in nsidom
window a
window, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters a
window the
window that triggered the installs. auri the uri of the site that triggered the installs. ...
nsIAccessibleRetrieval
ed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiaccessible getaccessiblefor(in nsidomnode anode); nsiaccessible getaccessibleinshell(in nsidomnode anode, in nsipresshell apresshell); nsiaccessible getaccessibleinweakshell(in nsidomnode anode, in nsiweakreference apresshell); obsolete since gecko 2.0 nsiaccessible getaccessiblein
window(in nsidomnode anode, in nsidom
window adomwin); obsolete since gecko 2.0 nsiaccessible getapplicationaccessible(); nsiaccessible getattachedaccessiblefor(in nsidomnode anode); nsiaccessible getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference as...
...sary, or use one from the accessibility cache if it already exists. nsiaccessible getaccessibleinweakshell( in nsidomnode anode, in nsiweakreference apresshell ); parameters anode the dom node to get an accessible for. apresshell the presentation shell which contains layout info for the dom node. return value the nsiaccessible for the given dom node. ...
... parameters anode the dom node to get an accessible for. apresshell the presentation shell which contains layout info for the dom node. return value the nsiaccessible for the given dom node. getaccessiblein
window() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) return an nsiaccessible for a dom node in present shell for this dom
window. create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already exists. nsiaccessible getaccessiblein
window( in nsidomnode anode, in nsidom
window adomwin ); parameters anode the dom node to get an accessible for. adomwin the dom
window containing the node. return value the nsiaccessible for the given dom node. getapplicat...
nsIAccessibleStates
neither checked nor unchecked and is therefore in the third or mixed state. state_readonly 0x00000040 the object is designated read-only. state_hottracked 0x00000080 the object is hot-tracked by the mouse, which means that its appearance has changed to indicate that the mouse pointer is located over it. currently unused. state_default 0x00000100 this state represents the default button in a
window. state_expanded 0x00000200 children of this object that have the role_outlineitem role are displayed. (see nsiaccessiblerole.constants). state_collapsed 0x00000400 children of this object that have the role_outlineitem role are hidden. (see nsiaccessiblerole.constants). state_busy 0x00000800 the control cannot accept input at this time. state_floating 0x00001000 children "owned" not "cont...
... state is defined, then clients can communicate the information about the object to users. for example, a list box can have both state_invisible and state_offscreen set. in this case, the client application can communicate all items in the list to users. state_offscreen 0x00010000 scrolled off. state_sizeable 0x00020000 the object can be resized. for example, a user could change the size of a
window by clicking the border with a mouse and dragging the mouse. state_moveable 0x00040000 the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing 0x00080000 the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an o...
...stant value description ext_state_supports_autocompletion 0x00000001 for editable areas that have any kind of auto completion. ext_state_defunct 0x00000002 object no longer exists. ext_state_selectable_text 0x00000004 for text which is selectable, object must implement nsiaccessibletext. ext_state_editable 0x00000008 implements nsiaccessibleeditabletext. ext_state_active 0x00000010 this
window is currently the active
window. ext_state_modal 0x00000020 must do something with control before leaving it. ext_state_multi_line 0x00000040 edit control that can take multiple lines. ext_state_horizontal 0x00000080 uses horizontal layout. ext_state_opaque 0x00000100 indicates this object paints every pixel within its rectangular region. ext_state_single_line 0x00000200 this text object...
nsIClipboardDragDropHooks
each hook can only be called once per user action/api. not all hooks are guaranteed to be called. if there are multiple hooks set for a...
...the command manager to send the appropriate commands with these parameters/settings: command: cmd_clipboarddragdrophook params value type possible values "addhook" isupports nsiclipboarddragdrophooks as nsisupports "removehook" isupports nsiclipboarddragdrophooks as nsisupports note: overrides/hooks need to be added to each
window (as appropriate). adding them to the first
window does not enable them for every
window. ...
...d: cmd_clipboarddragdrophook params value type possible values "addhook" isupports nsiclipboarddragdrophooks as nsisupports "removehook" isupports nsiclipboarddragdrophooks as nsisupports note: overrides/hooks need to be added to each
window (as appropriate). adding them to the first
window does not enable them for every
window. if more than one implementation is set for a
window, the hooks will be called in the order they are added. adding the same hook to the same
window will not add a second call. each hook can only be called once per user action/api. not all hooks are guaranteed to be called. if there are multiple hooks set for a
window, any of them has an opportunity to cancel the action so no further processing will occur. if any errors occur (without setting the bo...
nsIContentFrameMessageManager
name type description aasciistring string ascii string to decode. returns string: the decoded binary data. btoa() convert binary data to ascii base64 data . parameters name type description abase64data string binary data to encode as base64. returns string: the base64-encoded ascii string. attributes content nsidom
window: the current top level
window in the frame or null. read only. docshell nsidocshell: the top level docshell or null. read only. examples once you obtain the conten frame messge manager, you can send messages to listeners who registered with services.mm.addmessagelistener get content message manager from browser this could would run in a nsidom
window scope. var acfmm = gbrowser.selectedbrow...
...e you obtain the conten frame messge manager, you can send messages to listeners who registered with services.mm.addmessagelistener get content message manager from browser this could would run in a nsidom
window scope. var acfmm = gbrowser.selectedbrowser._docshell.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsicontentframemessagemanager); get content message manager from content
window window here is a html
window or any
window inside a tab, this code would run from a framescript. ...
...ssagelistener get content message manager from browser this could would run in a nsidom
window scope. var acfmm = gbrowser.selectedbrowser._docshell.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsicontentframemessagemanager); get content message manager from content
window window here is a html
window or any
window inside a tab, this code would run from a framescript. ...
nsIFileView
note: a quirk of the nsifileview is that it requires an appropriate treecols section in the tree tag, by default fileview will return the file size in the column. ...
...ing filterstring ); parameters filterstring the filter to be applied to the file list. sort() set the method used for sorting. void sort( in short sorttype, in boolean reversesort ); parameters sorttype one of the sort* constants. reversesort true, results will be sorted in ascending order. ...
...t tview = fview.queryinterface(components.interfaces.nsitreeview); //get the nsitreeview interface fview.setdirectory(lfile.queryinterface(components.interfaces.nsifile)); //set the directory fview.setfilter("*"); //add an appropriate file filter fview.sort(fview.sortname, false); //set the sort type ftree.view = tview; //set the view on the tree object </script> </
window> ...
nsIFrameLoader
t in the frame loader. void loadframe(); parameters none. loaduri() loads the specified uri in this frame. behaves identically to loadframe(), except that this method lets you specify the uri to load. void loaduri( in nsiuri auri ); parameters auri the uri to load into the frame. sendcrossprocesskeyevent() creates and sends a keyevent to the content viewport's process. see nsidom
windowutils.sendkeyevent() for details; this method is its equivalent for cross-process event handling. void sendcrossprocesskeyevent( in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault ); parameters atype the event type. akeycode the key code. acharcode the character code. amodifiers the modifier flags. apreventdefaul...
...long acharcode, in long amodifiers, [optional] in boolean apreventdefault ); parameters atype the event type. akeycode the key code. acharcode the character code. amodifiers the modifier flags. apreventdefault whether or not to prevent default actions from being performed. sendcrossprocessmouseevent() creates and sends a mouseevent to the content viewport's process. see nsidom
windowutils.sendmouseevent() for details; this method is its equivalent for cross-process event handling. void sendcrossprocessmouseevent( in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe ); parameters atype the type of mouse event to send. ax the x coordinate of the mouse. ay the y...
...roll frame. ...
nsIMsgSearchSession
r folder); void adddirectoryscopeterm(in nsmsgsearchscopevalue scope); void clearscopes(); [noscript] boolean scopeusescustomheaders(in nsmsgsearchscopevalue scope, in voidptr selection, in boolean forfilters); boolean isstringattribute(in nsmsgsearchattribvalue attrib); void addallscopes(in nsmsgsearchscopevalue attrib); void search(in nsimsg
window a
window); void interruptsearch(); void pausesearch(); void resumesearch(); [noscript] nsmsgsearchtype setsearchparam(in nsmsgsearchtype type, in voidptr param); [noscript] void addresultelement(in nsmsgresultelement element); boolean matchhdr(in nsimsgdbhdr amsghdr, in nsimsgdatabase adatabase); void addsearchhit(in nsimsgdbhdr header...
... attributes attribute type description searchterms nsisupportsarray readonly: numsearchterms unsigned long readonly: runningadapter nsimsgsearchadapter readonly: searchparam voidptr not scriptable and readonly: searchtype nsmsgsearchtype readonly: numresults long readonly:
window nsimsg
window constants name value description booleanor 0 booleanand 1 methods addsearchterm() void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in string arbitrary...
...folder or server based on scope forfilters isstringattribute() use this to determine if your attribute is a string attribute. boolean isstringattribute(in nsmsgsearchattribvalue attrib); parameters attrib addallscopes() add all scopes of a given type to the search. void addallscopes(in nsmsgsearchscopevalue attrib); parameters attrib search() void search(in nsimsg
window a
window); parameters a
window interruptsearch() void interruptsearch(); pausesearch() these two methods are used when the search session is using a timer to do local search, and the search adapter needs to run a url (e.g., to reparse a local folder) and wants to pause the timer while running the url. this will fail if the current adapter is not using a timer. void pausesearch(); ...
nsITaskbarProgress
this class wraps around the native functionality to do this. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void setprogressstate(in nstaskbarprogressstate state, in unsigned long long currentvalue optional, in unsigned long long maxvalue optional); constants constant value description state_no_progress 0 stop displaying progress on the taskbar button. this should be used when the operation is complete or canceled. ...
...peration is complete or canceled. state_indeterminate 1 display a cycling, indeterminate progress bar. state_normal 2 display a determinate, normal progress bar. state_error 3 display a determinate, error progress bar. state_paused 4 display a determinate progress bar indicating that the operation has paused. methods setprogressstate() sets the taskbar progress state and value for this
window. the currentvalue and maxvalue parameters are optional and should be supplied when state is one of state_normal, state_error or state_paused. void setprogressstate( in nstaskbarprogressstate state, in unsigned long long currentvalue, optional in unsigned long long maxvalue optional ); parameters state one of the state constants. currentvalue the current progress value. maxvalue the maximu...
... in unsigned long long maxvalue optional ); parameters state one of the state constants. currentvalue the current progress value. maxvalue the maximum progress value. exceptions thrown ns_error_illegal_value if currentvalue is greater than maxvalue. ns_error_invalid_arg if state is state_no_progress or state_indeterminate, and either currentvalue or maxvalue is not 0. see also nsiwintaskbar
windows 7 taskbar apis ...
nsIWebBrowserPersist
r policy to use for the request, taken from nsihttpchannel. apostdata post data to pass with an http request or nsnull. aextraheaders additional headers to supply with an http request or nsnull. afile target file. this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp). aprivacycontext a context derived from a relevant
window or document (eg. the
window containing a link being saved) via a docshell that qis to nsiloadcontext. used to ensure that privacy-sensitive operations (such as saving a uri related to a private browsing session) do not leak any information (eg. cookies, permanent cache, etc.) null must only be passed in the event that no such relevant context exists (ie. the uri being saved is unrelated to any cu...
...guments was invalid. saveprivacyawareuri() save the specified uri to file, explicitly dictating whether the operation should be considered private for the purposes of network requests, caching, etc. all arguments and exceptions are identical to saveuri, with the exception of aisprivate which is used to indicate the private nature of the operation. ...
...ponents.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"].createinstance(components.interfaces.nsiwebbrowserpersist); // with persist flags if desired const nsiwbp = components.interfaces.nsiwebbrowserpersist; const flags = nsiwbp.persist_flags_replace_existing_files; obj_persist.persistflags = flags | nsiwbp.persist_flags_from_cache; var privacycontext = source
window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsiloadcontext); //save file to target obj_persist.saveuri(obj_uri,null,null,null,null,obj_targetfile,privacycontext); // starting with firefox 36 saveuri takes...
Troubleshooting XPCOM components registration
successfully registered and this is the wrong page. load failure of binary components on the mozilla trunk (firefox 3, xulrunner 1.9), components that fail to load will print an error to the error console. chrome errors must be enabled. if the error appears, you can use nspr logging to see additional information about the failure by running firefox from a command prompt: rem close all firefox
windows! set nspr_log_modules=nsnativemoduleloader:5 set nspr_log_file=c:\path\to\logfile "c:\program files\mozilla firefox\firefox.exe" examining this log for warning and errors may provide valuable clues why the component failed to load. if using firefox 4 / xulrunner 2.0, make sure that your extension is unpacked and you declared the binary component in your chrome.manifest. see xpcom changes in g...
...compilation to build your component. if you are testing a build from your linux distribution (or other vendor-supplied build), look for -dev packages from them. remember to check that the directory the component is in is named correctly i.e. $profile/extensions/$plugindirectory/components! double check your guids in your install.rdf with your sourcecode, and then check them again.
windows-specific hints use dependency walker to check that your dependent libraries are loaded correctly. in dependency walker, open the options menu and select configure module search order.... in the bottom right corner of the new dialog, click browse... and select the directory firefox.exe (or equivalent) is in. in the bottom left corner, click add directory. do not add any other d...
...iles for 7.1 and 8.0) available. this even means that if you are using a component stub, the stub needs to be compiled using a version which the machine does support; most likely this means msvc 6.0. it may then be necessary for the stub to locate the newer runtime libraries for the other files it loads. if you compiled the component with msvc 8.0 (2005) and are attempting to use it on a
windows xp machine or later, it will need a manifest embedded to find the runtime. please refer to msdn for details. if you have the option, you can manually copy these dependencies to firefox.exe's directory, to
windows\system32, or to any directory is the system's path. a google groups thread on the matter is located here. the dllmain code that msvc 8 (and probably earlier versions too) gener...
Browser Side Plug-in API - Plugins
ract, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredictable results. netscape plug-in method summary « previousnext » npn_destroystream closes and deletes a stream. npn_forceredraw forces a paint message for a
windowless plug-in. npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the browser. npn_geturl asks the browser to create a stream for the specified url. npn_geturlnotify requests creation of a new stream with the contents of the specified url; gets notification of the result. npn_getvalue allows the plug-in to query the browser for informa...
...creation of a new stream with the contents of the specified url; gets notification of the result. npn_getvalue allows the plug-in to query the browser for information. npn_getvalueforurl provides information to a plug-in which is associated with a given url, for example the cookies or preferred proxy. npn_invalidaterect invalidates specified drawing area prior to repainting or refreshing a
windowless plug-in. npn_invalidateregion invalidates specified drawing region prior to repainting or refreshing a
windowless plug-in. npn_memalloc allocates memory from the browser's memory space. npn_memflush requests that the browser free a specified amount of memory. npn_memfree deallocates a block of allocated memory. npn_newstream requests the creation of a new data stream produced by the...
...ted). npn_poppopupsenabledstate pops the popups-enabled state. npn_posturl posts data to a url. npn_posturlnotify posts data to a url, and receives notification of the result. npn_pushpopupsenabledstate pushes the popups-enabled state. npn_reloadplugins reloads all plug-ins in the plugins directory. npn_requestread requests a range of bytes for a seekable stream. npn_setvalue sets
windowless plug-in as transparent or opaque. npn_setvalueforurl allows a plug-in to change the stored information associated with a url, in particular its cookies. npn_status displays a message on the status line of the browser
window. npn_useragent returns the browser's user agent field. npn_version returns version information for the plug-in api. npn_write pushes data into a stream produced...
Plug-in Side Plug-in API - Plugins
pp_destroystream tells the plug-in that a stream is about to be closed or destroyed. np_getentrypoints undocumented. np_getmimedescription registers the mime types supported by the plug-in (unix, mac os). npp_getvalue allows the browser to query the plug-in for information. np_getvalue allows the browser to query the plug-in for information. ...
... np_shutdown provides global deinitialization for a plug-in. npp_streamasfile provides a local file name for the data from a stream. npp_urlnotify notifies the instance of the completion of a url request. npp_write delivers data to a plug-in instance. ...
... np_shutdown provides global deinitialization for a plug-in. npp_streamasfile provides a local file name for the data from a stream. npp_urlnotify notifies the instance of the completion of a url request. npp_write delivers data to a plug-in instance. npp_writeready determines maximum number of bytes that the plug-in can consume. ...
Streams - Plugins
(or null if an error occurs during data retrieval or writing to the file). sending a stream when a plug-in sends a data stream to the browser, it performs several tasks. the plug-in calls the methods npn_newstream, npn_write, and npn_destroystream to create a stream, push data into it, and delete it. streams produced by a plug-in have a specific mime type and can be sent to a particular browser
window or frame for display. creating a stream pushing data into the stream deleting the stream for an example that demonstrates these processes, see "example of sending a stream." creating a stream the plug-in calls npn_newstream to send a new data stream to the browser. the browser creates a new npstream object and returns it to the plug-in as an output parameter. the plug-in can use this st...
...and deallocate the npstream object by calling the npn_destroystream function. nperror npn_newstream(npp instance, npmimetype type, const char* target, npstream** stream); the instance parameter is the plug-in instance that is creating the stream; the type specifies the mime type of the stream. the target parameter specifies the
window or frame. for the possible values of named targets, see the reference entry for npn_newstream. the target should not be the same
window. the stream parameter represents the stream that the browser creates. for an example that demonstrates using this function with npn_write and npn_destroystream, see "example of sending a stream." pushing data into the stream after creating a stream with npn_n...
... the stream because of a user request. npres_network_err: the stream failed because of network problems. for the complete list of codes, see "result codes." for an example that demonstrates using this function with npn_newstream and npn_write, see "example of sending a stream." example of sending a stream the following code creates a new stream of html text displayed by the browser in a new
window, writes it, and destroys the stream. error handling has been omitted for simplicity. npstream* stream; char* mydata = "<html><head><title>this is a message from my plug-in!</title></head><body><p><strong>this is a message from my plug-in!</strong></p></body>/html>"; int32 mylength = strlen(mydata) + 1; /* create the stream. */ err = npn_newstream(instance, "text/html", "_blank", &stream); /* p...
The Web Developer Menu - Firefox Developer Tools
the web developer menu is the main way to access the developer tools that are built into firefox. ...
... the web developer menu is the main way to access the developer tools that are built into firefox. ...
...nd linux, it's under the "tools" menu: on
windows 7, it's under the "firefox" menu: you'll see that the menu is split into three sections: the first section lists tools that are hosted in the toolbox, which is a dedicated
window for developer tools the second section lists integrated tools that are not hosted in the toolbox, as well as any tools installed as add-ons (you'll see in the
windows screenshot above that i've installed the firefox os simulator) the third section, "get more tools", is a link to more web development add-ons for firefox ...
DOM Inspector internals - Firefox Developer Tools
ect applications by providing its own host-integration overlays. ...
...no menus, toolbar items, et cetera defined here. even most of the elements that aren't visible, such as key- and commandsets, are not defined in inspector.xul. these are pulled in from a series of overlays, so that the xul defining dom inspector's ui can be organized into discrete units. inspector.xul itself is only a skeleton describing the basic structure and layout of the primary dom inspector
window, leaving most of its contents to be added by the overlays. using modular overlays also allows for common xul to be shared across the various documents that make up the dom inspector's ui, although not all overlays are shared by multiple consumers. single-consumer overlays exist solely for organization. in some cases overlays are overlaid by other overlays. if we imagine a tree structure obtaine...
...ers/dom and viewers/stylerules—are loaded as a result of overlay directives in dom inspector's chrome manifest, rather than being explicitly imported using a xul-overlay processing instruction in the overlaid file.) inspectoroverlay.xul this imports the scripts the top-level inspector needs, including dependencies. additionally, it defines the content in the main body of the dom inspector
window, namely, the panelset, document and object viewer panels, and the document browser pane. (the browser pane is not a viewer panel in the sense that document and object panels are, i.e., the sorts of panels as defined above in relation to the panelset; "pane" is used here with regard to the browser pane in a loose sense to describe the generic ui fixture.) toolboxoverlay.xul this overlay fill...
Browser Toolbox - Firefox Developer Tools
n 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). you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false): click ok, and the browser toolbox will open in its own
window: you'll be able to inspect the browser's chrome
windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any add-ons that are running. altogether you will have access to the following developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger.) console style editor perfor...
...ork monitor page inspector accessibility inspector you can debug chrome: and about: pages using the normal debugger, just as if they were ordinary content pages. targeting a document in the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the document. ...
...normal debugger, just as if they were ordinary content pages. targeting a document in the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the document. the same button appears in the browser toolbox where it lists all the top-level chrome and content
windows as well as any iframes they contain. this enables you to inspect documents in individual chrome
windows and popups, as well as in content tabs. for example, here's what the frame selection popup lists when there are two browser
windows open, one with one content tab, and one with two: debugging popups it's hard to debug popups, because the browser hides them as soon as you click outside them. there is a way to disable this behavior. click the toolbox menu and select disable popup auto-hide.
Set a breakpoint - Firefox Developer Tools
ugh to this point. unconditional breakpoints an unconditional breakpoint is one where the code will always pause execution when it is reached. you can set an unconditional breakpoint using the context menu (see above), or by: clicking on the line number for the line you want to break at in the source pane. highlighting the line you want to break at in the source pane and pressing ctrl + b (
windows/linux) or cmd + b (macos). the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each relevant one. condition...
...ing on each relevant one. conditional breakpoints a conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value at the time. you can set a conditional breakpoint using the context menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (
windows/linux) or cmd + shift + b (macos). when you first choose to set a conditional breakpoint, a text entry line will appear into which you add the condition you want it to break on: once you've entered your condition and pressed enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows t...
...mber will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways: click on the line number highlight. highlight the line of code the breakpoint is set on and pressing ctrl + b (
windows/linux) or cmd + b (macos). bring up the context menu over the line highlight and choose the remove breakpoint option. other context menu options worth mentioning are: disable breakpoint: turn it off, but don't remove it completely. disable breakpoints on line and remove breakpoints on line: remove or disable column breakpoints. if the breakpoint is an unconditional breakpoint, you'll g...
Debugger keyboard shortcuts - Firefox Developer Tools
command
windows macos linux close current file ctrl + w cmd + w ctrl + w search for a string in the current file ctrl + f cmd + f ctrl + f search for a string in all files ctrl + shift + f cmd + shift + f ctrl + shift + f find next in the current file ctrl + g cmd + g ctrl + g search for scripts by name ctrl + p cmd + p ctrl + p resume execution when at a breakpoint f8 f8 1 f8 step over f10 f10 1 f10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently s...
...fault, on some macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. see this guide to using these keys as standard function keys. 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). ...
...ction 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. from firefox 66 and later, this is no longer the case. global shortcuts these shortcuts work in all tools that are hosted in the toolbox. ...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
nu will not be present unless you have changed the preference as explained above.) selecting the 'browser' context in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything. components.utils.import('resource://gre/modules/jsdebugger.jsm'); adddebuggertoglobal(
window); (function () { // the debugger we'll use to observe a tab's allocation. var dbg; // start measuring the selected tab's main
window's memory // consumption. this function is available in the browser // console.
window.demotrackallocations = function() { dbg = new debugger; // this makes hacking on the demo *much* more // pleasant. dbg.uncaughtexceptionhook = handle...
...'s allocation. var dbg; // start measuring the selected tab's main
window's memory // consumption. this function is available in the browser // console.
window.demotrackallocations = function() { dbg = new debugger; // this makes hacking on the demo *much* more // pleasant. dbg.uncaughtexceptionhook = handleuncaughtexception; // find the current tab's main content
window. var w = gbrowser.selectedbrowser.content
window; console.log("tracking allocations in page: " + w.location.href); // make that
window a debuggee of our debugger. dbg.adddebuggee(w.wrappedjsobject); // enable allocation tracking in dbg's debuggees. ...
... var log = dbg.memory.drainallocationslog(); // neutralize the debugger, and drop it on the floor // for the gc to collect. ...
Dominators view - Firefox Developer Tools
oot dominates it). each entry displays: the retained size of the node, as bytes and as a percentage of the total the shallow size of the node, as bytes and as a percentage of the total the nodes's name and address in memory. entries are ordered by the amount of memory that they retain. for example: in this screenshot we can see five entries under "gc roots". the first two are call and
window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. you can also see that these objects have a relatively tiny "shallow size", so almost all of the retained size is in the objects that they dominate. immediately under each gc root, you'll see all the nodes for which this root is the immediate dominator. these nodes are also ordered by their retained size.
... the total size of the memory snapshot, respectively. you can also see that these objects have a relatively tiny "shallow size", so almost all of the retained size is in the objects that they dominate. immediately under each gc root, you'll see all the nodes for which this root is the immediate dominator. these nodes are also ordered by their retained size. for example, if we click on the first
window object: we can see that this
window dominates a css2properties object, whose retained size is 2% of the total snapshot size. again the shallow size is very small: almost all of its retained size is in the nodes that it dominates. by clicking on the disclosure arrow next to the function, we can see those nodes. in this way you can quickly get a sense of which objects retain the most memory in ...
...is enables you to see all the nodes that are keeping the given node from being garbage-collected. if you suspect that an object is being leaked, this will show you exactly which objects are holding a reference to it. to see the retaining paths for a node, you have to select the node in the dominators tree panel: here, we've selected an object, and can see a single path back to a gc root. the
window gc root holds a reference to an htmldivelement object, and that holds a reference to an object, and so on. if you look in the dominators tree panel, you can trace the same path there. if either of these references were removed, the items below them could be garbage-collected. each connection in the graph is labeled with the variable name for the referenced object. sometimes there's more than on...
Migrating from Firebug - Firefox Developer Tools
the devtools web console shows those structures directly under the "response" tab. multi-line command line firebug's console has a multi-line command line called command editor. the devtools do not have a side panel like the command editor (which is requested in bug 1133849), but therefore has a separate tool called scratchpad, which can be added as panel to the toolbox or opened in a separate
window via firefox menu > developer > scratchpad or shift + f4. also, the normal command line smartly enters a line break when it recognizes an unfinished command like document. and you hit enter. you can also manually enter a line break by pressing shift + enter. response preview there is a preview tab when a network request logged to the console is expanded in firebug. the web console displays a pre...
...on is paused, firebug displays the function call stack within its stack side panel. in there the functions are listed together with their call parameters. in the devtools the function call stack is shown within the call stack side panel. to see the call parameters in the devtools, you need to have a look at the variables side panel. examine variables the watch side panel in firebug displays the
window object (the global scope) by default. with the script execution halted it shows the different variable scopes available within the current call stack frame. furthermore, it allows you to add and manipulate watch expressions. the devtools have a variables side panel, which works basically the same. the main difference is that it is empty when the script execution is not stopped, i.e. it doesn't di...
...he global scope) by default. with the script execution halted it shows the different variable scopes available within the current call stack frame. furthermore, it allows you to add and manipulate watch expressions. the devtools have a variables side panel, which works basically the same. the main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the
window object. though you can inspect that object either via the dom property viewer or via the web console. style editor the style editor in the firefox devtools allows you to examine and edit the different css style sheets of a page like firebug's css panel does it. in addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. it also allows...
Use the Inspector API - Firefox Developer Tools
.markdirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload. ...
... .markdirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload. ...
... .markdirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload. ...
AnalyserNode.fftSize - Web APIs
a higher value will result in more details in the frequency domain but fewer details in the time domain. must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. defaults to 2048. ...
...a higher value will result in more details in the frequency domain but fewer details in the time domain. must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. defaults to 2048. ...
... example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount ; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getb...
AudioNode.connect() - Web APIs
d the audio from a mediaelementaudiosourcenode—that is, the audio from an html5 media element such as <audio>—through a band pass filter implemented using a biquadfilternode to reduce noise before then sending the audio along to the speakers. this example creates an oscillator, then links it to a gain node, so that the gain node controls the volume of the oscillator node. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); audioparam example in this example, we will be altering the gain value of a gainnode using an oscillatornode with a slow frequency value. this technique is know ...
...ioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); audioparam example in this example, we will be altering the gain value of a gainnode using an oscillatornode with a slow frequency value. this technique is know as an lfo-controlled parameter. ...
...t(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); audioparam example in this example, we will be altering the gain value of a gainnode using an oscillatornode with a slow frequency value. this technique is know as an lfo-controlled parameter. ...
Using the Beacon API - Web APIs
akes two arguments: the url and the data to send. the data argument is optional and its type may be an arraybufferview, blob, domstring, or formdata. if the browser successfully queues the request for delivery, the method returns true and returns false otherwise. the following example specifies a handler for the load and beforeunload events. the handler calls sendbeacon() with the current url. ...
...ts: the url and the data to send. the data argument is optional and its type may be an arraybufferview, blob, domstring, or formdata. if the browser successfully queues the request for delivery, the method returns true and returns false otherwise. the following example specifies a handler for the load and beforeunload events. the handler calls sendbeacon() with the current url. ...
...cs"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon().
window.onsubmit = function send_analytics() { var data = json.stringify({ location: location.href, time: date() }); navigator.sendbeacon('/analytics', data); }; workernavigator.sendbeacon() the beacon api's workernavigator.sendbeacon() method works identically to the usual method, but is accessible from worker global scope. in the following example, a worker sends a beacon using the u...
BeforeInstallPromptEvent - Web APIs
this interface inherits from the event interface. ...
..."play" which would allow the user to chose between a web version or an android version. beforeinstallpromptevent.userchoice read only returns a promise that resolves to a domstring containing either "accepted" or "dismissed". ...
...g containing either "accepted" or "dismissed". methods beforeinstallpromptevent.prompt() allows a developer to show the install prompt at a time of their own choosing. this method returns a promise. ...
BeforeUnloadEvent - Web APIs
when a non-empty string is assigned to the returnvalue event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). when no value is provided, the event is processed silently. some implementations only show the dialog box if the frame or any embedded frame receives a user gesture or user interaction. see browser compatibility for more information. ...
..."2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples
window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to
window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box. an almost-cross-browser working example would be close to the below example.
window.addeventlistener("beforeunload", function (e) { ...
...( event ) { event.returnvalue = "\o/"; }); // is equivalent to
window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box. an almost-cross-browser working example would be close to the below example.
window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e ||
window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification. ...
Managing screen orientation - Web APIs
en always has one. and if a device is able to know its orientation, it's good to have the ability to control the screen orientation in order to preserve or adapt the interface of a web application. there are several ways to handle screen orientation, both with css and javascript. the first is the orientation media query. this lets content adjust its layout using css, based on whether the browser
window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width). the second way is the javascript screen orientation api that can be used to get the current orientation of the screen itself and eventually lock it. adjusting layout based on the orientation one of the most common cases for orientation changes is when you want to revise...
... some devices (mainly mobile devices) can dynamically change the orientation of the screen based on their own orientation, ensuring...
... some devices (mainly mobile devices) can dynamically change the orientation of the screen based on their own orientation, ensuring that the user will always be able to read what's on the screen. ...
CacheStorage - Web APIs
maintains a mapping of string names to corresponding cache objects. ...
... maintains a mapping of string names to corresponding cache objects. ...
... maintains a mapping of string names to corresponding cache objects. use cachestorage.open() to obtain a cache instance. ...
Optimizing canvas - Web APIs
nto a plain <div> element using the css background property and position it under the canvas. this will negate the need to render the background to the canvas on every tick. scaling canvas using css transforms css transforms are faster since they use the gpu. the best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down. ...
...und property and position it under the canvas. this will negate the need to render the background to the canvas on every tick. scaling canvas using css transforms css transforms are faster since they use the gpu. the best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down. ...
...batch canvas calls together. for example, draw a polyline instead of multiple separate lines. avoid unnecessary canvas state changes. render screen differences only, not the whole new state. avoid the shadowblur property whenever possible. avoid text rendering whenever possible. try different ways to clear the canvas (clearrect() vs. fillrect() vs. resizing the canvas). with animations, use
window.requestanimationframe() instead of
window.setinterval() . be careful with heavy physics libraries. ...
Client.url - Web APIs
the url of the current service worker client. syntax var clienturl = client.url; value a usvstring. ...
... working draft initial definition. ...
... working draft initial definition. ...
Using light sensors - Web APIs
e browser is notified of the change and fires a devicelightevent event. the event gives information about the light intensity of the device's environment. the devicelightevent provides a value attribute with light intensity in lux which is generally treated as shown below. ...
...ified of the change and fires a devicelightevent event. the event gives information about the light intensity of the device's environment. the devicelightevent provides a value attribute with light intensity in lux which is generally treated as shown below. 10 ~ 50 lux : dim environment 100 ~ 1000 lux : normal > 10000 lux : bright it uses the addeventlistener method of the
window object. ...
...ightevent provides a value attribute with light intensity in lux which is generally treated as shown below. 10 ~ 50 lux : dim environment 100 ~ 1000 lux : normal > 10000 lux : bright it uses the addeventlistener method of the
window object.
window.addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value; alert(luminosity); }); example:
window.addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { alert('hey, you! you are working in a dark environment'); bodybg.backgroundcolor="lightgrey"; } else { bodybg.backgroundcolor="#fff"; } }); this example shows how the api can actually be used in the wild. if your a...
Document.open() - Web APIs
all existing nodes are removed from the document. syntax document.open(); parameters none. return value a document object instance. examples the following simple code opens the document and replaces its content with a number of different html fragments, before closing it again. ...
...pal of the document whose uri it uses, instead of fetching the principal off the stack. as a result, you can no longer call document.write() into an untrusted document from chrome, even using wrappedjsobject. see security check basics for more about principals. ...
...lt, you can no longer call document.write() into an untrusted document from chrome, even using wrappedjsobject. see security check basics for more about principals. three-argument document.open() there is a lesser-known and little-used three-argument version of document.open() , which is an alias of
window.open() (see its page for full details). this call, for example opens github.com in a new
window, with its opener set to null: document.open('https://www.github.com','', 'noopener=true') two-argument document.open() browsers used to support a two-argument document.open(), with the following signature: document.open(type, replace) where type specified the mime type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entr...
Document - Web APIs
of this parentnode and is an element, or null if there is none. extensions for htmldocument the document interface for html documents inherits from the htmldocument interface or, since html5, is extended for such documents. document.cookie returns a semicolon-separated list of the cookies for that document or sets a single cookie. document.defaultviewread only returns a reference to the
window object. document.designmode gets/sets the ability to edit the whole document. document.dirread only gets/sets directionality (rtl/ltr) of the document. document.domain gets/sets the domain of the current document. document.lastmodifiedread only returns the date on which the document was last modified. document.locationread only returns the uri of the current document. document.ready...
... an external part of the dtd affects the document's content), else false. document.xmlversion obsolete since gecko 10 returns the version number as specified in the xml declaration or "1.0" if the declaration is absent. methods this interface also inherits from the node and eventtarget interfaces. document.adoptnode() adopt node from an external document. document.captureevents() see
window.captureevents. document.caretrangefrompoint() gets a range object for the document fragment under the specified coordinates. document.createattribute() creates a new attr object and returns it. document.createattributens() creates a new attribute node in a given namespace and returns it. document.createcdatasection() creates a new cdata node and returns it. document.createcomment() cr...
... resolves with a boolean value indicating whether the document has access to its first-party storage. document.importnode() returns a clone of a node from an external document. document.normalizedocument() replaces entities, normalizes text nodes, etc. document.releasecapture() releases the current mouse capture if it's on an element in this document. document.releaseevents() see
window.releaseevents(). document.requeststorageaccess() returns a promise that resolves if the access to first-party storage was granted, and rejects if access was denied. document.routeevent() obsolete since gecko 24 see
window.routeevent(). document.mozsetimageelement() allows you to change the element being used as the background image for a specified element id. the document interface is...
Event.eventPhase - Web APIs
isted in event phase constants. constants event phase constants these values describe which phase the event flow is currently being evaluated. constant value description event.none 0 no event is being processed at this time. event.capturing_phase 1 the event is being propagated through the target's ancestor objects. this process starts with the
window, then document, then the htmlhtmlelement, and so on through the elements until the target's parent is reached. event listeners registered for capture mode when eventtarget.addeventlistener() was called are triggered during this phase. event.at_target 2 the event has arrived at the event's target. event listeners registered for this phase are called at this time. if event.bubbles is...
...rget 2 the event has arrived at the event's target. event listeners registered for this phase are called at this time. if event.bubbles is false, processing the event is finished after this phase is complete. event.bubbling_phase 3 the event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing
window. this is known as bubbling, and occurs only if event.bubbles is true. event listeners registered for this phase are triggered during this process. for more details, see section 3.1, event dispatch and dom event flow, of the dom level 3 events specification. example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click nex...
... id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false;
window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { ...
FileSystemEntry - Web APIs
r example, if your app is in http://www.html5rocks.com, open filesystem:http://www.html5rocks.com/temporary/ in a tab. chrome shows a read-only list of all the files and folders stored the origin of your app. example to see an example of how tourl() works, see the method description. the snippet below shows you how you can remove a file by name. // taking care of the browser-specific prefixes. ...
... http://www.html5rocks.com, open filesystem:http://www.html5rocks.com/temporary/ in a tab. chrome shows a read-only list of all the files and folders stored the origin of your app. example to see an example of how tourl() works, see the method description. the snippet below shows you how you can remove a file by name. // taking care of the browser-specific prefixes. ...
...open filesystem:http://www.html5rocks.com/temporary/ in a tab. chrome shows a read-only list of all the files and folders stored the origin of your app. example to see an example of how tourl() works, see the method description. the snippet below shows you how you can remove a file by name. // taking care of the browser-specific prefixes.
window.requestfilesystem =
window.requestfilesystem ||
window.webkitrequestfilesystem; ... // 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. filesystem ...
Guide to the Fullscreen API - Web APIs
een mode, but if the document has a non null fullscreenelement, you know you're in fullscreen mode. when a fullscreen request fails it's not guaranteed that you'll be able to switch into fullscreen mode. for example, <iframe> elements have the allowfullscreen attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. in addition, certain kinds of content, such as
windowed plug-ins, cannot be presented in fullscreen mode. attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. instead, the element which requested fullscreen will receive a mozfullscreenerror event. when a fullscreen request fails, firefox will log an error message to the web console explaining why the request failed. in ...
...e sure to let your users know that they can press the esc key (or f11) to exit fullscreen mode. in addition, navigating to another page, changing tabs, or switching to another application (using, for example, alt-tab) while in fullscreen mode exits fullscreen mode as well. example in this example, a video is presented in a web page. pressing the return or enter key lets the user toggle between
windowed and fullscreen presentation of the video. view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key. document.addeventlistener("keydown", function(e) { if (e.keycode == 13) { togglefullscreen(); } }, false); toggling fullscreen mode this code is called when the user hits the enter key, as seen ab...
...above. function togglefullscreen() { if (!document.fullscreenelement) { document.documentelement.requestfullscreen(); } else { if (document.exitfullscreen) { document.exitfullscreen(); } } } this starts by looking at the value of the fullscreenelement attribute on the document (checking it prefixed with both moz, ms, or webkit). if it's null, the document is currently in
windowed mode, so we need to switch to fullscreen mode. switching to fullscreen mode is done by calling element.requestfullscreen(). if fullscreen mode is already active (fullscreenelement is non-null), we call document.exitfullscreen(). prefixing note: currently, only firefox 64 and chrome 71 supports this unprefixed. for the moment not all browsers are implementing the unprefixed version of the ...
GlobalEventHandlers.onload - Web APIs
the onload property of the globaleventhandlers mixin is an eventhandler that processes load events on a
window, xmlhttprequest, <img> element, etc. the load event fires when a given resource has loaded. syntax target.onload = functionref; value functionref is the handler function to be called when the
window’s load event fires. ...
... the onload property of the globaleventhandlers mixin is an eventhandler that processes load events on a
window, xmlhttprequest, <img> element, etc. the load event fires when a given resource has loaded. syntax target.onload = functionref; value functionref is the handler function to be called when the
window’s load event fires. ...
...esource has loaded. syntax target.onload = functionref; value functionref is the handler function to be called when the
window’s load event fires. examples
window.onload = function() { init(); dosomethingelse(); }; <!doctype html> <html> <head> <title>onload test</title> // es5 <script> function load() { console.log("load event detected!"); }
window.onload = load; </script> // es2015 <script> const load = () => { console.log("load event detected!"); }
window.onload = load; </script> </head> <body> <p>the load event fires when the document has finished loading!</p> </body> </html> notes the load event fires at the end of the document loading process. at this point, all of the objects in t...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
ving and dispatching user and other events, rendering and painting web content, and so forth. the event loop, then, drives everything that happens in the browser as it pertains to the interaction with the user, but more importantly for our purposes here, it is responsible for the scheduling and execution of every piece of code that runs within its thread. there are three types of event loop:
window event loop the
window event loop is the one that drives all of the
windows sharing a similar origin (though there are further limits to this as described elsewhere in this article xxxx ????). worker event loop a worker event loop is one which drives a worker; this includes all forms of workers, including basic web workers, shared workers, and service workers. workers are kept in one or more ag...
...r more agents that are separate from the "main" code; the browser may use a single event loop for all of the workers of a given type or may use multiple event loops to handle them. worklet event loop a worklet event loop is the event loop used to drive agents which run the code for the workelets for a given agent. this includes worklets of type worklet, audioworklet, and paintworklet. several
windows loaded from the same origin may be running on the same event loop, each queueing tasks onto the event loop so that their tasks take turns with the processor, one after another. keep in mind that web parlance, the word "
window" actually means "browser-level container that web content runs within," including an actual
window, a tab, or a frame. there are specific circumstances in which this shari...
...gin may be running on the same event loop, each queueing tasks onto the event loop so that their tasks take turns with the processor, one after another. keep in mind that web parlance, the word "
window" actually means "browser-level container that web content runs within," including an actual
window, a tab, or a frame. 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. if a
window is actually a container within an <iframe>, it likely shares an event loop with the
window that contains it. the
windows happen to share the same process in a multi-process web browser implementation. the specifics may vary from browser to browser, dep...
IDBEnvironment - Web APIs
note: this feature is available in web workers. properties idbenvironment.indexeddb read only provides a mechanism for applications to asynchronously access capabilities of indexed databases; contains an idbfactory object. ...
... note: this feature is available in web workers. properties idbenvironment.indexeddb read only provides a mechanism for applications to asynchronously access capabilities of indexed databases; contains an idbfactory object. ...
...perties idbenvironment.indexeddb read only provides a mechanism for applications to asynchronously access capabilities of indexed databases; contains an idbfactory object. 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. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid ...
Timing element visibility with the Intersection Observer API - Web APIs
bbed to another page). adobserver will hold our intersectionobserver used to track the intersection between the ads and the <main> element's bounds. refreshintervalid used to store the interval id returned by setinterval(). this interval will be used to trigger our periodic refreshes of the ads' content. ...
...then we set up an event listener for the visibilitychange event. this event is sent when the document becomes hidden or visible, such as when the user switches tabs in their browser. the intersection observer api doesn't take this into account w...
...ers every second and schedule a redraw to update the timers we'll be drawing within each ad. ...
KeyboardEvent.code - Web APIs
d, but the same code value also represents the ' key on dvorak keyboards and the a key on azerty keyboards. that makes it impossible to use the value of code to determine what the name of the key is to users if they're not using an anticipated keyboard layout. to determine what character corresponds with the key event, use the keyboardevent.key property instead. ...
...ty instead. code values the code values for
windows, linux, and macos are list on the keyboardevent: code values page. examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript
window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys. handle k...
... = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle. ...
Location - Web APIs
the location interface represents the location (url) of the object it is linked to. changes done on it are reflected on the object it relates to. both the document and
window interface have such a linked location, accessible via document.location and
window.location respectively. anatomy of location html <span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; fon...
...lack; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation();
window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation();
window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor bro...
...user won't be able to use the back button to navigate to it. location.tostring() returns a usvstring containing the whole url. it is a synonym for htmlhyperlinkelementutils.href, though it can't be used to modify the value. ...
MediaDevices.getDisplayMedia() - Web APIs
the resulting stream can then be recorded using the mediastream recording api or transmitted as part of a webrtc session. see using the screen capture api for more details and an example. syntax var promise = navigator.mediadevices.getdisplaymedia(constraints); parameters constraints optional an optional mediastreamconstraints object specifying requirements for the returned mediastream. ...
...the document in whose context getdisplaymedia() was called is not fully active; for example, perhaps it is not the frontmost tab. notallowederror permission to access a screen area was denied by the user, or the current browsing instance is not permitted access to screen sharing. notfounderror no sources of screen video are available for capture. notreadableerror the user selected a screen,
window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source. overconstrainederror after creating the stream, applying the specified constraints fails because no compatible stream could be generated. typeerror the specified constraints include constraints which are not permitted when calling getdisplaym...
...order to generate output that matches the constraints. the go-ahead permission to use getdisplaymedia() cannot be persisted for reuse. the user must be prompted for permission every time. the call to getdisplaymedia() must be made from code which is running in response to a user action, such as in an event handler. browsers are encouraged to provide a warning to users about sharing displays or
windows that contain browsers, and to keep a close eye on what other content might be getting captured and shown to other users. example in the example below, a startcapture() method is created which initiates screen capture given a set of options specified by the displaymediaoptions parameter. the options are specified in the form of a mediastreamconstraints object which specifies the preferred stre...
MediaDevices - Web APIs
ortedconstraints() returns an object conforming to mediatracksupportedconstraints indicating which constrainable properties are supported on the mediastreamtrack interface. see capabilities and constraints in media capture and streams api (media stream) to learn more about constraints and how to use them. getdisplaymedia() prompts the user to select a display or portion of a display (such as a
window) to capture as a mediastream for sharing or recording purposes. returns a promise that resolves to a mediastream. getusermedia() with the user's permission through a prompt, turns on a camera and/or a microphone on the system and provides a mediastream containing a video track and/or an audio track with the input. example 'use strict'; // put variables in global scope to make them available...
...resolves to a mediastream. getusermedia() with the user's permission through a prompt, turns on a camera and/or a microphone on the system and provides a mediastream containing a video track and/or an audio track with the input. example 'use strict'; // put variables in global scope to make them available to the browser console. ...
...false, video: true }; var errorelement = document.queryselector('#errormsg'); navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var videotracks = stream.getvideotracks(); console.log('got stream with constraints:', constraints); console.log('using video device: ' + videotracks[0].label); stream.onremovetrack = function() { console.log('stream ended'); };
window.stream = stream; // make variable available to browser console video.srcobject = stream; }) .catch(function(error) { if (error.name === 'constraintnotsatisfiederror') { errormsg('the resolution ' + constraints.video.width.exact + 'x' + constraints.video.height.exact + ' px is not supported by your device.'); } else if (error.name === 'permissiondeniederror') { errormsg('perm...
MediaTrackSettings.logicalSurface - Web APIs
the mediatracksettings dictionary's logicalsurface property indicates whether or not the display area being captured is a logical surface. logical surfaces are those which are not necessarily entirely onscreen, or may even be off-screen, such as
windows' backing buffers (where only part of the buffer is visible without scrolling the containing
window) and offscreen rendering contexts. ...
... a visible display surface (that is, a surface for which logicalsurface returns false) is the portion of a logical display surface which is currently visible onscreen. ...
...s. syntax islogicalsurface = mediatracksettings.logicalsurface; value a boolean value which is true if the video track in the stream of captured video is taken from a logical display surface. the most common scenario in which a display surface may be a logical one is if the selected surface contains the entire content area of a
window which is too large to display onscreen at once. since the
window that contains the surface has to be scrolled to show the rest of the contents, the surface is a logical one. a visible display surface (that is, a surface for which logicalsurface returns false) is the portion of a logical display surface which is currently visible onscreen. for example, a user agent may choose to allow the user to choose whether to share the entire document (a browser with log...
MessageChannel.port1 - Web APIs
postmessage along with a message. the handlemessage handler then responds to a message being sent back from the <iframe> (using messageport.onmessage), putting it into a paragraph. the handlemessage method is associated to the port1 to listen when the message arrives. ...
...th a message. the handlemessage handler then responds to a message being sent back from the <iframe> (using messageport.onmessage), putting it into a paragraph. the handlemessage method is associated to the port1 to listen when the message arrives. ...
...frame> (using messageport.onmessage), putting it into a paragraph. the handlemessage method is associated to the port1 to listen when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var other
window = ifr.content
window; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { other
window.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } specifications specification status comment html living standardthe definition of 'port1' in that specification. living standard ...
MessagePort: message event - Web APIs
that channel. ...
...this is only needed when using the addeventlistener() method: if the receiver uses onmes...
... const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port. ...
MessagePort: messageerror event - Web APIs
ialized. ...
...trol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages and message errors on it using code like this:
window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered t...
....textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port. ...
Using Navigation Timing - Web APIs
ing api lets you gather information that only the browser can provide at a level of accuracy much improved over other techniques. it also offers the advantage of being able to provide timing information as perceived by the user rather than data that has no correlation to what the user experiences. ...
...fers the advantage of being able to provide timing information as perceived by the user rather than data that has no correlation to what the user experiences. collecting timing information using the api is as simple as obtaining the performance object using
window.performance and looking up what you need within the object returned. ...
...d or a reload? was this a navigation or a move forward or backward through history? how many (if any) redirects were required in order to complete the navigation? this information is provided by the performance.navigation property, which returns a performancenavigation object that includes the needed information. let's add this information to the example above. ...
Navigation Timing API - Web APIs
red here. concepts and usage you can use the navigation timing api to gather performance data on the client side, which you can then transmit to a server using xmlhttprequest or other techniques. this api lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the
window's load handler, and so forth. interfaces performance the
window.performance property returns a performance object. while this interface is defined by the high resolution time api, the navigation timing api adds two properties: timing and navigation, of the types below. performancenavigationtiming provides methods and properties to store and retrieve metrics regarding the browser's document...
... to return the value of navigation, which contains information explaining the context of the load operation described by this performance instance. ...
... gather performance data on the client side to be sent to a server via xhr as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time,
window.onload total time, etc. examples calculate the total page load time to compute the total amount of time it took to load the page, you can use the following code: const perfdata =
window.performance.timing; const pageloadtime = perfdata.loadeventend - perfdata.navigationstart; this subtracts the time at which navigation began (navigationstart) from the time at which the load event handler returns (loadeventend). this gives you the perceived page load time. calculate request response time you can calculate the time elapsed between the beginning of a request and the completion ...
Navigator.msLaunchUri() - Web APIs
ecuted if the protocol handler is present. nohandlercallbackoptional a function matching mslaunchuricallback to be executed if the protocol handler is not present. return value undefined. usage notes if a default protocol handler is available on the system that matches the uri, the successcallback is invoked, otherwise, the nohandlercallback is called. to help protect a user's privacy,
windows displays a prompt for the user to allow the service or app to be launched. 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. the mslaunchuri() method does not support http, secure hypertext transfer protocol (https), file transfer protocol (ftp), file, res, javascript, or microsoft v...
...omatically open the app or service without a user intervention. the mslaunchuri() method does not support http, secure hypertext transfer protocol (https), file transfer protocol (ftp), file, res, javascript, or microsoft visual basic scripting edition (vbscript) protocols. ...
...llback is provided,
windows internet explorer will invoke the nohandlercallback. this enables developers to provide a custom fallback experience for the user. if a handler doesn't exist, and the developer doesn't provide a nohandlercallback, then internet explorer displays a dialog that asks the user if they want to allow the action. if the user allows it, the user is then prompted to look in the
windows store for an app to handle the protocol. if multiple programs are registered on the system for the given protocol and no default has been chosen,
windows prompts the user to choose one. see also mslaunchuricallback microsoft api extensions ...
Navigator.xr - Web APIs
the read-only xr property provided by the navigator or workernavigator interface returns an xr object which can be used to access the webxr device api. syntax const xr = navigator.xr value the xr object used to interface with the webxr device api in the current context. this can be used to present augmented and/or virtual reality imagery to the user. ...
...avigator or workernavigator interface returns an xr object which can be used to access the webxr device api. syntax const xr = navigator.xr value the xr object used to interface with the webxr device api in the current context. this can be used to present augmented and/or virtual reality imagery to the user. usage notes each
window has its own instance of navigator, which can be accessed as
window.navigator or simply as navigator. ...
...notes each
window has its own instance of navigator, which can be accessed as
window.navigator or simply as navigator. at the same time, a new xr instance is also created and attached to the navigator instance as navigator.xr. if the xr property exists and is non-null, you can use it to access the webxr device api. to determine if webxr is available, you can do something like this: if ("xr" in
window.navigator) { /* webxr can be used! */ } else { /* webxr isn't available */ } specifications specification status comment webxr device apithe definition of 'navigator.xr' in that specification. working draft initial definition. ...
NotificationEvent.notification - Web APIs
ck'); // data can be attached to the notification so that you // can process it in the notificationclick handler. ...
... living standard living standard. ...
... living standard living standard. ...
Using the Performance API - Web APIs
return (endtime - starttime); } serializing the performance object json serialization of the performance object is done via the tojson() method. in the following example, json serialization for the performance, performance.timing and performance.navigation objects is printed in the object element. ...
...rmance object json serialization of the performance object is done via the tojson() method. in the following example, json serialization for the performance, performance.timing and performance.navigation objects is printed in the object element. ...
...ple, json serialization for the performance, performance.timing and performance.navigation objects is printed in the object element. ...
PopStateEvent - Web APIs
if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object. note: just calling history.pushstate() or history.replacestate() won't trigger a popstate event. the popstate event is only triggered by doing a browser action such as a clicking on the back button (or calling history.back() in javascript). ...
... back button (or calling history.back() in javascript). and the event is only triggered when the user navigates between two history entries for the same document. note: browsers used to handle the popstate event differently on page load, but now they behave the same. firefox never emitted a popstate event on page load. chrome did until version 34, while safari did until version 10.0. ...
...te event differently on page load, but now they behave the same. firefox never emitted a popstate event on page load. chrome did until version 34, while safari did until version 10.0. syntax
window.onpopstate = funcref; funcref is a handler function. ...
Resize Observer API - Web APIs
which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes. concepts and usage there are a whole raft of use cases for responsive design techniques (and others besides) that respond to changes in an element's size, but previously their implementations have often been hacky and/or brittle. ...
..., media queries /
window.matchmedia are great for updating layouts at specific points when the viewport changes sizes, but what if you want to change layout in response to a specific element's size changing, which isn't the outer container? ...
... layout in response to a specific element's size changing, which isn't the outer container? to achieve this, a limited solution would be to listen to changes to a suitable event that hints at the element you are interested in changing size (e.g. the
window resize event), then figure out what the new dimensions or other features of the element after a resize using element.getboundingclientrect or
window.getcomputedstyle, for example. such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser
window size is not changed. the resize observer api provides a solution to exactly these kinds of problems, and more besides, allowing you to easily observe and respond...
SVGSVGElement - Web APIs
svgsvgelement.x read only an svganimatedlength corresponding to the x attribute of the given <svg> element. svgsvgelement.y read only an svganimatedlength corresponding to the y attribute of the given <svg> element. svgsvgelement.width read only an svganimatedlength corresponding to the width attribute of the given <svg> element. svgsvgelement.height read only an svgan...
...renttranslate read only an svgpoint representing the translation factor that takes into account user "magnification" corresponding to an outermost <svg> element. the behavior is undefined for <svg> elements that are not at the outermost level. methods this interface also inherits methods from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and
windoweventhandlers. svgsvgelement.suspendredraw() takes a time-out value which indicates that redraw shall not occur until: the corresponding unsuspendredraw() call has been made, an unsuspendredrawall() call has been made, or its timer has timed out. in environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. calls to suspendredraw() and unsusp...
...tus comment scalable vector graphics (svg) 2the definition of 'svgsvgelement' in that specification. candidate recommendation replaced the inheritance from svgelement by svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svglocatable, documentevent, viewcss, and documentcss and added implemented interface
windoweventhandlers. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgsvgelement' in that specification. recommendation initial definition ...
ScrollToOptions.left - Web APIs
the left property of the scrolltooptions dictionary specifies the number of pixels along the x axis to scroll the
window or element. syntax left: double value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
...it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
... working draft ...
ScrollToOptions.top - Web APIs
the top property of the scrolltooptions dictionary specifies the number of pixels along the y axis to scroll the
window or element. syntax top: double value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
...it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
... working draft ...
ScrollToOptions - Web APIs
the scrolltooptions dictionary of the cssom view spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth. a scrolltooptions dictionary can be provided as a parameter for the following methods:
window.scroll()
window.scrollby()
window.scrollto() element.scroll() element.scrollby() element.scrollto() properties scrolltooptions.top specifies the number of pixels along the y axis to scroll the
window or element. scrolltooptions.left specifies the number of pixels along the x axis to scroll the
window or element. scrolltooptions.behavior specifies whether the scrolling should animate smoothly, or happen instantly in a single jump. this is actually defined on the scrolloptions dictionary, which is implemented by scrollt...
...it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
... working draft ...
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
tor will throw an error. syntax serviceworkerglobalscope.onnotificationclick = function(notificationevent) { ... ...
... living standard initial definition. this property is specified on the notifications_api even though it's part of serviceworkerglobalscope. ...
...se(); // 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.open
window) return clients.open
window('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificationclick' in that specification. living standard initial definition. this property is specified on the notifications_api even though it's part of serviceworkerglobalscope. ...
SourceBuffer - Web APIs
this is a timestamp range that can be used to filter what media data is appended to the sourcebuffer. coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out. sourcebuffer.audio...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.append
windowend controls the timestamp for the end of the append
window. sourcebuffer.append
windowstart controls the timestamp for the start of the append
window. this is a timestamp range that can be used to filter what media data is appended to the sourcebuffer. coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out. sourcebuffer.audiotracks read only a list of the audio tracks currently cont...
...s it can. ...
WebGLRenderingContext.depthRange() - Web APIs
clamped to the range 0 to 1. the default value is 1. return value none. ...
...clamped to the range 0 to 1. the default value is 1. return value none. ...
...clamped to the range 0 to 1. the default value is 1. return value none. ...
WebGLRenderingContext - Web APIs
her or not front- and/or back-facing polygons can be culled. webglrenderingcontext.depthfunc() specifies a function that compares incoming pixel depth to the current depth buffer value. webglrenderingcontext.depthmask() sets whether writing into the depth buffer is enabled or disabled. webglrenderingcontext.depthrange() specifies the depth range mapping from normalized device coordinates to
window or viewport coordinates. webglrenderingcontext.disable() disables specific webgl capabilities for this context. webglrenderingcontext.enable() enables specific webgl capabilities for this context. webglrenderingcontext.frontface() specifies whether polygons are front- or back-facing by setting a winding orientation. webglrenderingcontext.getparameter() returns a value for the passed param...
...ent size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser
window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browse...
...he wrong shape, size, and position. ...
Canvas size and WebGL - Web APIs
effect of canvas size on rendering with webgl with scissor() and clear() we can demonstrate how the webgl drawing buffer is affected by the size of the canvas. the size of the first canvas is set to the styled element size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. ...
...ent size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser
window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your brow...
... wrong shape, size, and position. ...
Advanced techniques: Creating and sequencing audio - Web APIs
sound good, it was created to provide demonstration code and represents a very simplified version of such an instrument. the sounds are based on a dial-up modem. if you are unaware of how one sounds you can listen to one here. creating an audio context as you should be used to by now, each web audio api app starts with an audio context: // for cross browser compatibility const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); the "sweep" — oscillators, periodic waves, and envelopes for what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound. the oscillatornode comes with basic waveforms out of the box — sine, square, triangle or sawtooth. however, ins...
...pare it to the time for the next note; when the two match it will call the previous two functions. function scheduler() { // while there are notes that will need to play before the next interval, schedule them and advance the pointer. while (nextnotetime < audioctx.currenttime + scheduleaheadtime ) { schedulenote(currentnote, nextnotetime); nextnote(); } timerid =
window.settimeout(scheduler, lookahead); } we also need a draw function to update the ui, so we can see when the beat progresses. let lastnotedrawn = 3; function draw() { let drawnote = lastnotedrawn; let currenttime = audioctx.currenttime; while (notesinqueue.length && notesinqueue[0].time < currenttime) { drawnote = notesinqueue[0].note; notesinqueue.splice(0,1); // r...
... ...
Web Storage API - Web APIs
e server. storage limit is larger than a cookie (at most 5mb). localstorage does the same thing, but persists even when the browser is closed and reopened. stores data with no expiration date, and gets cleared only through javascript, or clearing the browser cache / locally stored data. storage limit is the maximum amongst the three. these mechanisms are available via the
window.sessionstorage and
window.localstorage properties (to be more precise, in supporting browsers the
window object implements the
windowlocalstorage and
windowsessionstorage objects, which the localstorage and sessionstorage properties hang off) — invoking one of these will create an instance of the storage object, through which data items can be set, retrieved and removed. a different storage obj...
...has disabled third-party cookies (firefox implements this behaviour from version 43 onwards.) note: web storage is not the same as mozstorage (mozilla's xpcom interfaces to sqlite) or the session store api (an xpcom storage utility for use by extensions). ...
...x implements this behaviour from version 43 onwards.) note: web storage is not the same as mozstorage (mozilla's xpcom interfaces to sqlite) or the session store api (an xpcom storage utility for use by extensions). web storage interfaces storage allows you to set, retrieve and remove data for a specific domain and storage type (session or local.)
window the web storage api extends the
window object with two new properties —
window.sessionstorage and
window.localstorage — which provide access to the current domain's session and local storage objects respectively, and a
window.onstorage event handler that fires when a storage area changes (e.g. a new item is stored.) storageevent the storage event is fired on a document's
window object when a storage area changes. examples to ...
Using XMLHttpRequest - Web APIs
dertime () { console.log(this.getresponseheader("last-modified")); /* a valid gmtstring date or null */ } var oreq = new xmlhttprequest(); oreq.open("head" /* use head if you only need the headers! ...
...need the headers! */, "yourpage.html"); oreq.onload = getheadertime; oreq.send(); do something when last modified date changes let's create two functions: function getheadertime () { var nlastvisit = parsefloat(
window.localstorage.getitem('lm_' + this.filepath)); var nlastmodif = date.parse(this.getresponseheader("last-modified")); if (isnan(nlastvisit) || nlastmodif > nlastvisit) {
window.localstorage.setitem('lm_' + this.filepath, date.now()); isfinite(nlastvisit) && this.callback(nlastmodif, nlastvisit); } } function ifhaschanged(surl, fcallback) { var oreq = new xmlhttprequest(); oreq.open("head" /* use head - we only need the headers! */, surl); oreq.callback = fcallback; oreq.filepath = surl; oreq.onload = getheadertime; oreq.send(); } and to test: /* let...
...ith an xmlhttprequest receiving status=0 and statustext=null, this means the request was not allowed to be performed. it was unsent. a likely cause for this is when the xmlhttprequest origin (at the creation of the xmlhttprequest) has changed when the xmlhttprequest is subsequently open(). this case can happen, for example, when one has an xmlhttprequest that gets fired on an onunload event for a
window, the expected xmlhttprequest is created when the
window to be closed is still there, and finally sending the request (in otherwords, open()) when this
window has lost its focus and another
window gains focus. the most effective way to avoid this problem is to set a listener on the new
window's activate event which is set once the terminated
window has its unload event triggered. workers setting...
msthumbnailclick - Web APIs
ents that are launched from a pinned site shortcut. parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
...tmleventobj pointer to an ihtmleventobj interface for the current event. ...
...our app pinned to the taskbar
window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon
window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay =
window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar
window.external.mssitemodeshowthumbbar(); // call a javascript function when the button is pressed function onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...
Web applications and ARIA FAQ - Accessibility
ome of them include: assistive technology minimum version for basic aria minimum version for live region and alert support nvda 2010.2 (nvda is always a free upgrade) 2011.1 for firefox, no live region support in ie as of 2011.2. orca ? (tbd) ? (tbd) voiceover osx 10.5, ios 4 os x 10.7 ios 5 jaws 8 10
window-eyes 7 no live region support currently zoomtext ? no live region support currently note: early versions of these tools often had partial or buggy aria implementations. for notes on jaws support for aria as of jaws 10, see this article from the paciello group: jaws support for aria. javascript toolkits aria roles, states, and properties have been added to a number o...
...ve technology api as if they were native widgets. as a result, the user potentially gets a more consistent user experience, where dynamic javascript-driven widgets on the web are comparable to their equivalents on the desktop. ...
... there's more to accessibility than just supporting screen readers. ...
Accessibility: What users can do to browse more safely - Accessibility
ve (desktop) chrome 74 added support for reduced-motion-query, it has even added support to detect whether the user has requested a reduced motion experience. the user would access this through an accessibility interface, as seen below. css transition events are now supported. ...
...gif scrubber gif scrubber is a chrome extension that allows you to control gifs like a video player. there is a github repository for it at https://github.com/0ui/gif-scrubber beeline reader beeline reader has a browser extension that allows you to set up for grayscale and dyslexi font, among other things take advantage operating system accessibility features most operating systems such as
windows 10, have accessibility options that are surprisingly powerful. usually they are quite easy to find by simply typing ( or saying) in the word, "accessibility" in the search finder of the operating system. turn off animations in the operating system in the
windows10 operating system, the user has an ability to turn off animations. this will not work on animated gifs; the source of the animation ...
...y users on the benefits of using grayscale may be found in the discussion thread, "what is the “grayscale” setting for in accessibility options?". of particular interest is a user who has photosensitive epilepsy, and uses it when feeling "seizure-y". most operating systems have a way to let the user make an adjustment on the workstation. in the screenshot below, you can see an example of
windows 10 accessibility settings allowing for color filters to be selected. grayscale is enabled when the color filters button is toggled "on" see also accessibilty accessibility learning path web accessibility for seizures and physical reactions color blindness discussion: "what is the “grayscale” setting for in accessibility options?" contributors many, many thanks to eric eggert fro...
Coordinate systems - CSS: Cascading Style Sheets
in the top-left corner of the viewport or browsing context in which the event occurred. this is the entire viewing area in which the document is presented. scrolling is not a factor. on a desktop computer, for example, the mouseevent.clientx and mouseevent.clienty properties indicate the position of the mouse cursor at the moment the event occurred, relative to the top-left corner of the browser
window. the top-left corner of the
window is always (0, 0), regardless of the content of the document or any scrolling that may have been done. in other words, scrolling the document will change the client coordinates of a given position within the document. page the "page" coordinate system gives the position of a pixel relative to the top-left corner of the entire document in which the pixel is loca...
...he mouse at the time the event was generated, given relative to the top-left corner of the document. screen finally, we come to the "screen" model. it's probably fairly obvious what this is: it's the coordinate system where the origin is located at the top-left corner of the user's entire screen space. this means that the position of a given point within a document will change if the containing
window is moved, for example, or if the user's screen geometry changes (by changing display resolution or by adding or removing monitors to their system). the mouseevent.screenx and mouseevent.screeny properties give the coordinates of a mouse event's position relative to the screen's origin. example let's take a look at an example. this simple example creates a set of nested boxes. whenever the mous...
... <p> page-relative: <span id="pagex">0</span>, <span id="pagey">0</span> </p> <p> screen-relative: <span id="screenx">0</span>, <span id="screeny">0</span> </p> </div> </div> </div> css the css is pretty much just for appearances here. the class "outer" is used for the containing box, which is intentionally too wide to show in the mdn
window, to allow you to scroll it horizontally. the "inner" box is the one that we track events in and in which we show the mouse coordinates. .outer { width: 1000px; height: 200px; background-color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-sel...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
econds to animate the box. note that because of this, the box doesn't start with any animation effects in place, so it won't be animating. javascript content next we'll look at the javascript that does the work. the meat of this technique is in the play() function, which is called when the user clicks on the "run" button. ...
...his, the box doesn't start with any animation effects in place, so it won't be animating. javascript content next we'll look at the javascript that does the work. the meat of this technique is in the play() function, which is called when the user clicks on the "run" button. function play() { document.queryselector(".box").classname = "box";
window.requestanimationframe(function(time) {
window.requestanimationframe(function(time) { document.queryselector(".box").classname = "box changing"; }); }); } this looks weird, doesn't it? that's because the only way to play an animation again is to remove the animation effect, let the document recompute styles so that it knows you've done that, then add the animation effect back to the element. to make that happen, we have to be cre...
... this has the effect of removing any other classes currently applied to the box, including the "changing" class that handles animation. in other words, we're removing the animation effect from the box. however, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change. to be sure that the styles are recalculated, we use
window.requestanimationframe(), specifying a callback. our callback gets executed just before the next repaint of the document. the problem for us is that because it's before the repaint, the style recomputation hasn't actually happened yet! so... our callback cleverly calls requestanimationframe() a second time! this time, the callback is run before the next repaint, which is after the style recomputa...
Consistent list indentation - CSS: Cascading Style Sheets
visually, the markers are outside the content area of the <ul>, but that's not the important part here. what's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. they're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>. this is why, in every browser except internet explorer for
windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside. if it's changed to inside, then the markers are brought inside the <li>'s content, as though they're an inline box placed at the very beginning of the <li>. indenting it twice so how will all this appear in a document? at the moment, we have a situation analogous to these style...
... they're an inline box placed at the very beginning of the <li>. indenting it twice so how will all this appear in a document? at the moment, we have a situation analogous to these styles: ul, li {margin-left: 0; padding-left: 0;} if we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser
window. in order to avoid this and get some indentation, there are really only three options available to browser implementors. give each <li> element a left margin. give the <ul> element a left margin. give the <ul> element some left padding. as it turns out, nobody seems to have used the first option. the second option was taken by internet explorer for
windows and macintosh, and opera. the th...
... to stick with pixel-based indentation. if you want to reset lists to have no indentation, then you still have to zero out both padding and margin: ul {margin-left: 0; padding-left: 0;} remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. if the parent is the body, there's a strong chance your bullets will be completely outside the browser
window, and thus will not be visible. conclusion in the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. they use different default styles, and that's where the problems creep in. by making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation. recom...
Testing media queries programmatically - CSS: Cascading Style Sheets
edia query programmatically, via the mediaquerylist interface and its methods and properties. once you've created a mediaquerylist object, you can check the result of the query or receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. ...
...esult of the query or receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. to do this, use the
window.matchmedia method. ...
...e aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. to do this, call the addlistener() method on the mediaquerylist object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from true to false): // create the query list. const mediaquerylist =
window.matchmedia("(orientation: portrait)"); // define a callback function for the event listener. function handleorientationchange(mql) { // ... } // run the orientation change handler once. handleorientationchange(mediaquerylist); // add the callback function as a listener to the query list. mediaquerylist.addlistener(handleorientationchange); this code creates the orientation-testing media qu...
Linear-gradient Generator - CSS: Cascading Style Sheets
return; for (var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.value); }; var init = function init() { var elem = document.queryselectorall('.ui-slider'); var size = elem.length; for (var i = 0; i < size; i++) new slider(elem[i]); }; return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe }; })();
window.addeventlistener("load", function() { lineargradienttool.init(); });
window.addeventlistener("load", function() { lineargradienttool.init(); }); var lineargradienttool = (function lineargradienttool() { 'use strict'; var radian = 180 / math.pi; var inv_radian = math.pi / 180; var units = {'%': 1, 'px' : 0}; /*========== dom methods ==========*/ function getelembyid(id) { return doc...
... ...
... ...
calc() - CSS: Cascading Style Sheets
chrome browser currently won’t accept some values returned by calc() when an integer is expected. this includes any division, even if it results in an integer. ie. z-index: calc(4 / 2); will not be accepted. examples positioning an object on screen with a margin calc() makes it easy to position an object with a set margin. ...
...teger is expected. this includes any division, even if it results in an integer. ie. z-index: calc(4 / 2); will not be accepted. examples positioning an object on screen with a margin calc() makes it easy to position an object with a set margin. ...
... to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin. let's look at some css: input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/6 of the available
window width. then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. then, the following html makes use of this css: <form> <div id="formbox"> <label>type something:</label> <input type="text"> </div> </form> nested calc() with css variables you can also use calc() with css variables. consid...
overscroll-behavior - CSS: Cascading Style Sheets
alueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat
window. ...
...e-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat
window. ...
...ypediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat
window. both of these areas scroll; normally if you scrolled the chat
window until you hit a scroll boundary, the underlying contacts
window would start to scroll too, which is not desirable. this can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat
window, like this: .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } we also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. chrome on android refreshe...
Audio and Video Delivery - Developer guides
media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for playback.
... play, pause and scrubbing. it's often important to remember keyboard controls for user convenience and accessibility. ...
...for more information, see creating your own custom audio player. other tips for audio/video stopping the download of media while stopping the playback of media is as easy as calling the element's pause() method, the browser keeps downloading the media until the media element is disposed of through garbage co...
Writing forward-compatible websites - Developer guides
bsites that do not break when new browser versions are released. this is especially important for intranets and other non-public websites; if we can't see your code, we can't see that it broke. it's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. javascript prefix all global variable access in onfoo attributes with “
window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the
window (where the global variables you have defined are). for example, if you have this markup: <div onclick="alert(ownerd...
...u can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it. if that happens, then suddenly your function stops being called. this has happened multiple times to various sites already during the evolution of html5. to avoid this, fully qualify global variable access using "
window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <div onclick="
window.localname()">clicking me should show an alert<div> don't concatenate scripts you don't control the "use strict;" directive in ecmascript, when used on the file level, applies to everything in the file. so appending a script that depends on non-strict-mode behavior ...
...ot breaking in the future. unfortunately, libraries are common transgressors of these guidelines. sniffing sniff for specific features if you plan to use some feature, use object-detection to sniff for that exact feature, if possible. as a simple example, don't assume that any browser in which "filter" in body.style tests true must be microsoft internet explorer and therefore e.g. will have a
window.event object available in event handlers. don't assume that browsers with support for a given dom feature must also have some other, especially nonstandard, dom feature. or, conversely, that they don't have support for some other feature (e.g., don't assume that a browser that supports onload on script elements will never support onreadystatechange on them). as browsers converge behavior, they bo...
<button>: The Button element - HTML: Hypertext Markup Language
ttribute of the button's form owner. this attribute is also available on <input type="image"> and <input type="submit"> elements. formtarget html5 if the button is a submit button, this attribute is a author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. ...
... _parent: load the response into the parent browsing context of the current one. if there is no parent, this option behaves the same way as _self. _top: load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). ...
...rast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os. the results for <input> of type="button" and type="submit" are the same. ...
<input type="image"> - HTML: Hypertext Markup Language
fore submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="submit"> and <button> elements. formtarget a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab,
window, or <iframe>. a value specified here overrides any target given by the target attribute on the <form> that owns this input. in addition to the actual names of tabs,
windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form. this will replace the current document with the received dat...
... _parent loads the response into the parent browsing context of the current one. if there is no parent context, this behaves the same as _self. _top loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. ...
...validate html5 a boolean attribute specifying that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the element's form owner. formtarget html5 a name or keyword indicating where to display the response that is received after submitting the form. this is a name of, or keyword for, a browsing context (for example, tab,
window, or inline frame). if this attribute is specified, it overrides the target attribute of the element's form owner. the following keywords have special meanings: _self: load the response into the same browsing context as the current one. this value is the default if the attribute is not specified. _blank: load the response into a new unnamed browsing context. _parent: load the response into...
<input type="submit"> - HTML: Hypertext Markup Language
efore submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="image"> and <button> elements. formtarget a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab,
window, or <iframe>. a value specified here overrides any target given by the target attribute on the <form> that owns this input. in addition to the actual names of tabs,
windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form. this will replace the current document with the received dat...
... _parent loads the response into the parent browsing context of the current one. if there is no parent context, this behaves the same as _self. _top loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. ...
...sskey for further details. here's the previous example with the s access key added: <form> <div> <label for="example">let's submit some text</label> <input id="example" type="text" name="text"> </div> <div> <input type="submit" value="send" accesskey="s"> </div> </form> for example, in firefox for mac, pressing control-option-s triggers the send button, while chrome on
windows uses alt+s. the problem with the above example is that the user will not know what the access key is! this is especially true since the modifiers are typically non-standard to avoid conflicts. when building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the ...
HTML documentation index - HTML: Hypertext Markup Language
dfn the html definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence. 91 <dialog>: the dialog element dialog, element, html, html interactive elements, reference, web, polyfill the html <dialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or sub
window. 92 <dir>: the directory element (obsolete) directory, element, html, html lists, obsolete, reference, web, dir, lists the obsolete html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. 93 <div>: the content division element content division, element, html, htm...
...210 <time> element, html, html text-level semantics, html5, html:flow content, html:palpable content, html:phrasing content, reference, web the html <time> element represents a specific period in time. 211 <title>: the document title element element, html, html document metadata, html:metadata content, page name, page title, reference, tab name, tab title, title, web,
window name,
window title the html title element (<title>) defines the document's title that is shown in a browser's title bar or a page's tab. 212 <tr>: the table row element element, html, html tabular data, reference, tables, web, tag, tr, tr tag the html <tr> element defines a row of cells in a table. the row's cells can then be established using a mix of <td> (data cell) ...
...cies, and store them in the document's module map for later evaluation. 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 t...
CSP: sandbox - HTTP
tent-security-policy: sandbox; content-security-policy: sandbox <value>; where <value> can optionally be one of the following values: allow-downloads-without-user-activation allows for downloads to occur without a gesture from the user. allow-forms allows the page to submit forms. if this keyword is not used, this operation is not allowed. ...
... without a gesture from the user. allow-forms allows the page to submit forms. if this keyword is not used, this operation is not allowed. allow-modals allows the page to open modal
windows. allow-orientation-lock allows the page to disable the ability to lock the screen orientation. allow-pointer-lock allows the page to use the pointer lock api. allow-popups allows popups (like from
window.open, target="_blank", showmodaldialog). if this keyword is not used, that functionality will silently fail. allow-popups-to-escape-sandbox allows a sandboxed document to open new
windows without forcing the sandboxing flags upon them. this will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page. allow-presentation ...
...e same restrictions upon a landing page. allow-presentation allows embedders to have control over whether an iframe can start a presentation session. allow-same-origin allows the content to be treated as being from its normal origin. if this keyword is not used, the embedded content is treated as being from a unique origin. allow-scripts allows the page to run scripts (but not create pop-up
windows). if this keyword is not used, this operation is not allowed. allow-storage-access-by-user-activation lets the resource request access to the parent's storage capabilities with the storage access api. allow-top-navigation allows the page to navigate (load) content to the top-level browsing context. if this keyword is not used, this operation is not allowed. allow-top-navigation-by-user-ac...
Cross-Origin-Opener-Policy - HTTP
-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. this allows you to have more control over references to a
window than rel=noopener, which only affects outgoing navigations. header type response header forbidden header name no syntax cross-origin-opener-policy: unsafe-none | same-origin-allow-pop...
... forbidden header name no syntax cross-origin-opener-policy: unsafe-none | same-origin-allow-popups | same-origin directives unsafe-none this is the default value. allows the document to be added to its opener's browsing context group unless the opener itself has a coop of same-origin or same-origin-allow-popups. same-origin-allow-popups retains references to newly opened
windows or tabs which either don't set coop or which opt out of isolation by setting a coop of unsafe-none. same-origin isolates the browsing context exclusively to same-origin documents. cross-origin documents are not loaded in the same browsing context. examples certain features depend on cross-origin isolation certain features like sharedarraybuffer objects or performance.now() with unthrottled...
...rottled timers are only available if your document has a coop header with the value same-origin value set. cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp see also the cross-origin-embedder-policy header which you'll need to set as well. to check if cross-origin isolation has been successful, you can test against the crossoriginisolated property available to
window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } specifications specification html living standardthe definition of 'cross-origin-opener-policy header' in that specification. ...
TypeError: can't access dead object - JavaScript
destroyed in the dom. ...
... specific to that document, and cleaned up when the document is unloaded, or stored as weak references. ...
...d up when the document is unloaded, or stored as weak references. examples checking if an object is dead components.utils offers a isdeadwrapper() method, which privileged code might use. ...
Arrow function expressions - JavaScript
the this in the lexically enclosing function: function person(){ this.age = 0; setinterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new person(); relation with strict mode given that this comes from the surrounding lexical context, strict mode rules with regard to this are ignored. var f = () => { 'use strict'; return this; }; f() ===
window; // or the global object all other strict mode rules apply normally. correction: start note: the previous statement seems false. strict mode should prevent creating global variables when assigning to an undeclared identifier in a function. this code sample using chrome 81 demonstrates that arrow functions allow the creation of global variables in such situations (both for a concise body and ...
...f(10); } foo(1); // 11 arrow functions used as methods as stated previously, arrow function expressions are best suited for non-method functions. ...
...) { console.log(this.i, this); } } obj.b(); // prints undefined,
window {...} (or the global object) obj.c(); // prints 10, object {...} arrow functions do not have their own this. another example involving object.defineproperty(): 'use strict'; var obj = { a: 10 }; object.defineproperty(obj, 'b', { get: () => { console.log(this.a, typeof this.a, this); // undefined 'undefined'
window {...} (or the global object) return this.a + 10; // represents global object '
window', therefore 'this.a' returns 'undefined' } }); use of the new operator arrow functions cannot be used as constructors and will throw an error when used with new. var foo = () => {}; var foo = new foo(); // typeerror: foo is not a constructor use of prototype property arrow functions do not have a prot...
Function.prototype.bind() - JavaScript
ogrammers is to extract a method from an object, then to later call that function and expect it to use the original object as its this (e.g., by using the method in callback-based code). without special care, however, the original object is usually lost. ...
...create a function with a preset first argument. const addthirtyseven = addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const result2 = addthirtyseven(5); // 37 + 5 = 42 const result3 = addthirtyseven(5, 10); // 37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within
window.settimeout(), the this keyword will be set to the
window (or global) object. when working with class methods that require this to refer to class instances, you may explicitly bind this to the callback function, in order to maintain the instance. function latebloomer() { this.petalcount = math.floor(math.random() * 12) + 1; } // declare bloom after a delay of 1 second latebloomer.prototype.blo...
...his keyword will be set to the
window (or global) object. when working with class methods that require this to refer to class instances, you may explicitly bind this to the callback function, in order to maintain the instance. ...
Promise - JavaScript
} else { console.error(`trouble with promisegetword(): ${reason}`); } }) .finally((info) => console.log("all done")); advanced example <button id="btn">make a promise!</button> <div id="log"></div> this small example shows the mechanism of a promise. the testpromise() method is called each time the <button> is clicked. it creates a promise that will be fulfilled, using
window.settimeout(), to the promise count (number starting from 1) every 1-3 seconds, at random. the promise() constructor is used to create the promise. the fulfillment of the promise is simply logged, via a fulfill callback set using p1.then(). a few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise. "use strict"; var promisecount = 0; fun...
... resolve(thispromisecount); }, math.random() * 2000 + 1000); }); // we define what to do when the promise is resolved with the then() call, // and what to do when the promise is rejected with the catch() call p1.then(function(val) { // log the fulfillment value log.insertadjacenthtml('beforeend', val + ') prom...
...(you need a browser that supports promise. ) by clicking the button several times in a sh...
display - Web app manifests
note: if the display member is not specified, it defaults to browser. ...
... url and launching it from a desktop icon. values the possible values are: display mode description fallback display mode fullscreen all of the available display area is used and no user agent chrome is shown. standalone standalone the application will look and feel like a standalone application. this can include the application having a different
window, its own icon in the application launcher, etc. in this mode, the user agent will exclude ui elements for controlling navigation, but can include other ui elements such as a status bar. minimal-ui minimal-ui the application will look and feel like a standalone application, but will have a minimal set of ui elements for controlling navigation. the elements will vary by browser. b...
...lude ui elements for controlling navigation, but can include other ui elements such as a status bar. minimal-ui minimal-ui the application will look and feel like a standalone application, but will have a minimal set of ui elements for controlling navigation. the elements will vary by browser. browser browser the application opens in a conventional browser tab or new
window, depending on the browser and platform. this is the default. (none) example "display": "standalone" specification specification status comment feedback web app manifestthe definition of 'display' in that specification. working draft initial definition. web app manifest working group drafts ...
Performance fundamentals - Web Performance
they "start up" faster (since they are already running) and have better upp. specific coding tips for application performance the following practical tips will help improve one or more of the application performance factors discussed above. use css animations and transitions instead of using some library’s animate() function, which probably currently uses many badly performing technologies (
window.settimeout() or top/left positioning, for example) use css animations. in many cases, you can actually use css transitions to get the job done. this works well because the browser is designed to optimize these effects and use the gpu to handle them smoothly with minimal impact on processor performance. another benefit is that you can define these effects in css along with the rest of your app's l...
...ay need to attach a translatez(0.1) transform if you wish to get hardware acceleration on your css animations, depending on platform. as noted above, this can improve performance, but can also have memory consumption issues. what you do in this regard is up to you — do some testing and find out what's best for your particular app. ...
...this waits until the browser is actually ready to start building the next frame of your animation, and won't bother if the hardware isn't going to actually draw anything. another benefit to this api is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). ...
The building blocks of responsive design - Progressive web apps (PWAs)
x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width: 40%; float: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left. this way they end up side-by-side, and their proportions remain the same as the browser
window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. border-box sizing the padding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;...
...with a media attribute: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> this says that the whole stylesheet will not be linked to the html unless the viewport width is 480px or less. moving on to the javascript, <script> elements don't accept media attributes, so i had to do this a different way. fortunately there is a javascript construct called
window.matchmedia(), which can conditionally run javascript constructs depending on whether a media query returns true or not. 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! } this causes nothing inside the brick.js file to be run unless the viewport width is 480px or less. problem ...
... might be to just lock the orientation of your app, to portrait or landscape. if you are working on an installed app, you can easily do this with the orientation manifest field. if you want a solution that works across general web apps, you could use the screen orientation api, and/or provide a message asking the user to rotate their screen if they are using the wrong orientation (for example, if
window.innerwidth is larger than
window.innerheight, assume the game is landscape mode and show a "please rotate" message.) viewport one last problem to mention for our example app is concerned with mobile browsers and media queries. if we viewed my example in a mobile browser in its current state, we wouldn't see our nice mobile layout. instead, we'd see the below image. i'm sure you'll agree that...
Compiling a New C/C++ Module to WebAssembly - WebAssembly
l look at, whereby you get emscripten to generate everything you need to run your code, as webassembly, in the browser. first we need an example to compile. take a copy of the following simple c example, and save it in a file called hello.c in a new directory on your local drive: #include <stdio.h> int main(int argc, char ** argv) { printf("hello world\n"); } now, using the terminal
window you used to enter the emscripten compiler environment, navigate to the same directory as your hello.c file, and run the following command: emcc hello.c -s wasm=1 -o hello.html the options we’ve passed in with the command are as follows: -s wasm=1 — specifies that we want wasm output. if we don’t specify this, emscripten will just output asm.js, as it does by default. -o hello.html...
...owing c code in a file called hello2.c, in a new directory: #include <stdio.h> int main(int argc, char ** argv) { printf("hello world\n"); } search for the file shell_minimal.html in your emsdk repo. copy it into a sub-directory called html_template inside your previous new directory. now navigate into your new directory (again, in your emscripten compiler environment terminal
window), and run the following command: emcc -o hello2.html hello2.c -o3 -s wasm=1 --shell-file html_template/shell_minimal.html the options we've passed are slightly different this time: we've specified -o hello2.html, meaning that the compiler will still output the javascript glue code and .html. we've also specified --shell-file html_template/shell_minimal.html — this provides the p...
...tting it so that it treats it as an external c function if you are using c++. now add html_template/shell_minimal.html into this new directory too, just for convenience (you'd obviously put this in a central place in your real dev environment). now let's run the compilation step again. from inside your latest directory (and while inside your emscripten compiler environment terminal
window), compile your c code with the following command. (note that we need to compile with no_exit_runtime, which is necessary as otherwise when main() exits the runtime would be shut down — necessary for proper c emulation, e.g., atexits are called — and it wouldn't be valid to call compiled code.) emcc -o hello3.html hello3.c -o3 -s wasm=1 --shell-file html_template/shell_minimal.html -s no_ex...
Reddit Example - Archive of obsolete content
to accomplish this the add-on needs to run a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target url. ...
...e("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. this is the panel.js content script that intercepts link clicks: $(
window).click(function (event) { var t = event.target; // don't intercept the click if it isn't on a link. if (t.nodename != "a") return; // don't intercept the click if it was on one of the links in the header // or next/previous footer, since those links should load in the panel itself. if ($(t).parents('#header').length || $(t).parents('.nextprev').length) return; // intercep...
Two Types of Scripts - Archive of obsolete content
if you need to access the dom of a particular page, you need to use a content script. so there are two distinct sorts of javascript scripts you might include in your add-on and they have access to different sets of apis. in the sdk documentation we call one sort "add-on code" and the other sort "content scripts". ...
...globals defined by version 1.0 of the commonjs module specification. you use require() to import functionality from another module, and exports to export functionality from your module. if require() is available, then so are the modules supplied in the sdk. ✔ ✘ the console global supplied by the sdk. ✔ ✔ globals defined by the html5 specification, such as
window, document, and localstorage. ✘ ✔ the self global, used for communicating between content scripts and add-on code. see the guide to communicating with content scripts for more details. ✘ ✔ ...
page-worker - Archive of obsolete content
contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. onmessage function use this to add a listener to the page worker's message event. ...
... any kind of jsonable value (object, array, string, etc.) can be used here. optional. events message if you listen to this event you can receive message events from content scripts associated with this page worker. when a content script posts a message using self.postmessage(), th...
content/symbiont - Archive of obsolete content
contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. allow object permissions for the content, with the following keys: scr...
... any kind of jsonable value (object, array, string, etc.) can be used here. optional. contenturl the url of the content loaded. allow permissions for the content, with a single boolean key called script which defaults to true and indicates whether or not to execute scripts in the...
content/worker - Archive of obsolete content
g the port or postmessage apis. the worker is similar to the web worker interface defined by the w3c. but unlike "web workers," these workers run in the same process as web content and browser chrome, so code within workers can block the ui. globals constructors worker(options) creates a content worker. parameters options : object required options: name type
window object the content
window to create javascript sandbox for communication with. optional options: name type contentscriptfile string,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. optional. contentscript strin...
...) method is called. ...
frame/utils - Archive of obsolete content
experimental provides helper functions for working with platform internals like frames and browsers. 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. ...
...leged 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. parameters document : nsidomdocument options : object optiona...
loader/sandbox - Archive of obsolete content
avascript sandboxes and execute scripts in them. usage create a sandbox to create a sandbox: const { sandbox, evaluate, load } = require("sdk/loader/sandbox"); let scope = sandbox('http://example.com'); the argument passed to the sandbox defines its privileges. the argument may be: a url string, in which case the sandbox will get the same privileges as a script loaded from that url a dom
window object, to inherit privileges from the
window being passed. omitted or null: then the sandbox will have chrome privileges giving it access to all the xpcom components. optionally the sandbox function can be passed a second argument (see sandbox documentation on mdn for details). evaluate code module provides evaluate function that lets you execute code in the given sandbox: evaluate(scope, ...
... cause `let` is not defined in js 1.5. load scripts this module provides a limited api for loading scripts from local urls. data: urls are supported. load(scope, 'resource://path/to/my/script.js'); load(scope, 'file:///path/to/script.js'); load(scope, 'data:,var a = 5;'); globals functions sandbox(source) make a new sandbox that inherits principals from source. parameters source : string|
window|null an object that determines the privileges that will be given to the sandbox. this argument can be: a uri string, giving the sandbox the same privileges as a script loaded from that url a dom
window object, giving the sandbox the same privileges as the dom
window null, to give the sandbox chrome privileges. returns sandbox : a sandbox in which you can evaluate and load javascript. ev...
Low-Level APIs - Archive of obsolete content
gories: fundamental utilities such as collection. many add-ons are likely to want to use modules from this category. building blocks for higher level modules, such as events and worker. you're more likely to use these if you are building your own modules that implement new apis, thus extending the sdk itself. privileged modules that expose powerful low-level capabilities such as
window/utils and net/xhr. you can use these modules in your add-on if you need to, but should be aware that the cost of privileged access is the need to take more elaborate security precautions. in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example,
windows or request). these modules are still in active development, and we expect to make incompati...
...user interface. util/array helper functions for working with arrays. util/collection a simple list-like class and utilities for using it. util/deprecate functions to deprecate code. util/list building blocks for composing lists. util/match-pattern test strings containing urls against simple patterns. util/object functions for working with objects. util/uuid generate or parse uuids.
window/utils functions for working with browser
windows. ...
Adding a Button to the Toolbar - Archive of obsolete content
= 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/"); } now run the add-on with jpm run. the button is added to the toolbar at the top of the browser
window: you can't set the initial location for the button, but the user can move it using the browser's customization feature. the id attribute is mandatory, and is used to remember the position of the button, so you should not change it in subsequent versions of the add-on. clicking the button loads https://www.mozilla.org/ into a new tab. specifying the icon the icon property may specify a single ...
...cally choose the best fit for the screen resolution and the place in the browser ui that hosts the button. read more about specifying multiple icons. the icon file must be packaged with your add-on: it may not refer to a remote file. you can change the icon at any time by setting the button's icon property. you can change the icon, and the other state attributes, either globally, for a specific
window, or for a specific tab. read more about updating state. attaching a panel if you need to attach a panel to a button, use the toggle button api. this is just like the action button api except it adds a boolean checked property which is toggled whenever the button is checked. to attach the panel, pass the button to the panel's show() method. for more details on this, see the toggle button's docum...
Developing for Firefox Mobile - Archive of obsolete content
g not supported querystring supported request supported selection not supported self supported simple-prefs supported simple-storage supported system supported tabs supported timers supported ui not supported url supported widget not supported
windows supported low-level apis /loader supported chrome supported console/plain-text supported console/traceback supported content/content supported content/loader supported content/mod supported content/worker supported core/heritage supported core/namespace supported ...
...ported ui/frame not supported ui/id supported ui/sidebar not supported ui/toolbar not supported util/array supported util/collection supported util/deprecate supported util/list supported util/match-pattern supported util/object supported util/uuid supported
window/utils supported ...
Modifying Web Pages Based on URL - Archive of obsolete content
oaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it. 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. below is what you should see. specifying the match pattern match pattern uses match-pattern syntax. you can pass a single match-pattern string, or an array. keeping the content script in a separate file in the example above, we've supplied content script as a string. unless the script is extremely simple, maintain the script as a separate file though. this makes the code easi...
... that are already open when the page-mod is created, and are attached to iframes as well as top-level documents. to control this behavior use the attachto option. define read-only values accessible to content scripts using the contentscriptoptions option. by default, content scripts are attached after all the content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires. to control this behavior, use contentscriptwhen option. to learn more about content scripts in general, see content scripts guide. ...
Bootstrapped extensions - Archive of obsolete content
n() function is called, it must remove anything that it has added to the application, as well as all references to any of its objects. there are several scenarios in which the startup() function may be called; for example: when the extension is first installed, assuming that it's both compatible with the application and is enabled. when the extension becomes enabled using the add-ons manager
window. when the application is started up, if the extension is enabled and compatible with the application. some examples of when the shutdown() function may be called: when the extension is uninstalled, if it's currently enabled. when the extension becomes disabled. when the user quits the application, if the extension is enabled. notes on modifying the application user interface chrome.man...
...b and then reload the open pages to see the localization change. further reading how to convert an overlay extension to restartless a step by step guide. some code samples are provided. the page is based on and expanded from dave garrett's step-by-step guide to convert an old overlay based extension into a restartless addon. dave townsend provides a basic code base to load ui for each opened
window in a bootstrapped extension. mark finkle provides some simple example code for restartless add-ons in mobile firefox, adding resources (like the options
window) to bootstrapped extensions and using default preferences without a default/preferences/prefs.js file. kris maglione writes about the requirements for the cleanup procedures in bootstrapped extensions. edward lee shows off some helpful ...
Alerts and Notifications - Archive of obsolete content
basic modal alert alert('hello'); pop-ups the following code presents a non-modal pop-up, which automatically disappears after an appropriate delay. it uses nsialertsservice. ...
...ice) .showalertnotification(null, title, text, false, '', null); } catch(e) { // prevents runtime 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.nsi
windowwatcher) .open
window(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 us...
Embedding SVG - Archive of obsolete content
:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </
window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xml...
...re.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </
window> ...
Modules - Archive of obsolete content
some simple code to turn a javascript module into non-mozilla-specific code (e.g., if porting to the browser). the use of eval() will probably not be of concern because it is only being used on the exported_symbols array which should not depend on user input. function importmodule (thatobj) { thatobj = thatobj ||
window; var exported_symbols = [ // put the symbols here ]; // your code here... ...
...tobj ||
window; var exported_symbols = [ // put the symbols here ]; // your code here... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being exported!) for (var i=0; i < exported_symbols.length; i++) {thatobj[exported_symbols[i]] = eval(exported_symbols[i]);} } or for one-time-only usage of a module: (function (thatobj) { thatobj = thatobj ||
window; var exported_symbols = [ // put the symbols here ]; // your code here... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being exported!) for (var i=0; i < exported_symbols.length; i++) {thatobj[exported_symbols[i]] = eval(exported_symbols[i]);} })(); // can put an object argument here ...
QuerySelector - Archive of obsolete content
st. ...
... like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chrome
window.prototype or
window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): htmldocument.prototype.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(docum...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
information. bambi meets mozilla none of this is for the faint of heart. in particular, the initial step involves building mozilla, which is a huge - nay, gargantuan! - project. many intelligent developers have been driven to the brink of insanity trying to build it for the first time. if you're not an experienced c++ developer, i wouldn't even bother. stick to javascript. on
windows platforms the first time i built mozilla i used this guide. i can't even remember why anymore, but i got stuck in a number of places, and the whole affair ended up taking far longer than i originally expected. much furniture was smashed, much hair torn out by the roots. here's a comprehensive looking guide that's gotten good reviews. follow every step methodically and you'll probably be a...
...pidl_module in the two public/ directories or one of the component type libraries (i.e. xpt files) will overwrite the other one and all hell will break loose. each module must also have a different value for the library_name variable. this is the name of the generated dynamic library, so if we call the libraries "mybase" and "myadvanced", we'll end up with mybase.dll and myadvanced.dll (on
windows, at least). and each of these modules is going to have a separate c++ file for registering components. so there will be two files that look like myextension.cpp in the original example, say base.cpp and advanced.cpp. finally, each module will obviously have its own jar.mn, though they can reference the same jar filename and package name if you want all the chrome files to be organized in a singl...
Deploying a Plugin as an Extension - Archive of obsolete content
particularly useful for vendors who wish to deploy the plugin even if firefox is not currently installed, or who want to use the automatic extension update mechanism to update their plugin to a newer version. historically, most people have chosen to use an install.js script to install a plugin. when this method is used, you can choose to either place the plugin into the plugins directory, or, on
windows, place it into your own directory and modify the
windows registry to let firefox know where to find the plugin. the downside to this method is that once the plugin is installed, it might be difficult for users to upgrade, uninstall, or disable the plugin. with firefox 1.5, you can use the built-in extension mechanism to make a plugin available to your users. this allows the plugin to be treated ...
...an update to our extension/plugin is available. finally, if you want to package plugins for multiple platforms into a single extension, you can do that as well. there are two ways to do this. first, you can simply put all the files in the plugins directory. firefox will load the correct plugins based on the platform, simply because the plugins for other platforms won't load. if your plugin is for
windows, don't forget add to version resources to your plugin's dll. also, supply mimetype and fileextents, without these your plugin won't work. michael kaply firefox advocate mkaply@us.ibm.com ...
Displaying web content in an extension without security issues - Archive of obsolete content
one of the most common security issues with extensions is execution of remote code in privileged context. a typical example is an rss reader extension that would take the content of the rss feed (html code), format it nicely and insert into the extension
window. the issue that is commonly overlooked here is that the rss feed could contain some malicious javascript code and it would then execute with the privileges of the extension — meaning that it would get full access to the browser (cookies, history etc) and to user’s files. these issues can easily be avoided by making use of the existing security mechanisms in the mozilla codebase. the following article explains these security mechanisms, ideally an extension that needs to display web content (which is always potentially dangerou...
...easily be avoided by making use of the existing security mechanisms in the mozilla codebase. the following article explains these security mechanisms, ideally an extension that needs to display web content (which is always potentially dangerous) will use all of them. displaying untrusted data as content in firefox, there is a distinction between chrome and content documents. the top document in a
window is always a chrome document. if you look at the frames it loads, those will usually be chrome documents as well. however, if the document is loaded into <iframe type="content"> or <browser type="content">, it will be considered a content document, and so will be all the frames it loads (the "type" attribute is ignored at that point). so if we look at the frame hierarchy there is a boundary betwee...
Hiding browser chrome - Archive of obsolete content
there are times in which an extension may find it useful to hide browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface. this is done, for example, by the about:addons page. this can be accomplished by augmenting the behavior of the xulbrowser
window object's hidechromeforlocation() method. ...
...r user interface. this is done, for example, by the about:addons page. this can be accomplished by augmenting the behavior of the xulbrowser
window object's hidechromeforlocation() method. note: don't simply replace the hidechromeforlocation() method; this will likely hurt the functionality of firefox itself as well as other extensions. use the technique demonstrated here. var prevfunc = xulbrowser
window.hidechromeforlocation; xulbrowser
window.hidechromeforlocation = function(alocation) { return (/* your test goes here */) || prevfunc.apply(xulbrowser
window, [alocation]); } this works by saving a reference to the current implementation of the hidechromeforlocation() method, then replacing it with a new method that calls through to the previous implementation. by chaining multiple implementatio...
Inline options - Archive of obsolete content
xml version="1.0"?> <!doctype mydialog system "chrome://myaddon/locale/mydialog.dtd"> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting type="bool" pref="extensions.myaddon.bool" title="boolean" desc="stored as a boolean preference" /> </vbox> note that it's limited to <setting> tags. the root <vbox> just acts as a container, it isn't merged into the main
window. if you need script support, see the display notifications section. setting types there are several types of <setting>s, each with a different type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox i...
...ninputchanged will not trigger. some discussion on the subject at stackoverflow: how to use addeventlistener on inputchanged of inline options display notifications if you want to use the settings ui for anything more than storing preferences, then you will probably need to initialize them when they first appear. you can't do this until your options xul has been loaded into the add-on manager
window, so you should listen for the addon-options-displayed notification to initialize your settings. for example: var observer = { observe: function(asubject, atopic, adata) { if (atopic == "addon-options-displayed" && adata == "my_addon@my_domain") { var doc = asubject; var control = doc.getelementbyid("myaddon-pref-control"); control.value = "test"; } } }; services.ob...
Listening to events in Firefox extensions - Archive of obsolete content
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. xulbrowser
window xulbrowser
window is an nsiwebprogresslistener used to get progress events for the currently visible browser. it is used to update the ui for many different reasons: update the progress bar and status messages as pages load turn on and off the throbber as pages load set the site icon when available update the address bar as the user navigates hide notification bars when appropriate as the ...
...he site icon when available update the address bar as the user navigates hide notification bars when appropriate as the user navigates apply the site zoom preferences to newly loading pages update the bookmarking star button ui update the identity display as the site's security changes tabsprogresslistener this object is a tabs progress listener and receives events for all browsers in the
window. it is used to detect when a webpage attempts to refresh itself and allow the user to block the attempt. how events are used by the tabbrowser tabbrowser maintains a set of objects relating to progress listening for each browser. first it creates a browser-status-filter and adds it as a web progress listener for the browser. next it creates an internal object to receive all web progress events ...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
logies used to develop firefox extensions. we will also look at the minimum knowledge you'll need to have in order to develop for firefox. technologies used to develop firefox extensions firefox and its extensions are both based on and developed with technologies widely used on the web. its structure is similar to that of the dynamic html used on some web pages, or the html applications used on
windows. if you've had experience developing with dynamic html, you'll probably find it relatively easy to pick up the knowledge you'll need to develop firefox extensions. the role of each technology firefox is largely built using four technologies: xul, css, javascript, and xpcom. extensions are also built using these four technologies. figure 1: role of each technology in firefox in addition to...
... some of css level 3. listing 2: css code sample body { color: black; background-color: white; } p { margin-bottom: 1em; text-indent: 1em; } javascript: the world's most misunderstood language javascript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. because it was often used at first to display pop-up
windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality. also, because a series of security holes were discovered in javascript and the compatible technology jscript, there was an initial reluctance to use javascript at all. nevertheless, the rise of web services lik...
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
e or copy necessary files to the profile folder, like the initial db the add-on will use for storage. a few others require cleanup code to be run after the add-on is uninstalled. this appendix covers these cases with simple code that should work for most add-ons. install scripts just like with a regular initialization function, we want a load event handler: // rest of overlay code goes here.
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once. the best approach in this case is to use a preference, as explained in the handling preferences section. so, if we were to use fuel, we can do the following in the init function: init : function() { let fir...
...ref, false)) { application.prefs.setvalue(firstrunpref, true); // all the rest of the first run code goes here. } } in this case you would need to declare the first run preference in your default preferences file, with a default value of false. you should also change the preference value before you run any other first run code. 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. if you need to run code on every update, or some of them, the code would be very similar. instead of a boolean preference, it would be best to use a string preference with the last-installed add-on version. and then do a version comparison to decide which code to run. the current version number can be h...
Getting Started with Firefox Extensions - Archive of obsolete content
xtension is installed, you'll be asked to restart firefox. installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of npapi plugins, add-ons sdk extensions and bootstrapped extensions. this is an important point to keep in mind if you're building an extension that manipulates other extensions or themes. after installing, look at the main firefox
window and see if you notice anything different. did you see it? there's a new menu on the main menu, labeled "hello world!". if you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). click on the ok button to close it. that's all the extension does. now let's take a closer look at it. extension contents you may have noticed that the ex...
... into the xpi file you need to download it first, not install it. if the server triggers an install when clicking on a link or button, what you need to do is right click on the install link, and choose the save link as... option. decompress the xpi file in a convenient location. 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. you should see the following directory structure: xulschoolhello1 chrome.manifest install.rdf content browseroverlay.xul browseroverlay.js skin browseroverlay.css locale en-us browseroverlay.dtd ...
The Box Model - Archive of obsolete content
eeds to either be flexible itself, or have a fixed width larger than its contents. text there are 2 xul elements that are typically used for displaying text: label and description. their behavior is nearly identical, but they are meant to be used in different situations. the label element should be used mainly for text in xul forms, such as the ones you see in the firefox options / preferences
window. here's a typical usage of the label element: <label control="xulschoolhello-greeting-textbox" value="&xulschoolhello.typegreeting.label;" /> <textbox id="xulschoolhello-greeting-textbox" /> the label says something like "type a greeting message", and the textbox next to it allows the user to type the message. the control attribute links the label to the textbox. if the user clicks on the...
...you should plan it so that they can wrap into multiple lines. in order to have wrapping descriptions, you need to set the text as a child node instead of using the value attribute: <description>&xulschoolhello.description.label;</description> even then, the text will extend as much as it can in a single line, so you need to add some css limits in order to make it wrap inside a xul dialog or
window. you can use the css property width to restrict the width of the description so that it wraps as you need it to. never cut text lines into separate locale strings in order to bypass wrapping difficulties. this makes localization much harder, or even impossible in some cases. there are other more complicated text wrapping cases where a description won't be good enough. for instance, template...
Performance best practices in extensions - Archive of obsolete content
is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of firefox itself. this article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of firefox itself. 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. there are several things you can do to reduce the amount of time your extension delays the appearance of the user's desired content. load only what you need, when you need it don't load things during startup that are only needed if the user clic...
...ng code up to an unnecessary degree can be counter-productive. code should be modularized to the extent that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred. defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions. do as little as possible here. the browser
window is blocked while your add-on's load handler runs, so the more it does, the slower firefox will appear to the user. if there is anything that can be done even a fraction of a second later, you can use an nsitimer or the
window.settimeout() method to schedule that work for later. even a short delay can have a big impact. general performance tips avoid creating memory leaks memory leaks require...
Signing an extension - Archive of obsolete content
cate from ca. get the signing tool we use nss to sign an extension. this can be easily installed with macports. sudo port install nss export your certificate if you have your certificate in firefox, export it by following the steps below. the certificate which the author purchased from verisign was directly installed to firefox. click the firefox button and select options. in the options
window, open the advanced panel, then select the encryption tab. click view certificates. in the certificate manager, select the your certificates tab. select your organization's certificate and click backup. enter the file name, e.g. codesign.p12. enter the password to protect your certificate backup and click ok. a p12 file will be exported on your desktop. create a certificate database first...
...d then a signed xpi file will be generated. verify drag and drop the xpi file into the content area of firefox. on the installation dialog, you can see your organization name along with the file name. references signing a xpi - more detailed instructions including test procedures. key manager - a firefox extention that has the ability to sign xpi files. signing a firefox extension with a
windows authenticode ssl certificate / key - note that some cas do not allow (or support) to divert an authenticode certificate to object signing. please check the terms of service. signing an executable with authenticode - for signing executable file (exe) ...
Using the Stylesheet Service - Archive of obsolete content
the examples in this document are all written in javascript using xpcom. ...
...rsheet(uri, sss.user_sheet); note: loadandregistersheet will load the stylesheet synchronously, so you should only call this method using local uris. determining whether a sheet has been loaded if you are writing an extension and adding your stylesheet in an onload handler, you'll want to see if your sheet has already been added. if you don't check, you will wind up adding your sheet once per
window load. var sss = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("chrome://myext/content/myext.css", null, null); if(!sss.sheetregistered(uri, sss.us...
MozBeforeResize - Archive of obsolete content
type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...
... type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...
MozOrientation - Archive of obsolete content
note: this below describes how these values worked for the now obsolete mozorientation. the x axis represents the amount of right-to-left tilt. ...
...he specified deviceorientationevent. to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation }
window.addeventlistener('deviceorientation', orientationhandler, false);
window.addeventlistener('mozorientation', orientationhandler, false); example
window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser
window as the events arrive. notes this event is only dispatched if a...
Localizing an extension - Archive of obsolete content
calizing strings in xul files create the needed locale files each xul file that comprises the user interface for your extension should have a locale file in its locale directory. each locale file maps entity names referenced in the xul files to the strings themselves. the preference dialog, whose xul file is options.xul, has a corresponding options.dtd file that looks like this: <!entity options_
window_title "stockwatcher 2 preferences"> <!entity options_symbol.label "stock to watch: "> the "options_
window_title" entity maps to the string "stockwatcher 2 preferences", which is used as the title of the preference
window. the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entit...
...(yhoo)"> update the xul files each xul file needs to reference its corresponding locale file. we also need to update the code to use the entities instead of the strings, so that the substitutions take place based on the currently active locale. to add a reference to the correct locale file for a given xul file, we need to add one line to the xul file. to options.xul, we add this line: <!doctype
window system "chrome://stockwatcher2/locale/options.dtd"> we add a similar line to the stockwatcher.xul file: <!doctype overlay system "chrome://stockwatcher2/locale/stockwatcher2.dtd"> in larger applications you might need to use entities from several locale files in a single xul file. using multiple dtds describes how to do it. note that the urls of the dtd files don't actually include the name of...
MMgc - Archive of obsolete content
ossibility of many small "balkanized" heap regions. reserving 16mb of space per heap region should not be a big deal in a 2gb address space... it would take a lot of player instances running simultaneously to exhaust the 2gb address space of the browser process. by allocating contiguous blocks of address space and managing them ourselves, fragmentation of the ie heap may actually be decreased. on
windows, this uses the virtualalloc api to obtain memory. on mac os x and unix, we use mmap. virtualalloc and mmap can reserve memory and/or commit memory. reserved memory is just virtual address space. it consumes the address space of the process but isn't really allocated yet; there are no pages committed to it yet. memory allocation really occurs when reserved pages are committed. our strategy in gch...
... gcheap can fall back on a malloc/free approach for obtaining memory if a memory mapping api like virtualalloc or mmap is not available. in this case, gcheap will allocate exactly as much memory as is requested when the heap is expanded and not try to reserve additional memory pages to expand into. gcheap won't attempt to allocate contiguous regions in this case. we currently use virtualalloc for
windows (supported on all flavors of
windows back to 95), mmap on mach-o and linux. on classic and carbon, we do not currently use a memory mapping strategy... these implementations are calling mpallocaligned, which can allocate 4096-byte aligned memory. we could potentially bind to the mach-o framework dynamically from carbon, if the user's system is mac os x, and call mmap/munmap. ...
Environment variables affecting crash reporting - Archive of obsolete content
orting used in mozilla projects supports some environment variables, primarily for testing purposes. the following environment variables affect crash reporting: moz_crashreporter_url sets the url that the crash reporter will submit reports to. moz_crashreporter_fulldump store full application memory in the minidump, so you can open it in a microsoft debugger. don't submit it to the server. (
windows only.) moz_crashreporter_no_delete_dump don't delete the crash report dump file after submitting it to the server. minidumps will still be moved to the "crash reports/pending" directory. moz_crashreporter_no_report save the minidump file but don't launch the crash reporting ui or send the report to the server. minidumps will be stored in the user's profile directory, in a subdirectory named ...
...d to the "crash reports/pending" directory. moz_crashreporter_no_report save the minidump file but don't launch the crash reporting ui or send the report to the server. minidumps will be stored in the user's profile directory, in a subdirectory named "minidumps". moz_crashreporter_disable disable breakpad crash reporting completely. you can use this if you would rather use the jit debugger on
windows with the symbol server, for example. moz_crashreporter_shutdown save the minidump and then force the application to close. this is useful for content crashes that don't normally close the chrome (main application) processes. this variable would cause the application to close as well. moz_crashreporter the opposite of moz_crashreporter_disable, force crash reporting on even if disabled in app...
Source Navigator - Archive of obsolete content
finition of a method/function to look up... but on the other hand mxr can only allow you to type in the name for it to generate a long list of occurances. (as i understand. let me know if this is wrong..) it can generate a class hierarchy quite easily (unfortunately, not for classnames which are defined by macro.) installing source navigator in ubuntu execute the following line in a terminal
window: sudo apt-get install sourcenav this should install source-navigator. one can check whether the installation is complete by executing: $ which snavigator /usr/bin/snavigator importing the source execute the following: snavigator. this triggers a splash screen, followed by a "source-navigator projects" dialog as the following: i've already created a new project bin.proj before documenting th...
.... now you can enjoy searching the mozilla code in a faster speed. using source navigator (more later) opening a project open a terminal. type <tt>snavigator</tt> followed by striking enter. this shows the "source-navigator projects" dialog. choose the project file that you've just created and then click "open...". source navigator then loads the database and then display the following symbols
window: searching a method by typing in the method name viewing the definition/declaration by highlighting the method in the code ... displaying a inheritance hierarchy ... searching a string ... ...
Enabling quicklaunch for all users - Archive of obsolete content
enabling quicklaunch for all users unlike all other settings, quicklaunch is stored in the
windows registry. to enable it, just load the following registry script into the user's
windows registry: quicklaunch.reg. ...
... enabling quicklaunch for all users unlike all other settings, quicklaunch is stored in the
windows registry. to enable it, just load the following registry script into the user's
windows registry: quicklaunch.reg. ...
Building TransforMiiX standalone - Archive of obsolete content
read the build instructions for your platform to get the requirements, which are the same as for mozilla. you need to get the source from cvs. add tx_exe=1 mk_add_options build_modules="xpcom transformiix" ac_add_options --enable-standalone-modules="xpcom transformiix" to your .mozconfig, and use client.mk to pull as usual. ...
...d_options --without-x to your .mozconfig, too, as it stops configure from testing unneeded libs. make -f client.mk build as usual. of course, make -f client.mk checks out and builds just transformiix alright. the binary transformiix(.exe) will be in extensions/transformiix/source and dist/bin/ (symbolic link). run it via run-mozilla.sh transformiix on unices and just transformiix.exe on
windows. original document information author: axel hecht last updated date: april 5, 2004 copyright information: portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a creative commons license ...
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
this - repeatedly) mimetype reflects the data type handled by the plugin. this is how webpages invoke your plugin. should either be like "application/x-vnd-yourorganization-yourfiletype" or be officially registered with iana (unlikely) or be a standard type (e.g. if you want to play mpeg files). file extension reflects the data type handled by the plugin, esp. when loaded from local disk on
windows. build create a new project in visual studio for a win32 gui library (dll) (in .net 2003: win32 template, then switch to dll in application settings in the following dialog, export symbols too?)(in visual studio 2008, it is visualc++|win32|win32 project, then check dll in the wizard). if a wizard gives you a checkbox to create an empty project, then check it. otherwise you'll delete files ...
... npapi sdk. add the npapi sdk include path (example : c:\npapi-sdk\headers) to project properties|(all configurations)|c++|general|additional include directories. note: if your project is still empty, the c++ tree might not be visible. so, add some files first. add the following preprocessor definitions to project properties|(all configurations)|c++|preprocessor|preprocessor definitions: win32;_
windows;xp_win32;xp_win;_x86_;npsimple_exports disable precompiled headers using project properties|(all configurations)|c++|precompiled headers|create/use precompiled header. they may be already disabled. define the function exports by adding the .def filename (e.g. nprt.def) to project properties|(all configurations)|linker|input|module definition file. it could be either the full path or the path r...
Creating a Firefox sidebar extension - Archive of obsolete content
ation requires the creation of an xpi file which is identified as extension in firefox. the xpi is a zip file containing the content, locale and manifest files. the content, locale and skin folders are packed into emptysidebar.jar, which should be created in the chrome folder. on unix systems: ~/src/emptysidebar$ cd chrome ~/src/emptysidebar/chrome$ zip -r emptysidebar.jar content/ locale/ on
windows systems, use a zip tool to create emptysidebar.zip and then rename to emptysidebar.jar. since we are packaging the extension with a jar file, we need to update the chrome.manifest file to take to jar file into consideration: example 7. chrome.manifest content emptysidebar jar:chrome/emptysidebar.jar!/content/ locale emptysidebar en-us jar:chrome/emptysidebar.jar!/locale/ skin emptysideba...
...refoxoverlay.xul finally, create the xpi file. this is a zip file containing the jar file in the chrome folder and the manifest files. on unix systems: ~/src/emptysidebar/chrome$ cd .. ~/src/emptysidebar$ zip emptysidebar.xpi install.rdf chrome.manifest chrome/emptysidebar.jar open firefox and browse to the folder containing emptysidebar.xpi. click on the file and the extension installation
window pops up. after a restart of firefox, the sidebar is installed. you can download the empty sidebar project to use as a basis for your own sidebars. the emptysidebar extension resources code snippets:sidebar building an extension creating applications with mozilla packaging firefox/thunderbird extensions creating a firefox 1 sidebar original document information author: j.c. wes...
Making a Mozilla installation modifiable - Archive of obsolete content
(jar:)|(\/[^.\/]+\.jar!)//g' chrome.rdf installed-chrome.txt for example, to convert the url jar:resource:/chrome/comm.jar!/content/necko/, change it to resource:/chrome/content/necko/. after you make these changes, try starting the copy of mozilla you have modified. ...
...source:/chrome/comm.jar!/content/necko/, change it to resource:/chrome/content/necko/. after you make these changes, try starting the copy of mozilla you have modified. ...
In-Depth - Archive of obsolete content
is invisible and 1.00 is totally visible. how do i know what to modify? now that you've got everything extracted and you know how to modify items, you might be wondering, how do i know where everything is? well there is an easy way to find out - using the dom inspector. if you didn't install it when you first installed mozilla you may have to run the installer again. load mozilla and one browser
window. then open the dom inspector (tools->web development->dom inspector). click file->inspect and select the browser
window. what appears in a tree view below is the actual code for the interface. using this, we can figure out what objects are where, what classes/id's they have applied to them, and most importantly, which file the style is located in. click on the inspect icon and then click on the ...
...what this will do is find the code for the back button and display it in the dom inspector. selected in the tree view will be xul:toolbarbutton. this is the portion of the icon with only the image. ...
GRE - Archive of obsolete content
ime will be installed. this document describes how embedders should dynamically link to a gre. to understand how gres are registered, see gre registration. the xre project, which means "xul runtime environment", has been replaced by xulrunner. mozilla suite: the old gre there are two different forms for the gre: the "old" gre was part of the mozilla application suite. it was installed with the
windows installer of mozilla 1.4 through 1.7.x. there was never an official gre shipped for linux, but various distributors such as red hat have registered mozilla installations as if they were a gre. the mozilla suite never supported a gre on mac. xulrunner: the new gre xulrunner is the new version of the gre, which not only allows embedding but is capable of bootstrapping entire xul applications suc...
...arious distributors such as red hat have registered mozilla installations as if they were a gre. the mozilla suite never supported a gre on mac. xulrunner: the new gre xulrunner is the new version of the gre, which not only allows embedding but is capable of bootstrapping entire xul applications such as firefox. xulrunner supports or is planned to support embedding on all three major platforms (
windows, mac, and linux). finding and using a gre from application code avoid linking directly against xpcom.dll if an application wishes to use the gre, it must take careful steps to ensure that it links against the proper libraries. if you link directly against xpcom.dll/libxpcom.so (xpcom.lib import lib), your application will not launch unless xpcom.dll is in your path. this prevents dynamically ...
Hidden prefs - Archive of obsolete content
= contains. see nsabquerystringtoexpression::createbooleanconditionstring() for other operators. mail composition "other header" pref ("mail.compose.other.header") the format for this a comma delimited list of mail headers, like "approved,x-no-archive" an example for your prefs.js would be: user_pref("mail.compose.other.header", "approved"); this will cause "approved" to show up in the compose
window address picker, under to:, cc:, bcc:, newsgroup:, etc. for example: when that mail gets sent, approved: test@test.com will be in the message in the headers. this is a useful trick for newsgroup moderators who want moderate from mozilla. mail/news prefs "autcollect addresses" prefs from mailnews.js: // by default, only collect addresses the user sends to (outgoing) pref("mail.collect_ema...
...abook.mab"); for the reasons why the defaults changed, see this document on the collected address book. ...
Menu - Archive of obsolete content
his is the node the user clicked to open the menu. be careful when dealing with nested nodes. for example, if the user clicks on an image inside a link, this property will be set to the image, not the link. similarly, if the user clicks a node within a div, this property will be the node, not the div. document the content document in which the menu is shown.
window the content
window in which the menu is shown. targets some methods act on existing items within a menu. existing items are always identified using targets. a target is a string, regular expression, or integer. a string target is case-insensitively matched against the label, id, and xulid properties of menuitems. a regular expression target is tested against the label, id, and xul...
...r " + jetpack.selection.text, menu: new jetpack.menu([ { label: "google", icon: "http://www.google.com/favicon.ico", data: "http://www.google.com/search?q=" }, { label: "wikipedia", icon: "http://en.wikipedia.org/favicon.ico", data: "http://en.wikipedia.org/wiki/" } ]), command: function (menuitem) { context.
window.location.href = menuitem.data + jetpack.selection.text; } }; }); create some div buttons (e.g., in a slidebar or status bar item) and specify their context menu: for (let i = 0; i < 10; i++) { var button = $('<div class="button" />', document); buttoncontainer.append(button); } jetpack.menu.context.on(".button").add(["do this", "do that"]); create a div button (e.g., in a slidebar or ...
Mozilla Application Framework in Detail - Archive of obsolete content
orted by javaxpcom, and there are efforts underway to add perl and ruby language support for xpconnect. on the developer side, xpcom lets you to write components in c++, javascript, python, or other languages for which special bindings have been created, and compile and run those components on dozens of different platforms, including these and others where mozilla itself is supported: microsoft
windows gnu/linux hp-ux aix solaris openvms mac os x *bsd the flexibility to reuse the xpcom components from the gecko library and develop new components that run on different platforms can make your application development faster, more productive, and easier to maintain. the networking library, for example, is a set of xpcom components that can be accessed and used by any mozilla application. f...
...istration facilities for mozilla application developers. the mozblog application hosted at mozdev.org, for example, uses xpinstall to make several different versions available simultaneously as updates are made and the browser itself advances versions. ...
FAQ - Archive of obsolete content
is prism a mozilla product? no, prism is not a mozilla product. it is one of the experiments being conducted by mozilla labs to bridge the divide in the user experience between web applications and desktop apps. ...
...ilable to web applications in both prism and firefox. how is prism different from xulrunner? prism is built on top of xulrunner. ...
RDF Datasource How-To - Archive of obsolete content
ormation as a datasource, you probably want to see it. using xul, you can display the contents of your datasource in a tree control, a menu, or a toolbar. in fact, you can convert rdf to an arbitrary content model using xul templates. ...
...this is a space-separated list that may include internal xpcom datasource "identifiers" (as described above) and uris for local or remote rdf/xml documents. each datasource that is listed will be loaded, and the assertions contained in the datasource will be made available to the tree contro...
Safely loading URIs - Archive of obsolete content
not all uri loads are safe. for example, loading some file: uris can hang the browser or even crash the operating system in some cases. some other schemes are used internally by mozilla modules to communicate with each other. finally, some uris (e.g. chrome: give the loaded page expanded privileges. if a web page gets access to a
window with such expanded privileges, it may be able to abuse it to gain access to those privileges itself. to solve this problem, gecko provides methods that allow the caller to check whether it's safe to load a particular uri. these methods are exposed on the nsiscriptsecuritymanager interface and are called checkloaduri, checkloaduriwithprincipal, and checkloaduristr. all three methods take three arguments: the first argument identifies the source of the uri...
...es apply for gecko 1.8: if you plan pass a uri string to nsiwebnavigation.loaduri (which can happen indirectly, e.g. by passing the string to something that loads it in a <browser> or <iframe>), you must call checkloaduristr to be secure. there's no way to do this completely securely in gecko versions prior to 1.8.0.4. 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. if you have a choice as to what data you have, prefer checkloaduriwithprincipal to checkloaduri and prefer checkloaduri to checkloaduristr. note that checkloaduriwithprincipal is not scriptable in gecko 1.8, so extensions are not able to use it. c...
Table Layout Regression Tests - Archive of obsolete content
" /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed. ++webshell == 1 ++dom
window == 1 ++webshell == 2 ++dom
window == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++dom
window == 3 running baseline test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst. writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-fixed_html.rgd writing regression data to e:\moz_src\mozill...
...rify run creates first the frame dumps in the verify subdirectories (verify) and compares each frame dump with the corresponding reference frame dump. if they differ in critical points the test fails. a typical part of the verify log would look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed. ++webshell == 1 ++dom
window == 1 ++webshell == 2 ++dom
window == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++dom
window == 3 running verify test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst. writing regression data to e:\moz_src\mozilla\layout\html\tests\table\core\verify\standards1.rgd comparing to regression data from e:\moz_src\mozilla\l...
Running Tamarin acceptance tests - Archive of obsolete content
n runtests.py options, see below or use python runtests.py -h. notes on using acceptance runtests.py threading in order to speed up the execution time of the acceptance testsuite, the runtests script automatically detects the number of cores on the machine and sets an equivalent number of threads. ...
...execution time of the acceptance testsuite, the runtests script automatically detects the number of cores on the machine and sets an equivalent number of threads. this can be overrided with the threads flag: python ./runtests.py --threads=3 threading on cygwin /
windows due to an issue with cygwin python, threading does not work, and threads will always be set to 1. in order to use threading on
windows you must install
windows python and invoke runtests using that python executable in cygwin. the locations of avm, asc, builtinabc and shellabc must also be defined using
windows paths (replace backslashes [\] with forward slashes [/]): export avm=c:/location/of/avmshell.exe export asc=c:/location/of/asc.jar ... c:/python26/python.exe ./runtests.py --threads=3 other flags of interest (for a list...
Examples - Archive of obsolete content
examples trigger scripts and install scripts describes typical kinds of script that use the xpinstall api. ...
... examples trigger scripts and install scripts describes typical kinds of script that use the xpinstall api. ...
getWinProfile - Archive of obsolete content
getwinprofile (
windows only) constructs an object for working with a
windows .ini file. method of install object syntax winprofile getwinprofile ( object folder, string file); parameters the getwinprofile method has the following parameters: folder an object representing a directory. you create this object by passing a string representing the directory to the getfolder method. file a relative pathname to an initialization file in the directory specified by the folder parameter, such as "royal/royal.ini". returns a winprofile object. description the getwinprofile method creates an object for manipulating the contents of a
windows .ini file. once you have this object, you can call its methods to retrieve strings from the file or to add strings to the f...
...ntents of a
windows .ini file. once you have this object, you can call its methods to retrieve strings from the file or to add strings to the file. for information on the returned object, see winprofile. this method returns null on unix and macintosh platforms. ...
getWinRegistry - Archive of obsolete content
once you have this object, you can call its methods to retrieve or change the registry's content. for information on the returned object, see winreg. this method returns null on unix and macintosh platforms. ...
...once you have this object, you can call its methods to retrieve or change the registry's content. for information on the returned object, see winreg. this method returns null on unix and macintosh platforms. ...
getString - Archive of obsolete content
file. method of winprofile object syntax string getstring ( string section, string key); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers". key the key in that section whose value to return. returns the value of the key or an empty string if none was found. ...
...e value of the key or an empty string if none was found. description the getstring method is similar to the
windows api function getprivateprofilestring. unlike that function, this method does not support using a null key to return a list of keys in a section. ...
writeString - Archive of obsolete content
n writestring ( string section, string key, string value); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers". key the key in that section whose value to change. value the new value. returns true if successfully scheduled, otherwise, false. description the writestring method is similar to the
windows api function writeprivateprofilestring. to delete an existing value, supply null as the value parameter. unlike the writeprivateprofilestring function, this method does not support using a null key to delete an entire section. values are not actually written until performinstall is called. example to set the name of the wallpaper file from the desktop section of the win.ini file, use this call:...
...string. to delete an existing value, supply null as the value parameter. ...
WinProfile Object - Archive of obsolete content
parts of this page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. ...
... parts of this page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. winprofile (
windows only)
windows developers use this object to manipulate the content of a
windows .ini file. overview this object does not have a public constructor. instead, you construct an instance of this object by calling the getwinprofile method of the install object. the two methods of the winprofile object, getstring and writestring, allow you to read and write the data in the key/value pairs of a
windows .ini file. ...
WinRegValue - Archive of obsolete content
syntax winregvalue ( int datatype, byte[] regdata); parameters the winregvalue constructor takes the following parameter: datatype an integer indicating the type of the data encapsulated by this object. ...
...e.reg_multi_sz = 7 winregvalue.reg_resource_list = 8 winregvalue.reg_full_resource_descriptor = 9 winregvalue.reg_resource_requirements_list = 10 regdata a java byte array containing the data. returns a new winregvalue object, with the data members type and data set to the values passed to this constructor. description advanced
windows developers can use this object to manipulate non-string values for the
windows registry. an object of this type has two fields: the type of the data and the value. for information on the possible data types for a registry value, see your
windows api documentation. you supply the value for these fields to the constructor for this class. ...
WinReg Object - Archive of obsolete content
parts of this page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. winreg (
windows only)
windows developers use this object to manipulate the content of the
windows registry. overview this object does not have a public constructor. instead, you construct an instance of this object by calling the getwinregistry method of the install object. this discussion assumes you are already familiar with the
windows registry. for information on it, see api documentation for
windows nt or
windows 95. whe...
...to manipulate such values, use the getvaluestring and setvaluestring methods. to manipulate other values, use the getvalue and setvalue methods. ...
XPInstall API reference - Archive of obsolete content
compareto init tostring file no properties methods copy dircreate dirgetparent dirremove dirrename diskspaceavailable execute exists isdirectory isfile macalias moddate moddatechanged move remove rename size
windowsgetshortname
windowsregisterserver
windowsshortcut winprofile no properties methods getstring writestring winreg no properties methods createkey deletekey deletevalue enumkeys enumvaluenames getvalue getvaluenumber getvaluestring iskeywrit...
... enumvaluenames getvalue getvaluenumber getvaluestring iskeywritable keyexists setrootkey setvalue setvaluenumber setvaluestring valueexists winregvalue constructor other information return codes see complete list examples trigger scripts and install scripts code samples file.macalias file.
windowsshortcut install.adddirectory install.addfile installtrigger.installchrome installtrigger.startsoftwareupdate
windows install ...
XPJS Components Proposal - Archive of obsolete content
xpcom components written in javascript. now, you might ask: "isn't that what xpconnect does?" and i would answer that xpconnect is necessary, but not sufficient to the task. xpconnect provides the mechanisms for communication between native and js xpcom components, but it does not provide all of the infrastructure to register and instantiate js components outside of the limitations of the browser
window. xpjs will provide that infrastructure. so what does this mean? the xpjs component system will support implementing xpcom services, factories, and components in javascript. it will support service and factory registration. these components will be independent of web content and browser
windows. they will run from the user's disk just like native components. how will it work? the overriding pr...
...lf (optional) nscanunload (optional) each .js file might implement one or more components. we will have one native module - called the xpjsmanager - which holds this system together. the xpjsmanager is in charge of loading these .js files, helping them register themselves, and acting as an intermediary between the xpcom component manager and the js code. xjs components are not run in browser
windows. each .js file (let's call it a module) is started up and run in the context of a relatively 'raw' js global object. the standard (non-dom) js classes will be available. the xpconnectcomponents object will be available. and some additional yet to be defined objects may be available. the xpconnectcomponents object allows access to the whole repository of native and js xpcom components, so this is...
A XUL Bestiary - Archive of obsolete content
appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. 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. a help chrome defined in mozilla/bin/chrome/help/ ...
...ls corresponding to different types of documents and also to different proprietary notions about what in a document should be exposed programmatically. the w3c has standardized on a particular dom and already has a candidate recommendation for an updated version. this is the dom that is reflected in xul and in the mozilla browser. at the highest level in the tree of nodes that is the dom sits the
window object itself. the
window has child nodes like the document itself, a history object which records the pages a user has seen, frame nodes, and so on, all of which are accessible programmatically. with the dramatic improvements in the object model and the power of the w3c dom level 2, the concept of the dom is displacing that of the more abstract dhtml. since any dynamic web development is depend...
panel.level - Archive of obsolete content
« xul reference home level type: one of the values below specifies whether the panel appears on top of all
windows, or just on top of the
window the panel is in. if this attribute is not set, the popup
window level depends on the platform. on linux, the default value is top, otherwise, the default value is parent. if a panel has one or more text fields, this attribute should not be set, otherwise ime or on-screen keyboard popups will appear incorrectly. for these reasons, you should avoid setting the level if not needed. top the panel is shown in front of all other normal
windows, including those of other applications. ...
...rwise, the default value is parent. if a panel has one or more text fields, this attribute should not be set, otherwise ime or on-screen keyboard popups will appear incorrectly. for these reasons, you should avoid setting the level if not needed. top the panel is shown in front of all other normal
windows, including those of other applications. parent the panel is shown just above the
window the panel is in, but behind other
windows above it. if anchored, the child
window maintains its relative position to its parent
window. floating the panel floats above the
window the panel is in. on mac, the panel is only visible when the application is active. ...
reserved - Archive of obsolete content
le for use in the content. this means that, to execute these commands, key events won't be passed to content, and event listeners registered for them in content will not be executed. currently, the content still receives these key events, even though it can't override them. in future releases, it won't receive them. see bug 1173061 for details. ...
... events won't be passed to content, and event listeners registered for them in content will not be executed. currently, the content still receives these key events, even though it can't override them. in future releases, it won't receive them. see bug 1173061 for details. ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
ments, etc. use the dom inspector tool to see the tree representation of any document. todo: simple example of a xul document and a tree you can think of a document as an in-memory representation of valid html or well-formed xml such as xhtml or xul. it is important to remember that different web pages (and even different instances of the same web page) correspond to different documents. ...
...e example of a xul document and a tree you can think of a document as an in-memory representation of valid html or well-formed xml such as xhtml or xul. it is important to remember that different web pages (and even different instances of the same web page) correspond to different documents. each xul
window has its own distinct document, and there may even be a few different documents in a single
window, when there is an <iframe>, <browser>, or a <tabbrowser> element. you must be sure to always manipulate the correct document. (read more about this in working with
windows in chrome code.) when your script is included using a <script> tag, the document property references the dom document that includes the script. examples: using dom methods this section demonstrates the use of appendchild(), cre...
How to implement a custom XUL query processor component - Archive of obsolete content
he component. in this example, we will create a simple javascript xpcom component. the component will hold a small array of javascript objects as its datasource. in practice, you would use your own custom source of data. ...
...we are not really using the datasources in our sample component, so we set it to a dummy value. an empty string would be ok too. the querytype is important. it is used to create an instance of our xpcom object. the contract id of our xpcom component should be of the form "@mozilla.org/xul/xul-query-processor;1?name=xxx", where the xxx is the querytype used in the xul temp...
swapDocShells - Archive of obsolete content
note: both browsers must be either standalone browsers or embedded in a tabbrowser. you can't mix them. ...
... note: both browsers must be either standalone browsers or embedded in a tabbrowser. you can't mix them. ...
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog center
windowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstv...
...obackgroup 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 open
window preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scro...
MoveResize - Archive of obsolete content
em. moving a popup once a popup is open, it can be moved using the popup's moveto method. void moveto(in long left, in long top); the left argument is the horizontal screen position and the top argument is the vertical screen position. this method will change the left and top attributes to match the supplied arguments, so if these attributes are persisted the values will be restored when the
window is displayed again. for instance, the following example will move a popup to the upper left corner of the screen: popup.moveto(0, 0); the position may be shifted so as not to cover user interface elements provided by the operating system, such as the menu bar or the task bar. resizing a popup the size of a popup is determined automatically based on the content inside the popup. for instance...
...or instance, the size of a menu will be large enough to fit all of the items within the menu. sometimes, a menu will be larger than the available space on the screen; in this situation, the menu may be moved such that it will fit on screen. for instance, instead of appearing below the menu label, the menu popup might appear above the label. you can see this effect in a xul application by moving a
window near the bottom of the screen and clicking a menu or button that has a menu. if a popup is still too large, it will be resized to fit on the screen. arrows will appear on the ends of the menu to allow a user to scroll through the items. a popup can be resized manually using the popup's sizeto method. void sizeto(in long width, in long height); here is an example which resizes a popup to be 2...
Popup Guide - Archive of obsolete content
popups and menus there are various types of popups and menus that may be created. a popup is a menu or floating
window without a title bar, borders or other
window decorations that may extend outside of the edge of the main
window. 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. a brief overview of each type is listed here; more details for each type can be found by following the corresponding links. a popup is not created as a separate
window or file, instead it is included inside another
window or dialog. in this guide, the term 'popup' refers to all types of popups, whereas the term 'menu...
...panels a panel can contain any type of content. it is useful when you wish to display some controls temporarily over the existing ui. for example, a popup search field could be used to allow searching and will disappear when a search term has been entered. a panel is created using the panel element. floating panels a floating popup is a type of panel with a titlebar and acts like an auxiliary
window. usually it would contain tools related to the main
window, or an inspector which displays properties of a selected element. tooltips when the mouse is positioned over a ui control, a tooltip provides a small box with descriptive help about that control. when the mouse is moved away from the control, the tooltip automatically disappears. a tooltip can be created by setting the tooltiptext attr...
controllers - Archive of obsolete content
« xul reference controllers type: nsicontrollers a controllers list attached to the element. the controllers are used to respond to commands. the document's command dispatcher will locate controllers to handle a command by using the focused element's list. ...
...return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </
window> ...
Complete - Archive of obsolete content
ides a user interface in two languages (english and french). it supports firefox, thunderbird, sunbird and flock—these are referred to as "firefox etc." in the rest of this page. it also supports seamonkey. in seamonkey it supports two themes (classic and modern). it provides all five custom toolbar buttons on all the toolbars, and it provides corresponding menu choices in seamonkey's chatzilla
window. the following sections describe this extension's overall structure, and how it implements languages and themes. overall structure this extension's internal name is allcustom. it uses this name as the default file name throughout. where you see a url in the code with no file name, the application uses this default file name and an extension appropriate for the type of file expected. the extension...
... directory. this is useful when files from various components and extensions and all unpacked in the same place—it keeps each set of files separate. in the allcustom directory, the file allcustom.dtd contains the translated strings. the file contents.rdf contains registration data used by seamonkey. localizing the description firefox etc. display a description of the extension in the extensions
window. the description in install.rdf is the default. for each supported locale, a description in install.properties overrides the default. a preference setting in defaults/preferences/allcustom.js makes the connection between the description and the properties file, specifying the url: chrome://allcustom/locale/install.properties again, the application's chrome registry converts this url to the correc...
Adding Methods to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add custom methods to xbl-defined elements. methods in addition to adding script properties to the xbl-defined element, you can also add methods. these methods can be called from a script. 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(). you can define custom methods for your elements using the method element. the general syntax of methods is as follows: <implementation> <method name="method-name"> <parameter name="parameter-name1"/> <parameter name="parameter-name...
...nstructor and destructor. a constructor is called whenever the binding is attached to an element. it is used to initialize the content such as loading preferences or setting the default values of fields. the destructor is called when a binding is removed from an element. this might be used to save information. there are two points when a binding is attached to an element. the first occurs when a
window is displayed. all elements that have xbl-bound content will have their constructors invoked. the order that they are called in should not be relied upon, as they are loaded from various files. the
window's onload handler is not called until after all the bindings have been attached and their constructors finished. the second point is when a binding is attached by changing the -moz-binding style p...
Adding Style Sheets - Archive of obsolete content
s css (cascading style sheets) to customize elements. style sheets a style sheet is a file which contains style information for elements. it was originally designed for html elements but can be applied to xul elements also, or to any xml for that matter. the style sheet contains information such as the fonts, colors, borders, and size of elements. mozilla applies a default style sheet to each xul
window. in many cases, it will suffice to leave the defaults as is. other times, however, you will want to provide a custom style sheet. in general, you will associate a single style sheet with each xul file. you can place a style sheet anywhere you wish. if your xul file is stored remotely and accessed via an http url, you can store the style sheet remotely as well. if you are creating a xul package to...
...fy the style declarations by either modifying the file or by changing the skin. if the user changes the interface skin, the files in a directory other than default will be applied. importing style sheets we've already seen how to import style sheets for use. an example is shown below: <?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?> this might be the first lines of a bookmarks
window. it imports the bookmarks style sheet, which is bookmarks.css. mozilla's skin system is smart enough to figure out which style sheet to use, because the specific filename was not indicated here. we have done a similar thing with the global style sheet file (chrome://global/skin). a style sheet may import styles from another stylesheet using the import directive. normally, you will only import one...
Install Scripts - Archive of obsolete content
e install script is even flexible enough to allow you to uninstall files. for this reason, installers include an install script to handle the installation process. the installer script must be called install.js and must be placed at the top level of the installer archive. the script will contain javascript code which calls a number of install functions. in an html document, or a xul document, the
window object is the root global object. 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(). in an install script, there is no associated
window, however the global object will be an install object which contains a number of functions to customize the install process. some of the install object's functio...
...rrently installed. components include new chrome packages, skins and plugins. when a new component is installed, the registry gets updated. the registry also stores the set of files and version information about the installed components. that way, it is easier to check if a version of your component is already present and only update it if necessary. the component registry works somewhat like the
windows registry does. it consists of a hierarchy of keys and values. you don't need to know much about it to create xul applications unless you are creating your own xpcom components. what you do need to know for an installation is that the registry stores a set of information about your application, such as the file list and versions. all of this information is stored in a key (and within subkeys) tha...
Introduction - Archive of obsolete content
note that only the user interface will be created, with only limited functionality. the actual finding of files will not be implemented. ...
...standalone xulrunner application xulrunner is a packaged version of the mozilla platform which allows you to create standalone xul applications. a browser isn't required to run these applications, as they have their own executable file. xul package in between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate
window. this is used when you don't want to have the larger size of a complete xulrunner application, but don't mind requiring a mozilla browser to be installed to be able to run the application. 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. it is still possi...
Progress Meters - Archive of obsolete content
w as an animating one can be distracting during development. the progress meter would normally only appear while the search is taking place. we'll add a script later to turn it on and off. <textbox id="find-text"/> <html:progress value="50" max="100" style="margin: 4px;"/> <button id="find-button" label="find" default="true"/> the value has been set to 50% so that we can see the meter on the
window. a margin has been set to 4 pixels so that it is separated from the edge of the
window. as was stated earlier, we only want the progress bar to be displayed while the search was occurring. a script will show and hide it as necessary. to make this work you will first have to define the namespace html. do this by adding the below line to your opening
window tag in the findfile.xul. xmlns:html="ht...
...r to be displayed while the search was occurring. a script will show and hide it as necessary. to make this work you will first have to define the namespace html. do this by adding the below line to your opening
window tag in the findfile.xul. xmlns:html="http://www.w3.org/1999/xhtml" the example so far. source view in the next section, we will learn how to add additional elements to the
window using html. « previousnext » ...
Scrolling Menus - Archive of obsolete content
ox with arrows. the arrowscrollbox can be used anywhere a regular box can be used. you don't have to use it in menus. it is always a vertical box and may contain any elements inside it. you could use it to implement a list when you don't want it to be a drop-down. ...
...el="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. however, if you shrink the height of the
window, the scroll arrows will appear. making the
window larger again will cause the arrows to disappear. you can set a css max-height property on the arrowscrollbox to limit the size of the scrolling box and thus make the arrows appear all the time. the arrowscrollbox is mainly useful in menus and popups however. next, we'll see how to add some event handlers to xul elements. « previousnext » ...
Tabboxes - Archive of obsolete content
the user can click each tab to see a different set of options. it is useful in cases when you have more options than will fit in one screen. xul provides a method to create such dialogs. it involves five new elements, which are described briefly here and in more detail below. ...
...e="height: 10px"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="case sensitive search"/> <checkbox id="wordscheck" label="match entire filename"/> </tabpanel> </tabpanels> </tabbox> the tab elements have been placed around the main content of the
window. you can see the two tabs, search and options. clicking on each one will bring up the respective tab pages. as shown by the image, the two options appear on the second tab. the first tab looks pretty much like it did before, apart from the tabs along the top. find files example so far : source view next, we'll look at how to create grids of content. « previousnext » ...
Using Visual Studio as your XUL IDE - Archive of obsolete content
rovides some instructions for installing the schema, but there is an easier way. if you already have a xml or xul file opened, visual studio will add the menu item xml to the main menu. just use xml > schemas... to add the xul.xsd from the package that you have downloaded. the other xsd files will be added automatically. visual studio will use the schema based on the namespace, so make sure your
window element uses the correct xul namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul. 3. xbl if you are writing your own elements in xbl, you can download a xbl schema from mozilla.doslash.org/xblschema. grab the xsd version and add it in the same way, you added the xul schema. to combine both, you can also add your own xbl elements to the xul schema to get autocompletion-support ...
...sponding registry entries extjs and extxml. make sure that visual studio is not running, when you do this. 5. problems that need to be solved there are still some problems for which i did not find a solution yet. 5.1 localization using dtd you will get validation errors in visual studio, if you are localizing your xul files. that has to do with the way mozilla implemented localization: < !doctype
window system "chrome://loomo/locale/main.dtd"> visual studio doesn't recognize the chrome uri prefix, what will give you an error at the previous line ("the uri prefix is not recognized"). as vs doesn't know how the chrome protocol works it can't detect where the dtd file is really located and thus will give you errors wherever you use the entities that are declared in this file. 5.2 text preprocessor...
XUL Template Primer - Bindings - Archive of obsolete content
m the variables specified in the rule's conditions, where a value must be found for each variable for the rule to match. if a <binding> can't be matched, the rule will still fire. example to illustrate how <bindings> work, we'll examine this xul document, which builds a simple content model an rdf/xml file. ...
... we'll use a the following data model to illustrate how bindings work. see the rdf/xml file friends.rdf, below, a simple database with name and address information for some of my good friends. <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="h...
XUL Coding Style Guidelines - Archive of obsolete content
enance headache: convert html files to xul files. use the xml declaration. use namespace. case sensitivity. use chrome urls. javascript code shall be moved out of xul. dtd declaration. predefined entities. other guidelines mentioned in xhtml 1.1 recommendation. see details here. making xul localizable -- mandatory in the past, ui (display) related resource descriptions are stored in *.rc (for
windows client) or *.ad (for unix client) so that they can be localized for a specific language or culture. in the new world, mozilla 5.0, this is not true any more. most of the
windows and dialogs in mozilla will be described using xul. to make xul stream/file localizable, several guidelines are to be adopted to make the translation work easier and less error-prone. the issues are discussed in details ...
...rce documentation. to prevent them from being localized, you may insert a line of comment following the xml declaration as follows. <?xml version="1.0" encoding='utf-8'?> <!-- do not localize this file: [reason...] it isn't part of the build; --> when translators see this line, they won't bother to look at the rest of the file. references xul is discussed in depth in xul language spec and xul
window language. xul localizability issues xhtml 1.1 recommendation namespaces in xml extensible markup language (xml) 1.0 euro sign the unicode standard®, version 2.1 "xml applications" by frank boumphrey. published by wrox press inc. isbn 1-861001-52-5. author: tao cheng newsgroup discussion mailing list original document information author(s): tao cheng last updated date: december 10, 2004 c...
dialogheader - Archive of obsolete content
erty (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the
window. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, to...
...nsertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements dialog,
window ...
elements - Archive of obsolete content
ck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane pref
window progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton to...
...le stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple v vbox w
window wizard wizardpage ...
notificationbox - Archive of obsolete content
the notificationbox element is used to display notifications above an element. typically the element will be a browser, but any element may be used. the notification element is used for each notification, and will be created automatically for each item. each notification will slide in and out as needed. this element is used, for example, to implement the yellow information bar in various firefox
windows. the notification box is a vertical box which may have children. the notifications appear at the top of the box. the notifications may be placed at the bottom by setting the dir attribute to reverse. finding the current notification box within a firefox extension, you can retrieve the current notification box for a specific tab by calling the global function getnotificationbox(): notifybox...
...al box which may have children. the notifications appear at the top of the box. the notifications may be placed at the bottom by setting the dir attribute to reverse. finding the current notification box within a firefox extension, you can retrieve the current notification box for a specific tab by calling the global function getnotificationbox(): notifybox = chromewin.getnotificationbox(notify
window) notifybox = getnotificationbox(notify
window) // applies to current context's
window object here, chromewin is the xul
window (usually just
window), and notify
window is the web content
window for the tab you want to find the notification box for. also it is possible to call function with the same name (they are different) of global object gbrowser: notifybox = gbrowser.getnotificationbox() e...
treecol - Archive of obsolete content
rride this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the column will alternate its state between on and off. this is used, for example, in a mail
window, for a column that indicates that the message is read or unread with a small mark in the cell. if the cycler attribute is not set, the cell is a regular text cell. dragging type: boolean this attribute will be set to true if the column is being dragged. this attribute is set automatically; you shouldn't adjust it yourself. editable type: boolean allows the contents of cells in the...
...olumn picker if ignoreincolumnpicker is not true and hidecolumnpicker is not true on the tree. type type: one of the values below the type of tree column. the default is a text column that displays the content as text. checkbox the content of the columns are checkboxes. progressmeter the content of the columns are a progress meters. this is used in mozilla's download manager
window. text the content of the columns is text. width type: string (representing an integer) the preferred width of the tree column. the value should not include a unit as all values are in pixels. specifying widths for your columns causes gecko to allow the tree to be scrolled horizontally if it is wider than the available space. properties accessibletype type: in...
XULRunner Hall of Fame - Archive of obsolete content
n. latest release: 0.0.2 november 2010 - source clines a clone of color lines (game). latest release: 1.2 november 2008 - source cocoapsyc.app a psyc im/chat client for mac os x (also available as a firefox extension). latest release 0.5 febuary 2010 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib. echofon for
windows a twitter client. emusic remote the emusic remote makes downloading from emusic a snap. latest release: 1.0.0.2 march 2009 - source findthatfont! font managing tool for
windows and linux, that helps you find the font you're looking for. latest release december 2007 flickr uploadr 3.0 upload your photos to flickr. source google adwords editor adwords editor is ...
...ge) a clock application based charactor foxkeh. pyjamas-desktop a python web widget toolkit (similar to pyqt4 and pygtk2) that uses xulrunner dom to implement the widgets and event handling. python-hulahop is required python-hulahop from the olpc sugarlabs a python gtk widget with xulrunner embedded, providing full access to nsi dom and all other xulrunner interfaces, in a gtk
window. it's possible to create your own python web browser with hulahop, and much much more besides. xuljet a framework that helps to create platform independent desktop applications directly in javascript ...
XUL Explorer - Archive of obsolete content
xul explorer is a xulrunner application that provides an easy way to experiment with xul. it’s a simple editor that can preview xul inline or in a separate popup
window. it has a list of code snippets (small fragments of xul or javascript) that can be quickly inserted into the editor. the xul can be loaded from and saved to files. a xul validator and the error console are both available to help debug problems. the help menu provides access to xul information on mdc. there is even simple “keyword” help lookup for xul elements. roadmap features: the preview pane can be toggled with the editor. previewing in a popup
window is still available. option to automatically update the preview as the editor changes. indicator in the statusbar shows errors. double-click to display error ...
...11y checks, strings in dtds and so on - xul checker allow users to add snippets on the fly add sidebars for more functionality - property sidebar and project sidebar support wizards to generate common projects - xul files, js xpcom, and xulrunner applications for more detailed information, see the xul_explorer:planning#feature_planning_for_xul_explorer. ...
symsrv_convert - Archive of obsolete content
make sure you have a symsrv.dll and symsrv.yes in the directory where symsrv_convert is looking. ...
... make sure you have a symsrv.dll and symsrv.yes in the directory where symsrv_convert is looking. ...
Mozilla release FAQ - Archive of obsolete content
g: if you are using unix, use bash-family shells for the build because of the better control over redirection (in case you want to log errors and messages) if you are using win32, using the default shell cmd.exe (as opposed to 4dos or 4nt) will probably yield better results. regarding compilation options, it would be good not to compile with optimization, because it's much slower to build, and on
windows platforms, there's a bug in some versions of vc++ that makes mozilla crash in many common circumstances if compiled with optimization on. what platforms have had successful builds so far? 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 ...
...ull later. if not, post to netscape.public.mozilla.builds or try to fix it yourself. patches are appreciated. in what directory should i be in order to get a cvs update of the source? you should be at the top of the source (the directory with the top-level makefile). if you wish only to refresh a certain area of the tree, you can go to that area and do a cvs update there. ...
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
ussion about how to bind a new theme to a tab bar without losing its original binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests. there have been no responses so far. can't view keith olbermann videos a user inability to launch videos, worked fine for others, ended up being a flash version problem. ...
...riginal binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests. there have been no responses so far. can't view keith olbermann videos a user inability to launch videos, worked fine for others, ended up being a flash version problem. 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? a user looking to be pointed in the right direction of how to use the rss feeds discovery & parsing tool. meetings none this week. author...
2006-09-29 - Archive of obsolete content
ussion about how to bind a new theme to a tab bar without losing its original binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests. there have been no responses so far. can't view keith olbermann videos a user inability to launch videos, worked fine for others, ended up being a flash version problem. ...
...riginal binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests. there have been no responses so far. can't view keith olbermann videos a user inability to launch videos, worked fine for others, ended up being a flash version problem. 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? a user looking to be pointed in the right direction of how to use the rss feeds discovery & parsing tool. meetings none this week. author...
2006-10-20 - Archive of obsolete content
instorming of new features for firefox 3 and future firefox releases. myk will be paying close attention to features dealing with content filtering, manipulation and control in ff3. to contribute visit the wiki discussions i wanna make an addon for firefox a commonly asked question in many newsgroups. 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. method shouldload in "content-policy" category problem ? a student learning xpcom is having issues with the method shouldload in the interface nslcontentpolicy. when the method is executed firefox crashes. as of yet ther...
...beating" which to a lesser extent further in the discussion. how to create firefox extension (chrome) to add images next to urls ? question regarding how to make a firefox extension that would insert an image next to all links in the loaded web pages similar to the mcafee siteadvisor extension. adding support for new uri scheme question regarding creating a new uri scheme for firefox on
windows. helpful information was found here on mozillazine. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - november 10, 2006 - november 17, 2006 announcements none this week. discussions mozilla access to http? to snipurl? user is looking for advice how to access http or snipurl. no replies as of yet. firefox 2.0 -
window.focus() user questions where the change in behaviour in
window.focus() is a bug or was intented. ...
...s intented. firefox 2.0 javascript popup issue user seeks advice about a line of javascript code that worked in firefox 1.5.0.x, but not in firefox 2.0 balloon help user inquires if anyone can explain how to disable the balloon help in firefox 2.0. two questions: (1) launching a separate intance of firefox.exe, and (2) programmatically closing a
window user has two questions about using adobe flex builder debugger in firefox 2.0. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-20 - Archive of obsolete content
orials or any tips on how to get started. on october 20th christopher finke responded to his original post. he stated that he was able to pre-package the extensions that he wanted by following this walkthrough and a little bit of help from this post. christopher would not like to learn how to create a build of firefox with custom extensions and not have those extensions appear in the addons
window. on october 20th jeff walden responded christopher finke's question. jeff provided this link as an answer to christopher finkes' question. nsis and my extension jan vávra is wondering how he could create a win32 installer of thunderbird that when executed, it would also install his extensions of choice. he has already "studied" the makefiles but has had no success in achieving his g...
...studied" the makefiles but has had no success in achieving his goal. on october 20th benjamin smedberg responded jan vávra's question. benjamin smedberg mentioned in his post that jan vávra needs to add the extension files to the packaging manifest, which is used to create the installer. in jan vávra's case he is modifying the thunderbird installer so he needs to modify "mail/installer/
windows/packages-static" announcements decommissioning sparky on friday on october 17th j. paul reed announced that: sparky, the linux performance test machine for the 1.8 branchs, is being decommissioned. he also added that the linux performance test data is now being provided by bl-bldlnx01. paul would like to hear from anyone who is against this decision. he can be contacted via: email: preed@...
2006-11-24 - Archive of obsolete content
however he has been unsuccessful and a bunch of errors. to view the joe's error please check the posting. he is using make 3.80, working with the source tarball for xulrunner 1.8.4,running "make -f client.mk distclean" followed by "make -f client.mk build_all". joe is asking for help on a possible solution to fix his problem. ...
..._gs_returned_failure) [nsijscid.getservice]" nsresult: "0x80570016 (ns_error_xpc_gs_returned_failure)" location: "js frame :: chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4. luke wants to know if compiling xulrunner with a static crt is better or worse than compiling with the mscvr80.dll dependency. firefox 1.5 build on
windows with gtk2 november 23rd: vin is trying to build firefox 1.5.0.3 on
windows xp. the build is working properly with the default toolkit, but when he tries to add ac_add_options --enable-default-toolkit=gtk2 to his .mozconfig file he gets an error. vin is asking for help on how to solve the error. announcements svg build dependency on cairo gfx on 11/22 november 21st: t rowley announced t...
2006-11-17 - Archive of obsolete content
alex vincent ran into some difficulty with xulrunner extension manager not recognizing xulwidgets for verbosio? however he found out that it was a result of his flat-chrome version of xul widgets and works fine with the jarred-chrome version. ...
... alex vincent ran into some difficulty with xulrunner extension manager not recognizing xulwidgets for verbosio? however he found out that it was a result of his flat-chrome version of xul widgets and works fine with the jarred-chrome version. ...
2006-18-24 - Archive of obsolete content
please see mozilla.dev.platform faq for solution. meetings no meetings this week ...
...please see mozilla.dev.platform faq for solution. meetings no meetings this week ...
2006-11-10 - Archive of obsolete content
block images discussion on how where to change source code so that images could be blocked in mozilla. ...
... block images discussion on how where to change source code so that images could be blocked in mozilla. ...
External resources for plugin creation - Archive of obsolete content
have an understanding of what is going on under the hood, regardless of the level of abstraction provided. framework: firebreath project home page project history description (from the project creators): firebreath is a cross-platform browser plugin framework written in c++. plugins created with firebreath work on all major browsers, including firefox 3.0 and later. platforms supported include
windows, linux, and mac os x (intel). feature highlights include thread safety checks, unicode support (with std::wstring), activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays and objects), advanced security features, and more. supported development environments are visual studio on
windows, xcode on mac, and gcc on linux. all platforms r...
...++ class library for developing cross-platform applications. it contains pretty much everything you're likely to need to create most applications, and is particularly good for creating highly-specialised uis and for handling graphics and sound. supported development environments are xcode, visual studio, gcc (and probably any other modern c++ compiler) browser plugins can be built as npapi (mac/
windows), or activex (
windows). project: qtbrowserplugin project home page description (from the home page): the qtbrowserplugin solution makes it easy to write browser plugins that can be used in mozilla firefox, safari, opera, google chrome, qtwebkit and any other web browser that supports the "netscape plugin api", npapi articles, information, and tutorials npapi has been around a very long time, a...
NPN_InvalidateRect - Archive of obsolete content
ntents. syntax #include <npapi.h> void npn_invalidaterect(npp instance, nprect *invalidrect); parameters the function has the following parameters: instance pointer to the plug-in instance to invalidate a portion of. invalidrect the area to invalidate, specified in a coordinate system that originates at the top left of the plug-in's content area. description before a
windowless plug-in can repaint or refresh part of its drawing area, the plug-in must first invalidate the area with either npn_invalidaterect() or npn_invalidateregion(). npn_invalidaterect() causes the npp_handleevent() method to pass an update event or a paint message to the plug-in. after calling this method, the plug-in receives a paint message asynchronously. the browser redraws invalid areas of th...
...paint or refresh part of its drawing area, the plug-in must first invalidate the area with either npn_invalidaterect() or npn_invalidateregion(). npn_invalidaterect() causes the npp_handleevent() method to pass an update event or a paint message to the plug-in. after calling this method, the plug-in receives a paint message asynchronously. the browser redraws invalid areas of the document and any
windowless plug-ins at regularly timed intervals. to immediately send a paint message, the plug-in can call npn_forceredraw() after calling this method. see also npn_forceredraw() npn_invalidateregion() nprect npp ...
NPN_InvalidateRegion - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary invalidates the specified drawing region prior to repainting or refreshing a
windowless plug-in. syntax #include <npapi.h> void npn_invalidateregion(npp instance, npregion invalidregion); parameters the function has the following parameters: instance pointer to the current plug-in instance. invalidregion the area to invalidate, specified in a coordinate system that originates at the top left of the plug-in. description before a
windowless plug-in can repaint or refresh part of its drawing area, the plug-in must first invalidate the area with either npn_invalidaterect() or npn_invalidateregion(). npn_invalidateregion() causes the npp_handleevent() method to pass an update event or a paint message to...
... plug-in can repaint or refresh part of its drawing area, the plug-in must first invalidate the area with either npn_invalidaterect() or npn_invalidateregion(). npn_invalidateregion() causes the npp_handleevent() method to pass an update event or a paint message to the plug-in. if a plug-in calls this method, it receives a paint message later. the browser redraws invalid areas of the document and
windowless plug-ins at regularly timed intervals. to force a paint message, the plug-in can call npn_forceredraw() after calling this method. see also npn_forceredraw() npn_invalidaterect() npregion npp ...
NPN NewStream - Archive of obsolete content
y the plug-in and consumed by the browser. syntax #include <npapi.h> nperror npn_newstream(npp instance, npmimetype type, const char* target, npstream** stream); parameters the function has the following parameters: instance pointer to current plug-in instance. type mime type of the stream. target name of the target
window or frame, or one of several special target names. for values, see npn_geturl. stream stream to be created by the browser. returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npn_newstream creates a new stream of data produced by the plug-in and consumed...
...g its own mime type and a new target name in a call to npn_newstream. the stream is returned in the stream parameter. the plug-in can use this object in subsequent calls to npn_write to write data into the stream. when the plug-in has written all of its data into the stream, npn_destroystream terminates the stream and deallocates the npstream object. the target parameter is the name of the target
window or frame, or one of several special target names. for parameter values and information about how to use them, see npn_geturl. if the new stream has the target of _self, this function should return an invalid_param np error. see also npp_newstream, npp_write, npp_destroystream, npstream, npp ...
NPP_Destroy - Archive of obsolete content
function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npp_destroy releases the instance data and resources associated with a plug-in. the browser calls this function when a plug-in instance is deleted, typically because the user has left the page containing the instance, closed the
window, or quit the browser. you should delete any private instance-specific information stored in the plug-in's instance->pdata at this time. if this function is deleting the last instance of a plug-in, np_shutdown is subsequently called. use np_shutdown to delete any data allocated in np_initialize and intended to be shared by all instances of a plug-in. use the optional save parameter if you want t...
... see also npp_new, np_shutdown, npp, npn_memalloc, npsaveddata ...
NPRect - Archive of obsolete content
plug-in api summary represents a rectangular area of a plug-in's content area. ...
...t; uint16 bottom; uint16 right; } nprect; fields the data structure has the following fields: top, left, bottom, right the top, left, bottom, and right sides of the rectangle. description nprect defines the bounding box of the area of the plug-in
window to be updated, painted, invalidated, or clipped to. see also npn_forceredraw() npn_invalidaterect() npn_invalidateregion() npregion np
window ...
NPRegion - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary represents a platform-defined region of a page. syntax
windows: typedef hrgn npregion; mac os x: typedef rgnhandle npregion; note: this may need to be updated for the cocoa event model. x
windows: typedef region npregion; description npregion defines the region of the plug-in
window to be updated, painted, invalidated, or clipped to. ...
...n; note: this may need to be updated for the cocoa event model. x
windows: typedef region npregion; description npregion defines the region of the plug-in
window to be updated, painted, invalidated, or clipped to. for information about the region type definition used by your platform, see your platform documentation. ...
The First Install Problem - Archive of obsolete content
to leave dlls (and xpt files, if applicable) in a location that gecko can discover at runtime. this document presents a consistent way to do that. proposed solution on mac os x, the system's plugins folder will probably suffice as an install location in which browsers installed later can find their plugins. on linux, a per-profile installation of plugins seems unavoidable. this document presents
windows solutions for plugin vendors. the solution suggests that plugin vendors ought to leave dlls on a
windows desktop whether or not a netscape gecko browser is detected, and then write keys in the
windows registry giving future netscape gecko browsers the path where the plugin resides and meta-information about how to load the plugin. this document supplements the key parsing methodology suggested f...
...hing the corporation that makes myapplication (mycompany inc.) determines. note that myapplication consists of one dll (which is an npapi plugin handling a given mimetype -- say application/x-myapp) and one xpt file, for scriptable interfaces. caveat emptor: if the key cannot be created under hkey_local_machine, create it as hkey_current_user\software\mozillaplugins\ under hkey_current_user. on
windows xp and
windows 2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, some installers may need to write to the hkey_current_user key; this doesn't require administrator privileges. traditionally, hkey_current_user is a copy of everything in hkey_local_machine. at present plugins registered using the hkey_current_user\software\mozillaplugins\ tree...
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
that you have a look at the gecko plugin api reference since this document will include information that assumes that you are already familiar with the way that plugins are currently hosted as well as the apis. key differences all of the interfaces that you would normally expect to exist in the plugins will still exist when using xembed plugins. there are only two key differences: in the npp_set
window call, the
window parameter will be the xid of the hosting xembed
window. as an implementation note, this is really the xid of a gtksocket
window. in your plugin instance npp_getvalue call you need to make sure that you support the new nppvpluginneedsxembed value. more information is included on this below. hosting using gtk2.x included below are a couple of code snippits that should help you get...
...mation is included on this below. hosting using gtk2.x included below are a couple of code snippits that should help you get started as well as some hints on building a successful plugin. please use the following diagram as a reference: as you can see from the diagram above, it's pretty easy to set up a plugin using gtk2. the general idea is that you use the xid that was passed into your npp_set
window() call and create a gtkplug to host inside of that socket. since the gtkplug is just a container, you can add your own widgets at your leisure with the packing you prefer. telling mozilla you support xembed as mentioned above, you will need to tell mozilla that you support the xembed protocol for hosting plugins. for backwards compatibility reasons if you don't tell mozilla that you support it it...
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
fest comes into play. update the chrome manifest remember way back in the first article in this series when we created our chrome manifest, which we haven't touched since? it's time to touch it. as you may (or may not) recall, that file tells the application what xul code your extension's interface needs to overlay onto. for firefox, we overlaid onto browser.xul, which describes a firefox browser
window. ...
...er.xul, which describes a firefox browser
window. we need to add lines to the manifest for thunderbird and sunbird, like this: # thunderbird overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul these lines cause the main thunderbird message list
window and the main
window in sunbird to be the target of the overlays we apply in the stockwatcher2.xul file. with these simple tweaks, this extension will work in all three of these applications, and works exactly the same way in them all. ...
Using IO Timeout And Interrupt On NT - Archive of obsolete content
due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: if a thread calls an nspr io function on a file descriptor and the io function fails with <tt>pr_io_timeout_error</tt> or <tt>pr_pending_interrupt_error</tt>, the file descriptor must be closed before the thread exits. in this memo we explain the problem this guideline is trying to work around and discuss its limitations. nspr io on nt the io model of nspr 2.0 is synchronous and blocking. ...
...ead calling an io function is blocked until the io operation finishes, either due to a successful io completion or an error. if the io operation cannot complete before the specified timeout, the io function returns with <tt>pr_io_timeout_error</tt>. if the thread gets interrupted by another thread's <tt>pr_interrupt()</tt> call, the io function returns with <tt>pr_pending_interrupt_error</tt>. on
windows nt, nspr io is implemented using nt's overlapped (also called asynchronous) io. when a thread calls an io function, the thread issues an overlapped io request using the overlapped buffer in its <tt>prthread</tt> structure. then the thread is put to sleep. in the meantime, there are dedicated internal threads (called the idle threads) monitoring the io completion port for completed io requests. i...
Browser Feature Detection - Archive of obsolete content
cing="0">'); for (i = 0; i < features.length; i++) { if (features[i].supported) document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\/td><\/tr>'); else document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:red">' + features[i].supported + '<\/td><\/tr>'); } document.write('<\/table>'); } var oldonerror =
window.onerror; // suppress error messages...
window.onerror = null; document.write('<p><b> your browser ' + navigator.useragent + '<\/b><\/p>'); generatereport(document, 'domcore1', 'document'); generatereport(document, 'domcore2', 'document'); generatereport(document, 'domhtml', 'document'); generatereport(document.body.style, 'domcss1', 'document.body.style'); generatereport(document.body.sty...
...
window.onerror = null; document.write('<p><b> your browser ' + navigator.useragent + '<\/b><\/p>'); generatereport(document, 'domcore1', 'document'); generatereport(document, 'domcore2', 'document'); generatereport(document, 'domhtml', 'document'); generatereport(document.body.style, 'domcss1', 'document.body.style'); generatereport(document.body.style, 'domcss2', 'document.body.style');
window.onerror = oldonerror; see also browser detection and cross browser support comparison of layout engines web specifications supported in opera 9 what's new in internet explorer 7 (script) original document information author(s): (unknown) last updated date: updated march 16, 2003 copyright information: copyright © 2001-2003 netscape. note: this reprinted article was originally par...
-ms-filter - Archive of obsolete content
as of internet explorer 10 this feature was removed and should no longer be used. ...
...when you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). use commas (,) to separate multiple values, as shown in the examples section. an object must have layout for the filter to render. a simple way to accomplish this is to give the...
-ms-ime-align - Archive of obsolete content
the -ms-ime-align css property is a microsoft extension aligning the input method editor (ime) candidate
window box relative to the element on which the ime composition is active. the extension is implemented in microsoft edge and internet explorer 11. ime candidate lists are positioned on the screen with sufficient size to allow basic text input. in some cases, the ime may enforce a reasonable minimum size. in the case of -ms-ime-align: after, an ime might adjust the candidate
window and keyboard input behavior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation. initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword valu...
...avior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation. initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword values */ -ms-ime-align: auto; -ms-ime-align: after; values auto initial value. the ime may align the candidate
window in any manner. after the ime should attempt to align the candidate
window below the element (in left-to-right and right-to-left layouts). formal syntax auto | after specifications not part of any specification. ...
-ms-scroll-translation - Archive of obsolete content
vertical-to-horizontal vertical to horizontal translation, as described in remarks, will take place when appropriate. none no scroll wheel translation takes place. inherit the initial value. the value is inherited from the element's parent element. formal syntax none | vertical-to-horizontal specifications not part of any specification. remarks this property requires
windows 8 or later. this property has no effect on non-scrollable elements. if your javascript is listening for scroll wheel document object model (dom) events, the events that occur when the user scrolls vertically will always be vertical scroll events, not horizontal scroll events. similarly, the events that occur when the user scrolls horizontally will always be horizontal scroll events. this prope...
...l events. by setting the -ms-scroll-translation property to vertical-to-horizontal, you are specifying that vertical scroll events should be interpreted as their corresponding horizontal scroll events. this property's initial value is inherit on all elements, except the <html> element, where it defaults to none. this property has no effect on keyboard interaction. the default css templates for
windows apps using javascript, "ui-light.css" and "ui-dark.css", set this property to vertical-to-horizontal by default on the <html> element. ...
CSS - Archive of obsolete content
olors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property. normally, a <xul:stack> will change its size so that all of its child elements are completely visible. for example, moving a child of the stack far to the right will widen the stack so the child remains visible.-moz-text-blinkthe -moz-text-blink non-standard mozilla css extension specifies the blink mode.-moz-
window-shadowthe -moz-
window-shadow css property specifies whether a
window will have a shadow. it only works on mac os x.-ms-acceleratorthe -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression css property is a microsoft extension that specifies the block progress...
...the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css property is a microsoft extension that specifies the ...
ActiveXObject - Archive of obsolete content
the activexobject object enables and returns a reference to an automation object. this object is used only to instantiate automation objects, and has no members. syntax let newobj = new activexobject(servername.typename[, location]) parameters servername the name of the application providing the object. typename the type or class of the object to create. location optional the name of the network server where the object is to be created. remarks automation servers provide at least one type of object. ...
...xcelsheet.saveas("c:\\test.xls"); // close excel with the quit method on the application object. excelsheet.application.quit(); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. not supported in
windows 8.x store apps. note: creating an activexobject on a remote server is not supported in internet explorer 9 standards mode, internet explorer 10 standards mode, internet explorer 11 standards mode, and
windows store apps or later. ...
Enumerator - Archive of obsolete content
the enumerator object enables enumeration of items in a collection. syntax enumobj = new enumerator([collection]) parameters enumobj the variable name to which the enumerator object is assigned. collection optional any collection object. remarks collections differ from arrays in that the members of a collection are not directly accessible. instead of using indexes, as you would with arrays, you can move the current item pointer only to the first or next element of a collection. ...
... ...
Error.description - Archive of obsolete content
applies to: error object see also number property (error) message property (error) name property (error) ...
... applies to: error object see also number property (error) message property (error) name property (error) ...
ScriptEngineBuildVersion - Archive of obsolete content
explorer. the scriptenginebuildversion function bets the build version number of the scripting engine in use. syntax scriptenginebuildversion() remarks the return value corresponds directly to the version information contained in the dynamic-link library (dll) for the scripting language in use. example the following example illustrates the use of the scriptenginebuildversion function: if(
window.scriptenginebuildversion) { console.log(
window.scriptenginebuildversion()); } // output: <current build version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store app...
...riptenginebuildversion) { console.log(
window.scriptenginebuildversion()); } // output: <current build version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store apps (
windows 8 and
windows phone 8.1). scriptengine function scriptenginemajorversion function scriptengineminorversion function ...
ScriptEngineMajorVersion - Archive of obsolete content
explorer. the scriptenginemajorversion function gets the major version number of the scripting engine in use. syntax scriptenginemajorversion() remarks the return value corresponds directly to the version information contained in the dynamic-link library (dll) for the scripting language in use. ...
...ts the major version number of the scripting engine in use. syntax scriptenginemajorversion() remarks the return value corresponds directly to the version information contained in the dynamic-link library (dll) for the scripting language in use. example the following example illustrates the use of the scriptenginemajorversion function: if (
window.scriptenginemajorversion) { console.log(
window.scriptengine()); } output: <current major version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store apps (
windows 8 and
windows phone 8.1). ...
ScriptEngineMinorVersion - Archive of obsolete content
xplorer. the scriptengineminorversion function gets the minor version number of the scripting engine in use. syntax scriptengineminorversion() remarks the return value corresponds directly to the version information contained in the dynamic-link library (dll) for the scripting language in use. example the following example illustrates the use of the scriptengineminorversion function. if (
window.scriptengineminorversion) { console.log(
window.scriptengineminorversion()); } //output: <current minor version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store app...
...riptengineminorversion) { console.log(
window.scriptengineminorversion()); } //output: <current minor version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards. also supported in store apps (
windows 8 and
windows phone 8.1). ...
@cc_on - Archive of obsolete content
conditional compilation is supported in internet explorer 10 standards mode and in all earlier versions. the @cc_on statement activates conditional compilation support within comments in a script. syntax @cc_on remarks the @cc_on statement activates conditional compilation within comments in a script. it is not common to use conditional compilation variables in scripts written for asp or asp.net pages or command-line programs because the capabilities of the compilers can be determined by using other methods. ...
...n will accept your script as valid syntax: an @if or @set statement outside of a comment also activates conditional compilation. example the following example illustrates the use of the @cc_on statement. /*@cc_on @*/ /*@ document.write("javascript version: " + @_jscript_version + "."); document.write("<br />"); @if (@_win32) document.write("running on the 32-bit version of
windows."); @elif (@_win16) document.write("running on the 16-bit version of
windows."); @else document.write("running on a different operating system."); @end @*/ requirements supported in all versions of internet explorer, but not in
windows 8.x store apps. ...
@if - Archive of obsolete content
conditional compilation is supported in internet explorer 10 standards mode and in all earlier versions. the @if statement conditionally executes a group of statements, depending on the value of an expression. syntax @if ( condition1 ) text1 [@elif ( condition2 ) text2] [@else text3] @end parameters text1 optional text to be parsed if condition1 is true. text2 optional text to be parsed if condition1 is false and condition2 is true. text3 optional text to be parsed if both condition1 and condition2 are false. ...
...onal compilation code in comments. this enables hosts that do not support conditional compilation to ignore it. example the following example illustrates the use of the @if...@elif...@else...@end statement. /*@cc_on @*/ /*@ document.write("javascript version: " + @_jscript_version + "."); document.write("<br />"); @if (@_win32) document.write("running on a 32-bit version of
windows."); @elif (@_win16) document.write("running on a 16-bit version of
windows."); @else document.write("running on a different operating system."); @end @*/ requirements supported in all versions of internet explorer, but not in
windows 8.x store apps. ...
@set - Archive of obsolete content
conditional compilation is supported in internet explorer 10 standards mode and in all earlier versions. the @set statement creates variables used with conditional compilation statements. syntax @set @varname = term parameters varname valid javascript variable name. must be preceded by an "@" character at all times. term zero or more unary operators followed by a constant, conditional compilation variable, or parenthesized expression. remarks numeric and boolean variables are supported for conditional compilation. strings are not. ...
... see also conditional compilation conditional compilation variables @cc_on statement @if statement ...
Object.prototype.watch() - Archive of obsolete content
you can usually use setters and getters or proxies instead. the watch() method watches for a property to be assigned a value and runs a function when that occurs. ...
...t. to remove a watchpoint, use the unwatch() method. by default, the watch method is inherited by every object descended from object. the javascript debugger has functionality similar to that provided by this method, as well as other debugging options. for information on the debugger, see venkman. in firefox, handler is only called from assignments in script, not from native code. for example,
window.watch('location', myhandler) will not call myhandler if the user clicks a link to an anchor within the current document. however,
window.location += '#myanchor' will call myhandler. note: calling watch() on an object for a specific property overrides any previous handler attached for that property. examples using watch and unwatch const o = { p: 1 }; o.watch('p', (id, oldval, newval) => { ...
LiveConnect Overview - Archive of obsolete content
see the javascript reference for more information about these classes. locating the liveconnect classes in older versions of the netscape browser, these classes were distributed along with the browser. starting with javascript 1.2, these classes are delivered in a .jar file; in previous versions of javascript, these classes are delivered in a .zip file. for example, with netscape navigator 4 for
windows nt, the classes are delivered in the java40.jar file in the program\java\classes directory beneath the navigator directory. more recently, the classes have been distributed with sun's java runtime; initially in the file "jaws.jar" in the "jre/lib" directory of the runtime distribution (for jre 1.3), then in "plugin.jar" in the same location (jre 1.4 and up). using the liveconnect classes with th...
... classes with the jdk to access the liveconnect classes, place the .jar or .zip file in the classpath of the jdk compiler in either of the following ways: create a classpath environment variable to specify the path and name of .jar or .zip file. specify the location of .jar or .zip file when you compile by using the -classpath command line parameter. you can specify an environment variable in
windows nt by double-clicking the system icon in the control panel and creating a user environment variable called classpath with a value similar to the following: c:\program files\java\jre1.4.1\lib\plugin.jar see the sun jdk documentation for more information about classpath. note: because java is a strongly typed language and javascript is weakly typed, the javascript runtime engine converts argument...
JSObject - Archive of obsolete content
t retrieves the value of an array element of a javascript object. removemember removes a property of a javascript object. setmember sets the value of a property of a javascript object. setslot sets the value of an array element of a javascript object. tostring converts a jsobject to a string. the netscape.javascript.jsobject class has the following static method: get
window gets a jsobject for the
window containing the given applet. call method. calls a javascript method. equivalent to "this.methodname(args[0], args[1], ...)" in javascript. declaration public object call(string methodname, object args[]) equals method. determines if two jsobject objects refer to the same instance. overrides: equals in class java.lang.object declaration public boolean...
..."this". declaration public object eval(string s) getmember method. retrieves the value of a property of a javascript object. equivalent to "this.name" in javascript. declaration public object getmember(string name) getslot method. retrieves the value of an array element of a javascript object. equivalent to "this[index]" in javascript. declaration public object getslot(int index) get
window static method. returns a jsobject for the
window containing the given applet. this method is useful in client-side javascript only. declaration public static jsobject get
window(applet applet) removemember method. removes a property of a javascript object. declaration public void removemember(string name) setmember method. sets the value of a property of a javascript object. equivalent ...
Writing JavaScript for XHTML - Archive of obsolete content
ot' documents.) to test the following examples locally, use firefox's extension switch. just write an ordinary (x)html file and save it once as test.html and once as test.xhtml. problem: nothing works after switching the mime type suddenly no inline script works anymore. even the plain old alert() method is gone. the code looks something like this: <script type="text/javascript"> //<!--
window.alert("hello world!"); //--> </script> solution: the cdata trick this problem usually arises, when inline scripts are included in comments. this was common practice in html, to hide the scripts from browsers not capable of js. in the age of xml comments are what they were intended: comments. before processing the file, all comments will be stripped from the document, so enclosing your scri...
...efore processing the file, all comments will be stripped from the document, so enclosing your script in them is like throwing your lunch in a piranha pool. moreover, there's really no point to commenting out your scripts -- no browser written in the last ten years will display your code on the page. the easy solution is to do away with the commenting entirely: <script type="text/javascript">
window.alert("hello world!"); </script> this will work so long as your code doesn't contain characters which are "special" in xml, which usually means < and &. if your code contains either of these, you can work around this with cdata sections: <script type="text/javascript"> <![cdata[ // is the variable a non-negative integer less than 10? if (variable < 10 && variable >= 0) action(); ...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
ble through the apple user community. it changed just enough to make it awkward, but not enough to where the user could not adjust. apple received both good and bad press; and they lost some users and won some others over. an example of how consistent user experience wins user loyalty can be seen in how microsoft ensures common behavior across applications. for example, in word, excel, and other
windows applications, we know that pressing ctl+c within any microsoft product means copy. the behavior is consistent and predictable and has subsequently become the de-facto standard. the reason it is consistent and predictable is because microsoft has established a corporate set of usability standards and supports the relevant international standards. accessibility no organization can afford to over...
...-application coding, or code reuse. for example, if a development engineer writes an application following the ansi standard of c and c++, and writes that code on a particular platform, that code can be compiled on any other platform and operating system that supports ansi standards. microsoft products are difficult to export because they introduced mfc (microsoft foundation classes), which is a
windows-only standard that does not follow the ansi standard. quality assurance we know from experience that without rigorous testing, our products can fail miserably when we introduce them into the market. technical support is costly not only in regard to support staff costs, but also in respect to customer dissatisfaction. that is why organizations also need to apply standards to quality testing. b...
RDF in Mozilla FAQ - Archive of obsolete content
datasources attribute, there are often times when you won't know the datasource that you want to add until after the xul is loaded. for example, your xul may need compute the datasources that it wants to display in an onload handler. or, it may need to add a datasource later based on some user action. here's a simple example that illustrates how to do this. let's start with the following xul. <
window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> ... <tree id="my-tree" datasources="rdf:null"> ... </tree> ... </
window> assuming that we've aquired a datasource somehow (e.g., like this), the following sample code illustrates how to add that datasource to the template, and then force the template to rebuild itself based on the newly added datasource's contents. var ...
... to track this? -- danbri) another possible problem: for remotely-loaded xul and rdf, you might need to adjust mozilla's security restrictions (see belowfor example code). if xul isn't loading your rdf, and the mimetype is ok, this could well be your problem. you can use the rdfcat and rdfpoll utilities to verify that the rdf/xml is actually valid. both of these programs are built by default on
windows, and on linux when the configure --enable-tests is specified. rdfcat url takes as a parameter a url from which to read an rdf/xml file, and will "cat" the file back to the console. you can use it to verify that the rdf/xml that you've written is being properly parsed by mozilla. rdfpoll url [interval ] takes as a parameter a url from which to read an rdf/xml file. it also accepts an opti...
The Business Benefits of Web Standards - Archive of obsolete content
costs and uncertain quality and integrity of proprietary pay per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix,
windows...) web content is increasingly being accessed by a growing number of user agents other than browsers, or by browsers on different platforms - for example mobile telephones. feed content such as rss and atom simply will not work without being implemented by following the requisite standard. assumptions about the user and their platform based on erroneous thinking about the anticipated user com...
...y fixing tag soup is a black hole of time and money. well-formed code significantly reduces rendering differences in various browsers. using validation tools such as the w3c validator helps by spotting coding errors and making sure html code is well-formed, which eliminates ambiguity in parsing by browsers. standards embrace new browsers more and more browsers, other than internet explorer for
windows, are used to surf the web:
windows: msie, browsers using mozilla's gecko rendering engine, opera mac: ms-tasman (ie/mac's rendering engine), gecko-based browsers, safari, opera linux: gecko-based browsers, khtml-based browsers, opera overall, 5 different rendering engines are used to surf the web using dozens of browsers on 3 platforms. according to many sources, gecko-based browsers are...
XQuery - Archive of obsolete content
ariable definitions, xml-inclusion, etc. while xquery is currently not supported in firefox (whether through javascript to developers or to browser users), at least one extension has been developed to give a preliminary support for xquery for browser users (and serving as a simple model for how xquery can be implemented within extensions). xquseme is a working proof-of-concept (so far tested on
windows and linux with java installed; mac does not work) extension which allows one to perform xqueries on external urls, the currently loaded webpage (even if originally from poorly formed html), and/or xml (including well-formed xhtml) documents stored locally. the extension now includes and interfaces with the open-source version of saxonica's saxon b (though this extension currently only performs ...
...ons at present, the extension works simply by using liveconnect to work with berkeley db xml's java api (and via a java wrapper class which circumvents liveconnect's current inability to handle some types of java exceptions properly). 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. however, the extension demonstrates a technique which does not depend on using xpcom, while still giving full privileges. tutorials w3schools learn xquery in 10 minutes an introduction to xquery ...
Index - Game development
/webgl games a crisp pixel art look, even on high definition monitors. 28 efficient animation for web games animation, games, javascript this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. we touch on css transitions and css animations, and javascript loops involving
window.requestanimationframe. 29 implementing controls using the gamepad api controls, gamepad api, gamepads, games, javascript, controllers the gamepad api is very easy to develop with. now it's easier than ever to deliver a console-like experience to the browser without the need for any plugins. you can play the full version of the hungry fridge game directly in your browser, inst...
...71 touch event horizon needscontent, needsexample this tutorial shows how to use touch events to create a game on a <canvas>. this is a multi-player game relying on the tap and drag gestures. 72 visual js ge canvas, javascript, server, game engine visual-js gameengine is a small but comprehensive canvas/websocket-based game engine with gui source editor only for
windows. the server is based on node.js vs mysql, the client made in four variant on a javascript frameworks for 2d canvas js , three.js , webgl2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack. 73 visual typescript game engine html, game engine 74 visual-js game engine html5, javascript, tools, game engine, visual-js creator : niko...
Building up a basic demo with the PlayCanvas engine - Game development
on to begin developing our game we have to create the playcanvas application first (using the given <canvas> element), and then start the update loop. add the following code to the bottom of your second <script> element: var app = new pc.application(canvas); app.start(); the pc global object contains all the playcanvas functions available in the engine. next, we'll set the canvas to fill the
window, and automatically change its resolution to be the same as the canvas size. again, add the following lines at the bottom of your script. app.setcanvasfillmode(pc.fillmode_fill_
window); app.setcanvasresolution(pc.resolution_auto); camera now when the setup code is in place we need to think about implementing the standard scene components: camera, lights and objects. let's start with the camera...
...enter of the scene on the z axis. this allows us to make some space to visualize the objects that we will create later on. note: the distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. try saving the file and loading it in your browser. you should now see a gray
window. congratulations! geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development playcanvas provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. drawing everything for given shape is taken care of by the engine, so we ca...
Desktop gamepad controls - Game development
ing to caniuse.com. the list of supported devices is also quite extensive — most popular gamepads (e.g. xbox 360 or ps3) should be suitable for web implementations. pure javascript approach let's think about implementing pure javascript gamepad controls in our little controls demo first to see how it would work. ...
... layout: [], cache: [], status: [], pressed: function(button, state) {} } axes: { status: [] } }; the controller variable stores the information about the connected gamepad, and there's an active boolean variable we can use to know if the controller is connected or not. the connect() and disconnect() functions are bound to the following events:
window.addeventlistener("gamepadconnected", gamepadapi.connect);
window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); they are fired when the gamepad is connected and disconnected respectively. the next function is update(), which updates the information about the pressed buttons and axes. the buttons variable contains the layout of a given controller (for example which buttons are w...
Implementing controls using the Gamepad API - Game development
prising given that they now use chrome's blink engine.) and microsoft implemented support for the api in edge recently, which means four main browsers now supporting the gamepad api. which gamepads are best? the most popular gamepads right now are those from the xbox 360, xbox one, ps3 and ps4 — they have been heavily tested and work well with the gamepad api implementation in browsers across
windows and mac os x. there's also a number of other devices with various different button layouts that more or less work across browser implementations. the code discussed in this article was tested with a few gamepads, but the author's favorite configuration is a wireless xbox 360 controller and the firefox browser on mac os x. case study: hungry fridge the github game off ii competition ran in nov...
...','dpad-down','dpad-left','dpad-right', 'start','back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually get. next, we set up two event listeners to get the data:
window.addeventlistener("gamepadconnected", gamepadapi.connect);
window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire. if the api worked without any interaction from the user it could be used to fingerprint them without their knowledge. both functions are fairly simp...
Efficient animation for web games - Game development
there are several techniques worth knowing that will improve the performance of your game or application whilst also using less battery life, especially on low-end devices. ...
...re-layout, or other expensive calculations. if you are setting a transform on something that would overlap its container’s bounds, you may want to set overflow: hidden on that container for the duration of the animation. use requestanimationframe when you are animating <canvas> content, or when your dom animations absolutely must synchronise with canvas content animations, do make sure to use
window.requestanimationframe, and not older methods such as
window.settimeout. assuming you are running in an arbitrary browsing session, you can never really know how long the browser will take to draw a particular frame. requestanimationframe causes the browser to redraw and call your function before that frame gets to the screen. the downside of using this vs. settimeout is that your animations must ...
2D maze game with device orientation - Game development
to the ball, thus increase the velocity in the proper direction. implementing the device orientation api probably the most interesting part of the game is its usage of the device orientation api for control on mobile devices. thanks to this you can play the game by tilting the device in the direction you want the ball to roll. ...
... { this.bouncesound.play(); } that's all — loading and playing the sounds is easy with phaser. implementing the vibration api when collision detection works as expected let's add some special effects with the help from the vibration api. the best way to use it in our case is to vibrate the phone every time the ball hits the walls — inside the wallcollision function: if("vibrate" in
window.navigator) {
window.navigator.vibrate(100); } if the vibrate method is supported by the browser and available in the
window.navigator object, vibrate the phone for 100 miliseconds. that's it! adding the elapsed time to improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion...
Visual JS GE - Game development
the server is based on node.js vs mysql, the client made in four variant on a javascript frameworks for 2d canvas js , three.js , webgl2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack. installation and setup first of all download visual-js from bitbucket. extract the package into your root folder. ...
...e project_instance/res/. next, run the command server_instance/node res.js. after this has finished processing, restart the web page by entering the following in the console: resource.test_res. resource objects contain the path data for all your images. the actual image objects will be created after you add animation to the game objects. this is good because it is memory safe. visual js.exe
windows gui freeware only for
windows users. contains the following tools. visual_js.exe version 1.0 — comes with source editor. ml_sys.exe — multilanguage tool for string labels (smart xml operation; no empty tags). scriptingjs.exe — based on javascriptobfuscator.com api. makelib.exe — neede for font bug fixing. video tutorials pencil component particle virtual kayboard ...
TCP slow start - MDN Web Docs Glossary: Definitions of Web-related terms
ating congestion. tcp slow start is an algorithm used to detect the available bandwidth for packet transmission, and balances the speed of a network connection. it prevents the appearance of network congestion whose capabilities are initially unknown, and slowly increases the volume of information diffused until the network's maximum capacity is found. ...
...slow start also terminates when congestion is experienced. congestion control congestion itself is a state that happens within a network layer when the message traffic is too busy it slows the network response time. the server sends data in tcp packets, the user's client then confirms delivery by returning acknoledgements, or acks. ...
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
jax calls, and event handling. jquery uses a format, $(selector).action() to assign an element(s) to an event. to explain it in detail, $(selector) will call jquery to select selector element(s), and assign it to an event api called .action(). ...
... in detail, $(selector) will call jquery to select selector element(s), and assign it to an event api called .action(). ...
WAI-ARIA basics - Learn web development
...
... an aria-relevant value of all instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. this is useful because the user will want to know what errors are left, not just what has been added or removed from the list. we could go further with our aria usage, and provide some more validation help. h...
What is accessibility? - Learn web development
vision, and color blindness. many people with visual impairments use screen magnifiers that are either physical magnifiers or software zoom capabilities. most browsers and operating systems these days have zoom capabilities. some users will rely on screen readers, which is software that reads digital text aloud. some screen reader examples include: some are paid commercial products, like jaws (
windows) and dolphin screen reader (
windows). some are free products, like nvda (
windows), chromevox (chrome,
windows and mac os x), and orca (linux). some are built into the operating system, like voiceover (macos, ipados, ios), narrator (microsoft
windows), chromevox (on chrome os), and talkback (android). it is a good idea to familiarise yourself with screen readers; you should also set up a scre...
... underlying operating system) that expose information useful for assistive technologies (ats) — ats mostly tend to make use of semantic information, so this information doesn't include things like styling information, or javascript. this information is structured in a tree of information called the accessibility tree. different operating systems have different accessibility apis available :
windows: msaa/iaccessible, uiaexpress, iaccessible2 mac os x: nsaccessibility linux: at-spi android: accessibility framework ios: uiaccessibility where the native semantic information provided by the html elements in your web apps falls down, you can supplement it with features from the wai-aria specification, which add semantic information to the accessibility tree to improve accessibility. you c...
How CSS is structured - Learn web development
element. however, a media query follows that defines a blue background if the browser viewport is wider than 30em. body { background-color: pink; } @media (min-width: 30em) { body { background-color: blue; } } you will encounter other @rules throughout these tutorials. see if you can add a media query that changes styles based on the viewport width. change the width of your browser
window to see the result. shorthands some properties like font, background, padding, border, and margin are called shorthand properties. this is because shorthand properties set several values in a single line. for example, this one line of code: /* in 4-value shorthands like padding and margin, the values are applied in the order top, right, bottom, left (clockwise from the top). there are also ...
...de editor becomes a way to efficiently find a section of code. /* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* let's special case the global font size. ...
How do I use GitHub Pages? - Learn web development
if you've put your website in a directory called test-site on your desktop: cd desktop/test-site when the command line is pointing inside your website directory, type the following command, which tells the git tool to turn the directory into a git repository: git init an aside on command line interfaces the best way to upload your code to github is via the command line — this is a
window where you type in commands to do things like create files and run programs, rather than clicking inside a user interface. it will look something like this: note: you could also consider using a git graphical user interface to do the same work, if you feel uncomfortable with the command line. every operating system comes with a command line tool:
windows: command prompt can be accessed by...
...e in commands to do things like create files and run programs, rather than clicking inside a user interface. it will look something like this: note: you could also consider using a git graphical user interface to do the same work, if you feel uncomfortable with the command line. every operating system comes with a command line tool:
windows: command prompt can be accessed by pressing the
windows key, typing command prompt, and choosing it from the list that appears. note that
windows has its own command conventions differing from linux and os x, so the commands below may vary on your machine. os x: terminal can be found in applications > utilities. linux: usually you can pull up a terminal with ctrl + alt + t. if that doesn't work, look for terminal in an app bar or menu. this may s...
Example 4 - Learn web development
ueryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- //
window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); });
window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (opt...
...istener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); });
window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, inde...
The web and web standards - Learn web development
ss the best practices you should employ to make sure you are using those technologies in the best way that you can. when doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site: user 1 might be looking at it on an iphone, with a small, narrow screen. user 2 might be looking at it on a
windows laptop with a widescreen monitor attached to it. user 3 might be blind, and using a screenreader to read the web page out to them. user 4 might be using a really old desktop machine that can't run modern browsers. because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use ...
...d then more work to fix those failures. responsive web design is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. an obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. try adjusting the width of your browser
window now, and see what happens. performance means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else. accessibility means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). this includes people with visu...
Images in HTML - Learn web development
how solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
... var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
From object to iframe — other embedding technologies - Learn web development
/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...should give embedded content only the permissions needed for doing its job. of course, this applies to your own content, too. a container for code where it can be used appropriately — or for testing — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox. unsandboxed content can do way too much (executing javascript, submitting forms, popup
windows, etc.) by default, you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example. if absolutely required, you can add permissions back one by one (inside the sandbox="" attribute value) — see the sandbox reference entry for all the available options. one important note is that you should never add both allow-scripts and allow-...
Making decisions in your code — conditionals - Learn web development
n createcalendar(days, choice);\n}\n\nfunction createcalendar(days, choice) {\n list.innerhtml = \'\';\n h1.textcontent = choice;\n for(let i = 1; i <= days; i++) {\n const listitem = document.createelement(\'li\');\n listitem.textcontent = i;\n list.appendchild(listitem);\n }\n }\n\ncreatecalendar(31,\'january\');'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
...break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgcolor, textcolor) {\n html.style.backgroundcolor = bgcolor;\n html.style.color = textcolor;\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
Third-party APIs - Learn web development
'map' to 'hybrid' to show a hybrid-style map. try some other values too. the tilelayer reference page shows the different available options, plus a lot more information. adding different controls the map has a number of different controls available; by default it just shows a zoom control. you can expand the controls available using the map.addcontrol() method; add this to your code, inside the
window.onload handler: map.addcontrol(l.mapquest.control()); the mapquest.control() method just creates a simple full-featured control set, and it is placed in the top-right hand corner by default. you can adjust the position by specifying an options object as a parameter for the control containing a position property, the value of which is a string specifying a position for the control. try this, for...
...ample mapquest.searchcontrol() and mapquest.satellitecontrol(), and some are quite complex and powerful. have a play around and see what you can come up with. adding a custom marker adding a marker (icon) at a certain point on the map is easy — you just use the l.marker() method (which seems to be documented in the related leaflet.js docs). ...
Arrays - Learn web development
(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = tex...
... \'\';\n\n for(let i = 0; i < myhistory.length; i++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
Basic math in JavaScript — numbers and operators - Learn web development
a canvas box in this exercise, you will manipulate some numbers and operators to change the size of a box. the box is drawn using a browser api called the canvas api. there is no need to worry about how this works — just concentrate on the math for now. the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50. 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. let's try the following: change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator. change the line that ca...
...in this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. if the button is currently saying "start machine" when it is pressed, we change its label to "stop ...
Adding features to our bouncing balls demo - Learn web development
g it in some other way, as you'll see below. inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. ...
...il circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. setcontrols() this method will add an onkeydown event listener to the
window object so that when certain keyboard keys are pressed, we can move the evil circle around. the following code block should be put inside the method definition: let _this = this;
window.onkeydown = function(e) { if (e.key === 'a') { _this.x -= _this.velx; } else if (e.key === 'd') { _this.x += _this.velx; } else if (e.key === 'w') { _this.y -= _this.vely; } else if (e.key === 's') { _this.y += _this.vely; } } so when a key is pressed, the event object's keycode property is consulted to see which key is pressed. if it is one of the f...
Object building practice - Learn web development
osition the <h1>, and get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat). some javascript that serves to set up the <canvas> element and provide a general function that we're going to use. the first part of the script looks like so: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); const width = canvas.width =
window.innerwidth; const height = canvas.height =
window.innerheight; this script gets a reference to the <canvas> element, then calls the getcontext() method on it to give us a context on which we can start to draw. the resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it. next, we set constants called width and height, a...
...t (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it. next, we set constants called width and height, and the width and height of the canvas element (represented by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the
window.innerwidth and
window.innerheight properties). note that we are chaining multiple assignments together, to get the variables all set quicker — this is perfectly ok. the last bit of the initial script looks as follows: function random(min, max) { const num = math.floor(math.random() * (max - min + 1)) + min; return num; } this function takes two numbers as arguments, and returns a random...
Client-Server Overview - Learn web development
ead contains useful information about an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (
windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrf...
...t is almost the same as the get request example shown previously, though the first line identifies this request as a post. ...
Getting started with Ember - Learn web development
rand new application, type the following in your terminal. this creates a new directory inside the current directory you are in called todomvc, containing the scaffolding for a new ember app. make sure you navigate to somewhere appropriate in the terminal before you run it. (good suggestions are your "desktop" or "documents" directories, so that it is easy to find): ember new todomvc or, on
windows: npx ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live reload. plugin-architecture that allows for third-party packages to richly enhance your application. the latest javascript via babel and webpack integration. automated testing environment that runs your tes...
...------+----------- broccolimergetrees (17) | 35ms (2 ms) package /assets/vendor.js (1) | 13ms concat: vendor styles/assets/vend... (1) | 12ms the development server launches at http://localhost:4200, which you can visit in your browser to check out what your work looks like so far. if everything is working correctly, you should see a page like this: note: on
windows systems without
windows subsystem for linux (wsl), you will experience slower build-times overall compared to macos, linux, and
windows with wsl. summary so far so good. we've got to the point where we can start build up our sample todomvc app in ember. in the next article we'll look at building up the markup structure of our app, as a group of logical components. previous overview: cli...
Handling common accessibility problems - Learn web development
ke grunt and gulp, automation frameworks like selenium and cucumber, unit testing frameworks like jasmin, and more besides (again, see the main axe page for details). screenreaders it is definitely worth testing with a screenreader to get used to how severely visually impaired people use the web. there are a number of screenreaders available: some are paid-for commercial products, like jaws (
windows) and
window eyes (
windows). some are free products, like nvda (
windows), chromevox (chrome,
windows, and mac os x), and orca (linux). some are built into the operating system, like voiceover (mac os x and ios), chromevox (on chromebooks), and talkback (android). generally, screen readers are separate apps that run on the host operating system and can read not only web pages, but text in othe...
...ast bit of speech. vo + d go into the mac's dock, so you can select apps to run inside it. this seems like a lot of commands, but it isn't so bad when you get used to it, and vo regularly gives you reminders of what commands to use in certain places. have a play with vo now; you can then go on to play with some of our examples in the screenreader testing section. nvda nvda is
windows-only, and you'll need to install it. download it from nvaccess.org. you can choose whether to make a donation or download it for free; you'll also need to give them your e-mail address before you can download it. once downloaded, install it — you double click the installer, accept the license and follow the prompts. to start nvda, double click on the program file/shortcut, or use the keyb...
Implementing feature detection - Learn web development
ge has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things by searching for "detect support for your-feature-here" in your favorite search engine. bear in mind though that some features, however, are known to be undetectable — see modernizr's list of undetectables. matchmedia we also wanted to mention the
window.matchmedia javascript feature at this point too. this is a property that allows you to run media query tests inside javascript. it looks like this: if (
window.matchmedia("(max-width: 480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small scree...
... to the page if the page width is 480px or less: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). if (
window.matchmedia("(max-width: 480px)").matches) { deck.shuffleto(1); } using modernizr to implement feature detection it is possible to implement your own feature detection tests using techniques like the ones detailed above. you might as well use a dedicated feature detection library however, as it makes things much easier. the mother of all feature detection libraries is modernizr, and it can det...
Handling common HTML and CSS problems - Learn web development
not only points out errors, but can also flag up warnings about bad practices in your css, and other points besides. linters can generally be customized to be stricter or more relaxed in their error/warning reporting. there are many online linter applications, the best of which are probably dirty markup (html, css, javascript), and css lint (css only). these allows you to paste your code into a
window, and it will flag up any errors with crosses, which can then be hovered to get an error message informing you what the problem is. dirty markup also allows you to make fixes to your markup using the clean button. however, it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. what you really want is a linter that will fit into your...
...ithub's atom code editor for example has a rich plugin ecosystem available, with many linting options. to show you an example of how such plugins generally work: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on
windows/linux) and choose the install option in the left hand menu. in the search packages text field, type "lint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-csslint plugin for linting css, and the linter-tid...
omni.ja (formerly omni.jar)
rformance improvements by moving many of their internal parts from being standalone files or sets of jar files into just one jar file called omni.ja; this reduces the amount of i/o needed to load the application. this article covers the contents of the archive and techniques for inspecting those contents. note: starting with firefox 10 and thunderbird 10, the file extension .ja is used because
windows system restore does not back up files with the .jar extension, but it does back up .ja files. this change was needed to prevent firefox from becoming corrupted. inspecting and repacking omni.ja note: when extracting omni.ja, you may incorrectly get false warnings from some virus protection software. several unzip tools and archives (except for the latest version of 7-zip) currently cannot re...
...ja files. this change was needed to prevent firefox from becoming corrupted. inspecting and repacking omni.ja note: when extracting omni.ja, you may incorrectly get false warnings from some virus protection software. several unzip tools and archives (except for the latest version of 7-zip) currently cannot read omni.ja, due to the optimization that is applied to the file. it is suggested that
windows 7 users unzip the file by renaming it to omni.zip and using
windows explorer to extract all files. users of older versions of
windows can use infozip's unzip tool to extract files - make a copy of omni.ja, and drag-and-drop it onto unzip.exe. linux users can simply use unzip command to inflate files of omni.ja. omni.ja is also incompatible with zip files in the other direction; editing extracte...
Lightweight themes
imes referred to as "background themes" or, (on addons.mozilla.org) as just "themes". how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui background. finished your design? you can submit it right now! creating a theme header image the header image is displayed as the background of the top of the browser
window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser
window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly d...
...er here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the
window. the upper right-hand side of the image should have the most important information - as a user increases the width of the browser
window, the browser reveals more of the left-hand side of the image. ultrawide monitors can run to 3440px wide, to look good on these monitors, ensure the left of the image fades to a solid color. online image editor resources pixlr — pixlr offers professional...
What to do and what not to do in Bugzilla
ntains more information (bug description clearer, patch already attached, lots of people already cc'ed, etc.). resolving bugs as worksforme you can resolve a bug as worksforme (wfm) if it can't be reproduced on the reported hardware/os. you should not resolve a bug as wfm if: the bug reporter uses a different hardware/operating system (e.g. bug appears on linux and you can't reproduce it on
windows). the bug has been reproduced by some people but can't be reproduced by other people. in general you can resolve a bug as wfm if: three or more people with a similar/the same setup can't reproduce the bug and the bug is only seen by the bug reporter. in this case you shouldn't just mark it wfm instantly, but ask the reporter for more details first. when marking it wfm you should tell the b...
...u should change the summary if the current one is unclear or does not correctly describe the issue covered by the bug. you should not change the summary in order to morph the bug to describe a different issue. in this case the bug should be resolved and another bug should be opened. os/hardware make sure that the os or hardware fields correctly display the systems that are affected. if a bug is
windows-only, change the field to the oldest affected operating system. if the bug is present on linux and
windows, change the fields to hardware = pc and os = all. if another hardware platform like mac or dec is also affected, change hardware to all. severity this field describes the impact of a bug. blocker blocks development and/or testing work critical crashes, loss of dat...
Creating a Language Pack
d have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code). you still need to specify which application you're localizing (e.g., for firefox, that's browser, thunderbird would be mail). configure step you need to prepare the build directory, which is done with ./mach configure you only need to run this if the version number of firefox changes.
windows: replace make with mozmake in the commands below! creating a langpack we will now merge the localized files from x-testing locale with the en-us files from the original source. every time you want to create a langpack, you need to be in the directory obj-firefox-build/browser/locales. it is likely that you will continue to generate language packs as your progress just to test your work. w...
...-testing locale_mergedir=$(pwd)/mergedir each time you need to generate a new langpack, you need to run this command. remember that you need to be in the directory obj-firefox-build/browser/locales. $ make langpack-x-testing locale_mergedir=$(pwd)/mergedir now go to the dist directory to find your langpack ready to use! $ cd ../../dist the xpi file can be found in the directory win32/xpi on
windows, linux-i686/xpi or linux-x86_64 on linux or mac/xpi on mac. open the xpi file contained in this directory with firefox to see your work. you have to set your selected language still. you can either use the locale switcher extension, or set it in about:config. add the preference intl.locale.requested and set it to your language code, in this case, x-testing, or add it in front of the current set...
Debugging a hang on OS X (Archived)
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). by default, sampling of any hanging application will begin automatically. after about 3-4 seconds, select the hanging application in the “detected hangs”
window and click the “interrupt sampling” button. note that sampling will quickly hog up a lot of memory if you leave it on for too long! 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. if you need to upload the sample to bugzilla, select all the sample tex...
... 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.). choose file > attach... ...
Debugging
ode, with a focus on debugging code in the mozilla project itself. debugging a xulrunner application tips and suggestions that will help you debug your xulrunner based application. debugging update problems learn how to debug update problems in mozilla-based applications. debugging the mozilla platform using debuggers with mozilla debugging mozilla on
windows faq questions (and answers) about debugging mozilla on
windows. debugging mozilla on os x questions (and answers) about debugging mozilla on os x. debugging mozilla with gdb gdb is our primary debugger on mac and linux. debugging mozilla with lldb lldb is the new debugger on mac. advanced debugging techniques understanding crash reports ...
...ut debugging mozilla on os x. debugging mozilla with gdb gdb is our primary debugger on mac and linux. debugging mozilla with lldb lldb is the new debugger on mac. advanced debugging techniques understanding crash reports how to read crash reports, which are full of information yet often not easy to interpret and act on. debugging a minidump
windows crash reports include a minidump, which contains a lot of information about the application when it crashed. debugging mozilla with valgrind valgrind is a memory debugger for mac and linux. it is slow, but good for tracking down difficult memory safety bugs. replay debugging firefox with vmware workstation how to setup record and replay debugging on firefox, to help debug int...
Gmake vs. Pymake
if you try to switch from gmake to pymake or pymake to gmake the build will fail unless you did a relative configure. a relative configure produces paths that look like "../../foo" which can be understood by gmake and pymake. to configure relatively, invoke configure or client.mk from your objdir. ...
... if you try to switch from gmake to pymake or pymake to gmake the build will fail unless you did a relative configure. a relative configure produces paths that look like "../../foo" which can be understood by gmake and pymake. to configure relatively, invoke configure or client.mk from your objdir. ...
pymake
pybuild is no longer supported! see bug 1027890. make.py (and the pymake modules that support it) are an implementation of the make tool which are mostly compatible with makefiles written for gnu make. prerequisites if running
windows, you need to have a
windows build environment installed for using pymake to build mozilla. on other operating systems (linux, os x, etc), pymake itself only requires python 2.6 or higher (but not python 3). please note that python 2.7 is strongly recommended. usage if you use mach for everything, you don't have to worry about gmake and pymake: mach will run whatever is best for the current machine. note: on
windows, you must take special care to be able to switch back and forth between gmake and pymake on the same object dir. see gmake vs. pymake ...
..., 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. try typing just pymake into the shell and press enter. this should come back with "no makefile found." if it does, your pymake alias is connected and you are ready to type in pymake -f client.mk to start the build. unlike gmake on
windows, pymake is capable of doing parallel builds, so you can set a moz_make_flags=-jn in your .mozconfig without risk of deadlocks. note: on
windows, if using an absolute path moz_objdir in your .mozconfig, it must be a
windows-style (i.e. c:/foo/bar) rather than an msys-style (i.e. /c/foo/bar) path. ...
ESLint
the rules rule source code common issues and how to solve them my editor says that "mozilla/whatever" is unknown run ./mach eslint --setup restart your editor if that doesn't work, check that you have your editor pointing to the correct node_modules folder. node.js is not recognized add it to your path environment variable by running path="$path:/path/to/node.js/". for example: in
windows 10, if you have installed node.js on "c:\nodejs", then the command should look like: export path=$path:/c/nodejs enabling eslint for a new directory remove the directory from .eslintignore (in the base directory of the repository) fix errors that occur when running ./mach eslint path/to/dir, see also the no-undef rules below. no-undef the no-undef rule is currently being enabled througho...
...ctory from .eslintignore (in the base directory of the repository) fix errors that occur when running ./mach eslint path/to/dir, see also the no-undef rules below. no-undef the no-undef rule is currently being enabled throughout the code base. here are some common issues: my script is imported into the global browser.xul scope. add a line like: /* eslint-env mozilla/browser-
window */ or enable the rule in a .eslintrc.js if it will apply to the whole directory. my script is a frame-script, or includes items that loaded into content scripts: add a line to tell eslint to use the frame-script environment: /* eslint-env mozilla/frame-script */ my script is a worker: add a line to tell eslint to use the worker environment: ...
Communicating with frame scripts
og(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they clicked", tag: "div" } <xul:browser anonid="initialbrowser" ... > { 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. an xpcom component), you can access the
window of the browser that sent the message with message.target.ownerdocument.defaultview. synchronous messaging to send a synchronous message, the frame script uses the global sendsyncmessage() function: // frame script sendsyncmessag...
...essagelistener("my-addon@me.org:my-e10s-extension-message", listener); chrome to content to send a message from chrome to content, you need to know what kind of message manager you're using. if it's a browser message manager, you can use the message manager's sendasyncmessage method: // chrome script browser.messagemanager.sendasyncmessage("my-addon@me.org:message-from-chrome"); if you have a
window or a global message manager, you need to use the broadcastasyncmessage method: // chrome script
window.messagemanager.broadcastasyncmessage("my-addon@me.org:message-from-chrome"); these methods takes one mandatory parameter, which is the message name. all messages share the same namespace, so to avoid conflicts with other code, you'll need to ensure that the names you use are unique. if you're ...
Tracking Protection
if blocked content is part of the page layout, users may notice layout issues where firefox blocked these loads. sometimes users won’t notice at all, if the page grid works such that other page elements slide in to fill holes left by blocked elements. when firefox blocks content, it logs a message to the web console like this: the resource at "http://some/url" was blocked because tracking protection is enabled. ...
... note: depending on a third party in this way is...
Getting Started with Chat
ozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration. for example, you can connect using ssl or a non-secure connection, and you can configure the client to automatically connect to a server and join a particular set of channels when you start the client. the following are some other options available to you:
windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available. if not, you'll have to download source code and compile. note: for a complete list of irc clients go...
... 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. if this happens, you can type this command to resolve this issue. /server server-name manually connect to a server /topic topic changes the topic of the channel. the topic is a message that displays first when you join a channel. /whois nickname display information about the specified user. this information displays in the server
window. for more inform...
Integrated Authentication
otected gss-api negotiation mechanism (spnego) internet standard (rfc 2478) to negotiate either kerberos, ntlm, or other authentication protocols supported by the operating system. spnego is commonly referred to as the "negotiate" authentication protocol. mozilla does not have its own internal implementation of spnego. instead, it leverages system libraries that provide spnego; sspi on microsoft
windows, and gss-api on linux, mac osx, and other unix-like systems. the mozilla implementation of spnego can be found under extensions/auth/. it used to live in extensions/negotiateauth. mozilla also supports raw ntlm authentication using an internal implementation (based on the documentation provided by eric glass) that supports ntlmv1/lmv1 and ntlm2 session key modes. as of mozilla 1.7, there is no...
...e a means to negotiate use of ntlmv2/lmv2. <i>this document is incomplete ...</i> flow diagram the diagram below shows how various components interact. configuration by default, mozilla rejects all spnego challenges from a web server. this is to protect the user from the possibility of dns-spoofing being used to stage a man-in-the-middle exploit (see bug 17578 for more info). moreover, with
windows clients ntlm may be negotiated as the authentication protocol. so, it is paramount that the browser does not freely exchange ntlm user credentials with any server that requests them. the ntlm response includes a hash of the user's logon credentials. on older versions of
windows this hash is computed using a relatively weak algorithm (see hertel for more info on ntlm authentication). mozilla cur...
AddonManager
name, in string iconurl, in string version, in nsiloadgroup loadgroup) promise? getinstallforfile(in nsifile file, in installcallback? callback, in string mimetype) promise? getallinstalls(in installlistcallback? callback) promise? getinstallsbytypes(in string types[], in installlistcallback? callback) void installaddonsfromwebpage(in string mimetype, in nsidom
window source, in nsiuri uri, in addoninstall installs[]) void addinstalllistener(in installlistener listener) void removeinstalllistener(in installlistener listener) promise? getalladdons(in addonlistcallback? callback) promise? getaddonbyid(in string id, in addoncallback? callback) promise? getaddonbysyncguid(in string id, in addoncallback? callback) ...
...lback? callback ) parameters types an optional array of types to retrieve. each type is a string name. callback a callback which will be passed an array of addoninstalls. installaddonsfromwebpage() starts installation of an array of addoninstall notifying the registered web install listener of blocked or started installs. void installaddonsfromwebpage( in string mimetype, in nsidom
window source, in nsiuri uri, in addoninstall installs[] ) parameters mimetype the mimetype of add-ons being installed source the nsidom
window that started the installs uri the nsiuri that started the installs installs the array of addoninstalls to be installed addinstalllistener() adds a new installlistener if the listener is not already registered. void addinstalllistener( in ins...
Timer.jsm
the timer.jsm javascript code module contains pure-javascript implementations of settimeout, cleartimeout, setinterval, and clearinterval that are compatible with the dom
window functions, but that can be used by code that does not have access to a dom
window (for example, javascript code modules or content frame scripts). ...
...t, cleartimeout, setinterval, and clearinterval that are compatible with the dom
window functions, but that can be used by code that does not have access to a dom
window (for example, javascript code modules or content frame scripts). ...
JavaScript code modules
porting. bookmarkhtmlutils.jsm provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files. ctypes.jsm provides an interface that allows javascript code to call native libraries without requiring the development of an xpcom component. customizableui.jsm allows you to interact with customizable buttons and items in firefox's main
window ui. deferredtask.jsm run a task after a delay. dict.jsm provides an api for key/value pair dictionaries. downloadlastdir.jsm supplies the path to the directory into which the last download occurred. downloads.jsm provides a single entry point to interact with the downloading capabilities of the platform. fileutils.jsm provides helpers for dealing with files. geometry.jsm provides rout...
.... source-editor.jsm the source editor is used by developer tools such as, the style editor; this interface implements the editor and lets you interact with it. sqlite.jsm a promise-based api to mozistorage/sqlite. task.jsm implements a subset of task.js to make sequential, asynchronous operations simple, using the power of javascript's yield operator. timer.jsm a pure js implementation of
window.settimeout. webapps.jsm provides an interface to manage open web apps. webrequest.jsm provides an api to add event listeners for the various stages of making an http request. the event listener receives detailed information about the request, and can modify or cancel the request. xpcomutils.jsm contains utilities for javascript components loaded by the js component loader. ...
L10n Checks
python script and library similar to compare-locales. it allows mozilla localizers to easily check their work. installation (releases) l10n checks needs to be installed. to do that, you must have python 2.5, 2.6, or 2.7 installed on your machine. ...
...tall -u l10n-checks or, if you're on
windows: $ easy_install -u l10n-checks installation (development versions) l10n checks needs to be installed, and it requires that you have python and mercurial installed on your machine. the easiest way is to just run: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ sudo python setup.py install or, if you're on
windows: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ python setup.py install running it mercurial source (source) mode l10n checks gathers the directories to compare from an ini file, usually found in $app/locales/l10n.ini. you pass both the path to the ini file and the parent directory of the localizations as first arguments, followed by the locale code...
L10n testing with xcode
your l10n testing environment once you have your l10n testing environment set up in xcode, testing your firefox on ios localization is a breeze. follow the cloning and building instructions for firefox on ios. open the client.xcodeproj file in xcode. select the client project in the left pane and choose editor > import localizations from the toolbar and select your localized xliff file. a
window will then appear showing the diff between the imported xliff file and the existing resources in the project folder. click the import button. xcode will import your translated strings into the project by adding them to the project folder and replacing the existing strings. next, you need to configure the ios app simulator to run the app in your locale. choose product > scheme > edit sc...
...unching & testing your firefox on ios localization the ios simulator is fairly easy to use once you launch your app. to perform the next steps, you'll need to be familiar with how user gestures and hardware interactions work in the simulator. this guide should help. press the run button in the upper left-hand corner (the button has a playback icon). 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. to view these strings, you'll need to start the accessibility inspector within the ios simulator by doing the following. in the ios simulator, press the home button from the hardware toolbar menu. navigate to the settings app, open it, and go to general > accessibility. slide...
Localization prerequisites
to work on localization, you need a subset of the mozilla build prerequisites. on mac and linux, you should be just fine, and on
windows, mozillabuild should get you everything you need. tools a recent posix shell python 2.5 or newer. perl 5.6 or higher older perl versions may work if you upgrade file::spec to version 0.8 gnu make 3.79.1 or higher. other varieties of "make" will not work. autoconf-2.13 - autoconf 2.5x will not work. zip 2.3 (or higher) mercurial 1.2 or higher recommended. needed for development of firefox 3.5/seamonkey 2.0/thunderbird 3.0 and later. a text editor. you can try one of these: notepad++ or notepad2 on
windows, vim, gedit or kate on gnu/linux, bbedit on mac os x. to verify that they work, open a shell. linux users should know, on...
......
MathML Accessibility in Mozilla
we started exposing generic accessible objects for mathml in bug 920547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.24). mozilla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. ...
... is recommended to use a nightly build to ensure that the accessible tree expected by orca is correctly exposed. accessfu: mathml support in android and firefox os is currently being implemented in our accessfu module and a patch is available on bug 1163374. the table gives the output in mode "utterance" and description spoken last. note that this is still very experimental. mathml
windows mac linux accessfu diagonal of a regular pentagon video video video / x+2 __________ x plus 2 __________ x+2 x plus 2 x + y ab __________ a over b __________ fraction start, a over b, end of fraction fraction start. a over b. fraction end. a numerator b denominator fract...
Using the viewport meta tag to control layout on mobile browsers
users can then pan and zoom to see different areas of the page. for example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. ...
...users can then pan and zoom to see different areas of the page. for example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. ...
Mozilla Web Developer FAQ
is better to check for the existence of the methods and objects you are planning on using. for example, the existence of document.getelementbyid() can be checked as follows: if(document.getelementbyid) { /* code that uses document.getelementbyid() */ } why doesn’t mozilla display my alt tooltips? contrary to a popular belief stemming from the behavior of a couple browsers running on the
windows platform, alt isn’t an abbreviation for ‘tooltip’ but for ‘alternative’. the value of the alt attribute is a textual replacement for the image and is displayed when the image isn’t. mozilla doesn’t display the alt attribute as a tooltip, because it has been observed that doing so encourages authors to misuse the attribute. when the alternative text is shown in a tooltip, some a...
...ttribute may be displayed as a tooltip. however, this particular display method is not required and some other browsers show the title attribute in the browser status bar, for example. at this point some people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes.
windows ie also shows the title attribute in a tooltip. does mozilla support downloadable fonts? downloadable fonts in truetype and opentype formats (.ttf and .otf) are supported since firefox 3.5. the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers. downloadab...
GC and CC logs
ord logs from the content process, due to sandboxing. you'll need to disable sandboxing by setting moz_disable_content_sandbox=t when you run firefox. on desktop firefox you can override the default location of the log files by setting the moz_cc_log_directory environment variable. by default, they go to a temporary directory which differs per os - it's /tmp/ on linux/bsd, $localappdata\temp\ on
windows, and somewhere in /var/folders/ on mac (whatever the directory service returns for tmpd/ns_os_temp_dir). note that just moz_cc_log_directory=. won't work - you need to specify a full path. on firefox for android you can use the cc-dump extension to save the files to /sdcard. by default, the file is created in some temp directory, and the path to the file is printed to the error console. to log ...
... and cc logs there are numerous scripts that analyze gc and cc logs on github. to find out why an object is being kept alive, the relevant scripts are find_roots.py and parse_cc_graph.py (which is called by find_roots.py). calling find_roots.py on a cc log with a specific object or kind of object will produce paths from rooting objects to the specified objects. most big leaks include an nsglobal
window, so that's a good class to try if you don't have any better idea. to fix a leak, the next step is to figure out why the rooting object is alive. for a c++ object, you need to figure out where the missing references are from. for a js object, you need to figure out why the js object is reachable from a js root. for the latter, you can use the corresponding find_roots.py for js on the gc log. alt...
Intel Power Gadget
intel power gadget provides real-time graphs of various power-related measures and estimates, all taken from the intel rapl msrs. this article provides a basic introduction. note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. the main strengths of this tool are (a) it works on
windows, unlike most other power-related tools, and (b) it shows this data in graph form, which is occasionally useful. on mac and linux, tools/power/rapl is probably a better tool to use. understanding the power gadget output the following screenshot (from the mac version) demonstrates the available measurements. the three panes display the following information: power: shows power estimates for the package a...
...akes it even less useful than most proxy measurements. intel power gadget can also log these results to a file. this feature has been used in energia, roberto vitillo's tool for systematically measuring differential power usage between different browsers. (an energia dashboard can be seen here; please note that the data has not been updated since early 2014.) version 3.0 (available on mac and
windows, but not on linux) also exposes an api from which the same measurements can be extracted programmatically. at one point the gecko profiler used this api on
windows to implement experimental package power estimates. unfortunately, the gecko profiler takes 1000 samples per second on desktop and is cpu intensive and so is likely to skew the rapl estimates significantly, so the api integration was r...
Leak Gauge
it has two parts: (a) instrumentation in gecko that produces a log file, and (b) a script to post-process the log file. getting a log file to get a log file, run the browser with the following environment variables set. nspr_log_modules=domleak:5,documentleak:5,nsdocshellleak:5,nodeinfomanagerleak:5 nspr_log_file=nspr.log # or any other filename of your choice this will overwrite any existing file called nspr.log. the browser will run with negligible slowdown. ...
... browser will run with negligible slowdown. you must exit the browser before post-processing the log file or the results will be unreliable. post-processing a log file post-process the log file with tools/leak-gauge/leak-gauge.pl or tools/leak-gauge/leak-gauge.html. if there are no leaks, output will look like the following. results of processing log leak.log : summary: leaked 0 out of 11 dom
windows leaked 0 out of 44 documents leaked 0 out of 3 docshells leaked content nodes in 0 out of 0 documents if there are leaks, output will look like the following. results of processing log leak2.log : leaked outer
window 2c6e410 at address 2c6e410. leaked outer
window 2c6ead0 at address 2c6ead0. leaked inner
window 2c6ec80 (outer 2c6ead0) at address 2c6ec80. summary: leaked 13 out of 15 dom windo...
Power profiling overview
imately 1,000 hz, though the variability in their update latency means that they are probably only accurate at lower frequencies, e.g. up to 20 hz or so. see section 14.9 of volume 3 of the intel software developer's manual for more details about rapl. tools that can take rapl readings include the following. tools/power/rapl: all planes; linux and mac. intel power gadget: pkg and pp0 planes;
windows, mac and linux. powermetrics: pkg plane; mac. perf: all planes; linux. turbostat: pkg, pp0 and pp1 planes; linux. of these, tools/power/rapl is generally the easiest and best to use because it reads all power planes, it's a command line utility, and it doesn't measure anything else. proxy measurements the next best measurements are proxy measurements, i.e. measurements of things that affe...
...ning little other than the program of interest. global measurements in particular can be completely skewed and unreliable if this is not the case. find or confirm a test case where firefox's power consumption is high. "high" can most easily be gauged by comparing against other browsers. use power measurements or estimates (e.g. via tools/power/rapl, or mach power on mac, or intel power gadget on
windows) for the comparisons. avoid lower-quality measurements, especially activity monitor's "energy impact". try using differential profiling to narrow down the cause. try turning hardware acceleration on or off; e10s on or off; flash on or off. try putting the relevant tab in the foreground vs. in the background. if the problem manifests on a particular website, try saving a local copy o...
TraceMalloc
mreferrer 177 21550 691 85460 514 63910 3.53 nshtmlvalue 139 7846 1215 68734 1076 60888 3.36 htmlcontentsink 6 4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size. also, your javascript can call the following dom
window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log events for all log files. tracemallocenable() - turn on tracing. 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 ...
...llowing. leaks: 382739 bytes, 3465 allocations maximum heap size: 7751799 bytes 62095212 bytes were allocated in 391091 allocations. detecting memory usage growth in a running process to do this, dump the existing allocations to a file by calling the function tracemallocdumpallocations from javascript. you can use the following web page to do so. <script type="text/javascript"> var filename =
window.prompt("filename to log: "); if (filename) tracemallocdumpallocations(filename); </script> one can then use the script tools/trace-malloc/diffbloatdump.pl to compare trace-malloc dumps before and after doing an action that might leak. if there are significant differences, it might be worth examining the call stacks for the destructors of the objects in question to see what is extending...
Performance
os x that report similar problems to those reported by lsan and valgrind. the "leaks" tool is not recommended for use with spidermonkey or firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944). leak gauge leak gauge is a tool that can be used to detect certain kinds of leaks in gecko, including those involving documents,
window objects, and docshells. logalloc logalloc is a tool that dumps a log of memory allocations in gecko. that log can then be replayed against firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload. memory profiler the memory profiler samples allocation events and provides d...
...encies. timerfirings logging (all platforms) timerfirings logging is a built-in logging mechanism that prints data on every time fired. activity monitor, battery status menu and top (mac-only) the battery status menu, activity monitor and top are three related mac tools that have major flaws but often consulted by users, and so are worth understanding. intel power gadget (
windows, mac, linux) intel power gadget provides real-time graphs for package and processor rapl estimates. it also provides an api through which those estimates can be obtained. perf (linux-only) perf is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups. turbostat (linux-only) ...
Building NSS
it may be complex to build. please read these instructions carefully before attempting to build. build environment nss needs a c and c++ compiler. it has minimal dependencies, including only standard c and c++ libraries, plus zlib. for building, you also need make. ideally, also install gyp and ninja and put them on your path. this is recommended, as the build is faster and more reliable.
windows nss compilation on
windows uses the same shared build system as mozilla firefox. you must first install the
windows prerequisites, including mozillabuild. you can also build nss on the
windows subsystem for linux, but the resulting binaries aren't usable by other
windows applications. get the source nss and nspr use mercurial for source control like other mozilla projects. to check out the l...
...caldomain use_64=1 nss/tests/all.sh unit test configuration nss tests are configured using environment variables. the scripts will attempt to infer values for host and domsuf, but can fail. replace localhost and localdomain with the hostname and domain suffix for your host. you need to be able to connect to $host.$domsuf. 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. remove the use_64=1 override if using a 32-bit build. test results running all tests can take a considerable amount of time. test output is stored in tests_results/security/$host.$number/. the file results.html summarizes the res...
JSS FAQ
jss frequently asked questions newsgroup: mozilla.dev.tech.crypto content: what versions of jdk and jce do you suggest? does jss have 64 bit support? is jss fips compliant? is there any sample code and documentation? if i don't call setcipherpolicy, is the domestic policy used by default? my ssl connection is hanging on
windows? how can i tell which ssl/tls ciphers jss supports? how can i debug my ssl connection? can you explain jss ssl certificate approval callbacks? can i have multiple jss instances reading separate db's? once jss initialized, i can't get anymore instances with certificatefactory.getinstance(x.509)? is it possible to sign data in java with jss? how do i convert org.mozilla.j...
.../samples/pqggen.java jss/samples/pkcs12.java if i don't call setcipherpolicy, is the domestic policy used by default? yes, domestic is the default because we call nss_setdomesticpolicy() during cryptomanager.initialize(). setcipherpolicy does not need to be called by a jss app unless that app wants to limit itself to export-allowed cipher suites. my ssl connection is hanging on
windows? nspr makes use of nt vs.
windows distinction and provides different nt and
windows builds. many netscape products, including nss, have nt and
windows builds that are essentially the same except one difference: one is linked with the nt version of nspr and the other is linked with the
windows version of nspr. the nt fiber problem affects applications that call blocking system calls from ...
NSS 3.12.4 release notes
nnection reuses closed socket bug 470070: multiple object leaks reported by tinderbox bug 470479: io timeout during cert fetching makes libpkix abort validation. ...
...whenever value exceeds 384 bytes bug 487736: libpkix passes wrong argument to der_decodetimechoice and crashes bug 487858: remove obsolete build options mozilla_security_build and moz...
NSS 3.46 release notes
for clang bug 1561588 - remove -wmaybe-uninitialized warning in p7env.c bug 1561548 - remove -wmaybe-uninitialized warning in pkix_pl_ldapdefaultclient.c bug 1512605 - incorrect alert description after unencrypted finished msg bug 1564715 - read /proc/cpuinfo when at_hwcap2 returns 0 bug 1532194 - remove or fix -ddebug_$user from make builds bug 1565577 - visual studio's cl.exe -? ...
...ug 1564714 - print certutil commands during setup bug 1565013 - hacl image builder times out while fetching gpg key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance using pmull2 bug 1528666 - correct resumption validation checks bug 1568803 - more tests for client certificate authentication bug 1564284 - support profile mobility across
windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line formats bug 1575968 - add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs fixed in nss 3.46: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&que...
nss tech note6
it must be put in the same directory as the nss libraries. the libsoftokn3.chk/softokn3.chk file contains a checksum for the softoken. when in fips 140 mode, the softoken is required to compute its checksum and compare it with the value in libsoftokn3.chk/softokn3.chk. ...
...e two more .chk files: libfreebl_pure32_3.chk and libfreebl_hybrid_3.chk. the following applies to nss 3.11 : the low-level freebl cryptographic code has been separated from softoken on all platforms. even on platforms for which there is only one implementation of freebl, there is now a separate freebl shared library. the freebl library implements a private interface internal to nss. on 32-bit
windows and 32-bit os/2, this shared library is called freebl3.dll, and the corresponding .chk file is called freebl3.chk . on 32-bit solaris x86, 64-bit solaris x64 (amd64), 32-bit linux x86, 64-bit linux x86-64, 32-bit aix and 64-bit aix, this shared library is called libfreebl3.so, and the corresponding .chk file is called libfreebl3.chk . on the 32-bit solaris sparc architecture, there are 3 freebl ...
NSS tools : ssltab
ng the ssltap command with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser
window, enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ d...
... issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window. to output a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, swi...
NSS tools : ssltap
ng the ssltap command with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser
window, enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ d...
... issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window. to output a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, swi...
NSS tools : ssltap
and with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser
window, enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following s...
...mand. data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window. to output a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accep...
Getting SpiderMonkey source code
getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources. mercurial is also known as hg. the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox...
... getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources. mercurial is also known as hg. the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't...
Hacking Tips
db. rr with reftest to break on the write of a differing pixel: find the x/y of a pixel that differs use 'run z' where z is the mark in the log for test-start. for example in '[rr 28496 607198]reftest test-start | file:///home/bgirard/mozilla-central/tree/image/test/reftest/bmp/bmpsuite/b/wrapper.html?badpalettesize.bmp' z would be 607198. ...
...ftest to break on the write of a differing pixel: find the x/y of a pixel that differs use 'run z' where z is the mark in the log for test-start. for example in '[rr 28496 607198]reftest test-start | file:///home/bgirard/mozilla-central/tree/image/test/reftest/bmp/bmpsuite/b/wrapper.html?badpalettesize.bmp' z would be 607198. ...
How to embed the JavaScript engine
clang++ -std=c++11 -i<objdir>/dist/include -l<objdir>/dist/lib helloworld.cpp -o helloworld -lmozjs-31 -lz [linux] g++ -std=c++11 -i<objdir>/dist/include -l<objdir>/dist/lib helloworld.cpp -o helloworld -lmozjs-31 -lz -lpthread -ldl it should print "helloworld, it is time" (here time is the current time). make sure the build computer has the prerequisites for building spidermonkey: linux,
windows, mac os x, others. for
windows, the following steps will assume that you have installed the mozillabuild package. get the spidermonkey source code. you can download a source archive or use mercurial (hg) to pull the spidermonkey repository. on
windows, do not install the spidermonkey source code under the msys root directory (which is usually c:\mozilla-build\msys). instead use something like c...
...this will build a spidermonkey shared library that you will link into your application in a later step. copy the code example above into a text editor and save the file as helloworld.cpp in the spidermonkey js\src directory. to get a copy of the code sample without line numbers, hover over the sample near the top until buttons appear. then click the view source button, and copy the code from the
window that appears. compile the helloworld application and link to the spidermonkey library. run the helloworld executable at the command line: ./helloworld how to call c functions from javascript say the c function is named doit and it would like at least two actual parameters when called (if the caller supplies fewer, the js engine should ensure that undefined is passed for the missing ones)...
Index
mbervalue jsapi reference, reference, référence(2), spidermonkey js_numbervalue converts a c floating-point number of type double to js::value, the type of javascript values. 420 js_objectisdate date, jsapi reference, javascript, spidermonkey js_objectisdate() can be used to check if you are dealing with a date object, or a date object used across compartments (or
windows or sites, in the browser embedding). this function returns true if the object is a date. 421 js_objectisfunction jsapi reference, reference, référence(2), spidermonkey js_objectisfunction tests whether obj is a function object (faster than comparing obj's class name to function, but equivalent unless someone has overwritten the function identifier with a different constru...
...ed in the fragment. 538 spidermonkey compartments guide, needscontent, needsexample, spidermonkey no summary! 539 spidermonkey releases spidermonkey the easiest way to fetch the version corresponding to the current firefox release is to visit the treeherder page for the release repository and click on the first sm(pkg) link you see. that will open a small
window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2". 540 spidermonkey 1.8 spidermonkey spidermonkey 1.8 has one known significant regression from 1.7. 541 spidermonkey 1.8.5 spidermonkey spidermonkey 1.8.5 is supported on all the platforms where firefox 4 runs. 542 spidermonkey 1.8.7 spidermonkey draft in pro...
JIT Optimization Strategies
engine can use the unique type to map back to a specific object, and eliminate the property access, replacing it with a constant reference to the object. when this optimization is successful, property access is eliminated entirely and replaced with an inline constant. the different success and failure conditions are documented below: getprop_staticname attempts to optimize a property access on
window which refers to a property on the global object. getprop_typedobject optimizes accesses to properties on typedobjects. getprop_definiteslot optimizes access to a well-known regular property on an object. for this optimization to succeed, the property needs to be well-defined on the object. for objects constructed by constructor functions, this means that the property needs to be defined in th...
...ion compiles down to one or more shape-guarded direct loads from the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[5] elif obj.shape == shape3 then obj.slots[2] ... end getprop_innerize attempts to optimize a situation where a property access of the form
window.prop can be directly translated into a property access on the inner global object. this optimization will always fail on property accesses which are not on the
window object. it is useful because accessing global names via the '
window' object is a common idiom in web programming. getprop_inlinecache this is the worst-case scenario for a property access optimization. this strategy is used when...
Secure Development Guidelines
nstructor/destructor issues: prevention 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...
......
XPCOM Glue without mozalloc
this library is new in xulrunner 2.0, and it's identical to xpcomglue_s, except that it's compiled without mozalloc. ...
...ws, libxpcomglue_s.a on linux and mac) is dependent on the new infallible memory allocation routines (mozalloc). since these routines didn't exist prior to xulrunner 2.0, xpcom components that link against the frozen linkage dependent glue will not be compatible with xulrunner applications prior to 2.0. the solution is to link against xpcomglue_s_nomozalloc instead (xpcomglue_s_nomozalloc.lib on
windows, libxpcomglue_s_nomozalloc.a on linux and mac). this library is new in xulrunner 2.0, and it's identical to xpcomglue_s, except that it's compiled without mozalloc. simply change all references to "xpcomglue_s" in your compiler and linker flags to "xpcomglue_s_nomozalloc". resulting xpcom components will no longer have a dependency on mozalloc, and will thus be compatible with xulrunner appli...
Avoiding leaks in JavaScript XPCOM components
need to create a new function object for the filter each time this code is executed). this same problem can also happen if the function is inside of an object. 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. (but since service is a global variable, just fixing the cycle doesn't fix the leak.) d...
...lem is tabbrowser. tabbrowser is an xbl binding that wraps browsers in tabs, creating and destroying them as needed. but the browsers are themselves xbl bindings, and much of the memory associated with the page displayed in the tab is reachable from the javascript properties of the browser element. this means that without some workaround, all of the browsers will remain in memory until the parent
window is closed. the workaround is simple: we have a destroy method on browser that tabbrowser can call when it's done with a browser. this destroy method assigns null to the problematic properties so that the large objects are no longer reachable from the wrapper of the browser element (which will still leak until the
window containing the tabbrowser is closed, but it's a much smaller leak). further ...
Packaging WebLock
weblock component can also be used to register the component with the browser into which it is installed (see registration methods in xpcom for more information on registration). the sample installation script shown below uses the mozilla xpinstall technology to manipulate an installer and talk to mozilla'schrome registry as high-level javascript objects. what is the chrome registry? like the
windows registry, the chrome registry is a database of information about applications, skins, and other extensions that have been installed in a gecko application. since mozilla and other gecko-based applications are cross-platform, this database is abstracted above the operating system or any particular platform's registry. the chrome registry lives in a series of rdf/xml files in the application dire...
...mponents in a generalized, cross-platform way. if you are installing weblock in an gecko-based application for which xpinstall is not available, then you will have to devise a separate installation scheme. we leave this as an exercise for the reader. note: install-object-methods the methods are available on the main install object, which is implied in the script below in the same way that the
window object is implied in javascript manipulation of the dom of a web page. in other words, the fragment initinstall() from the script is equivalent to install.initinstall(). « previousnext » copyright (c) 2003 by doug turner and ian oeschger. this material may be distributed only subject to the terms and conditions set forth in the open publication license, v1.02 or later. distribution of...
XPCOM hashtable guide
es nsrefptrhashkey there are a number of more esoteric hashkey classes in nshashkeys.h, and you can always roll your own if none of these fit your needs (make sure you're not duplicating an existing hashkey class though!) once you've determined what hashtable and hashkey classes you need, you can put it all together. ...
...e esoteric hashkey classes in nshashkeys.h, and you can always roll your own if none of these fit your needs (make sure you're not duplicating an existing hashkey class though!) once you've determined what hashtable and hashkey classes you need, you can put it all together. ...
Components.utils.isXrayWrapper
pando properties are not visible, and if any native properties have been redefined, this has no effect. ...
...ed, this has no effect. use this function to determine whether a given object is an xray or not. ...
NS_NewNativeLocalFile
path. this string should be encoded using ascii or the multibyte character coding corresponding to the native filesystem. this path does not need to reference an existing file. it is an error to pass a relative filesystem path. afollowlinks [in] this attribute will determine if the nsilocalfile instance will automatically resolve symbolic links. this parameter has no effect on unix systems. on
windows, passing true causes shortcuts to be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved. aresult [out] a reference to the newly created nsilocalfile instance. return values the ns_newnativelocalfile function returns ns_ok if successful. otherwise, it returns an error code. ns_error_file_unrecognized_path indicates that the specified pat...
...es the ns_newnativelocalfile function returns ns_ok if successful. otherwise, it returns an error code. ns_error_file_unrecognized_path indicates that the specified path is invalid. this error is returned if a relative file path is passed to ns_newnativelocalfile. remarks on unix systems, the prefix "~/" is supported as a shorthand for the user's home directory. if you use this function on
windows 2000 or later, you would not be able to handle file names containing characters outside the default code page even though the os has no problem dealing with them. do not use this function (on
windows) unless it is guaranteed that the full path involved is always ascii. example code // create a local file that references c:\foo.txt nsresult rv; nscomptr<nsilocalfile> file; rv = ns_newnativeloc...
IAccessibleText
e bounding box is not degenerate. [propget] hresult characterextents( [in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); parameters offset index of the character for which to return its bounding box. the valid range is 0..length. coordtype specifies if the coordinates are relative to the screen or to the parent
window. x x coordinate of the top left corner of the bounding box of the referenced character. y y coordinate of the top left corner of the bounding box of the referenced character. width width of the bounding box of the referenced character. height height of the bounding box of the referenced character. return value e_invalidarg if bad [in] passed, [out] values are 0s. s_ok. ncharacters() returns tota...
...offsetatpoint( [in] long x, [in] long y, [in] enum ia2coordinatetype coordtype, [out] long offset ); parameters x the position's x value for which to look up the index of the character that is rendered on to the display at that point. y the position's y value for which to look up the index of the character that is rendered on to the display at that point. coordtype screen coordinates or
window coordinates. offset index of the character under the given point or -1 if the point is invalid or there is no character under the point. return value e_invalidarg if bad [in] passed, [out] value is 0. s_ok. oldtext() returns any removed text(). provided for use by the ia2_event_text_removed/updated event handlers. this data is only guaranteed to be valid while the thread notifying the event cont...
nsIAccessibleRelation
07 content flows from this object to a target object, that is has content that flows logically to another object in a sequential way, for example text flow. relation_flows_from 0x08 content flows to this object from a target object, that is has content that flows logically from another object in a sequential way, for example text flow. relation_sub
window_of 0x09 this object is a sub
window of a target object. relation_embeds 0x0a this object embeds a target object. this relation can be used on the objid_client accessible for a top level
window to show where the content areas are. it points to the accessible object corresponding to the root of content in that
window. this relation is very useful for finding ...
...ent quickly, and is the proper method for finding content in gecko 1.9 and beyond. relation_embedded_by 0x0b this object is embedded by a target object. relation_popup_for 0x0c this object is a transient component related to the target object. when this object is activated the target object doesn't lose focus. relation_parent_
window_of 0x0d this object is a parent
window of the target object. relation_described_by 0x0e this object is described by the target object. if the accessible has an nsiaccessible.description() , you can get the nsiaccessible that it was described by in order to get more formatting information. note: the label (see relation_labelled_by) and descr...
nsIAccessibleScrollType
accessible/public/nsiaccessibletypes.idlscriptable these constants control the scrolling of an object or substring into a
window. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) constants constant value description scroll_type_top_left 0x00 scroll the top left of the object or substring to the top left of the
window (or as close as possible). scroll_type_bottom_right 0x01 scroll the bottom right of the object or substring to the bottom right of the
window (or as close as possible). scroll_type_top_edge 0x02 scroll the top edge of the object or substring to the top edge of the
window (or as close as possible). scroll_type_bottom_edge 0x03 scroll the bottom edge of the object or substring to the bottom edge o...
...se as possible). scroll_type_bottom_right 0x01 scroll the bottom right of the object or substring to the bottom right of the
window (or as close as possible). scroll_type_top_edge 0x02 scroll the top edge of the object or substring to the top edge of the
window (or as close as possible). scroll_type_bottom_edge 0x03 scroll the bottom edge of the object or substring to the bottom edge of the
window (or as close as possible). scroll_type_left_edge 0x04 scroll the left edge of the object or substring to the left edge of the
window (or as close as possible). scroll_type_right_edge 0x05 scroll the right edge of the object or substring to the right edge of the
window (or as close as possible). scroll_type_anywhere 0x06 scroll an object the minimum amount necessary in order for the entire f...
nsIBidiKeyboard
alevel); attributes attribute type description havebidikeyboards boolean indicates whether or not the system has at least one keyboard for each direction (left-to-right and right-to-left) installed. read only. note: this throws ns_error_not_implemented if the widget layer doesn't provide this information. currently, this is only implemented on
windows. methods islangrtl() determines if the current keyboard language is right-to-left. (supported on: win32, mac, gtk2) note: prior to gecko 1.9 this method used a parameter 'out prbool aisrtl' to return the value. boolean islangrtl(); parameters none. return value true if the current keyboard is right-to-left, false if it is not. exceptions thrown ns_error_failure if no right-to...
...-left keyboards are installed. setlangfrombidilevel() sets the keyboard language to left-to-right or right-to-left. (supported on: win32) void setlangfrombidilevel( in pruint8 alevel ); parameters alevel if odd set the keyboard to right-to-left, if even set left-to-right. exceptions thrown ns_error_failure if no right-to-left keyboards are installed. remarks implementation
windows this implementation uses win32 api to get the language of the keyboard layout, and the direction of those languages. linux this implementation depends on the gecko and gtk+ version. in the gecko 1.8 branch, just islangrtl() had been implemented, and uses gdk's api to check the direction of keyboard layout, which has a problem with hebrew language. the problem is fixed on gtk+ version 2.10.1 and ...
nsIBrowserHistory
methods can be found in one interface. attributes attribute type description count obsolete since gecko 15.0 pruint32 indicates if there are entries in global history. for performance reasons this does not return the real number of entries. read only. lastpagevisited obsolete since gecko 10.0 autf8string the last page that was visited in a top-level
window. read only. note: the count attribute was removed in gecko 15.0 because it was only used to determine if there were any entries at all anyway, so the nsinavhistoryservice.hashistoryentries attribute is better for this. methods addpagewithdetails() obsolete since gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) note: this method was removed in geck...
...ong long abegintime, in long long aendtime ); parameters abegintime the time of the first page to remove, in microseconds from epoch. aendtime the time of the last page to remove, in microseconds from epoch. unregisteropenpage() obsolete since gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) mark a page as no longer being open (either by closing the
window or tab, or by navigating away from that page). note: this method was an alias for moziplacesautocomplete.unregisteropenpage(), which still exists and can be used instead. void unregisteropenpage( in nsiuri auri ); parameters auri the page to unregister as an open page. see also places using the places history service nsiglobalhistory2 ...
nsICommandLine
(in astring aargument); nsiuri resolveuri(in astring aargument); attributes attribute type description length long number of arguments in the command line. the application name is not part of the command line. read only. 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). this flag allows the default action to be prevented. state unsigned long the type of command line being processed. see state constants. read only.
windowcontext nsidom
window a
window to be targeted by this command line. in most cases, this will be null (xremote will sometimes set this attribute). read only. workingdirectory nsifile the working directory for this command lin...
... astring aflag, in boolean acasesensitive ); parameters aflag the flag name to locate. do not include the initial hyphen. acasesensitive whether to do case-sensitive comparisons. return value the position of the flag in the command line, or -1 if the flag is not found.getargument() gets the value an argument from the array of command-line arguments, given the index into the argument list. on
windows, flags of the form /flag are normalized to -flag. /flag:param are normalized to -flag param. on unix/linux and mac os x, flags of the form --flag are normalized to -flag, and flags of the form --flag=param are normalized to the form -flag param. astring getargument( in long aindex ); parameters aindex the argument to retrieve. this index is 0-based, and does not include the application name.
nsICommandLineRunner
rocessing the comand line handlers. toolkit/components/commandlines/public/nsicommandlinerunner.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsicommandline method overview void init(in long argc, in nscharptrarray argv, in nsifile workingdir, in unsigned long state); void run(); void set
windowcontext(in nsidom
window a
window); attributes attribute type description helptext autf8string process and combine the help text provided by each command-line handler. read only. methods init() called with the argc/argv combination passed to main. it assumes a native character set. on
windows the character set is utf-8, not the native codepage. void init( in long argc, in nscharptrarr...
...s used to resolve file and uri paths. state the type of command line being processed. this is an nsicommandline state flag. run() processes the command-line handlers in the proper order, and calls nsicommandlinehandler.handle() on each. void run(); parameters none. exceptions thrown ns_error_abort thrown when the handler aborts. all other errors thrown by handlers will be silently ignored. set
windowcontext() sets the
windowcontext parameter. void set
windowcontext( in nsidom
window a
window ); parameters a
window the dom
window object which will be set. it is an nsidom
window object. ...
nsICookiePromptService
the nsicookiepromptservice interface is to open a dialog to ask to permission to accept the cookie. extensions/cookie/nsicookiepromptservice.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview long cookiedialog(in nsidom
window parent, in nsicookie cookie, in acstring hostname, in long cookiesfromhost, in boolean changingcookie, out boolean rememberdecision); constants constant value description deny_cookie 0 holds the value for a denying the cookie. accept_cookie 1 holds the value for accepting the cookie. accept_session_cookie 2 holds the value for accepting the session cookie. methods cookiedialog() opens a dialog that asks for permission to accept a cookie. long cookiedialog( ...
...angingcookie, out boolean rememberdecision); constants constant value description deny_cookie 0 holds the value for a denying the cookie. accept_cookie 1 holds the value for accepting the cookie. accept_session_cookie 2 holds the value for accepting the session cookie. methods cookiedialog() opens a dialog that asks for permission to accept a cookie. long cookiedialog( in nsidom
window parent, in nsicookie cookie, in acstring hostname, in long cookiesfromhost, in boolean changingcookie, out boolean rememberdecision ); parameters parent the parent
window for the dialog. cookie the cookie about which permission is being requested. hostname the host that wants to set the cookie, not the domain; this is part of the cookie. cookiesfromhost the number of cookies the...
nsIDOMStorage2
dom/public/idl/storage/nsidomstorage2.idlscriptable please add a summary to this article. ...
... dom/public/idl/storage/nsidomstorage2.idlscriptable please add a summary to this article. ...
nsIDebug
in string astr, in string afile, in long aline); methods abort() requests the process to trigger a fatal abort. void abort( in string afile, in long aline ); parameters afile file containing abort request. aline line number of abort request. assertion() shows an assertion and triggers optional behavior based on the xpcom_debug_break environment variable, defaulting to calling break() on
windows and os/2 and warning on other platforms. void assertion( in string astr, in string aexpr, in string afile, in long aline ); parameters astr assertion message. aexpr expression that failed. afile file containing assertion. aline line number of assertion. break() requests the software break into a debugger. if no debugger is running then this usually results in a program crash. however,...
...d os/2 and warning on other platforms. void assertion( in string astr, in string aexpr, in string afile, in long aline ); parameters astr assertion message. aexpr expression that failed. afile file containing assertion. aline line number of assertion. break() requests the software break into a debugger. if no debugger is running then this usually results in a program crash. however, on
windows a dialog is first presented giving the user the option of aborting, breaking, or ignoring the request. the dialog can be suppressed by use of the windbgdlg registry key. this allows the debugger to be attached before the software break. void break( in string afile, in long aline ); parameters afile file containing break request. aline line number of break request. warning() shows a warnin...
nsIDownloadManagerUI
le this interface is used to implement the user interface for the download manager. if you wish to replace the default download manager user interface, implement this interface. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getattention(); void show([optional] in nsiinterfacerequestor a
windowcontext, [optional] in unsigned long aid, [optional] in short areason); attributes attribute type description visible boolean true if the download manager ui is visible; otherwise false. read only. constants constant value description reason_user_interacted 0 when opening the download manager user interface, this value ind...
...n() calls attention to the download manager's user interface if it's already open. the ui need not be visible to call this function, nor will the ui be made visible. void getattention(); parameters none. exceptions thrown ns_error_unexpected the user interface isn't currently open. show() shows the download manager's user interface to the user. void show( in nsiinterfacerequestor a
windowcontext, optional in unsigned long aid, optional in short areason optional ); parameters a
windowcontext optional the parent
window context to show the user interface. with this information, it's possible to put the download manager in a tab in the same
window as the parent. aid optional the id of the download to be preselected upon opening the download manager ui. areason optional on...
nsIEditorDocShell
method overview void makeeditable(in boolean inwaitforuriload); attributes attribute type description editable boolean this docshell is editable. read only. ...
...method overview void makeeditable(in boolean inwaitforuriload); attributes attribute type description editable boolean this docshell is editable. read only. ...
nsIExternalHelperAppService
boolean applydecodingforextension( in autf8string aextension, in acstring aencodingtype ); parameters aextension the filename exte...
...a helper application; otherwise false. docontent() binds an external helper application to a stream listener. the caller should pump data into the returned stream listener. when the onstoprequest is issued, the stream listener implementation will launch the helper app with this data. nsistreamlistener docontent( in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor a
windowcontext, in boolean aforcesave ); parameters amimecontenttype the content type of the incoming data. arequest the request corresponding to the incoming data. a
windowcontext use nsiservicemanager.getinterface() to retrieve properties like the dom
window or parent
window; the service might need this in order to bring up dialogs. aforcesave true to always save this...
nsIExternalProtocolService
specifically, this looks to see whether there are any known possible application handlers in either the nsihandlerservice datastore or registered with the os. bo...
...ean isexposedprotocol( in string aprotocolscheme ); parameters aprotocolscheme the scheme from a url: http, ftp, mailto, and so on. return value true if the protocol is exposed, false otherwise. loaduri() used to load a uri via an external application. might prompt the user for permission to load the external application. void loaduri( in nsiuri auri, [optional] in nsiinterfacerequestor a
windowcontext ); parameters auri the uri to load. a
windowcontext the
window to parent the dialog against, and, if a web handler is chosen, it is loaded in this
window as well. this parameter may be ultimately passed nsiuriloader.openuri() in the case of a web handler, and a
windowcontext is null or not present, web handlers will fail. loadurl() used to load a url via an external protocol handler (if o...
nsIFile
s. an alternate form operates on characters strings encoded in the "native" charset. a string containing characters encoded in the native charset cannot be safely passed to javascript via xpconnect. therefore, the utf-16 forms are scriptable, but the "native methods" are not. in addition, the native form cannot deal with files whose name contains characters outside the default system code page on
windows. using the native form limits the ability of your code to deal with the full unicode support on
windows 2000 or later where the os itself does not have such a limitation. therefore, you must not use the native form unless it is guaranteed that the path passed to a native form function is always ascii. to create an nsifile from a path you can use fileutils.jsm: var fileutils = cu.import("resour...
... parameters none. return value true if this nsifile corresponds to a normal file. otherwise it returns false. this method will throw ns_error_file_not_found if the path is invalid. to avoid this, check with nsifile.exists() first. ishidden() this method tests whether or not this nsifile corresponds to a file or directory that is hidden. in unix, hidden files start with a period. on mac and
windows, they have an attribute bit set. boolean ishidden(); parameters none. return value true if the file or directory is hidden. otherwise it returns false. isreadable() this method tests whether or not this nsifile corresponds to a file or directory that may be read by the user. boolean isreadable(); parameters none. return value true if the file or directory may be read by the user. o...
nsIFrameScriptLoader
[optional] in boolean aruninglobalscope) void removedelayedframescript(in astring aurl); jsval getdelayedframescripts(); loadframescript() load a script in the remote frame. frame scripts are loaded as soon as loadframescript() is called. if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a
window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given
window for the
window message manager, or every frame in every
window for the global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call. otherwise it wil...
... call. if this function is called on a chromemessagesender: it will load the frame script only into this chromemessagesender's frame aallowdelayedload should always be true. it's possible that the frame for this chromemessagesender is not yet available at the time of the loadframescript() call, and if you pass false in this situation, your process script won't be loaded. 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. frame scripts are essentially per-tab, so they don't get reloaded when ...
nsILoginManagerPrompter
introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/login-manager/prompter;1. to call this service, use: var loginmanagerprompter = components.classes["@mozilla.org/login-manager/prompter;1"] .getservice(components.interfaces.nsiloginmanagerprompter); method overview void init(in nsidom
window a
window); void prompttochangepassword(in nsilogininfo aoldlogin, in nsilogininfo anewlogin); void prompttochangepasswordwithusernames([array, size_is(count)] in nsilogininfo logins, in pruint32 count, in nsilogininfo anewlogin); void prompttosavepassword(in nsilogininfo alogin); methods init() initialize the prompter. must be called before using other interface...
...rompttochangepassword(in nsilogininfo aoldlogin, in nsilogininfo anewlogin); void prompttochangepasswordwithusernames([array, size_is(count)] in nsilogininfo logins, in pruint32 count, in nsilogininfo anewlogin); void prompttosavepassword(in nsilogininfo alogin); methods init() initialize the prompter. must be called before using other interfaces. void init( in nsidom
window a
window ); parameters a
window the in which the user is doing some login-related action that is resulting in a need to prompt them for something. the prompt will be associated with this
window (or, if a notification bar is being used, topmost opener in some cases). prompttochangepassword() ask the user if they want to change a login's password. if the user consents, modifylogin() will be ...
nsIMsgFilterCustomAction
both imap and local non-database storage of message * metadata. ...
...al non-database storage of message * metadata. */ /** * apply the custom action to an array of messages * * @param msghdrs array of nsimsgdbhdr objects of messages * @param actionvalue user-set value to use in the action * @param copylistener calling method (filtertype manual only) * @param filtertype type of filter being applied * @param msg
window message
window */ void apply(in nsiarray msghdrs /* nsimsgdbhdr array */, in autf8string actionvalue, in nsimsgcopyservicelistener copylistener, in nsmsgfiltertypetype filtertype, in nsimsg
window msg
window); /* does this action start an async action? if so, a copy listener must * be used to continue filter processing after the action. this...
nsIMsgSendLater
void sendunsentmessages(in nsimsgidentity identity) parameters identity the nsimsgidentity to send unsent messages for removelistener() remove an event listener from this nsisendmsglater instance void removelistener(in nsimsgsendlaterlistener listener); parameters listener th...
... void sendunsentmessages(in nsimsgidentity identity) parameters identity the nsimsgidentity to send unsent messages for removelistener() remove an event listener from this nsisendmsglater instance void removelistener(in nsimsgsendlaterlistener listener); parameters listener the nsimsgsendlate...
nsIObserver
failure to do so may result in memory leaks. observer.unregister(); "get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can degrade performance). observer.register("*"); see also ...
...failure to do so may result in memory leaks. ...
nsISHEntry
y saved refresh uri list for the content viewer. savelayoutstateflag boolean indicate whether layouthistorystate should be saved. statedata nsistructuredclonecontainer get/set data associated with this history state via a pushstate() call, serialized using structured clone. (prior to gecko 6.0 returned a json encoded string.) sticky boolean whether the content viewer is marked "sticky"
windowstate nsisupports saved state of the global
window object. methods addchildshell() saved child docshells corresponding to contentviewer. the child shells are restored as children of the parent docshell, in this order, when the parent docshell restores a saved presentation. append a child shell to the end of our list. void addchildshell( in nsidocshelltreeitem shell ); parameters shell ch...
...ich is unique among those of all other entries. void setuniquedocidentifier(); parameters none. seturi() uri for the document. void seturi( in nsiuri auri ); parameters auri native code only!setviewerbounds void setviewerbounds( in nsintrect bounds ); parameters bounds syncpresentationstate() ensure that the cached presentation members are self-consistent. if either contentviewer or
windowstate are null, then all of the following members are cleared/reset: contentviewer, sticky,
windowstate, viewerbounds, childshells, refreshurilist. void syncpresentationstate(); parameters none. example see nssessionstore.js for a real example. ...
nsITransferable
ean although this is not a read-only attribute, you should generally avoid changing it, since doing so may cause it not to actually reflect the status of the context in which the transferable was created. native code only! requestingnode nsidomnode the source dom node this transferable was created from. native code only! note: currently, this can only be used on
windows (in order to support network principal information in drag operations). constants kflavorhasdataprovider (that title needs to be better) constant value description kflavorhasdataprovider 0 a description is needed here. common mime types some of these need better descriptions, especially the mozilla-specific ones. constant valu...
... void init( in nsiloadcontext acontext ); parameters acontext the load context associated with the transferable object. this can be set to null if a load context is not available. remarks the load context is used to track whether the transferable is storing privacy-sensitive information. for example, we try to delete data that you copy to the clipboard when you close a private browsing
window. to get the appropriate load context in javascript callers, one needs to get to the document that the transferable corresponds to, and then get the load context from the document like this: var loadcontext = doc.defaultview.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsiloadcontext); in c++ callers, if you h...
nsIUpdatePrompt
void checkforupdates(); parameters none. showupdateavailable() shows a message advising the user that an update is available to be downloaded and installed. if the app.update.silent preference is true or the user interface is already displayed the call...
...pdate update ); parameters update an nsiupdate describing the update that failed to install. the nsiupdate object will not be the actual update when the error occurred during an update check and will instead be an nsiupdate object with the error information for the update check. showupdatehistory() shows a list of all updates that have been installed to date. void showupdatehistory( in nsidom
window parent ); parameters parent an nsidom
window indicating the parent
window to which to anchor the update list
window. this can be null. showupdateinstalled() shows a message detailing the update that was just installed successfully. if the app.update.silent preference is true, the app.update.showinstalledui preference is false, or the user interface is already displayed the call will be a no-op.
nsIWinAppHelper
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: @mozilla.org/xre/app-info;1. to create an instance, use: var xulappinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsiwinapphelper); the nsixulappinfo and nsixulruntime interfaces are also implemented by "xre/app-info". ...
...sixulappinfo and nsixulruntime interfaces are also implemented by "xre/app-info". method overview void fixreg(); obsolete since gecko 1.9 void postupdate(in nsilocalfile logfile); obsolete since gecko 1.9.2 attributes attribute type description usercanelevate boolean read only. returns true only if all the following conditions are all true at once: the operating system is at least
windows vista user account control is enabled the user is an administrator the application is not already running with elevated permissions otherwise it returns false. methods fixreg() obsolete since gecko 1.9 (firefox 3) invokes helper.exe with the /fixreg parameter. note that this parameter was never actually supported. void fixreg(); parameters none. postupdat...
nsIZipReader
sfile.jsm'); cu.import('resource://gre/modules/fileutils.jsm'); var reusablestreaminstance = cc['@mozilla.org/scriptableinputstream;1'].createinstance(ci.nsiscriptableinputstream); var pathtoxpitoread = os.path.join(os.constants.path.profiledir, 'extensions', 'portabletester@jetpack.xpi'); var nsifilexpi = new fileutils.file(pathtoxpitoread); //services.ww.active
window.alert(pathtoxpitoread); try { zr.open(nsifilexpi); //if file dne it throws here var entries = zr.findentries('*'); //we use asterik because we want everything listed out while (entries.hasmore()) { var entrypointer = entries.getnext(); //just a string of "zip path" (this means path to file in zip, and it uses forward slashes remember) var entry = zr.gete...
...stance.init(inputstream); var filecontents = reusablestreaminstance.read(entry.realsize); console.log('contenst of file=', filecontents); } else { console.log('is directory, no stream to read'); } } } catch (ex) { console.warn('exception occured = ', ex); if (ex.name == 'ns_error_file_not_found') { services.ww.active
window.alert('xpi at path does not exist!\n\npath = ' + pathtoxpitoread); } } finally { zr.close(); console.log('zr closed'); } see also nsizipentry nsizipwriter ...
nsPIPromptService
inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: the contract id isn't defined. this interface defines the meaning of each indexes of getint(), setint(), getstring() and setstring() of the nsidialogparamblock interface but they are defined on in c++. the indexes for getstring() and setstring() are: emsg the value is 0. this is the message text of the dialog. echeckboxmsg the value is 1. this is the label text of a checkbox on the dialog. eiconclass the value is 2. this is the class attribute value of the icon image. ...
...is is the button number which should be the default button on the dialog. edelaybuttonenable the value is 6. if this is not 0, the all buttons are disabled when the dialog is shown. and they will be enabled later. esoundeventid the value is 7. this is the sound event id which should be played when the dialog is shown. see also nsisound.playeventsound(). method overview void dodialog(in nsidom
window aparent, in nsidialogparamblock aparamblock, in string achromeurl); methods dodialog() opens a dialog. void dodialog( in nsidom
window aparent, in nsidialogparamblock aparamblock, in string achromeurl ); parameters aparent the parent
window of the dialog. aparamblock various parameters for the dialog. achromeurl the url of the dialog implementation. ...
NS_ASSERTION
the behavior of an assertion failure can be controlled using the xpcom_debug_break environment variable. an assertion failure should be thrown on critical program errors only. a triggered assertion failure is equivalent to crashing in tinderbox tests. note on terminology: "assertion" is the condition to test. there is always an assertion in ns_assertion; it is the first argument. ...
...ssertion" is the condition to test. ...
Storage
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. warning: it may be tempting to give your database a name ending in '.sdb' for sqlite database, but this is not recommended. this extension is treated specially by
windows as a known extension for an 'application compatibility database' and changes are backed up by the system automatically as part of system restore functionality. this can result in significantly higher overhead file operation. closing a connection to close a connection on which only synchronous transactions were performed, use the mozistorageconnection.close() method. if you performed any async...
...e integrity, but there are a few things you can do that can lead to database corruption. you can find out more by reading sqlite's documentation on this. 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. this includes "my.db" and "../dir/my.db" or, on
windows (case-insensitive) "my.db" and "my.db". sqlite tries to handle many of these cases, but you shouldn't count on it. access a database from a symbolic or hard link. access a statement from more than one thread (discussed in thread safety). call mozistorageservice.backupdatabasefile() on a locked database, assuming this will leave your database locked. due to bug 626193, locked database...
XPCOM ABI
only applications which use this abi could use this xpcom component. ...
...only applications which use this abi could use this xpcom component. to put it simply, an xpcom component built for a specific abi would only be compatible with firefox, thunderbird or other xulrunner application built for the same abi. ...
XPIDL
t place). note that if both properties are set, the jscontext *cx is added first, followed by the uint8_t _argc, and then ending with return value parameter. finally, as an exception to everything already mentioned, for attribute getters and setters the jscontext *cx comes before any other arguments. another native-only property is nostdcall. normally, declarations are made in the stdcall abi on
windows to be abi-compatible with com interfaces. any non-scriptable method or attribute with nostdcall instead uses the thiscall abi convention. methods without this property generally use ns_imethod in their declarations and ns_imethodimp in their definitions to automatically add in the stdcall declaration specifier on requisite compilers; those that use this method may use a plain `nsresult' instead.
... pointers must be release'd. afterwards, the above rules for out apply. shared out-parameters should not be freed, as they are intended to refer to constant string literals. resources (mostly outdated) some unsorted notes including a keyword list xpidl is a tool for generating c++ headers, java interfaces, xpconnect typelibs, and html documentation from xpidl files generating xpt files on
windows a google groups post with instructions on how to use variable-length argument lists using xpidl. ...
Mail client architecture overview
asources are the glue code that reflect mail data such as folders and messages into rdf. rdf will use the datasource to create user interfaces based on this data. datasources are also used to run commands that operate on this mail data. events - as data changes throughout the mail application, the event system notifies key components such as datasources and the url system of these changes. mail
window management - each mail
window maintains a certain amount of state to aid in view navigation, progress display, etc. url display and dispatching - in order to perform network operations such as downloading new mail, copying and moving messages, and displaying messages from a remote server, the url system interacts with necko and reflects it's state to the mail
window. there are also a number of...
...base for a given folder is a summary of some of the key attributes in a folder such as the author and subject. finally, there are larger modules outside of the mail client that are mail-oriented. most of these modules have little dependancy on the mail reader itself: compose - the mail compose module is responsible for anything that has to do with sending mail. this includes the mail compose
window, creation of rfc822 messages from the data a user has entered, and sending the messages via smtp. address book - the address book contains lists of people and all attributes associated with them such as their e-mail address, phone number, etc. ...
Thunderbird Binaries
harm it. they should only be used for testing purposes. if you wish to use a nightly build on your main profile, you should make sure you back up your profile. nightly builds from the comm-central trunk the trunk is the central source code that is used for continuous and ongoing development. trunk builds contain the very latest bleeding-edge changes and updates, as well as 64-bit builds for
windows. latest english trunk builds are available at: https://archive.mozilla.org/pub/thunderbird/nightly/latest-comm-central/ latest localized trunk builds are available at: https://archive.mozilla.org/pub/thunderbird/nightly/latest-comm-central-l10n/ note: please use http://ftp.stage.mozaws.net/pub/thunderbird/nightly/latest-comm-central/ because the above two links currently do not work. frequen...
...correctly. their changes will be made to the trunk so that they don't delay the release and will be picked up in future branches. distinguishing between different nightly builds the main way you can determine if you are using a trunk or branch build is to click the "help" menu and choose "about". you should see a string that looks something like this: comm-central-1.9.2 branch: mozilla/5.0 (
windows; u;
windows nt 5.1; en-us; rv:1.9.2.2pre) gecko/20100308 lanikai/3.1b1pre comm-central-trunk: mozilla/5.0 (
windows; u;
windows nt 5.1; en-us; rv:1.9.3a1pre) gecko/20090826 shredder/3.1a1pre the part that you want to note is the gecko revision number (rv) and the thunderbird version string. these correspond to which build you are using. it works something like this: rv:1.7.x and thunde...
Building a Thunderbird extension 5: XUL
warning: this content is for older versions of thunderbird. much of it may no longer be relevant. see developer.thunderbird.net for newer information. thunderbird's user interface is written in xul and javascript. xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc. we add widgets by inserting new xul dom elements into the application
window and modify them using scripts and attaching event handlers. while xul provides the elements of the user interface, actions are written in javascript. for our first extension, we will add some text to the thunderbird status bar. the status bar is implemented in a xul file called messenger.xul, which can be found in the chrome/messenger/content/messenger folder which is packaged inside the omni.ja archi...
...when parsing our overlay file, the xul engine will take all child elements of the <statusbar> tag and merge them with the original xul document's <statusbar> tag. in the example above we have defined a new <statusbarpanel> item (that can be referred to as my-panel) which will create a new instance of this widget type and add it at the end of the statusbar. in thunderbir...
Add Option to Context Menu
assuming this on chrome.manifest: overlay chrome://messenger/content/mail
windowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise a...
... <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the same xpi if our extension needs to support thunderbird 2 and 3 we need to make custom overlays for each version. this can be reached by adding these lines to the chrome.manifest file: overlay chrome://messenger/content/mail
windowoverlay.xul chrome://myaddon/content/tboverlay-tb2.xul appversion<3.0 overlay chrome://messenger/content/mail
windowoverlay.xul chrome://myaddon/content/tboverlay-tb3.xul appversion=>3.0 than we need two overlay xul files with content from examples above. note: if our extension supports more mozilla applications (for example mozilla firefox and mozilla thunderbird) we need also specify applicatio...
customDBHeaders Preference
if the .msf file is rebu...
...if the .msf file is rebuilt, all the msghdrs should have the string property set correctly. the attaching of the column handler ...
Using the Mozilla source server
this one instead) note: do not use the cvs from mozillabuild, it will not work! set up symbols follow the instructions for using the mozilla symbol server. once the symbol path is set you must now enable source server. using the source server in windbg in the windbg command line, type .srcfix and hit enter. this enables source server support. now, when you click on a frame in the "calls"
window, windbg will prompt you about running cvs to download the associated source code. 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. using the source server in visual studio note: source server support does not work correctly out of the box in visual studio 2005. if you...
...e windbg install dir to the visual studio install dir (replacing the existing copy) it will work. enable source server support under tools -> options. also, disable (uncheck) the box that says "require source files to exactly match the original version". start debugging your program. symbols will load and then, if you're using a cvs build, when you try to step into or step over a confirmation
window will appear asking if you trust the cvs command that source server is trying to run. after the command executes, the source file will load in the
window. ...
Using the Mozilla symbol server
symbols are available for at least 30 previous days worth of nightly builds, and firefox releases from 2.0.0.4. this allows debugging of those builds without forcing all users to download large debugging files. the server functions like microsoft's symbol server so the documentation there can be useful. note that because mozilla release builds are heavily optimized, debugging is not always easy. the debugger will not be able to show you the content of all variables and the execution path can seem strange because of inlining, tail calls, and other compiler optimizations. ...
...the command should look like this (again, you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): c:\program files\mozilla firefox>c:\progra~1\debugg~1\symchk.exe /r c:\progra~1\mozill~1\* /s srv*c:\symcache\*https://symbols.mozilla.org/ note the \* after the mozilla directory. the output of this command should ...
Virtualenv
x, you will need xcode to use virtualenv. see this article for details. using virtualenv once you have virtualenv installed, you can make virtual environments: > virtualenv tmp new python executable in tmp/bin/python installing setuptools............done. installing pip...............done. a python binary, as well as easy_install and pip are available in the bin/ subdirectory (or scripts on
windows). > ls tmp/bin/ activate activate.fish easy_install pip python activate.csh activate_this.py easy_install-2.7 pip-2.7 using this python binary, or these scripts (which point to this python binary), you will correctly install python packages in the lib/python2.x/site-packages directory and they will be appropriately added to your import path (sys.path) via lib/python2.x/s...
... using this python binary, or these scripts (which point to this python binary), you will correctly install python packages in the lib/python2.x/site-packages directory and they will be appropriately added to your import path (sys.path) via lib/python2.x/site.py. in order to get the virtualenv's python binary on your path, you should source the bin/activate script on unix or run activate.bat on
windows. unix example . bin/activate once the virtualenv is activated, the virtualenv's python (and other executables) will be on your path and you will have a new environment variable, virtual_env, that points to the path of the virtualenv, as well as a deactivate function for deactivating the virtualenv. virtualenv tools virtualenv does one thing well: creates isolated virtual environments of py...
ABI
js-ctypes while programming x86 and x86-64/x64/amd64 architectures. a calling convention is an implementation-level (low-level) scheme regarding how subroutines receive parameters from their caller and how they revert. http://en.wikipedia.org/wiki/x86_calling_conventions abi abi stands for "application binary interface". http://en.wikipedia.org/wiki/application_binary_interface os specific
windows https://msdn.microsoft.com/en-us/library/k2b2ssfy.aspx https://msdn.microsoft.com/en-us/library/9b372w95.aspx details with respect to js-ctypes this explains how to use it in the js-ctypes scope. three different abis exist: ctypes.default_abi, ctypes.stdcall_abi, and ctypes.winapi_abi. ctypes.default_abi corresponds to cdecl; standard libraries use this abi. you can also use this for v...
...ee different abis exist: ctypes.default_abi, ctypes.stdcall_abi, and ctypes.winapi_abi. ctypes.default_abi corresponds to cdecl; standard libraries use this abi. you can also use this for various system calls,including those on mac os x and linux. ctypes.thiscall_abi more information is available at bugzilla :: 552533. ctypes.stdcall_abi used for calling functions declared with stdcall on
windows. these functions' names are automatically mangled for you by js-ctypes. ctypes.winapi_abi used for calling
windows system functions. these are declared as stdcall on
windows, but do not have mangled names like those used by stdcall_abi above. os specific win32 and os2 callbacks in js-ctypes under these operating systems use a different abi than regular function declarations. other all oth...
Scripting plugins - Plugins
the plugin page's origin. what's in the plugin code? a plugin that wishes to be scriptable using this new mechanism needs to return the appropriate npobject (which is created by calling npn_createobject) when the browser requests it by calling: npp_getvalue(npp, nppvpluginscriptablenpobject, ...); accessing browser objects from a plugin a plugin that wishes to access objects in the browser
window that loaded the plugin can do this by getting the npobject for the browser's
window object, or the dom element that loaded the plugin. this is done by using an extension to npn_getvalue. the extensions are two additions to the npnvariables enumeration; the new enumerations are npnv
windownpobject and npnvpluginelementnpobject. calling npn_getvalue() with either of those new enumerations will retur...
...turn an npobject representing the browser object, and from there, the functions in this api can be used to get and set properties, and to call methods on those browser objects. and as always when working with reference counted npobjects, the caller is responsible for calling npn_releaseobject on the npobject to drop the reference. ...
Structures - Plugins
-in api. structure summary npanycallbackstruct contains information required during embedded mode printing. npbyterange represents a particular range of bytes from a stream. npembedprint substructure of npprint that contains platform-specific information used during embedded mode printing. npevent represents an event passed by npp_handleevent to a
windowless plug-in. npfullprint substructure of npprint that contains platform-specific information used during full-page mode printing. npp represents a single instance of a plug-in. np_port contains information required by the
window field of an np
window structure. npprint contains information the plug-in needs to print itself in full-page or embedded mo...
... npprintcallbackstruct contains information required by the platformprint field of the npembedprint during embedded mode printing. nprect represents a rectangular area of a page. npregion represents a platform-defined region of a page. npsaveddata block of instance information saved after the plug-in is deleted; can be returned to the plug-in. npset
windowcallbackstruct contains information about the plug-in's unix
window environment. npstream represents a stream of data either produced by the browser and consumed by the plug-in, or produced by the plug-in and consumed by the browser. np
window contains information about the target into which the plug-in instance can draw. « previousnext » ...
Plugin Roadmap for Firefox - Plugins
m flash, firefox is working with other browsers to progressively and carefully make flash usage less common. below is the roadmap of past and future support for plugins in firefox. schedule june 2016 starting with firefox 47 in june 2016, all plugins other than adobe flash are click-to-activate. users choose which sites are allowed to activate each plugin. in addition, the 64-bit firefox for
windows only supports the flash plugin. march 2017 starting with firefox 52 in march 2017, plugins other than adobe flash are no longer supported in firefox. firefox extended support release 52 will continue to support non-flash plugins until early 2018. august 2017 starting with firefox 55 in august 2017, users must choose which sites are allowed to activate the flash plugin. users will have the ch...
...api 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 internet explorer april 2016 - putting users in control of flash december 2016 - extending user control of flash with click-to-run july 2017 - flash on
windows timeline august 2019 - update on removing flash from microsoft edge and internet explorer apple safari june 2016 - next steps for legacy plug-ins july 2017 - adobe announces flash distribution and updates to end ...
DOM Property Viewer - Firefox Developer Tools
enabling the dom property viewer the dom property viewer is not enabled by default. to enable it, open the developer tool settings and check the "dom" box under "default firefox developer tools". ...
...ngs 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. the toolbox will appear at the bottom of the browser
window, with the dom property viewer activated. it's just called "dom" in the toolbox. dom property viewer user interface dom tree the different properties of the dom are displayed as an expandable tree. the left-hand side shows the property's name, and the right-hand side shows its value. up to three properties of an object and items of an array are displayed. if a property has more elements than th...
Access debugging in add-ons - Firefox Developer Tools
we are planning to deprecate the use by firefox add-ons of the techniques described in this document. don't write new add-ons that use these techniques. the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):
window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded. ...
...recate the use by firefox add-ons of the techniques described in this document. don't write new add-ons that use these techniques. the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):
window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded. ...
Tutorial: Set a breakpoint - Firefox Developer Tools
k on the scratchpad panel and enter the following code: components.utils.import("resource://gre/modules/jsdebugger.jsm"); components.utils.import("resource://gre/modules/console.jsm"); // this simply defines 'debugger' in this scratchpad; // it doesn't actually start debugging anything. adddebuggertoglobal(this); // create a 'debugger' instance. var dbg = new debugger; // make the tab's top
window a debuggee, and get a // debugger.object referring to the
window. var
windowdo = dbg.adddebuggee(tabs[0].content); // get a debugger.object referring to the
window's `report` // function. var reportdo =
windowdo.getownpropertydescriptor('report').value; // set a breakpoint at the entry point of `report`. reportdo.script.setbreakpoint(0, { hit: function (frame) { console.log('hit bre...
...l trigger along with the first two. keep in mind, however, that when multiple debuggers share a debuggee, the order in which their handlers run is not specified. if more than one tool tries to influence the debuggee’s behavior, their combined behavior could be unpredictable. close the web page and the browser content toolbox. since both the scratchpad’s global object and the debuggee
window are now gone, the debugger instances will be garbage collected, since they can no longer have any visible effect on firefox’s behavior. the debugger api tries to interact with garbage collection as transparently as possible; for example, if both a debugger.object instance and its referent are not reachable, they will both be collected, even while the debugger instance to which the shadow belong...
Debugger.Object - Firefox Developer Tools
bedding provides "host objects" to expose application-specific functionality to scripts. the hostannotations accessor consults the embedding for additional information about the referent that might be of interest to the debugger. the returned object's properties' meanings are up to the embedding. for example, a web browser might provide host annotations for global objects to distinguish top-level
windows, iframes, and internal javascript scopes. by convention, host annotation objects have a string-valued "type" property that, taken together with the object's class, indicate what sort of thing the referent is. the host annotation object's other properties provide further details, as appropriate for the type. for example, in firefox, a metadata object for a javascript module's global object migh...
...his debugger.object's compartment is permitted to unwrap, return a debugger.object instance referring to the wrapped object. if we are not permitted to unwrap the referent, return null. if the referent is not a wrapper, return this debugger.object instance unchanged. unsafedereference() return the referent of this debugger.object instance. if the referent is an inner object (say, an html5
window object), return the corresponding outer object (say, the html5
windowproxy object). this makes unsafedereference more useful in producing values appropriate for direct use by debuggee code, without using invocation functions. this method pierces the membrane of debugger.object instances meant to protect debugger code from debuggee code, and allows debugger code to access debuggee objects throug...
Index - Firefox Developer Tools
are not built into firefox, but ship as separate add-ons. 6 dom inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul
windows. the dom hierarchy can be navigated using a two-paned
window that allows a variety of different views on the document and all nodes within. 7 dom inspector faq dom_inspector the file menu contains approaches which will allow you to inspect a document. 8 dom inspector internals code, tools, internals, organisation, source there are three main facets to do...
... you to debug add-ons and the browser's own javascript code rather than just web pages like the normal toolbox. the browser toolbox's context is the whole browser rather than just single page on a single tab. 16 dom property viewer dom, tools, web development the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the
window object of the current page or the selected iframe. 17 debugger-api debugger, intermediate, intro, javascript, tools mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code. both firefox’s built-in developer tools and the firebug add-on use debugger to ...
Intensive JavaScript - Firefox Developer Tools
this time, the recording should look something like this: this is exactly what we might have expected to see. instead ...
...this time, the recording should look something like this: this is exactly what we might have expected to see. instead of a single solid orange block, each button-press shows up as a long sequence of very short orange blocks. the orange bl...
Shader Editor - Firefox Developer Tools
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. to enable it, open the toolbox settings and check "shader editor" in the "default firefox developer tools" item. you'll now see "shader editor" appear in the toolbar. click it and the shader editor opens. ...
...r editor" in the "default firefox developer tools" item. you'll now see "shader editor" appear in the toolbar. click it and the shader editor opens. at first you'll just see a blank
window with a button asking you to reload the page: to get started, load a page which creates a webgl context and loads a program into it. the screenshots below are from the unreal engine demo. you'll now see a
window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context. if you hover over an entry in the list, the geometry drawn by that program is highlighted ...
Style Editor - Firefox Developer Tools
ditor 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). the toolbox will appear at the bottom of the browser
window, with the style editor activated: the style editor is divided into three main sections: the style sheet pane on the left the editor on the right the media sidebar. the style sheet pane the style sheet pane, on the left, lists all the style sheets being used by the current document. you can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of th...
...or "sublime" to that setting. if you do this, the selected bindings will be used for all the developer tools that use the source editor. you need to reopen the editor for the change to take effect. from firefox 33 onwards, the key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config. ...
View Source - Firefox Developer Tools
view source features view source has three additional features, which can be accessed from the context menu in the view source tab: go to line scrolls to the specified line. if the number is higher than the lines in a file, you receive an error message. wrap long lines (toggle) wraps long lines to the width of the page. ...
...he page. syntax highlighting (toggle) applies syntax highlighting to the code.when syntax highlighting is on, view source also highlights parsing errors in red. hovering your mouse over errors displays a tooltip explaining the error. this feature is useful when you're looking for html errors. to access go to line from the keyboard, press control + option + l on macos, or alt + shift + l on
windows or linux. link to a line number it is possible to link to a particular line, by adding the #linennn anchor to the url the browser will jump to the nnn line. for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source",...
Web Console Helpers - Firefox Developer Tools
lected in the request blocking sidebar. unblock with :unblock. cd() switches javascript evaluation context to a different iframe in the page. this helper accepts multiple different ways of identifying the frame to switch to. you can supply any of the following: a selector string to be passed to document.queryselector to locate the iframe element the iframe element itself the content
window inside the iframe see working with iframes. clear() clears the console output area. clearhistory() just like a normal command line, the console command line remembers the commands you've typed. use this function to clear the console's command history. copy() copies the argument to the clipboard. if the argument is a string, it's copied as-is. if the argument is a dom node, its outerht...
...n present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included. --filename string the name to use in saving the file. the file should have a ".png" extension. --fullpage boolean if included, the full webpage will be saved. with this parameter, even the parts of the webpage which are outside the current bounds of the
window will be included in the screenshot. when used, "-fullpage" will be appended to the file name. --selector string the css query selector for a single element on the page. when supplied, only this element will be included in the screenshot. :unblock (starting in firefox 80) followed by an unquoted string, removes blocking for urls containing that string. in the netwo...
Rich output - Firefox Developer Tools
click on the triangle, and the object will be expanded to show its contents: starting with firefox 67 (available now in firefox developer) you can use the arrow keys on your...
...n object and the left-arrow key closes open objects. examining request details similar to examining object details, you can see the details about a network request directly in the console. 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. export output to the clipboard once you have output in the console
window, you can save it to the clipboard by right-clicking on the output and selecting export visible messages to clipboard: this will copy all of the output to the clipboard. then you can paste it into a document. the output will look something like this: console.log(todolist) array(4) [ {…}, {…}, {…}, {…} ] debugger eval code:1:9 undefined if you expand objects, such as arrays, you get sl...
about:debugging (before Firefox 68) - Firefox Developer Tools
less add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your firefox). next to each entry is a button labeled "debug". if the "debug" button is disabled, check the "enable add-on debugging" box. if you click "debug", you'll see a dialog asking you to accept an incoming connection. click "ok", and the add-on debugger will start in a separate
window. note that sometimes the debugger
window is hidden by the main firefox
window. see the page on the add-on debugger for all the things you can do with this tool. the "enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. both preferences must be true to enable add-on debugging. checking the box sets both preferences t...
... if your history preference is set to "never remember history" or "always use private browsing mode". if the dom.serviceworkers.enable preference is set to false in about:config. ...
AnalyserNode.smoothingTimeConstant - Web APIs
ouble within the range 0 to 1 (0 meaning no time averaging). the default value is 0.8. if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", which essentially smoothes the changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls. in technical terms, we apply a blackman
window and smooth the values over time. the default value is good enough for most cases. note: if a value outside the range 0–1 is set, an index_size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the cur...
... the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). if you are curious about the effect the smoothingtimeconstant() has, try cloning the above example and setting analyser.smoothingtimeconstant = 0; instead. you'll notice that the value changes are much more jarring. var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.85; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { ...
AudioBuffer.getChannelData() - Web APIs
greater than of equal to audiobuffer.numberofchannels, an index_size_err exception will be thrown. return value a float32array. example in the following example we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. you can also run the code live, or view the source. ...
...o audiobuffer.numberofchannels, an index_size_err exception will be thrown. return value a float32array. example in the following example we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. you can also run the code live, or view the source. ...
AudioBuffer - Web APIs
udiobuffer to the destination array. audiobuffer.copytochannel() copies the samples to the specified channel of the audiobuffer, from the source array. example the following simple example shows how to create an audiobuffer and fill it with random white noise. you can find the full source code at our webaudio-examples repository; a running live version is also available. ...
...nation array. audiobuffer.copytochannel() copies the samples to the specified channel of the audiobuffer, from the source array. example the following simple example shows how to create an audiobuffer and fill it with random white noise. you can find the full source code at our webaudio-examples repository; a running live version is also available. ...
AudioBufferSourceNode - Web APIs
audiobuffersourcenode.start() used to schedule playback of the audio data contained in the buffer, or to begin playback immediately. examples in this example, we create a two-second buffer, fill it with white noise, and then play it using an audiobuffersourcenode. the comments should clearly explain what is going on. you can also run the code live, or view the source. ...
...start() used to schedule playback of the audio data contained in the buffer, or to begin playback immediately. examples in this example, we create a two-second buffer, fill it with white noise, and then play it using an audiobuffersourcenode. the comments should clearly explain what is going on. you can also run the code live, or view the source. ...
AudioNode.channelCount - Web APIs
pend on the value of audionode.channelcountmode: it is ignored if the channelcountmode value is max. it is used as a maximum value if the channelcountmode value is clamped-max. it is used as the exact value if the channelcountmode value is explicit. syntax var oscillator = audioctx.createoscillator(); var channels = oscillator.channelcount; value an integer. ...
...dionode.channelcountmode: it is ignored if the channelcountmode value is max. it is used as a maximum value if the channelcountmode value is clamped-max. it is used as the exact value if the channelcountmode value is explicit. syntax var oscillator = audioctx.createoscillator(); var channels = oscillator.channelcount; value an integer. example var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); oscillator.channelcount; specifications specification status comment web audio apithe definition of 'channelcount' in that specification. working draft ...
AudioNode.channelCountMode - Web APIs
the number of channels is defined by the value of channelcount. audiodestinationnode, analysernode, channelsplitternode in older versions of the spec, the default for a channelsplitternode was max. syntax var oscillator = audioctx.createoscillator(); oscillator.channelcountmode = 'explicit'; value a enumerated value representing a channelcountmode. ...
...ls is defined by the value of channelcount. audiodestinationnode, analysernode, channelsplitternode in older versions of the spec, the default for a channelsplitternode was max. syntax var oscillator = audioctx.createoscillator(); oscillator.channelcountmode = 'explicit'; value a enumerated value representing a channelcountmode. example var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); oscillator.channelcountmode = 'explicit'; specifications specification status comment web audio apithe definition of 'channelcountmode' in that specification. ...
AudioNode.channelInterpretation - Web APIs
n-mix discrete channels. fill each output channel with its input counterpart, that is the input channel with the same index. input channels with no corresponding output channels are dropped. syntax var oscillator = audioctx.createoscillator(); oscillator.channelinterpretation = 'discrete'; value an enumerated value representing a channelinterpretation. ...
.... fill each output channel with its input counterpart, that is the input channel with the same index. input channels with no corresponding output channels are dropped. syntax var oscillator = audioctx.createoscillator(); oscillator.channelinterpretation = 'discrete'; value an enumerated value representing a channelinterpretation. ...
AudioNode.context - Web APIs
the read-only context property of the audionode interface returns the associated baseaudiocontext, that is the object representing the processing graph the node is participating in. syntax var acontext = anaudionode.context; value the audiocontext or offlineaudiocontext object that was used to construct this audionode. ...
... the read-only context property of the audionode interface returns the associated baseaudiocontext, that is the object representing the processing graph the node is participating in. syntax var acontext = anaudionode.context; value the audiocontext or offlineaudiocontext object that was used to construct this audionode. ...
AudioParam.exponentialRampToValueAtTime() - Web APIs
erface return void. examples in this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, exponentialramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively. ...
...amples in this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, exponentialramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively. ...
AudioParam.linearRampToValueAtTime() - Web APIs
l buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, linearramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively. this is pretty useful for fade in/fade out effects, although audioparam.exponentialramptovalueattime() is often said to be a bit more natural. ...
...o-param repo for the source code, or view the example live.) when these buttons are pressed, linearramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively. this is pretty useful for fade in/fade out effects, although audioparam.exponentialramptovalueattime() is often said to be a bit more natural. ...
AudioParam.setTargetAtTime() - Web APIs
dia source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect lasts being controlled by the timeconstant. ...
...trol buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect lasts being controlled by the timeconstant. ...
AudioParam.setValueAtTime() - Web APIs
features a media element source with two control buttons (see our webaudio-examples repo for the source code, or view the example live). ...
...nt source with two control buttons (see our webaudio-examples repo for the source code, or view the example live). ...
BaseAudioContext.createBiquadFilter() - Web APIs
, which represents a second order filter configurable as several different common filter types. syntax baseaudiocontext.createbiquadfilter(); returns a biquadfilternode. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...cond order filter configurable as several different common filter types. syntax baseaudiocontext.createbiquadfilter(); returns a biquadfilternode. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
BaseAudioContext.createBuffer() - Web APIs
ce, but in practice you will be unable to properly reproduce high frequency content (treble sound). now let's look at a more complex createbuffer() example, in which we create a three second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comment should clearly explain what is going on. you can also run the code live, or view the source. ...
... will be unable to properly reproduce high frequency content (treble sound). now let's look at a more complex createbuffer() example, in which we create a three second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comment should clearly explain what is going on. you can also run the code live, or view the source. ...
BaseAudioContext.createBufferSource() - Web APIs
ccessfully decodes an audio track. syntax var source = baseaudiocontext.createbuffersource(); returns an audiobuffersourcenode. example in this example, we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. note: you can also run the code live, or view the source. ...
...udio track. syntax var source = baseaudiocontext.createbuffersource(); returns an audiobuffersourcenode. example in this example, we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. note: you can also run the code live, or view the source. ...
BaseAudioContext.createGain() - Web APIs
ollowing example shows basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value. ...
...basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value. ...
BaseAudioContext.createOscillator() - Web APIs
e. syntax var oscillatornode = audioctx.createoscillator(); returns an oscillatornode. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. ...
...tornode = audioctx.createoscillator(); returns an oscillatornode. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. ...
BaseAudioContext.createStereoPanner() - Web APIs
and a stereopannernode, and connect the two together using the connect() method. we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved. moving the slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively. ...
..., and connect the two together using the connect() method. we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved. moving the slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively. ...
BaseAudioContext.decodeAudioData() - Web APIs
only works on complete file data, not fragments of audio file data. syntax older callback syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcallback, errorcallback); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest,
windoworworkerglobalscope.fetch() or filereader. successcallback a callback function to be invoked when the decoding successfully finishes. the single argument to this callback is an audiobuffer representing the decodeddata (the decoded pcm audio data). usually you'll want to put the decoded data into an audiobuffersourcenode, from which it can be played and manipulated how you want. errorcallback a...
...ext.createbuffersource(), connects the source to the audiocontext.destination and sets it to loop. the buttons in the example simply run getdata() to load the track and start it playing, and stop it playing, respectively. when the stop() method is called on the source, the source is cleared out. note: you can run the example live (or view the source.) // define variables var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var source; var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio track, and // decodeaudiodata to decode it and stick it in a buffer. // then we put the buffer into the source function getdata() { ...
BaseAudioContext.destination - Web APIs
audiodestinationnode representing the final destination of all audio in the context. it often represents an actual audio-rendering device such as your device's speakers. syntax baseaudiocontext.destination; value an audiodestinationnode. example note: for a full example implementation, see one of our web audio demos on the mdn github repo, like voice-change-o-matic. ...
...epresenting the final destination of all audio in the context. it often represents an actual audio-rendering device such as your device's speakers. syntax baseaudiocontext.destination; value an audiodestinationnode. example note: for a full example implementation, see one of our web audio demos on the mdn github repo, like voice-change-o-matic. ...
BiquadFilterNode.Q - Web APIs
lter = audioctx.createbiquadfilter(); biquadfilter.q.value = 100; note: though the audioparam returned is read-only, the value it represents is not. value an audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...iquadfilter(); biquadfilter.q.value = 100; note: though the audioparam returned is read-only, the value it represents is not. value an audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
BiquadFilterNode.detune - Web APIs
ctx.createbiquadfilter(); biquadfilter.detune.value = 100; note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...); biquadfilter.detune.value = 100; note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
BiquadFilterNode.frequency - Web APIs
dioctx.createbiquadfilter(); biquadfilter.frequency.value = 3000; note: though the audioparam returned is read-only, the value it represents is not. value an audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...er(); biquadfilter.frequency.value = 3000; note: though the audioparam returned is read-only, the value it represents is not. value an audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
BiquadFilterNode.gain - Web APIs
er = audioctx.createbiquadfilter(); biquadfilter.gain.value = 25; note: though the audioparam returned is read-only, the value it represents is not. value an audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...uadfilter(); biquadfilter.gain.value = 25; note: though the audioparam returned is read-only, the value it represents is not. value an audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
BiquadFilterNode.type - Web APIs
sition occurs. controls how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...ols how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
BiquadFilterNode - Web APIs
frequencyresponse() from the current filter parameter settings this method calculates the frequency response for frequencies specified in the provided array of frequencies. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
...om the current filter parameter settings this method calculates the frequency response for frequencies specified in the provided array of frequencies. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
Using the CSS properties and values API - Web APIs
lue, and what the default value of the custom property is. there are two ways to register a property, in javascript or in css. note: the javascript option has working implementations. the css option does not. css.registerproperty the following will register a css custom properties, --my-prop, using css.registerproperty, as a color, give it a default value, and have it not inherit its value:
window.css.registerproperty({ name: '--my-prop', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); @property the same registration can take place in css. the following will register a css custom properties, --my-prop, using @property, as a color, give it a default value, and have it not inherit its value: @property --my-prop { syntax: '<color>'; inherits: false; initial...
...you cannot transition or animate from...
Cache - Web APIs
you don't have to use it in conjunction with service workers, even though it is defined in the service worker spec. an origin can have multiple, named cache objects. you are responsible for implementing how your script (e.g. in a serviceworker) handles cache updates. items in a cache do not get updated unless explicitly requested; they don’t expire unless deleted. ...
...ple, the same approach can be used for multiple caches. it maps a shorthand identifier for a cache to a specific, versioned cache name. the code also deletes all caches that aren't named in current_caches. in the code example, caches is a property of the serviceworkerglobalscope. it holds the cachestorage object, by which it can access the cachestorage interface. this is an implementation of the
windoworworkerglobalscope mixin. note: in chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing. var cache_version = 1; var current_caches = { font: 'font-cache-v' + cache_version }; self.addeventlistener('activate', function(event) { // delet...
A basic ray-caster - Web APIs
this article provides an interesting real-world example of using the <canvas> element to do software rendering of a 3d environment using ray-casting. open in new
window why? after realizing, to my delight, that the nifty <canvas> element i'd been reading about was not only soon to be supported in firefox, but was already supported in the current version of safari, i had to try a little experiment. the canvas overview and tutorial i found here at mdn are great, but nobody had written about animation yet, so i thought i'd try a port of a basic raycaster i'd worked on a while ago, and see what sort of performance we can expect from a javascript-controlled pixel buffer. how? the basic idea is to use setinterval() at some arbitrary delay that corresponds to a desired frame rate. after ever...
...cks of the game programming gurus book (isbn: 0672305070), and a java raycaster i found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well. results the canvas in safari 2.0.1 performed surprisingly well. with the blockiness factor cranked up to render slivers 8 pixels wide, i can run a 320 x 240
window at 24 fps on my apple mini. firefox 1.5 beta 1 is even faster; i can run 320 x 240 at 24 fps with 4 pixel slivers. not exactly a new member of the id software family, but pretty decent considering it's a fully interpreted environment, and i didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything. the code does attempt to be very efficient, usi...
Client.type - Web APIs
the type read-only property of the client interface indicates the type of client the service worker is controlling. syntax var myclienttype = client.type; value a string, representing the client type. the value can be one of "
window" "worker" "sharedworker" example // service worker client (e.g. ...
...yclienttype = client.type; value a string, representing the client type. the value can be one of "
window" "worker" "sharedworker" example // service worker client (e.g. ...
Clients.matchAll() - Web APIs
operation. available options are: includeuncontrolled: a boolean — if set to true, the matching operation will return all service worker clients who share the same origin as the current service worker. otherwise, it returns only the service worker clients controlled by the current service worker. the default is false. type: sets the type of clients you want matched. available values are "
window", "worker", "sharedworker", and "all". the default is "all". return value a promise that resolves to an array of client objects. in chrome 46/firefox 54 and later, this method returns clients in most recently focused order, correct as per spec. examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.length ; i++) { if (clientlist[i].url ===...
...ll". the default is "all". return value a promise that resolves to an array of client objects. in chrome 46/firefox 54 and later, this method returns clients in most recently focused order, correct as per spec. examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.length ; i++) { if (clientlist[i].url === 'index.html') { clients.open
window(clientlist[i]); // or do something else involving the matching client } } }); specifications specification status comment service workersthe definition of 'clients: matchall' in that specification. working draft initial definition ...
Crypto - Web APIs
properties this interface implements properties defined on randomsource. ...
...yptographic primitives, like hashing, signing, encryption, or decryption. methods this interface implements methods defined on randomsource. crypto.getrandomvalues() fills the passed typedarray with cryptographically sound random values. usage notes you should avoid using the web crypto api on insecure contexts, even though the crypto interface is present on insecure contexts, as is the
window.crypto property. in addition, the crypto method getrandomvalues() is available on insecure contexts, but the subtle property is not. in general, you probably should just treat crypto as available only on secure contexts. specifications specification status comment web cryptography apithe definition of 'crypto' in that specification. recommendation initial defi...
CustomElementRegistry - Web APIs
methods customelementregistry.define() defines a new custom element. customelementregistry.get() returns the constuctor for the named custom element, or undefined if the custom element is not defined. customelementregistry.upgrade() upgrades a custom element directly, even before it is connected to its shadow root. customelementregistry.whendefined() returns an empty promise that resolves when a custom element becomes defined with the given name. ...
... specifications specification status comment html living standardthe definition of 'customelementregistry' in that specification. living standard initial definition. ...
DOMPoint.DOMPoint() - Web APIs
luding a dompoint or dompointreadonly. syntax point = new dompoint(x, y, z, w); parameters x optional the x coordinate for the new dompoint. y optional the y coordinate for the new dompoint. z optional the z coordinate for the new dompoint. w optional the perspective value of the new dompoint. ...
...al the y coordinate for the new dompoint. z optional the z coordinate for the new dompoint. w optional the perspective value of the new dompoint. examples this example creates a dompoint representing the top-left corner of the current
window, then creates a second point based on the first, which is then offset by 100 pixels both vertically and horizontally. var windtopleft = new dompoint(
window.screenx,
window.screeny); var newtopleft = dompoint.frompoint(windtopleft); newtopleft.x += 100; newtopleft.y += 100; specifications specification status comment geometry interfaces module level 1the definition of 'dompoint()' in that specification. candidate recommendation initial definition ...
DOMPointInit - Web APIs
assuming no transformations that alter the situation) the depth coordinate; positive values are closer to the user and negative values retreat back into the screen. the default value is 0. dompointinit.w the point's w perspective value, given as an unrestricted floating-point number. the default is 1. ...
...w the point's w perspective value, given as an unrestricted floating-point number. the default is 1. example this example creates a new dompoint representing the top-left corner of the current
window, with a z component added to move the point closer to the user. this same code will work to create a dompointreadonly object; just change the interface name in the code. const pointdesc = { x:
window.screenx, y:
window.screeny, z: 5.0 }; const windtopleft = dompoint.frompoint(pointdesc) specifications specification status comment geometry interfaces module level 1the definition of 'dompointreadonly.frompoint()' in that specification. candidate recommendation initial definition ...
DOMTokenList.forEach() - Web APIs
the foreach() inner function. ...
... living standard initial definition. browser compatibility the compatibility table on this page is generated from structured dat...
DirectoryReaderSync - Web APIs
ls—which are just strings—instead of a list of entries. you can also use the filesystem: url to look up the entry with resolvelocalfilesystemurl(). that gets you back to a directoryentrysync (as well as fileentrysync) object. example in the following code snippet from html5rocks, we create web workers and pass data from it to the main app. // taking care of the browser-specific prefixes. ...
...ad of a list of entries. you can also use the filesystem: url to look up the entry with resolvelocalfilesystemurl(). that gets you back to a directoryentrysync (as well as fileentrysync) object. example in the following code snippet from html5rocks, we create web workers and pass data from it to the main app. // taking care of the browser-specific prefixes.
window.resolvelocalfilesystemurl =
window.resolvelocalfilesystemurl ||
window.webkitresolvelocalfilesystemurl; // create web workers var worker = new worker('worker.js'); worker.onmessage = function(e) { var urls = e.data.entries; urls.foreach(function(url, i) {
window.resolvelocalfilesystemurl(url, function(fileentry) { // print out file's name. console.log(fileentr...
DisplayMediaStreamConstraints.video - Web APIs
it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the
windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens.
window the stream contains a single
window selected by the user for sharing. logicalsurface a constrainboolean value whi...
... entire contents of one or more of the user's screens.
window the stream contains a single
window selected by the user for sharing. logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. these may include backing buffers for
windows to allow capture of
window contents that are hidden by other
windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their
windows. example specifications specification status comment unknownthe definition of 'displaymediastreamconstraints.video' in that specification. unknown initial defi...
Document.createTouch() - Web APIs
target the eventtarget for the touch. ...
...onangle. force the value for touch.force. return value touch a touch object configured as described by the input parameters. example this example illustrates using the document.createtouch() method to create touch objects. in following code snippet, two touch objects are created for the target element. var target = document.getelementbyid("target"); var touch1 = document.createtouch(
window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(
window, target, 2, 25, 30, 45, 50); specifications specification status comment touch eventsthe definition of 'document.createtouch()' in that specification. recommendation initial definition. ...
Document.createTouchList() - Web APIs
by the touches parameter. example this example illustrates using the document.createtouchlist() method to create touchlist objects. in following code snippet, some touch objects are created for the target element and those touch points are then used to create some touchlist objects. ...
...e document.createtouchlist() method to create touchlist objects. in following code snippet, some touch objects are created for the target element and those touch points are then used to create some touchlist objects. ...
Document.domain - Web APIs
s effective domain is null the given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org". ...
...uffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org". const currentdomain = document.domain; closing a
window if a document, such as www.example.xxx/good.html, has the domain of "www.example.xxx", this example attempts to close the
window. const baddomain = "www.example.xxx"; if (document.domain === baddomain) { // just an example:
window.close() sometimes has no effect
window.close(); } specifications specification status comment html living standardthe definition of 'document.domain' in that specification. living standard ...
Document.ononline - Web APIs
the document.online event is fired on the <body> of each page when the browser switches between online and offline mode. additionally, the events bubble up from document.body, to document, ending at
window. both events are non-cancellable (you can't prevent the user from coming online, or going offline).
window.navigator.online returns boolean true if the browser is online and false if it is definitely offline (disconnected from the network). the online and offline events are fired when the value of this attribute changes. ...
... it is definitely offline (disconnected from the network). the online and offline events are fired when the value of this attribute changes. it is important to note that this event and attribute are inherently unreliable. a computer can be connected to a network without having internet access. you can register listeners for these events in a few familiar ways: using addeventlistener on the
window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object. (note: using
window.ononline or
window.onoffline will not work for compatibility reasons.) by specifying ononline="..." or onoffline="..." attributes on the <body> tag in the html markup. example there's a simple test case that you can run to verify that...
Document.title - Web APIs
a string containing the document's title. if the title was overridden by setting document.title, it contains that value. otherwise, it contains the title specified in the markup (see the notes below). document.title = newtitle; newtitle is the new title of the document. the assignment affects the return value of document.title, the title displayed for the document (e.g. in the titlebar of the
window or tab), and it also affects the dom of the document (e.g. the content of the <title> element in an html document). example <!doctype html> <html> <head> <title>hello world!</title> </head> <body> <script> alert(document.title); // displays "hello world!" document.title = "goodbye world!"; alert(document.title); // displays "goodbye world!" </script> </body> </html> notes ...
...nt.title); // displays "hello world!" document.title = "goodbye world!"; alert(document.title); // displays "goodbye world!" </script> </body> </html> notes this property applies to html, svg, xul, and other documents in gecko. for html documents the initial value of document.title is the text content of the <title> element. for xul it's the value of the title attribute of the <xul:
window> or other top-level xul element. in xul, accessing document.title before the document is fully loaded has undefined behavior: document.title may return an empty string and setting document.title may have no effect. specifications specification status comment html living standardthe definition of 'document.title' in that specification. living standard ...
Document.width - Web APIs
ientwidth. ...
...y> element of the current document in pixels. not supported by internet explorer. ...
DocumentOrShadowRoot.getSelection() - Web APIs
election = documentorshadowrootinstance.getselection() parameters none. returns a selection object. example function foo() { var selobj = document.getselection(); alert(selobj); var selrange = selobj.getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like
window.alert()), the object's tostring() method is called and the returned value is passed to the function. this can make the object appear to be a string when used with other functions when it is really an object with properties and methods. in the above example, selobj.tostring() is automatically called when it is passed to
window.alert(). however, attempting to use a javascript string property or me...
... or method such as length or substr directly on a selection object results in an error if it does not have that property or method and may return unexpected results if it does. to use a selection object as a string, call its tostring() method directly: var selectedtext = selobj.tostring(); selobj is a selection object. selectedtext is a string (selected text). related objects you can call
window.getselection(), which works identically to document.getselection(). it is worth noting that currently getselection() doesn't work on the content of <input> elements in firefox. htmlinputelement.setselectionrange()) could be used to work around this. notice also the difference between selection and focus. document.activeelement returns the focused element. specifications specification...
Document Object Model (DOM) - Web APIs
to achieve this, the following interfaces present in the different dom level 3 or earlier specifications have been removed. it is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided: documenttouch ...
... a document containing html is described using the document interface, which is extended by the html specification to include various html-specific features. in particular, the element interface is enhanced to become htmlelement and various subclasses, each representing one of (or a family of closely related) elements. the html dom api provides access to various browser features such as tabs and
windows, css styles and stylesheets, browser history, and so forth. these interfaces are discussed further in the html dom api documentation. svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateelement svganimatecolorelement svganimatemotionelement svganimatetransformelement svgcircleelemen...
ElementCSSInlineStyle.style - Web APIs
ting style information the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets. to get the values of all css properties for an element you should use
window.getcomputedstyle() instead. the following code snippet demonstrates the difference between the values obtained using the element's style property and that obtained using the getcomputedstyle() method: <!doctype html> <html> <body style="font-weight:bold;"> <div style="color:red" id="myelement">..</div> </body> </html> var element = document.getelementbyid("myelement"); var out = ""; v...
...fontweight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' ... note the presence of the value bold for font-weight in the computed st...
Event.preventDefault() - Web APIs
harcode + "\n" ); } } } the displaywarning() function presents a notification of a problem. ...
... you can use event.cancelable to check if the event is cancelable. calling p...
Cross-global fetch usage - Web APIs
is initiated from an <iframe>, the relative url used to be resolved against the current global location, rather than the iframe's location. the edge case many sites will never comes up against this edge case. to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-global, e.g. frame.content
window.fetch() the url passed to fetch needs to be relative the problem in the past we would resolve the relative url against the current global, for example: let absolute = new url(relative,
window.location.href) this is not a problem as such. it is just that different apis that exhibit this kind of behavior were doing it inconsistently with the behavior defined in the spec, which could lead to p...
...or were doing it inconsistently with the behavior defined in the spec, which could lead to problems further down the line. the solution in firefox 60 onwards, mozilla resolves the relative url against the global that owns the fetch() function being used (see bug 1432272). so in the case described above, it is resolved against the iframe's location: let absolute = new url(relative, frame.content
window.location.href) there is a lot of discussion in progress about getting new specs to align with this behavior change, to mitigate potential problems going forward. ...
Fetch API - Web APIs
handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions). it also defines related concepts such as cors and the http origin header semantics, supplanting their separate definitions elsewhere. for making a request and fetching a resource, use the
windoworworkerglobalscope.fetch() method. it is implemented in multiple interfaces, specifically
window and workerglobalscope. this makes it available in pretty much any context you might want to fetch resources in. the fetch() method takes one mandatory argument, the path to the resource you want to fetch. it returns a promise that resolves to the response to that request, whether it is successful or ...
...ut more about using the fetch api features in using fetch, and study concepts in fetch basic concepts. aborting a fetch browsers have started to add experimental support for the abortcontroller and abortsignal interfaces (aka the abort api), which allow operations like fetch and xhr to be aborted if they have not already completed. see the interface pages for more details. fetch interfaces
windoworworkerglobalscope.fetch() the fetch() method used to fetch a resource. headers represents response/request headers, allowing you to query them and take different actions depending on the results. request represents a resource request. response represents the response to a request. fetch mixin body provides methods relating to the body of the response/request, allowing you to declare...
Using files from web applications - Web APIs
's screen. using object urls the dom url.createobjecturl() and url.revokeobjecturl() methods let you create simple url strings that can be used to reference any data that can be referred to using a dom file object, including local files on the user's computer. when you have a file object you'd like to reference by url from html, you can create an object url for it like this: const objecturl =
window.url.createobjecturl(fileobj); the object url is a string identifying the file object. each time you call url.createobjecturl(), a unique object url is created even if you've created an object url for that file already. each of these must be released. while they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calli...
...mdata(); xhr.open("post", uri, true); xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { alert(xhr.responsetext); // handle response. ...
FileSystemDirectoryEntry - Web APIs
es, create each child directory in sequence. if you try creating a directory using a full path that includes parent directories that do not exist yet, an error is returned. so create the hierarchy by recursively adding a new path after creating the parent directory. example in the following code snippet, we create a directory called "documents." // taking care of the browser-specific prefixes.
window.requestfilesystem =
window.requestfilesystem ||
window.webkitrequestfilesystem;
window.directoryentry =
window.directoryentry ||
window.webkitdirectoryentry; ... function onfs(fs){ fs.root.getdirectory('documents', {create:true}, function(directoryentry){ //directoryentry.isfile === false //directoryentry.isdirectory === true //directoryentry.name === 'documents' //directoryen...
... methods this interface inherits methods from its parent interface, filesystementry. createreader() creates a filesystemdirectoryreader object which can be used to read the entries in this directory. ...
GainNode.gain - Web APIs
ollowing example shows basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value. ...
...basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value. ...
GainNode - Web APIs
ollowing example shows basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value. ...
...basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is clicked by changing the gain property value. ...
GamepadEvent - Web APIs
the gamepadevent interface of the gamepad api contains references to gamepads connected to the system, which is what the gamepad events
window.gamepadconnected and
window.gamepaddisconnected are fired in response to. constructor gamepadevent() returns a new gamepadevent object. properties gamepadevent.gamepad read only returns a gamepad object, providing access to the associated gamepad data for the event fired. examples the gamepad property being called on a fired
window.gamepadconnected event.
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. ...
...pad object, providing access to the associated gamepad data for the event fired. examples the gamepad property being called on a fired
window.gamepadconnected event.
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); and on a
window.gamepaddisconnected event.
window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); specifications specification status comment gamepadthe definition of 'gamepadevent' in that specification. working draft initial definition browser compatibility desktopmobilec...
GlobalEventHandlers.onabort - Web APIs
the onabort property of the globaleventhandlers mixin is the eventhandler for processing abort events sent to the
window. while the standard for aborting a document load is defined, html issue #3525 suggests that browsers should not currently fire the abort event on a
window that would trigger onabort to be called. todo: define what "abort" is. closing the
window via
window manager? stopping the load of the page? by which means and reasons (user, network/server)? at which stages would it fire / be caught? ...
... defined, html issue #3525 suggests that browsers should not currently fire the abort event on a
window that would trigger onabort to be called. todo: define what "abort" is. closing the
window via
window manager? stopping the load of the page? by which means and reasons (user, network/server)? at which stages would it fire / be caught? for ie, onabort is only available with <img> tags. syntax
window.onabort = functionref; value functionref is a function name or a function expression. example
window.onabort = function() { alert('load aborted.'); } specification specification status comment html living standardthe definition of 'onabort' in that specification. living standard ...
GlobalEventHandlers.onpointerdown - Web APIs
this is functionally equivalent to the mousedown event when generated due to user activity with a mouse or mouse-compatible device. if the pointerdown event isn't canceled through a call to preventdefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work. ...
...sn't canceled through a call to preventdefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work. you can also use addeventlistener() to add a listener for pointerdown events. syntax target.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element, document, or
window. it receives as input the pointerevent describing the pointerdown event. example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown. you could also use addeventlistener(), of course. javascript first, let's look at the javascript code that handles the pointerdown event. var targetbox = document.getelementbyid("target"); targetbox.onpointerdown = h...
GlobalEventHandlers.ontransitioncancel - Web APIs
to completion, e.g. by moving the mouse off a hover-transitioning element. syntax var transitioncancelhandler = target.ontransitioncancel; target.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a css transition has been cancelled on the target, where the target object is an html element (htmlelement), document (document), or
window (
window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration. note: elapsedtime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elaps...
...0deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends. let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.display = 'none'; timeout =
window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away. also note the log that appears in the javascri...
HTMLCanvasElement.toBlob() - Web APIs
document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type. for example, to get the image in jpeg format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.95); // jpeg at 95% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico.
windows xp doesn't support converting from png to ico, so it uses bmp instead. a download link is created by setting the download attribute. the value of the download attribute is the name it will use as the file name. var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closep...
... var canvas = document.getelement...
HTMLFormElement - Web APIs
oin("\n"); // set the form's <textarea> to display the form's properties document.forms["forma"].elements['form-info'].value = info; // document.forms["forma"]['form-info'].value would also work } function setforminfo(f){ // argument should be a form element reference. ...
... document.forms["forma"].elements['form-info'].value = info; // document.forms["forma"]['form-info'].value would also work } function setforminfo(f){ // argument should be a form element reference. ...
HTMLIFrameElement - Web APIs
nline frame is willing to be placed into full screen mode. see using full-screen mode for details. htmliframeelement.allowpaymentrequest is a boolean indicating whether the payment request api may be invoked inside a cross-origin iframe. htmliframeelement.contentdocument read only returns a document, the active document in the inline frame's nested browsing context. htmliframeelement.content
window read only returns a
windowproxy, the
window proxy for the nested browsing context. htmliframeelement.csp specifies the content security policy that an embedded document must agree to enforce upon itself. htmliframeelement.frameborder is a domstring that indicates whether to create borders between frames. htmliframeelement.height is a domstring that reflects the height html attribute, in...
...frameelement' in that specification. living standard the following property has been added: allowfullscreen. html5the definition of 'htmliframeelement' in that specification. recommendation the following properties are now obsolete: scrolling, marginwidth, marginheight, longdesc, frameborder, and align. the following properties have been added: srcdoc, sandbox, and content
window. document object model (dom) level 2 html specificationthe definition of 'htmliframeelement' in that specification. obsolete the contentdocument property has been added. document object model (dom) level 1 specificationthe definition of 'htmliframeelement' in that specification. obsolete initial definition. ...
HTMLImageElement.loading - Web APIs
this helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load. ...
... are: eager the default behavior, eager tells the browser to load the image as soon as the <img> element is processed. lazy tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. for instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the
window's visual viewport. usage notes timing of the load event the load event is fired when the document has been fully processed. when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire. by specifying the value lazy for loading, you prevent the image from delaying the load attribute by the amount of time it takes to request,...
HTMLImageElement.naturalHeight - Web APIs
a <div>. css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%). javascript let output = document.queryselector(".output"); let image = document.queryselector("img");
window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output. this is done in res...
...ener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output. this is done in response to the
window's load event handler, in order to ensure that the image is available before attempting to examine its width and height. result specifications specification status comment html living standardthe definition of 'htmlimageelement.naturalheight' in that specification. living standard browser compatibility the compatibility table on this page is generate...
HTMLImageElement.naturalWidth - Web APIs
a <div>. css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%). javascript let output = document.queryselector(".output"); let image = document.queryselector("img");
window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output. this is done in res...
...ener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output. this is done in response to the
window's load event handler, in order to ensure that the image is available before attempting to examine its width and height. result specifications specification status comment html living standardthe definition of 'htmlimageelement.naturalwidth' in that specification. living standard browser compatibility the compatibility table on this page is generated...
HTMLImageElement.sizes - Web APIs
. note: the source size value must not be specified as a percentage of the container size; that is, lengths such as 50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of. example in this example, a blog-like layout is created, displaying some text and an image which for which three size points are specified, depending on the width of the
window. three versions of the image are also available, with their widths specified. the browser takes all of this information and selects an image and width that best meets the specified values. how exactly the images are used may depend upon the browser and what the pixel density of the user's display is. buttons at the bottom of the example let you actually modify the sizes property slightly, switc...
... specifications specification status comment html living standardthe definition of 'htmlimageelement.sizes' in that specification. living standard browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and sen...
HTMLImageElement.srcset - Web APIs
also provided is the word-break attribute, using the break-all value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur. .box { width: 200px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the
window's load event. it uses the image's currentsrc property to fetch and display the url selected by the browser from the srcset. let box = document.queryselector(".box"); let image = box.queryselector("img"); let newelem = document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem); result in the displayed output below, the selected url w...
...= box.queryselector("img"); let newelem = document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem); result in the displayed output below, the selected url will correspond with whether your display results in selecting the 1x or the 2x version of the image. if you happen to have both standard and high density displays, try moving this
window between them and reloading the page to see the results change. for additional examples, see our guide to responsive images. specifications specification status comment html living standardthe definition of 'htmlimageelement.srcset' in that specification. living standard browser compatibility the compatibility table on this page is generated from str...
HTMLImageElement.width - Web APIs
ge width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. ...
... 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. this is done in the
window's load and resize event handlers, in order to always provide this information. var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innertext = clockimage.width; };
window.addeventlistener("load", updatewidth);
window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own
window. specifications specification status comment html living standardthe definition of 'htmlimageelement.width' in that specification. living standard browser compatibility the compatibility table on thi...
HTMLObjectElement - Web APIs
ml attribute, specifying the base path to use to resolve relative uris. htmlobjectelement.codetype is a domstring that reflects the codetype html attribute, specifying the content type of the data. htmlobjectelement.contentdocument read only returns a document representing the active document of the object element's nested browsing context, if any; otherwise null. htmlobjectelement.content
window read only returns a
windowproxy representing the
window proxy of the object element's nested browsing context, if any; otherwise null. htmlobjectelement.data returns a domstring that reflects the data html attribute, specifying the address of a resource's data. htmlobjectelement.declare is a boolean that reflects the declare html attribute, indicating that this is a declaration, not an in...
...t' in that specification. recommendation the w3c specification is a latest of a previous version of html living standard technically, the property tabindex is now defined on htmlelement. the following properties are now obsolete: align, archive, border, code, codebase, codetype, declare, hspace, standby, and vspace. the following properties have been added: typemustmatch, content
window, willvalidate, validity, and validationmessage. the following methods have been added: checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlobjectelement' in that specification. obsolete the contentdocument property has been added. document object model (dom) level 1 specificationthe definition of 'htmlob...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
unity to react to actions taken by the microtask. javascript promises and the mutation observer api both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current event loop pass is wrapping up. in order to allow microtasks to be used by third-party libraries, frameworks, and polyfills, the queuemicrotask() method is exposed on the
window and worker interfaces through the
windoworworkerglobalscope mixin. tasks vs microtasks to properly discuss microtasks, it's first useful to know what a javascript task is and how microtasks differ from tasks. this is a quick, simplified explanation, but if you would like more details, you can read the information in the article in depth: microtasks and the javascript runtime environment. tasks...
...romises rather than being reported as standard exceptions. also, creating and destroying promises takes additional overhead both in terms of time and memory that a function which properly enqueues microtasks avoids. simply pass the javascript function to call while the context is handling microtasks into the queuemicrotask() method, which is exposed on the global context as defined by either the
window or worker interface, depending on the current execution context. queuemicrotask(() => { /* code to run in the microtask here */ }); the microtask function itself takes no parameters, and does not return a value. when to use microtasks in this section, we'll take a look at scenarios in which microtasks are particularly useful. generally, it's about capturing or checking results, or performi...
The HTML DOM API - Web APIs
t htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeelement htmlframesetelement htmlisindexelement htmlmenuitemelement web app and browser integration interfaces these interfaces offer access to the browser
window and document that contain the html, as well as to the browser's state, available plugins (if any), and various configuration options. barprop navigator
window deprecated web app and browser integration interfaces external obsolete web app and browser integration interfaces applicationcache plugin pluginarray form support interfaces these interfaces provide struct...
...her apis. web storage interfaces the web_storage_api provides the ability for web sites to store data either temporarily or permanently on the user's device for later re-use. storage storageevent web workers interfaces these interfaces are used by the web_workers_api both to establish the ability for workers to interact with an app and its content, but also to support messaging between
windows or apps. broadcastchannel dedicatedworkerglobalscope messagechannel messageevent messageport sharedworker sharedworkerglobalscope worker workerglobalscope workerlocation workernavigator websocket interfaces these interfaces, defined by the html specification, are used by the websockets_api. closeevent websocket server-sent events interfaces the eventsource interface r...
History.pushState() - Web APIs
instance after the user restarts the browser. the new url does not need to be absolute; if it's relative, it's resolved relative to the current url. the new url must be of the same origin as the current url; otherwise, pushstate() will throw an exception. if this parameter isn't specified, it's set to the document's current url. description in a sense, calling pushstate() is similar to setting
window.location = "#foo", in that both will also create and activate another history entry associated with the current document. but pushstate() has a few advantages: the new url can be any url in the same origin as the current url. in contrast, setting
window.location keeps you at the same document only if you modify only the hash. you don't have to change the url if you don't want to. in contrast,...
... you can associate arbitrary data with your new history entry. ...
IDBDatabase: abort event - Web APIs
up to the connection object. 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. ...
...result; db.addeventlistener('abort', () => { console.log('transaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest =
window.indexeddb.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', '...
IDBDatabase: close event - Web APIs
ars the database in the browser's history preferences. note that it is not fired if the database connection is closed normally using idbdatabase.close(). ...
...ex('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.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', '...
IDBDatabase: error event - Web APIs
e connection object. ...
...${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', '...
IDBDatabase.onversionchange - Web APIs
this is different from the versionchange transaction (but it is related). note: this feature is available in web workers. syntax idbdatabase.onversionchange = function(event) { ... ...
... recommendation indexed database api draftthe definition of 'onversionchange' in that specification. ...
IDBDatabase: versionchange event - Web APIs
t is fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested. ...
...: 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.createindex('minutes', '...
IDBDatabase - Web APIs
requested. also available via the onversionchange property. 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). ...
... // variable. ...
IDBObjectStore.createIndex() - 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. createindex() is used to create new indexes on the object store. 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. 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 = request.result...
...the result of opening the database in the db variable. // this is used a lot below. db = request.result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with
window.indexeddb.open(). (see above.) // it is only implemented in recent browsers. dbopenrequest.onupgradeneeded = function(event) { var db = event.target.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...
IDBObjectStore.deleteIndex() - Web APIs
deneeded handler being used to update the database structure if a database with a higher version number is loaded. idbobjectstore.createindex is used to create new indexes on the object store, after which we delete the unneeded old indexes with deleteindex(). 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...
...ng the database in the db variable. ...
IDBObjectStore - Web APIs
s mode is readwrite. example this example shows a variety of different uses of object stores, from updating the data structure with idbobjectstore.createindex inside an onupgradeneeded function, to adding a new item to our object store with idbobjectstore.add. 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 db. db = dbopenrequest.result; }; // 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 ...
...db.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db. ...
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. ...
...e: 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('hour...
IDBOpenDBRequest: upgradeneeded event - Web APIs
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. ...
...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 handler property. ...
IDBOpenDBRequest - Web APIs
mber higher than its current version. also available via the onupgradeneeded property. example in the following example you can see the 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 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 in the db // variable. this is used a lot below db = dbope...
...e db // variable. ...
IDBRequest: error event - Web APIs
d a request to fail. ...
...m = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.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'...
IDBRequest: success event - Web APIs
the success event is fired when an idbrequest succeeds. ...
...ctstore.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'...
IDBTransaction: abort event - Web APIs
quest's success/error handler, an i/o error (an actual failure to write to disk, for example disk detached, or other os/hardware failure) quota exceeded. examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. ...
...n, 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'...
IDBTransaction: complete event - Web APIs
the complete handler is executed when a transaction successfully completed. ...
...ction.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'...
IDBTransaction: error event - Web APIs
transaction object. ...
...rror 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', '...
IDBTransaction - Web APIs
ansactions of this mode cannot run concurrently with other transactions. transactions in this mode are known as "upgrade transactions." even if these constants are now deprecated, you can still use them to provide backward compatibility if required (in chrome the change was made in version 21). 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...
... 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 = [ { ta...
KeyboardEvent.key - Web APIs
haracter string containing the printable representation of the key. if the pressed key is a control or special character, the returned value is one of the pre-defined key values. if the keyboardevent represents the press of a dead key, the key value must be "dead". some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on
windows; instead, they trigger wm_appcommand events. these events get mapped to dom keyboard events, and are listed among the "virtual key codes" for
windows, even though they aren't actually key codes. if the key cannot be identified, the returned value is unidentified. keyboardevent sequence every keyboardevent is fired in a pre-determined sequence. for a given key press, the sequence of keyboarde...
...h keyboard layouts because the modifier shift key is no longer active. example this example uses eventtarget.addeventlistener() to listen for keydown events. when they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).
window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // do nothing if the event was already processed } switch (event.key) { case "down": // ie/edge specific value case "arrowdown": // do something for "down arrow" key press. break; case "up": // ie/edge specific value case "arrowup": // do something for "up arrow" key p...
KeyboardEvent.keyCode - Web APIs
if the key can't be identified, this value is 0. you should avoid using this if possible; it's been deprecated for some time. instead, you should use keyboardevent.code, if it's implemented. ...
...the keycode attribute for printable characters when handling keydown and keyup events. as described above, the keycode attribute is not useful for printable characters, especially those input with the shift or alt key pressed. when implementing a shortcut key handler, the keypress event is usually better (at least when gecko is the runtime in use). see gecko keypress event for details. example
window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true. } else if (event.keycode !== undefined) { // handle the event with keyboardevent.keycode and set handled true.
Location: assign() - Web APIs
after the navigation occurs, the user can navigate back to the page that called location.assign() by pressing the "back" button. if the assignment can't happen because of a security violation, a domexception of the security_error type is thrown. this happens if the origin of the script calling the method is different from the origin of the page originally described by the location object, mostly when the script is hosted on a different domain. if the provided url is not valid, a domexception of the syntax_error type is thrown. syntax location.assign(url); parameters url is a domstring containing the url of the page to navigate to. ...
...hod is different from the origin of the page originally described by the location object, mostly when the script is hosted on a different domain. if the provided url is not valid, a domexception of the syntax_error type is thrown. syntax location.assign(url); parameters url is a domstring containing the url of the page to navigate to. example // navigate to the location.reload article
window.location.assign('/docs/web/api/location/reload'); specifications specification status comment html living standardthe definition of 'location.assign()' in that specification. living standard no change from html5. html5the definition of 'location.assign()' in that specification. recommendation initial definition. ...
MediaDevices.getUserMedia() - Web APIs
et. getusermedia() is a powerful feature which can only be used in secure contexts; in insecure contexts, navigator.mediadevices is undefined, preventing access to getusermedia(). a secure context is, in short, a page loaded using https or the file:/// url scheme, or a page loaded from localhost. in addition, user permission is always required to access the user's audio and video inputs. only a
window's top-level document context for a valid origin can even request permission to use getusermedia(), unless the top-level context expressly grants permission for a given <iframe> to do so using feature policy. otherwise, the user will never even be asked for permission to use the input devices. for additional details on these requirements and rules, how they are reflected in the context in which y...
...ermedia.call(navigator, constraints, resolve, reject); }); } } navigator.mediadevices.getusermedia({ audio: true, video: true }) .then(function(stream) { var video = document.queryselector('video'); // older browsers may not have srcobject if ("srcobject" in video) { video.srcobject = stream; } else { // avoid using this in new browsers, as it is going away. video.src =
window.url.createobjecturl(stream); } video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); frame rate lower frame-rates may be desirable in some cases, like webrtc transmissions with bandwidth restrictions. var constraints = { video: { framerate: { ideal: 10, max: 15 } } }; front and back camera on mobile pho...
MediaPositionState.position - Web APIs
esh the position information by calling setpositionstate(). if the media is still playing when the interval is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. ...
...s the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. let positioninterval =
window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.trackplaypositioninseconds }); } else {
window.clearinterval(positioninterval); } }, 1000); specifications specification status comment media session standardthe definition of 'mediapositionstate.position' in that specification. draft initial definition. ...
MediaQueryList - Web APIs
the resulting object handles sending notifications to listeners when the media query state changes (i.e. when the media query test starts or stops evaluating to true). ...
...changes such that its width moves across the 400px boundary in either direction. also available using the onchange event handler property. examples this simple example creates a mediaquerylist and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page. ...
MediaRecorder: dataavailable event - Web APIs
roperty: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = do...
...ent) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ... specifications specification status mediastream recording working draft ...
MediaSession.setPositionState() - Web APIs
esh the position information by calling setpositionstate(). if the media is still playing when the interval is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. ...
...s the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. let positioninterval =
window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.trackplaypositioninseconds }); } else {
window.clearinterval(positioninterval); } }, 1000); specifications specification status comment media session standardthe definition of 'mediasession.setpositionstate()' in that specification. draft initial definition. ...
MediaStreamAudioSourceNode() - Web APIs
astreamaudiosourcenode object representing the audio node whose media is obtained from the specified source stream. exceptions invalidstateerror the specified mediastream doesn't have any audio tracks. examples this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from its mediastream. ...
...object representing the audio node whose media is obtained from the specified source stream. exceptions invalidstateerror the specified mediastream doesn't have any audio tracks. examples this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from its mediastream. ...
MediaStreamTrackAudioSourceNode() - Web APIs
rack. exceptions notsupportederror the specified context is not an audiocontext. invalidstateerror the specified mediastreamtrack isn't an audio track (that is, its kind property isn't audio. example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device. ...
...tsupportederror the specified context is not an audiocontext. invalidstateerror the specified mediastreamtrack isn't an audio track (that is, its kind property isn't audio. example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device. ...
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
ourcetrack; } mediastreamtrackaudiosourceoptions.mediastreamtrack = audiosourcetrack; value a mediastreamtrack from which the audio output of the new mediastreamtrackaudiosourcenode will be taken. example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device. ...
...eamtrackaudiosourceoptions.mediastreamtrack = audiosourcetrack; value a mediastreamtrack from which the audio output of the new mediastreamtrackaudiosourcenode will be taken. example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device. ...
Using the MediaStream Recording API - Web APIs
first, we display a prompt asking the user to name their clip. next, we create an html structure like the following, inserting it into our clip c...
... prompt asking the user to name their clip. next, we create an html structure like the following, inserting it into our clip container, which is an <article> element. <article class="clip"> <audio controls></audio> <p>your clip name</p> <button>delete</button> </article> after that, we create a combined blob out of the recorded audio chunks, and create an object url pointing to it, using
window.url.createobjecturl(blob). we then set the value of the <audio> element's src attribute to the object url, so that when the play button is pressed on the audio player, it will play the blob. finally, we set an onclick handler on the delete button to be a function that deletes the whole clip html structure. specifications specification status comment mediastream reco...
MediaTrackConstraints - Web APIs
it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the
windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens.
window the stream contains a single
window selected by the user for sharing. logicalsurface a constrainboolean value whi...
... entire contents of one or more of the user's screens.
window the stream contains a single
window selected by the user for sharing. logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. these may include backing buffers for
windows to allow capture of
window contents that are hidden by other
windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their
windows. specifications specification status comment media capture and streams candidate recommendation initial definition. mediastream image capture working ...
MediaTrackSettings.displaySurface - Web APIs
the mediatracksettings dictionary's displaysurface property indicates the type of display surface being captured. syntax displaysurface = mediatracksettings.displaysurface; value the value of displaysurface is a string that comes from the displaycapturesurfacetype enumerated type, and is one of the following: application the stream's video track contains all of the
windows belonging to the application chosen by the user. the
windows are aggragated into a single video track, with any empty space filled with a backdrop; that backdrop is selected by the user agent. browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplaymedia() call. monitor the video track in the stream presents the complete contents of one or ...
... selected by the user agent. browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplaymedia() call. monitor the video track in the stream presents the complete contents of one or more of the user's screens. any empty space (if the displays are of different dimensions) is filled with a backdrop chosen by the user agent.
window the stream's video track presents the contents of a single
window selected by the user. the
window may be from any application, not necessarily just from within the user agent. not all user agents support all of these surface types. specifications specification status comment screen capturethe definition of 'mediatracksettings.displaysurface' in that specification. ...
MediaTrackSettings - Web APIs
the resolution offered by the camera, its driver or the os. "crop-and-scale" the track's resolution might be the result of the user agent using cropping or downscaling from a higher camera resolution. properties of shared screen tracks tracks containing video shared from a user's screen (regardless of whether the screen data comes from the entire screen or a portion of a screen, like a
window or tab) are generally treated like video tracks, with the exception that they also support the following added settings: cursor a domstring which indicates whether or not the mouse cursor is being included in the generated stream and under what conditions. possible values are: always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has...
...am"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a domstring which specifies the type of source the track contains; one of: application the stream contains all of the
windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens.
window the stream contains a single
window selected by the user for sharing. logicalsurface a boolean value which, if tr...
MessageChannel - Web APIs
f the channel. constructor messagechannel() returns a new messagechannel object with two new messageport objects. example in the following example, you can see a new channel being created using the messagechannel.messagechannel constructor. when the iframe has loaded, we register an onmessage handler for messagechannel.port1 and transfer messagechannel.port2 to the iframe using the
window.postmessage method along with a message. when a message is received back from the iframe, the onmessage function simply outputs the message to a paragraph. var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for ...
...nction simply outputs the message to a paragraph. var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.content
window.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment html living standardthe definition of 'message channels' in that specific...
MessagePort.postMessage() - Web APIs
tional transferable objects to be transferred — these objects have their ownership transferred to the receiving browsing context, so are no longer usable by the sending browsing context. example in the following code block, you can see a new channel being created using the messagechannel.messagechannel constructor. ...
...2 to the iframe using
window.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var other
window = ifr.content
window; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { other
window.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications ...
MessagePort - Web APIs
ageerror fired when a messageport object receives a message that can't be deserialized. also available via the onmessageerror property. example in the following example, you can see a new channel being created using the messagechannel() constructor. when the iframe has loaded, we register an onmessage handler for messagechannel.port1 and transfer messagechannel.port2 to the iframe using the
window.postmessage method along with a message. when a message is received back from the iframe, the onmessage function simply outputs the message to a paragraph. var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for ...
...nction simply outputs the message to a paragraph. var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.content
window.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications specification status comment html living standardthe definition of 'message ports' in that specificati...
MouseEvent.initMouseEvent() - Web APIs
ameters type the string to set the event's type to. possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout. canbubble whether or not the event can bubble. sets the value of event.bubbles. cancelable whether or not the event's default action can be prevented. sets the value of event.cancelable. view the event's abstractview. you should pass the
window object here. sets the value of uievent.view. detail the event's mouse click count. sets the value of uievent.detail. screenx the event's screen x coordinate. sets the value of mouseevent.screenx. screeny the event's screen y coordinate. sets the value of mouseevent.screeny. clientx the event's client x coordinate. sets the value of mouseevent.clientx. clienty the event's client y coordi...
... obsolete from document object model (dom) level 2 events specification, d...
msFirstPaint - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. msfirstpaint is a read-only property which gets the time when the document loaded by the
window object began to be displayed to the user. put another way, msfirstpaint utilizes the browser to measure when the first content completes being painted in the
window. it is available from javascript and can be reported from the field. this proprietary property is specific to internet explorer and microsoft edge. syntax p = object.msfirstpaint; value an integer value that represents the time when t...
... not be loaded. ...
msPlayToSource - Web APIs
e is a read-only property which gets the source associated with the media element for use by the playtomanager. this proprietary property is specific to internet explorer and microsoft edge. syntax ptr = object.msplaytosource; value playto is a means through which an app can connect local playback/display for audio, video, and img elements to a remote device. for more information, see the
windows.media.playto apis. msplaytosource is used in the sourcerequested handler -- get the playtosource object from an audio, video, or img element using the msplaytosource property and pass it to e.setsource, then set the playtosource.next property to the msplaytosource of another element for continual playing. the property value for msplaytosource is the source associated with the media element. e...
... then set the playtosource.next property to the msplaytosource of another element for continual playing. the property value for msplaytosource is the source associated with the media element. example <video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay /> <script type="text/javascript"> // step 1: obtain playtomanager object for app’s current view. var ptm =
windows.media.playto.playtomanager.getforcurrentview(); // step 2: register for the sourcerequested event (user swipes devices charm). ptm.addeventlistener("sourcerequested", function(e) { // step 3: specify the media to be streamed (to filter devices). e.sourcerequest.setsource(document.getelementbyid("videoplayer").msplaytosource); // the media will then be streamed to the device ...
Navigator.productSub - Web APIs
on apple safari and google chrome this property always returns 20030107. ...
... on apple safari and google chrome this property always returns 20030107. ...
Navigator.sendBeacon() - Web APIs
ds block unloading the document, which slows down the next navigation. there is nothing the next page can do to avoid this, so the new page seems slow, even though it's the previous page's fault. the following example shows theoretical analytics code that attempts to submit data to a server with a synchronous xmlhttprequest in an unload handler. this results in the next page load to be delayed.
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. with the sendbeacon() method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation.
...or the next navigation. this solves all of the problems with submission of analytics data: the data is sent reliably it's sent asynchronously it doesn't impact the loading of the next page in addition, the code is simpler to write than any of the older techniques! the following example shows a theoretical analytics code pattern that submits data to a server using the sendbeacon() method.
window.addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the beacon sends an http request via the post method, with all relevant cookies available when called. specifications specification status comment beaconthe definition of 'sendbeacon()' in that specification. candidate recommendation initial definition ...
Navigator.vibrate() - Web APIs
has no effect. if a vibration pattern is already in progress when this method is called, the previous pattern is halted and the new one begins instead. if the method was unable to vibrate because of invalid parameters, it will return false, else it returns true. if the pattern leads to a too long vibration, it is truncated: the max length depends on the implementation. syntax var successbool =
window.navigator.vibrate(pattern); pattern provides a pattern of vibration and pause intervals. each value indicates a number of milliseconds to vibrate or pause, in alternation. you may provide either a single value (to vibrate once for that many milliseconds) or an array of values to alternately vibrate, pause, then vibrate again. see vibration api for details. passing a value of 0, an empty ar...
...lue indicates a number of milliseconds to vibrate or pause, in alternation. you may provide either a single value (to vibrate once for that many milliseconds) or an array of values to alternately vibrate, pause, then vibrate again. see vibration api for details. passing a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern. examples
window.navigator.vibrate(200); // vibrate for 200ms
window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // vibrate 'sos' in morse. specifications specification status comment vibration api recommendation linked to spec is the latest editor's draft; w3c version is a rec. ...
navigator.hardwareConcurrency - Web APIs
modern computers have multiple physical processor cores in their cpu (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. ...
...one worker is created for each logical processor reported by the browser and a record is created which includes a reference to the new worker as well as a boolean value indicating whether or not we're using that worker yet; these objects are, in turn, stored into an array for later use. this creates a pool of workers we can use to process requests later. let workerlist = []; for (let i = 0; i <
window.navigator.hardwareconcurrency; i++) { let newworker = { worker: new worker('cpuworker.js'), inuse: false }; workerlist.push(newworker); } specification specification status comment html living standardthe definition of 'navigator.hardwareconcurrency' in that specification. living standard initial definition. ...
NavigatorID.userAgent - Web APIs
ng is user configurable. for example: in firefox, you can change the preference general.useragent.override in about:config. some firefox extensions do that; however, this only changes the http header that gets sent, and doesn't affect browser detection performed by javascript code. opera 6+ allows users to set the browser identification string via a menu. microsoft internet explorer uses the
windows registry. safari and icab allow users to change the browser user agent string to predefined internet explorer or netscape strings via a menu. syntax var ua = navigator.useragent; value a domstring specifying the complete user agent string the browser provides both in http headers and in response to this and other related methods on the navigator object. the user agent string is built on ...
...osed into several pieces of info. each of these pieces of info comes from other navigator properties which are also settable by the user. gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example alert(
window.navigator.useragent) // alerts "mozilla/5.0 (
windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" specifications specification status comment html living standardthe definition of 'navigatorid.useragent' in that specification. living standard initial definition ...
NotificationEvent - Web APIs
dableevent.waituntil() extends the lifetime of the event. tells the browser that work is ongoing. ...
...on.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.open
window) return clients.open
window('/'); })); }); specifications specification status comment notifications apithe definition of 'notificationevent' in that specification. living standard living standard. note: this interface is specified in the notifications api, but accessed through serviceworkerglobalscope. browser compatibility the compatibilit...
OscillatorNode.detune - Web APIs
rrenttime); // value in cents note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code). ...
... cents note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code). ...
OscillatorNode - Web APIs
pecifies the exact time to start playing the tone. oscillatornode.stop() specifies the time to stop playing the tone. examples the following example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for relevant code). ...
... to start playing the tone. oscillatornode.stop() specifies the time to stop playing the tone. examples the following example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for relevant code). ...
ParentNode.childElementCount - Web APIs
living standard split the elementtraversal interface in childnode and parentnode. this method is now defined on the latter. the document and documentfragment implemented the new interfaces. element traversal sp...
... living standard split the elementtraversal interface in childnode and parentnode. this method is now defined on the latter. the document and documentfragment implemented the new interfaces. element traversal specificationthe ...
ParentNode.firstElementChild - Web APIs
living standard split the elementtraversal interface in childnode and parentnode. this method is now defined on the latter. the document and documentfragment implemented the new interfaces. element traversal sp...
... living standard split the elementtraversal interface in childnode and parentnode. this method is now defined on the latter. the document and documentfragment implemented the new interfaces. element traversal specificationthe ...
ParentNode.lastElementChild - Web APIs
living standard splitted the elementtraversal interface in childnode and parentnode. this method is now defined on the latter. the document and documentfragment implemented the new interfaces. ...
... living standard splitted the elementtraversal interface in childnode and parentnode. this method is now defined on the latter. the document and documentfragment implemented the new interfaces. ...
PaymentRequest.abort() - Web APIs
terface causes the user agent to end the payment request and to remove any user interface that might be shown. syntax paymentrequest.abort(); returns void. parameters none examples the following example sets up a timeout to clear the payment request that might have been abandoned or neglected. ...
...t to end the payment request and to remove any user interface that might be shown. syntax paymentrequest.abort(); returns void. parameters none examples the following example sets up a timeout to clear the payment request that might have been abandoned or neglected. ...
PaymentRequest: merchantvalidation event - Web APIs
own server with an argument of the payment method's validation url, obtained from the event's validationurl property. the merchant server should access the validation url in accordance with the payment method documention. typically, a client should not access the validation url. request.addeventlistener("merchantvalidation", event => { event.complete(async () => { const merchantserverurl =
window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }, false); }; const response = await request.show(); how merchant server handles the validation depends on the server implementation and payment method documentation. the content ...
...rchant server and is then returned from the fetch() call's fulfillment handler to the complete() method on the event. this response lets the payment handler know if the merchant is validated. you can also use the onmerchantvalidation event handler property to set up the handler for this event: request.onmerchantvalidation = event => { event.complete(async () => { const merchantserverurl =
window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }); }; const response = await request.show(); for more information, see merchant validation in payment processing concepts. related events payerdetailchange, paymentmethodchan...
PerformancePaintTiming - Web APIs
ry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint". performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. ...
... properties as follows: performanceentry.entrytype returns "paint". performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. ...
PerformanceTiming - Web APIs
igation timing level 2 specification. please use the performancenavigationtiming interface instead. the performancetiming interface is a legacy interface kept for backwards compatibility and contains properties that offer performance timing information for various events which occur during the loading and use of the current page. you get a performancetiming object describing your page using the
window.performance.timing property. properties the performancetiming interface doesn't inherit any properties. these properties each describe the time at which a particular point in the page loading process was reached. some correspond to dom events; others describe the time at which internal browser operations of interest took place. each time is provided as an unsigned long long representing the m...
...tion process. performancetiming.navigationstart read only when the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. performancetiming.unloadeventstart read only when the unload event has been thrown, indicating the time at which the previous document in the
window began to unload. if there is no previous document, or if the previous document or one of the needed redirects is not of the same origin, the value returned is 0. performancetiming.unloadeventend read only when the unload event handler finishes. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. ...
Performance API - Web APIs
rowser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond. methods the performance interface has two methods. the now() method returns a domhighrestimestamp whose value that depends on the navigation start and scope. if the scope is a
window, the value is the time the browser context was created and if the scope is a worker, the value is the time the worker was created. the tojson() method returns a serialization of the performance object, for those attributes that can be serialized. properties the performance interface has two properties. the timing property returns a performancetiming object containing latency-related performanc...
...eline. performanceresourcetiming provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources. specifications specification status comment high resolution time recommendation initial definition. high resolution time level 2 recommendation adds performance attribute on
window and workerglobalscope. high resolution time level 3 editor's draft add timeorigin property to performance interface. frame timing draft adds performanceframetiming interface. navigation timing recommendation adds the performancetiming and performancenavigation interfaces. adds timing and navigation properties to the performance interface. navi...
PromiseRejectionEvent.promise - Web APIs
e the javascript promise which was rejected, and whose rejection went unhandled. examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly. event.preventdefault() is called to indicate that the promise has now been handled. ...
...ndled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly. event.preventdefault() is called to indicate that the promise has now been handled.
window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") {
window.requestidlecallback(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); }); event.preventdefault(); } } specifications specification status comment html living standardthe definition of 'promiserejectionevent.promise' in that specification. living standard initial definition. ...
Proximity Events - Web APIs
ch a sensor may support those events but will never fire them. proximity events when the device proximity sensor detects a change between the device and an object, it notifies the browser of that change. when the browser gets such a notification, it fires a deviceproximityevent for any change, and a userproximityevent event in the case of a more rough change. this event can be captured at the
window object level by using the addeventlistener method (using the deviceproximity or userproximity event name) or by attaching an event handler to the
window.ondeviceproximity or
window.onuserproximity properties. once captured, the event object gives access to different kinds of information: the deviceproximityevent event provides an exact match for the distance between the device and the object ...
...en the device and the object through its value property. it also provides the closest and farthest distance the device is able to detect something through its min and max properties. the userproximityevent event provides a rough approximation of the distance, expressed through a boolean. the userproximityevent.near property is true if the object is close or false if the object is far. ...
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
face that returns a promise which resolves to true if a user-verifying platform authenticator is available. a user-verifying platform authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them. at the time of this writing, this method's result only resolves to true on
windows when
windows hello capabilities are available (on recent versions of this os). note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax publickeycredential.isuserverifyingplatformauthenticatoravailable() parameters none. return value a promise which resolves to a boolean indicating whether or a not a user-verifying platform au...
...ote: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax publickeycredential.isuserverifyingplatformauthenticatoravailable() parameters none. return value a promise which resolves to a boolean indicating whether or a not a user-verifying platform authenticator is available. as of today (march 2019), this is basically indicating if
windows hello may be used with the web authentication api and that the user has accepted its use. note: this is a static method which is directly called on the publickeycredential interface and not on an instance. note: in earlier versions of the specification, the boolean also conveyed the consent of the user to disclose such an authenticator existed. examples publickeycredential.isuserverifyin...
PushEvent.data - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribut...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check ...
PushEvent - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to cont...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please c...
RTCRtpSender.replaceTrack() - Web APIs
of the original track. the new track is an audio track with a different number of channels fom the original. media sources that have built-in encoders — such as hardware encoders — may not be able to provide the negotiated codec. software sources may not implement the negotiated codec. ...
... media sources that have built-in encoders — such as hardware encoders — may not be able to provide the negotiated codec. software sources may not implement the negotiated codec. ...
Range() - Web APIs
the range() constructor returns a newly created range object whose start and end is the global document object. syntax range = new range() example in this example we create a new range with the range() constructor, and set its beginning and end positions using the range.setstartbefore() and range.setendafter() methods. we then select the range using
window.getselection() and selection.addrange(). ...
...ection() and selection.addrange(). html <p>first paragraph.</p> <p>second paragraph.</p> <p>third paragraph.</p> <p>fourth paragraph.</p> javascript const paragraphs = document.queryselectorall('p'); // create new range const range = new range(); // start range at second paragraph range.setstartbefore(paragraphs[1]); // end range at third paragraph range.setendafter(paragraphs[2]); // get
window selection const selection =
window.getselection(); // add range to
window selection selection.addrange(range); result specification specification status comment domthe definition of 'range.range()' in that specification. living standard initial definition. ...
Range.selectNodeContents() - Web APIs
ode the node whose contents will be selected within a range. example range = document.createrange(); referencenode = document.getelementsbytagname("div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons. document.createrange(), range.selectnodecontents(), and selection.addrange() are used to select the content.
window.getselection() and selection.removeallranges() are used to deselect it. html <p id="p"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button...
....</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button'); const deselectbutton = document.getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection =
window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { const selection =
window.getselection(); selection.removeallranges(); }); result specifications specification status comment domthe definition ...
Request - Web APIs
quest using the request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const url = request.url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request object in as a parameter to a
windoworworkerglobalscope.fetch() call, for example: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in the following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'po...
...rl; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object. you could then fetch this api request by passing the request object in as a parameter to a
windoworworkerglobalscope.fetch() call, for example and get the response: fetch(request) .then(response => { if (response.status === 200) { return response.json(); } else { throw new error('something went wrong on api server!'); } }) .then(response => { console.debug(response); // ... }).catch(error => { console.error(error); }); specifications s...
SVGElement - Web APIs
ement is the outermost <svg> element. methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on... handler property defined on globaleventhandlers or
windoweventhandlers. abort fired when page loading is stopped before an svg element has been allowed to load completely. also available via the onabort property. error fired when an svg element does not load properly or when an error occurs during script execution. also available via the onerror property. load fires on an svgelement when it is loaded in the browser. also available via the onl...
...d fires on an svgelement when it is loaded in the browser. also available via the onload property. resize fired when an svg document is being resized. also available via the onresize property. scroll fired when an svg document view is being shifted along the x and/or y axes. also available via the onscroll property. unload fired when the dom implementation removes an svg document from a
window or frame. also available via the onunload property. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgelement' in that specification. candidate recommendation adds the dataset property. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgelement' in that specification. recommendation...
ScrollToOptions.behavior - Web APIs
it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
... working draft ...
Selection.containsNode() - Web APIs
in the selection. partialcontainment optional when true, containsnode() returns true when a part of the node is part of the selection. when false, containsnode() only returns true when the entire node is part of the selection. if not specified, the default value false is used. example check for selection this snippet checks whether anything inside the body element is selected. console.log(
window.getselection().containsnode(document.body, true)); find the hidden word in this example, a message appears when you select the secret word. it uses addeventlistener() to check for selectionchange events. html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secr...
...onchange events. html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection =
window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification. working draft current ...
Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the selection interface deletes the selected text from the document's dom. syntax sel.deletefromdocument() parameters none. example this example lets you delete selected text by clicking a button. upon clicking the button, the
window.getselection() method gets the selected text, and the deletefromdocument() method removes it. html <p>try highlighting some of the text in this paragraph. ...
...ed text, and the deletefromdocument() method removes it. html <p>try highlighting some of the text in this paragraph. once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection =
window.getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification. working draft current ...
Selection API - Web APIs
the selection api provides functionality for reading and manipulating the range of text selected by the user. concepts and usage to retrieve the current text range the user has selected, you can use the
window.getselection() or document.getselection() method, storing the return value — a selection object — in a variable for futher use. once your selection is in a variable, you perform a variety of operations on it, for example copying the selection to a text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren(). you can run code in response to the selection bei...
...ing selection.selectallchildren(). you can run code in response to the selection being changed, or a new selection being started, using the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers. selection api interfaces selection represents the range of text selected by the user or the current position of the caret. extensions to other interfaces
window.getselection(), document.getselection() returns a selection object representing the range of text selected by the user or the current position of the caret. document.getselection() is basically an alias of
window.getselection(). globaleventhandlers.onselectstart represents the event handler that is called when a selectstart event is fired on the current object (i.e. when a new range of text is...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
r 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.open
window) return clients.open
window('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log(...
...f (clients.open
window) return clients.open
window('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open 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.open
window) return clients.open
window('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick...
ServiceWorkerGlobalScope.onpush - Web APIs
working draft initial definition. this event is specified in the push api, but accessed through serviceworkerglobalscope. ...
... working draft initial definition. this event is specified in the push api, but accessed through serviceworkerglobalscope. ...
ServiceWorkerGlobalScope - Web APIs
spond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage. additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from
windowtimers,
windowbase64, and
windoweventhandlers. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" targ...
...if the network is available or as soon as the network becomes available. also available via the serviceworkerglobalscope.onsync property. methods serviceworkerglobalscope.skipwaiting() allows the current service worker registration to progress from waiting to active state while service worker clients are using it. serviceworkerglobalscope implements workerglobalscope — which implements
windoworworkerglobalscope. therefore it also has the following property available to it: globalfetch.fetch() starts the process of fetching a resource. this returns a promise that resolves to the response object representing the response to your request. this algorithm is the entry point for the fetch handling handed to the service worker context. examples this code snippet is from the service wo...
SharedWorker - Web APIs
they implement an interface different than dedicated workers and have a different global scope, sharedworkerglobalscope. note: if sharedworker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port). constructors sharedworker() creates a shared web worker that executes the script at the specified url. properties inherits properties from its parent, eventtarget, and implements properties from abstractworker. ...
...s methods from its parent, eventtarget, and implements methods from abstractworker. example in our basic shared worker example (run shared worker), we have two html pages, each of which uses some javascript to perform a simple calculation. the different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different
windows. the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. if the onmessage event is attached using addeventlistener, the port is manually started using its start(...
SpeechSynthesis - Web APIs
d be returned by the speechsynthesis.getvoices() method has changed. also available via the onvoiceschanged property. examples first, a simple example: let utterance = new speechsynthesisutterance("hello world!"); speechsynthesis.speak(utterance); now we'll look at a more fully-fledged example. in our speech synthesiser demo, we first grab a reference to the speechsynthesis controller using
window.speechsynthesis. after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, ...
...enu with them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method. ...
SpeechSynthesisUtterance - Web APIs
e utterance is paused part way through. also available via the onpause property. resume fired when a paused utterance is resumed. also available via the onresume property. start fired when the utterance has begun to be spoken. also available via the onstart property. examples in our basic speech synthesiser demo (source), we first grab a reference to the speechsynthesis controller using
window.speechsynthesis. after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), use the constructor to create a new utterance instance containing the text from the text <i...
...h them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), use the constructor to create a new utterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method. ...
StereoPannerNode.pan - Web APIs
and a stereopannernode, and connect the two together using the connect() method. we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved. moving the slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively. ...
..., and connect the two together using the connect() method. we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved. moving the slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively. ...
StereoPannerNode - Web APIs
and a stereopannernode, and connect the two together using the connect() method. we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved. moving the slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively. ...
..., and connect the two together using the connect() method. we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved. moving the slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively. ...
Storage - Web APIs
properties storage.length read only returns an integer representing the number of data items stored in the storage object. ...
... properties storage.length read only returns an integer representing the number of data items stored in the storage object. ...
TextDecoder - Web APIs
constructor textdecoder() returns a newly constructed textdecoder that will generate a code point stream with the d...
...og(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", which means "hello, world." in our textdecoder() constructor, we specify the
windows-1251 character encoding, which is appropriate for cyrillic script. let win1251decoder = new textdecoder('
windows-1251'); let bytes = new uint8array([207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33]); console.log(win1251decoder.decode(bytes)); // Привет, мир! constructor textdecoder() returns a newly constructed textdecoder that will generate a code point stream with the decoding method specified in parameters. properties the textdecoder interface doesn't inherit any properties. ...
TextRange - Web APIs
od does not create a reference. if you want to select the modified range after modifying the selection, you need to call the textrange.select method. selection compatibility the document.selection object is the primary purpose of textrange. this object is used to process the selected ranges in the document, and is mainly implemented by using the textrange interface. ...
...ie9 and later also gave up the document.selection object and switched to the standard interface (although textrange has been reserved, it has lost its function in most cases). it's easy to get confused. ...
Touch() - Web APIs
is a touchinit dictionary, having the following fields: "identifier", required, of type long, that is the identification number for the touch point. "target", required, of type eventtarget, the item at which the touch point started when it was first placed on the surface. "clientx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client
window of user's screen, excluding any scroll offset. "clienty", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client
window of the user's screen, excluding any scroll offset. "screenx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the user's screen. "screeny", optional and defaulting to 0, of type d...
...een, excluding any scroll offset. "screenx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the user's screen. "screeny", optional and defaulting to 0, of type double, that is the vertical position of the touch on the user's screen. "pagex", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client
window of user's screen, including any scroll offset. "pagey", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client
window of the user's screen, including any scroll offset. "radiusx", optional and defaulting to 0, of type float, that is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis ...
TouchEvent.metaKey - Web APIs
syntax var metaenabled = touchevent.metakey; return value metaenabled true if the meta key is enabled for this event; and false if the meta is not enabled. ...
... syntax var metaenabled = touchevent.metakey; return value metaenabled true if the meta key is enabled for this event; and false if the meta is not enabled. ...
UIEvent.initUIEvent() - Web APIs
w, detail) parameters type is a domstring defining the type of event. canbubble is a boolean deciding whether the event should bubble up through the event chain or not. once set, the read-only property event.bubbles will give its value. cancelable is a boolean defining whether the event can be canceled. once set, the read-only property event.cancelable will give its value. view is the
windowproxy associated with the event. detail is an unsigned long specifying some detail information about the event, depending on the type of event. for mouse events, it indicates how many times the mouse has been clicked on a given screen location. example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property in...
...ted with the event. detail is an unsigned long specifying some detail information about the event, depending on the type of event. for mouse events, it indicates how many times the mouse has been clicked on a given screen location. example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to
window and 1, // respectively e.inituievent("click", true, true,
window, 1); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specification. obsolete from document object model (dom) level 2 events specification, deprecated. document object model (dom) level 2 ev...
UIEvent - Web APIs
tal coordinate of the event relative to the whole document. uievent.pagey read only returns the vertical coordinate of the event relative to the whole document. uievent.sourcecapabilities read only returns an instance of the inputdevicecapabilities interface, which provides information about the physical device responsible for generating a touch event. uievent.viewread only returns a
windowproxy that contains the view that generated the event. uievent.which read only returns the numeric keycode of the key pressed, or the character code (charcode) for an alphanumeric key pressed. methods this interface also inherits methods of its parent, event. uievent.inituievent() initializes a uievent object. if the event has already being dispatched, this method does nothing. spe...
... status comment inputdevicecapabilities draft added sourcecapabilities property. ui events working draft extend dom3 document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification. obsolete added the uievent() constructor, deprecated the inituievent() method and changed the type of view from abstractview to
windowproxy. document object model (dom) level 2 events specificationthe definition of 'uievent' in that specification. obsolete initial definition ...
URL - Web APIs
ies which allow you to easily read and modify the components of a url. you normally create a new url object by specifying the url as a string when calling its constructor, or by providing a relative url and a base url. you can then easily read the parsed components of the url or make changes to the url. if a browser doesn't yet support the url() constructor, you can access a url object using the
window interface's
window.url property. be sure to check to see if any of your target browsers require this to be prefixed. note: this feature is available in web workers. constructor new url() creates and returns a url object referencing the url specified using an absolute url string, or a relative url string and a base url string. properties hash a usvstring containing a '#' followed by th...
...hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986. for instance: url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%c3%a9monstration.html" the urlsearchparams interface can be used to build and manipulate the url query string. to get the search params from the current
window's url, you can do this: // https://some.site/?id=123 const parsedurl = new url(
window.location.href); console.log(parsedurl.searchparams.get("id")); // "123" the tostring() method of url just returns the value of the href property, so the constructor can be used to normalize and encode a url directly. const response = await fetch(new url('http://www.example.com/démonstration.html')); specif...
URLSearchParams.set() - Web APIs
nd set some search parameters. you can copy and paste the example in a code environment like codepen, jsfiddle, or the multi-line javascript interpreter in firefox. line #41: comment out this line to stop dumping the search parameters to the console (debug). line #43: dumps the generated object and it's string representation to the console (info). line #44: tries to automatically open a new
window/tab with the generated url (when uncommented). 'use strict' function genurl(rexp, atext, bdebug=false){ let theurl theurl= new url('https://regexr.com') theurl.searchparams.set( 'expression', rexp.tostring() ) theurl.searchparams.set( 'tool', 'replace' ) theurl.searchparams.set( 'input', '\u2911\u20dc' )// ⤑⃜ theurl.searchparams.set( 'text', atext.join('\n') ) if( bdebug ){ // di...
... living standard initial definition. ...
Vibration API - Web APIs
ying lengths. the pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. vibration is controlled with a single method: navigator.vibrate(). a single vibration you may pulse the vibration hardware one time by specifying either a single value or an array consisting of only one value:
window.navigator.vibrate(200);
window.navigator.vibrate([200]); both of these examples vibrate the device for 200 ms. vibration patterns an array of values describes alternating periods in which the device is vibrating and not vibrating. each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseco...
...ate([200]); both of these examples vibrate the device for 200 ms. vibration patterns an array of values describes alternating periods in which the device is vibrating and not vibrating. each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseconds it should not be vibrating. for example:
window.navigator.vibrate([200, 100, 200]); this vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms. you may specify as many vibration/pause pairs as you like, and you may provide either an even or odd number of entries; it's worth noting that you don't have to provide a pause as your last entry since the vibration automatically stops at the end...
A basic 2D WebGL animation example - Web APIs
.0, 1.0]; // vertex information let vertexarray; let vertexbuffer; let vertexnumcomponents; let vertexcount; // rendering data shared with the // scalers. ...
...in this case, we...
Clearing by clicking - Web APIs
var canvas = document.queryselector("#canvas-view"); var button = document.queryselector...
...ock; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; }
window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves. the event handler removes // itself, because it only needs to run once.
window.removeeventlistener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button. var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext...
Clearing with colors - Web APIs
program that shows some color.</p> <!-- text within a canvas element is displayed only if canvas is not supported. --> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside
window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope. we are giving the event // handler a name (setupwebgl) so that we can refer to the // function object within the function itself.
window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves. the event handler remov...
...ded and styled before trying to manipulate it, // and to not mess up the global scope. we are giving the event // handler a name (setupwebgl) so that we can refer to the // function object within the function itself.
window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves. the event handler removes // itself, because it only needs to run once.
window.removeeventlistener(evt.type, setupwebgl, false); // references to the document elements. var paragraph = document.queryselector("p"), canvas = document.queryselector("canvas"); // getting the webgl rendering context. var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); // if failed, inform user of failure. otherwise, initialize // the drawing buf...
Detect WebGL - Web APIs
}, such as the canvas 2d rendering context. however, the properties and variables you can tweak are different for each api. <p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } // run everything inside
window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it.
window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button. button.addeventlistener("click", detectwebglcontext, false); function detectwebglcontext () { // create canvas...
...entlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button. button.addeventlistener("click", detectwebglcontext, false); function detectwebglcontext () { // create canvas element. the canvas is not added to the // document itself, so it is never displayed in the // browser
window. var canvas = document.createelement("canvas"); // get webglrenderingcontext from canvas element. var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); // report the result. if (gl && gl instanceof webglrenderingcontext) { paragraph.innerhtml = "congratulations! your browser supports webgl."; } else { paragraph.innerhtml ...
Hello vertex attributes - Web APIs
-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict"
window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) {
window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); ...
... new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); }
window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.ge...
Raining rectangles - Web APIs
d <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict"
window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) {
window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") ...
...[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation. so we reschedule // the timeout to call drawanimation again in 17ms. // otherwise we won't get any animation. timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to transform the position of the click event from //
window coordinates to relative position inside the canvas. // in addition we need to remember that vertical position in // webgl increases from bottom to top, unlike in the browser //
window. var position = [ evt.pagex - evt.target.offsetleft, gl.drawingbufferheight - (evt.pagey - evt.target.offsettop), ]; // if the click falls inside the rectangle, we caught it. // increment s...
Scissor animation - Web APIs
the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict"
window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares. var gl, color = getrandomcolor(), position; function setupanimation (evt) {
window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1],...
...in here we set the initial // position of the square to be at the top left corner of the // drawing buffer. ...
Simple color animation - Web APIs
var timer; // click event handlers. var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventli...
... var timer; // click event handlers. var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", sto...
Using the Web Animations API - Web APIs
he 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. it is one of the most performant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or
window.requestanimationframe(). with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior. we no longer need to rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction. and unlike pure, declarative css, javascript also lets us dynamically set values from proper...
... we’ll also need to create an object of timing properties (an animationeffecttimingproperties object) corresponding to the values in alice’s animation: var alicetiming = { duration: 3000, iterations: infinity } you’ll notice a few differences here from how equivalent values are represented in css: for one, the duration is in milliseconds as opposed to seconds — 3000 not 3s. like
windowtimers.settimeout() and
window.requestanimationframe(), the web animations api only takes milliseconds. the other thing you’ll notice is that it’s iterations, not iteration-count. there are a number of small differences between the terminology used in css animations and the terminology used in web animations. for instance, web animations doesn't use the string "infinite", but instead uses ...
Visualizations with Web Audio API - Web APIs
which can then be used to create visualizations. this article explains how, and provides a couple of basic use cases. note: you can find working examples of all the code snippets in our voice-change-o-matic demo. ...
... to create visualizations. this article explains how, and provides a couple of basic use cases. note: you can find working examples of all the code snippets in our voice-change-o-matic demo. ...
Web Authentication API - Web APIs
re created and stored in a device called an authenticator. this is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator. the authenticator may be embedded into an operating system, such as
windows hello, or may be a physical token, such as a usb or bluetooth security key. registration a typical registration process has six steps, as illustrated in figure 1 and described further below. this is a simplification of the data required for the registration process that is only intended to provide an overview. the full set of required fields, optional fields, and their meanings for creating a...
...proof to a service that it has a key pair and that the authentication request is valid and approved. options publickeycredentialcreationoptions the options passed to credentialscontainer.create(). publickeycredentialrequestoptions the options passed to credentialscontainer.get(). examples for security reasons, web authentication calls (create() and get()) are cancelled if the browser
window loses focus while the call is pending. // sample arguments for registration var createcredentialdefaultargs = { publickey: { // relying party (a.k.a. - service): rp: { name: "acme" }, // user: user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p. smith" }, ...
XDomainRequest - Web APIs
quest. event handlers xdomainrequest.onprogress a handler for when the request has made progress between the send method call and the onload event. xdomainrequest.ontimeout a handler for when the request times out. xdomainrequest.onerror a handler for when a request has errored. xdomainrequest.onload a handler for when the full response has been received from the server. ...
... note: the xdr.onprogress event should always be defined, even as an empty function, or xdomainrequest may not fire onload for duplicate requests. security the xdomainrequest is built to be secure in multiple ways. the origin's security protocol mus...
Synchronous and asynchronous requests - Web APIs
eepalive flag. when fetch with keepalive isn't available, you can consider using the navigator.sendbeacon() api, which can support these use cases while typically delivering a good ux. the following example shows theoretical analytics code that attempts to submit data to a server by using a synchronous xmlhttprequest in an unload handler. this results in the unloading of the page to be delayed.
window.addeventlistener('unload', logdata, false); function logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr. :( client.setrequestheader("content-type", "text/plain;charset=utf-8"); client.send(analyticsdata); } using the sendbeacon() method, the data will be transmitted asynchronously to the web server when the u...
...-8"); client.send(analyticsdata); } using the sendbeacon() method, the data will be transmitted asynchronously to the web server when the user agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation. the following example shows a theoretical analytics code pattern that submits data to a server by using the sendbeacon() method.
window.addeventlistener('unload', logdata, false); function logdata() { navigator.sendbeacon("/log", analyticsdata); } ...
init() - Web APIs
ipal, in nsiscriptcontext scriptcontext, in nsiglobalobject globalobject, in nsiuri baseuri, [optional] in nsiloadgroup loadgroup ); parameters principal the principal to use for the request; this must not be null. scriptcontext the script context to use for the request; this must not be null. globalobject the object to use as the global for our request. often, this is the outer
window, but it may also be a sandbox or backstage pass. this may be null, but if it is, the request cannot create a document. prior to firefox 23, this was always a
window. baseuri the base uri to use when resolving relative uris when handling the request. this may be null. loadgroup optional an optional load group used when performing the request. if this is specified, it is used even if the glob...
...may also be a sandbox or backstage pass. this may be null, but if it is, the request cannot create a document. prior to firefox 23, this was always a
window. baseuri the base uri to use when resolving relative uris when handling the request. this may be null. loadgroup optional an optional load group used when performing the request. if this is specified, it is used even if the global has a
window with a load group already established. ...
msWriteProfilerMark - Web APIs
ature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mswriteprofilermark method writes a profiling event. this proprietary method is specific to internet explorer and microsoft edge. syntax
window.mswriteprofilermark("start-render"); parameters bstrprofilermarkname[in] an event name. type = string. this parameter may be null. return value type: hresult. if this method succeeds, it returns s_ok. otherwise, it returns an hresult error code. notes mswriteprofilermark enables you to inject dom based performance markers in addition to existing javascript api to learn exactly when par...
...ables you to inject dom based performance markers in addition to existing javascript api to learn exactly when parts of the page are being rendered, building a waterfall view for every one of our impressions showing latency per object, which can be useful for more accurately debugging real users perf issues. internet explorer 10. this method is also available in the web worker global scope. for
windows xp, this method sends an event to an event tracing session with traceevent; for systems after
windows xp, this method writes an event with eventwrite. the event includes a pointer to a
window object, current markup, and the event name passed as bstrprofilermarkname. the bstrprofilermarkname property has a 32-character limit when called from script. this method is useful to profile real websit...
Web APIs
ntionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmanager lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimessageevent midioutputmap mscandidate
windowhide mscandidate
windowshow mscandidate
windowupdate msgestureevent msgraphicstrust msmanipulationevent msrangecollection mssitemodeevent magnetometer mathmlelement mediacapabilities mediacapabilitiesinfo mediaconfiguration mediadecodingconfiguration mediadeviceinfo mediadevices mediaelementaudiosourcenode mediaencodingconfiguration mediaerror mediaimage mediakeymessageevent mediakeyse...
...rs webgl_lose_context wakelock wakelocksentinel waveshapernode webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglrenderingcontext webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent
window windowclient
windoweventhandlers
windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrb...
Using the link role - Accessibility
nary links. screen magnifiers may enlarge links. note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples this example shows how to implement a fake link using a <span> element. 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. this is a huge amount of work just to recreate something you've get for free using the <a> element, so you should really use that if possible. but this shows that it can be done. yo...
... aria attributes used link rela...
How to file ARIA-related bugs - Accessibility
e, please take a little time and let the developers know. here's where to file bugs: when finding a bug, please also update the relevant compatibility tables in the examples page. ...
...a little time and let the developers know. here's where to file bugs: when finding a bug, please also update the relevant compatibility tables in the examples page. ...
WAI-ARIA Roles - Accessibility
ll-out boxes. if possible, use the html <aside> element instead.aria: contentinfo rolethe contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. this section is commonly called a footer.aria: dialog rolethe dialog role is used to mark up an html based application dialog or
window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).aria: document rolegenerally used in complex composite widgets or applic...
...menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem widget
window ...
Architecture - Accessibility
ree. if the node is embedded in a parent that is an nsiaccessiblehypertext, the node will be exposed as an nsiaccessiblehyperlink. consumers can use this interface to determine the position of the object in the parent's text. nstextaccessible serves 2 purposes it is used by nshypertextaccessible to collect information about itself it is still exposed in msaa for backward compatibility by old
windows assistive technologies. those at's don't yet know about any iaccessibletext yet, and want to see the hierarchy how they always did -- with text in leaf nodes. how does an at deal with text (a) to get the embedded object for an embedded object char: linkindex = iahypertext::getlinkindex(offset) iahyperlink*object = iahypertext::getlink(linkindex) iaccessible* accessible = qi/qs(object) (...
...f a new line. navigating to the next word follows a similar pattern. navigating previous requires returning to the embed character in the parent accessible when the point of regard reaches the end of text in the corresponding child accessible for the embed. see http://svn.gnome.org/viewcvs/lsr/tru...py?view=markup for a bsd implementation. (e) to grab a subtree of content: although under
windows text content is still exposed in leaf nodes of role_text, it is no longer necessary to visit those nodes. therefore for parent nodes that support the hypertext interface, it is more performant to grab the text from the accessibletext interface and then only visit the link children. the hyperlink interface can be used to grab the children. using this technique is about twice as fast as visiting a...
-moz-image-rect - CSS: Cascading Style Sheets
136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid. these four segments are all contained within a larger <div> block whose primary purpose is to receive click events and dispatch them to our javascript code. the javascript code this code handles the click event when the container receives a mouse click. ...
...ascript code this code handles the click event when the container receives a mouse click. function rotate() { var prevstyle =
window.getcomputedstyle(document.getelementbyid("box4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle =
window.getcomputedstyle(document.getelementbyid(curid), null).getpropertyvalue("background-image"); document.getelementbyid(curid).style.backgroundimage = prevstyle; prevstyle = curstyle; } } this uses
window.getcomputedstyle() to fetch the style of each element, shifting it to the following element. notice that before it begins doing so it saves a copy of the last box's style since it will b...
-ms-high-contrast - CSS: Cascading Style Sheets
styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors. the available color keywords are:
windowtext: controls the color of text content. highlighttext: controls the color of selected text. highlight: controls the background color of selected text. buttonface: controls the color of a <button> element's text.
window: controls the color of the background. the <a> element controls the color of links. because high contrast mode themes are dynamic, use these color keywords in place of othe...
... ...
display-mode - CSS: Cascading Style Sheets
play-mode feature is specified as a keyword value chosen from the list below. display mode description fallback display mode fullscreen all of the available display area is used and no user agent chrome is shown. standalone standalone the application will look and feel like a standalone application. this can include the application having a different
window, its own icon in the application launcher, etc. in this mode, the user agent will exclude ui elements for controlling navigation, but can include other ui elements such as a status bar. minimal-ui minimal-ui the application will look and feel like a standalone application, but will have a minimal set of ui elements for controlling navigation. the elements will vary by browser. b...
...lude ui elements for controlling navigation, but can include other ui elements such as a status bar. minimal-ui minimal-ui the application will look and feel like a standalone application, but will have a minimal set of ui elements for controlling navigation. the elements will vary by browser. browser browser the application opens in a conventional browser tab or new
window, depending on the browser and platform. (none) examples @media all and (display-mode: fullscreen) { body { margin: 0; border: 5px solid black; } } specifications specification status comment web app manifestthe definition of 'display-mode' in that specification. working draft initial definition. ...
Using CSS animations - CSS: Cascading Style Sheets
tarts or finishes the animation using the computed values of all attributes. you can optionally include additional keyframes that describe intermediate steps between the start and end of the animation. examples note: some older browsers (pre-2017) may need prefixes; the live examples you can click to see in your browser include the -webkit prefixed syntax. making text slide across the browser
window this simple example styles the <p> element so that the text slides in from off the right edge of the browser
window. note that animations like this can cause the page to become wider than the browser
window. to avoid this problem put the element to be animated in a container, and set overflow:hidden on the container. p { animation-duration: 3s; animation-name: slidein; } @keyframes slidei...
...e, we have just two keyframes. the first occurs at 0% (using the alias from). here, we configure the left margin of the element to be at 100% (that is, at the far right edge of the containing element), and the width of the element to be 300% (or three times the width of the containing element). this causes the first frame of the animation to have the header drawn off the right edge of the browser
window. the second (and final) keyframe occurs at 100% (using the alias to). the left margin is set to 0% and the width of the element is set to 100%. this causes the header to finish its animation flush against the left edge of the content area. <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a ...
Using URL values for the cursor property - CSS: Cascading Style Sheets
mac support was added in gecko 2 (firefox 4). this allows specifying arbitrary images as mouse cursors — any image format supported by gecko can be used. syntax the basic (css 2.1) syntax for this property is: cursor: [ <url> , ]* <keyword> this means that zero or more urls may be specified (comma-separated), which must be followed by one of the keywords defined in the css specification, such as auto or pointer. for example, the following value would be allowed: cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; this will first try loading foo.cur. ...
...mation, and declarative smil inside an svg image are ignored; you can't use svg to create an animated cursor, for example. in gecko (firefox) the limit of the cursor size is 128×128px. larger cursor images are ignored. however, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms. (due to a bug in gecko 1.9.2-1.9.2.6, firefox 3.6-3.6.6 on
windows limits to 32×32px. this is fixed in later versions.) translucent cursors are not supported on
windows releases earlier than xp. this is a limitation of the operating system. transparency works on all platforms. url values as cursors are supported in
windows, os/2, and linux (when using gtk+ 2.4 or better) releases of mozilla. mac os x support was added with gecko 2 (firefox 4). ...
Privacy and the :visited selector - CSS: Cascading Style Sheets
before about 2010, the css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. this was done through
window.getcomputedstyle and other techniques. this process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. ...
...sible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the
window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page. if you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited. in rare scenarios, if you're using nested link elements and the element being m...
cursor - CSS: Cascading Style Sheets
vertical-text the vertical text can be selected. typically the shape of a sideways i-beam. drag & drop alias an alias or shortcut is to be created. copy something is to be copied. move something is to be moved. no-drop an item may not be dropped at the current location. bug 275173: on
windows and mac os x, no-drop is the same as not-allowed. not-allowed the requested action will not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). ...
... no-drop is the same as not-allowed. not-allowed the requested action will not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on
windows, all-scroll is the same as move. col-resize the item/column can be resized horizontally. often rendered as arrows pointing left and right with a vertical bar separating them. row-resize the item/row can be resized vertically. often rendered as arrows pointing up and down with a horizontal bar separating them. n-resize some edge is to...
font - CSS: Cascading Style Sheets
ss property. system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.). icon the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in
window status bars. prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -moz-
window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field. formal definition initial valueas each of the properties of the shorthand:font-style: normalfont-variant: normalfont-weight: normalfont-stretch: nor...
...2px/14px sans-serif } /* set the font size to 80% of the parent element or default value (if no parent element present). set the font family to sans-serif */ p { font: 80% sans-serif } /* set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. */ p { font: bold italic large serif } /* use the same font as the status bar of the
window */ p { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect. </p> <form action="createshorthand()"> <div class="cf"> <div class="setpropcont"> font-style<br/> <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">n...
text-rendering - CSS: Cascading Style Sheets
endering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /* global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard. however, gecko and webkit browsers let you apply this property to html and xml content on
windows, macos, and linux. one very visible effect is optimizelegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family). syntax values auto the browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. ...
...o the browser rounds the font size to 12 instead. this results in stair-step scaling of text. but the geometricprecision property — when fully supported by the rendering engine — lets you scale your text fluidly. for large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by
windows or linux. note: webkit precisely applies the specified value, but gecko treats the value the same as optimizelegibility. formal definition initial valueautoapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | optimizespeed | optimizelegibility | geometricprecision examples automatic application of optimizelegibility this demonstrate...
transition-timing-function - CSS: Cascading Style Sheets
rent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid =
window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; } .cb { transition-timing-function: cubic-bezier(0.2,-2,0.8,2); } step examples <div clas...
...arent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid =
window.setinterval(updatetransition, 10000); .jump-start { transition-timing-function: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); } .step-start { transition-timing-function: step-start; } .step-end { transition-timin...
Cross-browser audio basics - Developer guides
diofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <p>download<a href="audiofile.mp3">audiofile.mp3</a></p> </audio> <!-- custom play and pause buttons --> <button id="play">play</button> <button id="pause">pause</button> next, we attach some functionality to the player using javascript:
window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading ...
...lay" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like so: #controls { width: 80px; float: left; } #progress { margin-left: 80px; border: 1px solid black; } #bar { height: 20px; background-color: green; width: 0; } now let's wire this thing up with javascript:
window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); var loading = document.getelementbyid('loading'); var bar = document.getelementbyid('bar'); function displaycontrols() { loading.style.display = "none"; play.style.display = "block"; } // check that...
Media buffering, seeking, and time ranges - Developer guides
ered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript:
window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; ...
...x; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality:
window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amou...
Audio and video manipulation - Developer guides
audio manipulation playbackrate aside, to manipulate audio you'll typically use the web audio api. selecting an audio source the web audio api can receive audio from a variety of sources, then process it and send it back out to an audiodestinationnode representing the output device to which the sound is...
... common audio filters these are some of the common types of audio filter you can apply: low pass: allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. high pass: allows frequencies ...
Mouse gesture events - Developer guides
1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures. these are special movements that can be made with a mouse or trackpad and can be interpreted to perform specific tasks. note: these gesture events are available to add-ons and other browser chrome code, but are never sent to regular web page content. note: some operating systems, including mac os x and
windows 7, provide default actions when gesture events occur. if you handle a gesture event and wish to prevent the default action from taking place as well, be sure to call the event's preventdefault() method. types of gesture events mozswipegesture the mozswipegesture event is sent when the user uses three fingers to "swipe" the trackpad. mozmagnifygesturestart the mozmagnifygesturestart event is sent...
...ta value is the cumulative change over the course of handling the entire sequence of magnify gesture events. mozrotategesturestart the mozrotategesturestart event is sent when the user begins performing a rotate gesture, by placing two fingers on the trackpad and rotating them around the center of the trackpad. firefox uses this gesture to move backward and forward through the tabs in the current
window. mozrotategestureupdate the mozrotategestureupdate event is sent periodically while processing a rotate gesture, to provide updated status information. the event's delta value represents the amount by which the gesture has moved since the mozrotategesturestart or mozrotategestureupdate event. note: this event is sent whenever the movement of the user's fingers exceeds the number of pixels indic...
Using device orientation with 3D transforms - Developer guides
s of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey. here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d");
window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality. this ...
... "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality. ...
Constraint validation - Developer guides
limiting the size of a file before its upload another common constraint is to limit the size of a file to be uploaded. checking this on the client side before the file is transmitted to the server r...
... visual styling of constraint validation apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled. controlling the look of elements the look of elements can be controlled via...
HTML5 - Developer guides
avigator.registerprotocolhandler() method. requestanimationframe allows control of animations rendering to obtain optimal performance. fullscreen api controls the usage of the whole screen for a web page or application, without the browser ui displayed. pointer lock api allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the
window limit. online and offline events in order to build a good offline-capable web application, you need to know when your application is actually offline. incidentally, you also need to know when your application has returned to an online status again. device access touch events handlers to react to events created by a user pressing touch screens. using geolocation let browsers locate the p...
...ation when the device on which the browser runs changes orientation. this can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape). pointer lock api allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the
window limit. styling css has been extended to be able to style elements in a much more complex way. this is often referred as css3, though css is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered. new background styling features it is now possible to put shadows on elements...
HTML attribute reference - HTML: Hypertext Markup Language
on/input is a submit button (type="submit"), this boolean attribute specifies that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the button's form owner. formtarget <button>, <input> if the button/input is a submit button (type="submit"), this attribute specifies the browsing context (for example, tab,
window, or inline frame) in which to display the response that is received after submitting the form. if this attribute is specified, it overrides the target attribute of the button's form owner. headers <td>, <th> ids of the <th> elements which applies to this element. height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> specifies the height of elemen...
... indicates whether the list should be displayed in a descending order instead of a ascending. rows <textarea> defines the number of rows in a text area. rowspan <td>, <th> defines the number of rows a table cell should span over. sandbox <iframe> stops a document loaded in an iframe from using certain features (such as submitting forms or opening new
windows). scope <th> defines the cells that the header test (defined in the th element) relates to. scoped <style> selected <option> defines a value which will be selected on page load. shape <a>, <area> size <input>, <select> defines the width of the element (in pixels). if the element's type attribute is text or password then...
<input type="color"> - HTML: Hypertext Markup Language
formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel. the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker
window. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input supported common attributes...
...event fires, and we detect that to change every paragraph to the selected color.</p> javascript first, there's some setup. here we establish some variables, setting up a variable that contains the color we'll set the color well to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded. ...
Link types - HTML: Hypertext Markup Language
control over it, if it is a bad example or if there is commercial relationship between the two (sold link). this link type may be used by some search engines that use popularity ranking techniques. <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 targ...
... <a>, <area>, <form> <link> noreferrer prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the referer: http header. (in firefox, before firefox 37, this worked only in links found in pages. ...
Preloading content with rel="preload" - HTML: Hypertext Markup Language
xample): <head> <meta charset="utf-8"> <title>responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist =
window.matchmedia("(max-width: 600px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow...
...header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. we use
window.matchmedia / mediaquerylist to do this (see testing media queries for more). this makes it much more likely that the font will be available for the page render, cutting down on fout (flash of unstyled text). this doesn't have to be limited to images, or even files of the same type — think big! you could perhaps preload and display a simple svg diagram if the user is on a narrow screen where b...
Evolution of HTTP - HTTP
requests and the responses, allowing metadata to be transmitted and making the protocol extremely flexible and extensible. with the help of the new http headers, the ability to transmit other documents than plain html files has been added (thanks to the content-type header). ...
...e this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (
windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:31 gmt server: cern/3.0 libwww/2.17 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (
windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-and-see approach over the 1991-1995 period: a server and a browser added one feature and it saw if it got traction. a lot of interoperability problems were common. in november 1996, in order to solve these...
MIME types (IANA media types) - HTTP
separate files which are all part of the same transaction. they represent a composite document. with the exception of multipart/form-data, used in the post method of html forms, and multipart/byteranges, used with 206 partial content to send part of a document, http doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "save as"
window if it doesn't know how to display the document). there are two multipart types: message list at iana a message that encapsulates other messages. this can be used, for instance, to represent an email that includes a forwarded message as part of its data, or to allow sending very large messages in chunks as if it were multiple messages. examples include message/rfc822 (for forwarded or replied...
...e file extension in the url if the sent mime type is unsuitable.) there are security concerns as some mime types represent executable content. servers can prevent mime sniffing by sending the x-content-type-options header. other methods of conveying document type mime types are not the only way to convey document type information: filename suffixes are sometimes used, especially on microsoft
windows. not all operating systems consider these suffixes meaningful (such as linux and macos), and there is no guarantee they are correct. magic numbers. the syntax of different formats allows file-type inference by looking at their byte structure. for example, gif files start with the 47 49 46 38 39 hexadecimal value (gif89), and png files with 89 50 4e 47 (.png). not all file types have magic numbe...
Expressions and operators - JavaScript
form is legal only within a with statement, to delete a property from an object, and also for properties of the global object. if the delete operator succeeds, it removes the propery from the object. trying to access it afterwards will yield undefined. the delete operator returns true if the operation is possible; it returns false if the operation is not possible. ...
... following results: typeof true; // returns "boolean" typeof null; // returns "object" for a number or string, the typeof operator returns the following results: typeof 62; // returns "number" typeof 'hello world'; // returns "string" for property values, the typeof operator returns the type of value the property contains: typeof document.lastmodified; // returns "string" typeof
window.length; // returns "number" typeof math.ln2; // returns "number" for methods and functions, the typeof operator returns results as follows: typeof blur; // returns "function" typeof eval; // returns "function" typeof parseint; // returns "function" typeof shape.split; // returns "function" for predefined objects, the typeof operator returns results as fo...
Using Promises - JavaScript
before. you can read more about the syntax here. promises solve a fundamental flaw with the callback pyramid of doom, by catching all errors, even thrown exceptions and programming errors. this is essential for functional composition of asynchronous operations. promise rejection events whenever a promise is rejected, one of two events is sent to the global scope (generally, this is either the
window or, if being used in a web worker, it's the worker or other worker-based interface). the two events are: rejectionhandled sent when a promise is rejected, after that rejection has been handled by the executor's reject function. unhandledrejection sent when a promise is rejected but there is no rejection handler available. in both cases, the event (of type promiserejectionevent) has as mem...
...urce. one case of special usefulness: when writing code for node.js, it's common that modules you include in your project may have unhandled rejected promises. these get logged to the console by the node runtime. you can capture these for analysis and handling by your code—or just to avoid having them cluttering up your output—by adding a handler for the unhandledrejection event, like this:
window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */ event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the javascript runtime not to do its default action when rejected promises go unhandled. that default action usually ...
JavaScript technologies overview - JavaScript
ple in node.js. what falls under the ecmascript scope? among other things, ecmascript defines: language syntax (parsing rules, keywords, control flow, object literal initialization, ...) error handling mechanisms (throw, try...catch, ability to create user-defined error types) types (boolean, number, string, function, object, ...) the global object. in a browser, this global object is the
window object, but ecmascript only defines the apis not specific to browsers, e.g. parseint, parsefloat, decodeuri, encodeuri... a prototype-based inheritance mechanism built-in objects and functions (json, math, array.prototype methods, object introspection methods, etc.) strict mode browser support as of october 2016, the current versions of the major web browsers implement ecmascript 5.1 and ec...
...sname property on html elements, or apis such as document.body. the html specification also defines restrictions on documents; for example, it requires all children of a <ul> element, which represents an unordered list, to be <li> elements, as those represent list items. in general, it also forbids using elements and attributes that aren't defined in a standard. looking for the document object,
window object, and the other dom elements? read the dom documentation. other notable apis the settimeout and setinterval functions were first specified on the
window interface in html standard. xmlhttprequest makes it possible to send asynchronous http requests. the css object model abstract css rules as objects. webworkers allows parallel computation. websockets allows low-level bidirectional c...
Promise.prototype.then() - JavaScript
const nexttick = (() => { const noop = () => {}; // literally const nexttickpromise = () => promise.resolve().then(noop); const rfab = reflect.apply.bind; // (thisarg, fn, thisarg, [...args]) const nexttick ...
...omise here, that will be rejected with 'error' after 1 second return new promise(rejectlater); }); p3.then(function(v) { // not called console.log('resolved', v); }, function(e) { console.error('rejected', e); // "rejected", 'error' });
window.setimmediate style promise-based polyfill using a function.prototype.bind() reflect.apply (reflect.apply()) method to create a (non-cancellable)
window.setimmediate-style function. const nexttick = (() => { const noop = () => {}; // literally const nexttickpromise = () => promise.resolve().then(noop); const rfab = reflect.apply.bind; // (thisarg, fn, thisarg, [...args]) const nexttick = (fn, ...args) => ( fn !== undefined ? promise.resolve(args).then(rfab(null, fn, null)) : nexttickpromise(), undefined ); nexttick.n...
Planned changes to shared memory - JavaScript
d their cross-origin (and cross-site) counterparts need to set the same header with cross-origin as value. note that setting the cross-origin-resource-policy header to any other value than same-origin opens up the resource to potential attacks, such as spectre. note that the cross-origin-opener-policy header limits your ability to retain a reference to popups. direct access between two top-level
window contexts will essentially only work if they are same-origin and carry the same two headers with the same two values. api changes as a result of this newly required environment, there are a couple api implications: the atomics object is always available. sharedarraybuffer objects are in principle always available, but unfortunately the constructor on the global object is hidden, unless the t...
...ctor on the global object is hidden, unless the two headers mentioned above are set, for compatibility with web content. there is hope that this restriction can be removed in the future. webassembly.memory can still be used to get an instance. unless the two headers mentioned above are set, the various postmessage() apis will throw for sharedarraybuffer objects. if they are set, postmessage() on
window objects and dedicated workers will function and allow for memory sharing. to avoid having to check whether postmessage() throws, self.crossoriginisolated is being standardized (a getter that returns a boolean; true if the headers are set), available in
window and worker contexts. webassembly shared memory the webassembly threads proposal allows webassembly.memory objects to be created with a ...
eval() - JavaScript
owser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. additonally, new things can be introduced to that variable through eval() such as changing the type of that variable, forcing the browser to re-evaluate all of the generated machine code to compensate. fortunately, there's a very good alternative to eval(): simply using
window.function(). see this example of how to convert code using a dangerous eval() to using function(), see below. bad code with eval(): function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) better code without eval(): function loosejsonparse(obj){ return function('"use strict";return (' + obj + ')')(); } c...
...parse( "{a:(4-1), b:function(){}, c:new date()}" )) comparing the two code snippets above, the two code snippets might seem to work the same way, but think again: the eval() one is a great deal slower. notice c: new date() in the evaluated object. in the function without the eval(), the object is being evaluated in the global scope, so it is safe for the browser to assume that date refers to
window.date() instead of a local variable called date. but, in the code using eval(), the browser cannot assume this since what if your code looked like the following: function date(n){ return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"][n%7 || 0]; } function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}...
instanceof - JavaScript
/ true o3 instanceof c // true since c.prototype is now in o3's prototype chain note that the value of an instanceof test can change based on changes to the prototype property of constructors. it can also be changed by changing an object's prototype using object.setprototypeof. it is also possible using the non-standard __proto__ property. instanceof and multiple context (e.g. frames or
windows) different scopes have different execution environments. this means that they have different built-ins (different global object, different constructors, etc.). this may result in unexpected results. for instance, [] instanceof
window.frames[0].array will return false, because array.prototype !==
window.frames[0].array and arrays inherit from the former. this may not make sense at first, but fo...
...ion environments. this means that they have different built-ins (different global object, different constructors, etc.). this may result in unexpected results. for instance, [] instanceof
window.frames[0].array will return false, because array.prototype !==
window.frames[0].array and arrays inherit from the former. this may not make sense at first, but for scripts dealing with multiple frames or
windows, and passing objects from one context to another via functions, this will be a valid and strong issue. for instance, you can securely check if a given object is, in fact, an array using array.isarray(myobj) for example, checking if a nodes is a svgelement in a different context, you can use mynode instanceof mynode.ownerdocument.defaultview.svgelement. note for mozilla developers: in code us...
Strict mode - JavaScript
mascript. see transitioning to strict mode, if you want to change your code to work in the restricted variant of javascript. invoking strict mode strict mode applies to entire scripts or to individual functions. it doesn't apply to block statements enclosed in {} braces; attempting to apply it to such contexts does nothing. eval code, function code, event handler attributes, strings passed to
windowtimers.settimeout(), and related functions are entire scripts, and invoking strict mode in them works as expected. strict mode for scripts to invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements. // whole-script strict mode syntax 'use strict'; var v = "hi! i'm a strict mode script!"; this syntax has a trap that has alre...
... second, in strict mode it's no longer possible to "walk" the javascript stack via commonly-implemented extensions to ecmascript. in normal code with these extensions, when a function fun is in the middle of being called, fun.caller is the function that most recently called fun, and fun.arguments is the arguments for that invocation of fun. both ...
Authoring MathML - MathML
l | itex2mml > output.html there are even more sophisticated tools to convert arbitrary latex documents into html+mathml. for example tex4ht is often included in tex distributions and has an option to use mathml instead of png images. this command will generate an xhtml+mathml document foo.xml from a foo.tex latex source: mk4ht mzlatex foo.tex # linux/mac platforms mzlatex foo.tex #
windows platform note that tex4ebook relies on tex4ht to generate epub documents. latexml is another tool that can generate html5 and epub documents.
windows users can watch this video tutorial. given a foo.tex latex file, you can use these simple commands: latexmlc --dest foo.html foo.tex # generate a html5 document foo.html latexmlc --dest foo.epub foo.tex # generate an epub document foo.epub ...
... text such as a+2 is automatically parsed and the appropriate mathml markup is generated. once you are done, you can directly save your xhtml page and open it in mozilla. optical character & handwriting recognition inftyreader is able to perform some optical character recognition, including translation of mathematical equations into mathml. other tools can do handwriting recognition such as the
windows math input panel or the online converter web equation. original document information author(s): frédéric wang other contributors: florian scholz copyright information: portions of this content are © 2010 by individual mozilla.org contributors; content available under a creative commons license | details. ...
Media container formats (file types) - Web media technologies
y used for movies and was usually called the "quicktime movie" format. while qtff served as the basis for the mpeg-4 file format, there are differences and the two are not quite interchangeable. quicktime files support any sort of time-based data, including audio and video media, text tracks, and so forth. quicktime files are primarily supported by macos, but for a number of years, quicktime for
windows was available to access them on
windows. however, quicktime for
windows is no longer supported by apple as of early 2016, and should not be used, as there are known security concerns. however,
windows media player now has integrated support for quicktime version 2.0 and earlier files; support for later versions of quicktime requires third-party additions. on mac os, the quicktime framework not...
...firefox for android does not yet support av1; the implementation in firefox is designed to use a secure process, which is not supported yet in android. audio codecs supported by webm codec browser support chrome edge firefox safari opus yes yes yes yes vorbis yes yes yes yes ...
Navigation and resource timings - Web Performance
adeventend. with the metrics above, and a little bit of math, we can calculate many important metrics like time to first byte, page load time, dns lookup, and whether the connection is secure. to help measure the time it takes to complete all the steps, the performance timing api provides read only measurements of navigation timings. to view and capture our app's timing we enter: let time =
window.performance.timing we can then use the results to measure how well our app is performing. the order is: performance timings details navigationstart when the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. secureconnectionstart...
...he connection is closed if this happened first, from the server, the cache, or from a local resource. domloading when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown. unloadeventstart when the unload> event has been thrown, indicating the time at which the previous document in the
window began to unload. if there is no previous document, or if the previous document or one of the needed redirects is not of the same origin, the value returned is 0. unloadeventend when the unload event handler finishes. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. dominteractive...
target - SVG: Scalable Vector Graphics
ght: 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.mozilla.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 t...
...inition of browsing contexts. use _self to replace the current svg document. _self the current svg image is replaced by the linked content in the same browsing context as the current svg image. _parent the immediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be securely accessed from this document. _top the content of the full active
window or tab is replaced by the linked content, if it exists and can be securely accessed from this document _blank a new un-named
window or tab is requested for the display of the linked content, if this document can securely do so. if the user agent does not support multiple
windows/tabs, the result is the same as _top. <xml-name> specifies the name of the browsing context (tab, inline frame, obj...
Scripting - SVG: Scalable Vector Graphics
instead, you can use var svgdoc=document.embeds["name_of_svg"].getsvgdocument(); to get a reference to an embedded svg document instead. the best way to get access to the document representing an svg document i...
...is.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a
window property called svgdocument that points to the svg document. this is not the case for mozilla's native svg implementation; therefore, using
window.svgdocument does not work in mozilla. instead, you can use var svgdoc=document.embeds["name_of_svg"].getsvgdocument(); to get a reference to an embedded svg document instead. the best way to get access to the document representing an svg document is to look at htmliframeelement.contentdocument (if the document is presented in an <iframe>) or htmlobjectelement.contentdocument (if the document ...
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
pening ..." dialog comes up, select the "open with" radio button and choose any .exe except firefox.exe/mozilla.exe. 2. make sure the "do this automatically for files like this from now on" checkbox is checked. 3. click ok, and when the program you chose tries to open the file, just close it. 4. in firefox, go to tools > options... > downloads > view & edit actions... to open the download actions
window. 5. select the svg entry, click the remove action button and then click close to close the download actions
window. 6. try and load a local .svg file and this scripting across embed demo. if the files you attempt to load in step 6 work, then your problem was mimetypes.rdf corruption. if they still don't work, then you operating system is the likely culprit. fix for os file associations your os...
...file associations your os may be associating the wrong media type with the .svg filename extension if you have installed an old program such as photoshop elements 1.0 and chose to install the *very* old adobe svg viewer that comes bundled with it. this will set up the os to associate the .svg filename extension with the incorrect media type "image/svg-xml" instead of "image/svg+xml". microsoft
windows one way to fix this in microsoft
windows is to start regedit (start > run > regedit) and search for "svg". change every occurance of "image/svg-xml" (or whatever the invalid media type is) to "image/svg+xml". normally, this matters just for the entry "hkey_classes_root\.svg\content type". after correcting the os file associations you will probably need to re-clean your mimetypes.rdf as descri...
Web security
ve mixed content delivered via http on these pages will be blocked by default. consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. this page explains what you should be aware of as a web developer. secure contexts a secure context is a
window or worker for which there is reasonable confidence that the content has been delivered securely (via https/tls), and for which the potential for communication with contexts that are not secure is limited. many web apis and features are accessible only in a secure context. the primary goal of secure contexts is to prevent man-in-the-middle attackers from accessing powerful apis that could further ...
...sponse codes to be written data security using http cookies an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. the browser may store it and send it back with later requests to the same server. typically, it's used to tell if two requests came from the same browser — keeping a user logged-in, for example. local storage the
window object's
window.localstorage property is a way for servers to store data on a client that is persistent across sessions. information leakage referer header policy: privacy and security concerns there are privacy and security risks associated with the referer http header. this article describes them and offers advice on mitigating those risks. robots.txt to be written site maps to be wri...
Loading Content Scripts - Archive of obsolete content
"ready" loads the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires. at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading. "end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires. the default value is "end". the contentscriptoptions is a json that is exposed to content scripts as a read only value under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. ...
clipboard - Archive of obsolete content
interact with the system clipboard, setting and getting its contents. usage you can optionally specify the type of the data to set and retrieve. the following types are supported: text (plain text) html (a string of html) image (a base-64 encoded png) if no data type is provided, then the module will detect it for you. currently the image type doesn't support transparency on
windows. examples set and get the contents of the clipboard. var clipboard = require("sdk/clipboard"); clipboard.set("lorem ipsum dolor sit amet"); var contents = clipboard.get(); set the clipboard contents to some html. 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 =...
hotkeys - Archive of obsolete content
alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt-letter combinations are reserved for entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. accel: the key used for keyboard shortcuts on the user's platform, which is control on
windows and linux, and command on mac. usually, this would be the value you would use. pageup: the page up key. pagedown: the page down key. onpress function function that is invoked when the key combination hotkey is pressed. hotkey methods destroy() stops this instance of hotkey from reacting to the key combinations. once destroyed a hotkey can no l...
indexed-db - Archive of obsolete content
experimental exposes the indexeddb api to add-ons. usage scripts running in web pages can access indexeddb via the
window object. 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 ...
notifications - Archive of obsolete content
here's a typical example. when the message is clicked, a string is logged to the console. var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result. ...
selection - Archive of obsolete content
ction = require("sdk/selection"); selection.on('select', mylistener); // you can remove listeners too. selection.removelistener('select', mylistener); iterating over discontiguous selections discontiguous selections can be accessed by iterating over the selection module itself. each iteration yields a selection object from which text, html, and iscontiguous properties can be accessed. private
windows if your add-on has not opted into private browsing, then you won't see any selections made in tabs that are hosted by private browser
windows. to learn more about private
windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. examples log the current contiguous selection as text: var selection = require("sd...
simple-storage - Archive of obsolete content
array */ ]; ss.on("overquota", function () { while (ss.quotausage > 1) ss.storage.mylist.pop(); }); private browsing if your storage is related to your users' web history, personal information, or other sensitive data, your add-on should respect private browsing. to read about how to opt into private browsing mode and how to use the sdk to avoid storing user data associated with private
windows, refer to the documentation for the private-browsing module. globals properties storage a persistent object private to your add-on. properties with array, boolean, number, object, null, and string values will be persisted. quotausage a number in the range [0, infinity) that indicates the percentage of quota occupied by storage. a value in the range [0, 1] indicates that the storage is with...
system - Archive of obsolete content
e full list of "special" directories and their ids, see "getting_files in special directories". for example: // get firefox profile path var profilepath = require('sdk/system').pathfor('profd'); // get os temp files directory (/tmp) var temps = require('sdk/system').pathfor('tmpd'); // get os desktop path for an active user (~/desktop on linux // or c:\documents and settings\username\desktop on
windows). var desktoppath = require('sdk/system').pathfor('desk'); parameters id : string the id of the special directory. returns string : the path to the directory. properties env this object provides access to environment variables. you can get the value of an environment variable by accessing the property with that name: var system = require("sdk/system"); console.log(system.env.path); yo...
High-Level APIs - Archive of obsolete content
ned across firefox restarts. system query the add-on's environment and access arguments passed to it. tabs open, manipulate, and access tabs, and receive tab events. timers set one-off and periodic timers. ui provides access to button, toolbar, and sidebar ui objects. url construct, validate, and parse urls. widget create a simple user interface for an add-on in firefox's add-on bar.
windows enumerate and examine open browser
windows, open new
windows, and listen for
window events. ...
content/loader - Archive of obsolete content
any kind of jsonable value (object, array, string, etc.) can be used here. optional. contenturl the url of the content loaded. allow permissions for the content, with the following keys: ...
frame/hidden-frame - Archive of obsolete content
frame. add registers a hidden frame, preparing it to load content. remove unregisters a frame, unloading any content that was loaded in it. the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.content
window.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module. globals constructors hiddenframe(options) creates a hidden frame. parameters options : object required options...
stylesheet/utils - Archive of obsolete content
experimental helper functions for working with stylesheets. globals functions loadsheet(
window, uri, type) synchronously loads a style sheet from uri and adds it to the list of additional style sheets of the document. the sheets added takes effect immediately, and only on the document of the
window given. parameters
window : nsidom
window uri : string, nsiuri} type : string the type of the sheet. it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". removesheet(
window, uri, type) remove the document style sheet at sheeturi from the list of additional style sheets of the document. the removal takes effect immediately. parameters
window : nsidom
window uri : string, nsiuri} type : string the type of the sheet. it accepts ...
jpm - Archive of obsolete content
dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm. installing npm there are two ways to get npm. download and install node.js from nodejs.org. node.js includes npm. or, if you have a package manager like apt, install npm via that. for example, in an ubuntu or debian terminal
window, enter sudo apt-get install nodejs nodejs-legacy npm. to test your installation, run: /usr/bin/env node -v if you get an error message saying /usr/bin/env: node: no such file or directory and you have installed nodejs through a package manager, nodejs may have been installed under a different executable name. to ensure compatibility with jpm, however, it must be present in your path under t...
package.json - Archive of obsolete content
lable when using jpm. a string pointing to a directory containing additional packages. defaults to "packages". permissions an object describing the set of permissions that the add-on needs. private-browsing: a boolean indicating whether or not the add-on supports private browsing. if this value is not true or is omitted, then the add-on will not see any private
windows or objects, such as tabs, that are associated with private
windows. see the documentation for the private-browsing module. cross-domain-content: a list of domains for which content scripts are given cross-domain privileges to access content in iframes or to make xmlhttprequests. see the documentation for enabling cross-domain content scripts. multiprocess: a boolean value declaring whe...
Displaying annotations - Archive of obsolete content
atcher page-mod is initialized with a list of all the annotations that the user has created. when a page is loaded the matcher searches the dom for elements that match annotations. if it finds any it binds functions to that element's mouseenter and mouseleave events to send messages to the main module, asking it to show or hide the annotation. like the selector, the matcher also listens for the
window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up. the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yel...
Overview - Archive of obsolete content
e annotation panel. working with data we'll use the simple-storage module to store annotations. because we are recording potentially sensitive information, we want to prevent the user creating annotations when in private browsing mode. the simplest way to do this is to omit the "private-browsing" key from the add-on's "package.json" file. if we do this, then the add-on won't see any private
windows, and the annotator's widget will not appear in any private
windows. getting started let's get started by creating a directory called "annotator". navigate to it and type cfx init. next, we will implement the widget. ...
Logging - Archive of obsolete content
ing to get access to the console. it is automatically made available to you. the console.log() method prints an informational message: console.log("hello world"); try it out: create a new directory, and navigate to it execute jpm init, accepting all the defaults open "index.js" and add the line above execute jpm run firefox will start, and the following line will appear in the command
window you used to execute jpm run: info: hello world! console in content scripts you can use the console in content scripts as well as in your main add-on code. the following add-on logs the html content of every tab the user loads, by calling console.log() inside a content script: require("sdk/tabs").on("ready", function(tab) { tab.attach({ contentscript: "console.log(document.body.innerhtm...
Modifying the Page Hosted by a Tab - Archive of obsolete content
ile named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. the script is specified using the contentscript option, and just draws a red border around the page. then open any web page in the browser
window, and click the button . you should see a red border appear around the page, like this: keeping content scripts in a separate file in the example above, we've passed in content script as a string. unless script is extremely simple, maintain the script as a separate file in add-on's data directory. this makes the code easier to maintain, debug, and review. to do this, provide option contentscr...
Unit Testing - Archive of obsolete content
cular the section on loading modules from test code. the sdk provides a framework to help create and run unit tests for your code. to demonstrate how it works we'll write some unit tests for a simple base64 encoding module. a simple base64 module in a web page, you can perform base64 encoding and decoding using the btoa() and atob() functions. unfortunately these functions are attached to the
window object: since this object is not available in your main add-on code, atob() and btoa() aren't available either. so we'll create a base64 module to expose these functions from the platform (see creating reusable modules). to begin with, create a new directory, navigate to it, and run jpm init. now create a new file called "base64.js", and give it the following contents: const { atob, btoa } = re...
Tutorials - Archive of obsolete content
user interfaces add a toolbar button attach a button to the firefox add-on toolbar. add a menu item to firefox add items to firefox's main menus. display a popup display a popup dialog implemented with html and javascript. add a context menu item add items to firefox's context menu. 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. listen for page load use the tabs module to get notified when new web pages are loaded, and access their content. get the list of open tabs use the tabs module to iterate through the currently open tabs, and access their content. modify web pages modify web pages based on url create filters for web pages based on their url: whe...
Bookmarks - Archive of obsolete content
firefox 2 and earlier creating a new bookmark var win = mybrowser.content
window; // get the bookmarks service const bmsvc = components.classes["@mozilla.org/browser/bookmarks-service;1"] .getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.document.title, // bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // description win.document.characterset, // charset null, // postdata bookmarksservice.getbookmarkstoolbarfolder(), // bookmark folder ...
Drag & Drop - Archive of obsolete content
dropping files onto an xul application it's possible to setup drag and drop events to handle dropping files from external applications or os file managers onto your xul-based application. first, you need to hook up the basic drag event handlers: elem.addeventlistener("dragover", _dragover, true); elem.addeventlistener("dragdrop", _dragdrop, true); here, elem could be a
window or an xul element. next, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dr...
HTML in XUL for rich tooltips - Archive of obsolete content
our enhanced xul tooltip is an element that is written ahead of time, and it contains an html div element whose type attribute lowers its privileges to being that content element, although it is an element of chrome. this is recommended for security reasons, esp...
Page Loading - Archive of obsolete content
page loading on page load how to execute code each time a new page is loaded in browser/mail progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. post data to
window code to post data to an existing or new
window/tab ...
Rosetta - Archive of obsolete content
})(); now, imagine you need a compiler for scripts written in c (mime type: text/x-c). first, you should declare a function which will translate an input plain-text written in c to an output plain-text written in ecmascript. let us call this function createecmasrc() and let us associate it with the c mime types: rosetta_c.js: a c compiler /* c compiler for rosetta */ (function () { if (!
window.rosetta) { return; } /* this function takes as argument a plain text (in this case, a code written in c) and returns another plain text written in ecmascript */ function createecmasrc (scsrc) { /* this is just an empty example... enjoy in creating your c compiler! */ return "alert(\"here you have the c code to be compiled to ecmascript:\\n\\n\" + " + json.stringify(scsrc) + ");"; }...
xml:base support in old browsers - Archive of obsolete content
in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var loc =
window.location; if (link.indexof('/') === 0 ) { // if link is an absolute url, it should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc...
XPath - Archive of obsolete content
eated //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(
window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(...
Enhanced Extension Installation - Archive of obsolete content
nstalled into unrestricted locations, such as the profile location, to prevent abuse. there is more logging for failures in the installation and update process. the set of error logs written is still neither perfect nor complete, but it's a very good start. log strings are written to the application's error console (in anticipation of that api automatically logging to a file) and to the terminal
window. we now check more effectively for system integrity during startup. we ask each install location if it is functioning (for a directory install location such as app-profile or app-global the location is functioning if it the directory exists. if any location is not functioning, or any of the manifests listed above does not exist, all manifests are removed and the system rebuilds everything from s...
Extension Versioning, Update and Compatibility - Archive of obsolete content
algorithm, it is a common error to delete this prefix, when setting new value to updatehash:sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6 when a hash is specified the downloaded file is compared with the hash and an error shown if it does not match. there are quite a few tools you may use to generate hashes: various unix flavors include sha1sum, sha256sum and so on.
windows users should consider hashtab for interactive (non-build-script) use. 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... simple right-cli...
Jetpack Processes - Archive of obsolete content
nt until all references to it are removed, at which point it is garbage collected. handles have the following native methods and properties: invalidate() invalidates the handle. either process may invalidate a handle when it is no longer useful. createhandle() creates a child handle which becomes invalid when its parent does. this is useful for associating handles to the lifetime of a particular
window, context menu, or other element, and helping ensure that they do not leak. parent the parent handle of the object, if any. read-only. isvalid whether the handle is still valid or not. read-only. isrooted whether the handle is gc rooted or not. read-write. oninvalidate a callback to call when the handle is garbage collected, either through an explicit call to invalidate() or being unrooted and the...
Migrating raw components to add-ons - Archive of obsolete content
ript c-types some add-on authors create binary components not because they want to interact with firefox at the c++ level, but strictly so that they can make use of third party dlls. if this is the only reason you are using a binary component instead of javascript, take a look at the new javascript c-types support introduced in firefox 3.6. it allows javascript code to load functions from dlls on
windows, and should allow you to eliminate your dependence on binary components entirely. this leads to a better compatibility path as new versions of firefox are released. ...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
modifying software would be changing its functionality or adding new functions. duplication: copying a piece of software distribution: passing a piece of software to another person modification: modifying the software a typical software license will grant these permissions in return for a fee, and will still restrict some normally unrestricted uses. the software that microsoft sells, such as
windows, comes with a license that permits only limited duplication in exchange for a fee, so, although customers can install it on their computers, they cannot modify it. and essential freedoms, such as reverse-engineering, are also restricted. this use permit is displayed when you install the software. when the user clicks “i agree,” the installation process finishes. software range of uses ...
Adding menus and submenus - Archive of obsolete content
the two most common ways to add menus. in this section we'll look into more specialized menus and what you can do with them. adding a new menu we already saw how to add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want. you should avoid having deep menus or too many options, since they are confusing for most users. if your extension requires custom xul
windows, you may also need to have menus on those
windows. you can do this with a menubar. the menubar element should be a child of a toolbox element because it is treated like another toolbar on systems other than mac os x. mac os x treats menus in a very different way than other systems. if your extension involves menus in any way, you should test it on mac os x to make sure everything works adequat...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event. // fake a command event var event = document.createevent("events"); event.initevent("command", true, true); document.getelementbyid("mymenu").dispatchevent(event); // fake a mouse click var mouseevent = document.createevent("mouseevents"); event.initmouseevent("click", true, true,
window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getelementbyid("mylabel").dispatchevent(mouseevent); please see the corresponding documentation on how to use and initialize particular event types. alternative: element.click() xul and html elements have a pre-defined .click() method that will fire a synthesized click event. document.getelementbyid("mybutton").click(); alterna...
Introduction - Archive of obsolete content
from firefox versions, and you can see a mapping of firefox versions and gecko versions at the gecko page. the user agent string for firefox at the time of this writing (in us english, mac os x) is: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:25.0.1) gecko/20100101 firefox/25.0.1 the highlighted section is the gecko version: 25.0.1. you can read and copy the user agent string of any firefox
window, choosing "help > troubleshooting information" from the main menu. on to the tutorial with the basic concepts out of the way, we can now get right into extension development. you are probably still wondering what exactly is an extension, what can it do, and how can you make them. well, this whole tutorial is devoted to explaining that to you. welcome to the world of extension development. now ...
User Notifications and Alerts - Archive of obsolete content
lo message"); we pass this as an argument, assuming that this is an object that implements nsiobserver. we do this when we need to handle clicks on the alert box. the image can have any size, but it is recommended that you use a medium, fixed size. the main disadvantage of using alerts is that support for the alerts service is not guaranteed for all platforms and firefox versions. support for
windows has existed since firefox 2. for mac os x, support was added on firefox 3, and only through a third-party tool called growl. on linux systems, we have confirmed that it works on firefox 3 on ubuntu linux, but we haven't tested all distributions and firefox versions. because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show informatio...
Add-ons - Archive of obsolete content
te (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). hotfix extension this document has been moved to the add-ons wiki. how to convert an overlay extension to restartless first off, what kind of add-on are we talking about here? well, xul overlays and
windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own. some of that will have to be replaced and the rest will need to be loaded differently. inline options firefox 7 supports a new syntax for defining extensions' preferences for both bootstrapped and traditional extensions. the user interface for the preferences defined with this ne...
Underscores in class and ID Names - Archive of obsolete content
cification, browser behavior with regard to underscores is rather convoluted. netscape 6.x permits underscores and escaped underscores. navigator 4.x honored the restriction against underscores, and so any class or id name with an underscore will be ignored by navigator 4.x, so the associated styles will never be applied. it also ignored escaped underscores. internet explorer 4.x and 5.x for
windows erroneously allowed underscores, and so were both non-conformant on this point until the errata was published. the same is true of ie4.x and 5.x for macintosh. internet explorer 6 for
windows, published after the errata, permits underscores and escaped underscores. opera 3.x through 5.x does not recognize underscores or escaped underscores, and so acts the same as navigator 4.x in this regard.
Same-origin policy for file: URIs - Archive of obsolete content
r. for example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html. this policy affects anything that does same-origin checks, including xmlhttprequest, xslt, and xbl. for cross-
window dom access, each file is treated as a separate origin, with one exception: if a file is loaded from another file that would otherwise be able to load it following this same-origin policy, they are considered to have the same origin. this load can occur through a subframe, link, location set, call to
window.open(), or the like. for example, if the file /home/user/foo.html is a frameset and one of...
Introduction - Archive of obsolete content
introduction these pages describes how to customize mozilla for multi-user community. in the scenario described described, a bunch of client workstations running
windows access a linux samba server, on which the user's home directories are stored (under drive h:). our goal is to make it possible to automatically generate a mozilla configuration on the server for each user as soon as he is created. moreover, we want to lock certain settings, so that users cannot change them. ...
Locked config settings - Archive of obsolete content
sure that file protections make this file unmodifiable by the unprivileged user. moreover, some settings (such as mail & news configuration) unfortunately seem to be inaccessible to mozilla.cfg, which means that these cannot be locked. if you have trouble getting the moz-byteshift.pl script to work locally, there is also an online version available. note: in recent versions of mozilla (tested on
windows and linux, with 1.5, 1.6 and 1.7b), the mozilla.cfg file needs to be placed in mozilla's root directory, rather than default\pref where all.js resides. if you suspect syntax errors in your config file, you can display the exact error message by enclosing your code in a try-catch block: try { ... } catch(e) { displayerror("test", e); } clear text configuration if you don't care about enco...
Protecting Mozilla's registry.dat file - Archive of obsolete content
protecting mozilla's registry.dat file from
windows and internet explorer the easyest way to put into place the registry.dat file for a user would theoretically be to put it into the user's profile directory on the server. however, this issue is problematic, because: when the users logs in for the first time,
windows 2000 apparently doesn't load the profile from the server... in other
windows versions, internet explorer (which is hard to kick off completely) likes to install "personnalized settings" when the user logs in for the first time, and this seems to have the interesting "side-effect" of wiping any non-microsoft subfolders from %userprofile%\application data, including mozilla's . in order to prevent this, it's preferable to have mozilla's registry.dat file copied over from the...
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
the handler receives the assert string, and sequentially attempts to match each word in the string (left to right) to registry dword names from hklm\software\mozilla.org\windbgdlg and hkcu\software\mozilla.org\windbgdlg. at the first match, it will take the action specified by the dword's value. the valid values are: 0x5 automatically ignore 0x4 automatically retry 0x3 automatically abort note that you can also force windbgdlg to prompt, by setting a value of 0xfffffffe. to "comment out" a value, set its value to 0xffffffff. ...
Enabling the behavior - updating the status periodically - Archive of obsolete content
now that we have code to retrieve tinderbox status and update the icon, we need to run it periodically. 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. we use it inside the loadtinderboxstatus function to make that function run a second (1,000 milliseconds) after startup and a minute (60,000 milliseconds) after each invocation. this allows users to get relatively frequent updates about tinderbox without overloading the tinderbox server or slow...
Finding the code to modify - Archive of obsolete content
dom inspector now that we've found the file to edit, we need to find the specific code within that file. again, the dom inspector makes this easy. the "document - dom nodes" pane on the left-hand side of the inspector
window displays a tree representation of the browser
window's xul file. when you select a node in the tree, a red border flashes for several seconds around the visual representation of that node in the browser
window. scroll down the tree to the statusbar node and select it. notice the flashing red border around the horizontal status bar at the bottom of the browser
window. click the plus sign next to the statusbar node in the dom inspector and select each statusbarpanel node in turn. notice the flashing red border around each different section of the status bar. open t...
Making it into a static overlay - Archive of obsolete content
ul file is rendered into an application interface. static overlays are added to a xul file via a reference at the top of the file (much like stylesheets and javascript scripts). dynamic overlays are added to a xul file via a reference in the chrome registry. overlays provide a way to break up a large xul file into several different files (one that describes the overall structure of an application
window and the others to implement specific portions of the
window) to improve code readability, maintainability, and extensability. dynamic overlays also make it possible to modify a xul file without actually changing the code of the file itself, which is necessary when installing an extension like ours. we'll first make the file into a static overlay, then we'll make it into a dynamic overlay. to make...
Creating a hybrid CD - Archive of obsolete content
cdrecord -v speed=2 dev=0,6,0 ~/party.iso its also handy to be able to mount an image file to test it. mount ~/party.iso /mnt/cdrom -t iso9660 -o loop=/dev/loop3,blocksize=1024 umount /mnt/cdrom here is the hfs mapping that i used. the creator "moss" is for netscape 4.x and "mozz" is used for mozilla. it is used as the creator type for readme and other text files because it can handle unix and
windows linebreaks, but teachtext cannot. # example filename mapping file used by mkhybrid for hfs # # extn xlate creator type comment .hqx ascii 'sitx' 'text' "binhex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw ...
FAQ - Archive of obsolete content
in future builds? unfortunately, yes. every time there is a major change made to the interface, either visible or behind the scenes, your skin will have problems. when the mozilla developers make changes like this, they increase the skin version number. this is the number that is defined in contents.rdf. test your skin with every major release of mozilla. if a message appears in the preferences
window telling you that it's an old skin, you're going to have to look over the code to see what changed. developers try to keep changes like this to a minimum, but sometimes it just can't be helped. what is an access key? an access key is a keyboard shortcut to access something. in the case of skins the access key that you are defining is accessible by going to edit->preferences, appearance->themes,...
Getting Started - Archive of obsolete content
dified will change throughout mozilla. if you want to modify how checkboxes, radio buttons, and scrollbars appear, this is the place. the next directory is the \communicator directory. this is a catchall directory which holds all of the images and styles for portions of mozilla that don't merit their own individual directory. you'll be able to change the bookmark manager and the profile migration
window here. the three remaining directories are pretty self-explanatory. they contain the images/styles for the browser, email client, or html editor. css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. for this next part, let's modify the standard button. go into \m...
Download Manager improvements in Firefox 3 - Archive of obsolete content
nload manager preferences this article lists preferences used by the download manager as well as their default values. the download manager schema this article describes the database format used to store and track information about each download. examples monitoring downloads an example showing how to use the new download manager apis to create a download log
window that shows all past and present downloads and their status, including the start and end times of the downloads, the download speed, and more. also demonstrates the storage api. ...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
ble from the event object's target property. the event object is passed as the first argument to ondragstart. we create a transferdata object which can be used to hold all the data to be dragged. we add two pieces of data to the transfer data. the first is a string of html text and the second is a string of plain text. if the user drops onto an area which can accept html (such as mozilla's editor
window), the html flavour will be used and the text will appear bold. otherwise, the plain text version will be used instead. usually you will want to provide a text version of the data so that more applications can accept the data. the order that you define the flavours should be from the best match to the weakest match. in this case above, the html flavour (text/html) comes first and then the text fla...
Drag and Drop - Archive of obsolete content
pis are officially deprecated the newer, simpler, portable api should be used in their place. this section describes how to implement objects that can be dragged around and dropped onto other objects. the drag and drop interface many user interfaces allow one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another
window to open the document it refers to. mozilla and xul provide a number of events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user releases the mouse. event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla implements draggin...
Error Console - Archive of obsolete content
very rarely. manipulating data displayed in error console information displayed in error console can be accessed and manipulated through the console service. extensions can write to the error console from javascript using components.utils.reporterror, or if you're fine with logging to the os-provided console, dump(). to bring up error console from within a browser or mail
window, use the function tojavascriptconsole(). alternatives console2 this extension provides a replacement for error console, fixing many of its bugs and implementing long-wanted enhancement requests. firebug the extension for firefox also integrates the error console with various improvements. related topics javascript, css web developmen...
Documentation for BiDi Mozilla - Archive of obsolete content
traversal.cpp) provides visual frame navigation capability. details of rendering are dependent on user preferences and system capabilities. where the system is capable of tasks such as reversing and shaping text, symmetric swapping, numeric translation, etc., no special text rendering is needed, though there may be a call to a native api to set the base text direction (for example settextalign on
windows). for systems without bidi capabilities, the methods in nsiubidiutils are used. note that we are not affected by buggy bidi implementations on specific platforms, since the platform never sees a text fragment with mixed directionality, and is not expected to do anything more complicated than displaying left-to-right text from left to right or right-to-left text from right to left. in some circu...
GRE Registration - Archive of obsolete content
successfully embedding the gre requires that information about installed gres be stored on the system. this information is stored differently on each operating system. this document describes the registration mechanism.
windows on
windows, gre registration information is kept in the win32 registry under the hkey_local_machine/software/mozilla.org/gre and hkey_current_user/software/mozilla.org/gre keys. each subkey is searched for gre registration information: hklm/software/mozilla.org/gre/1.8_1 version=1.8 grehome=c:\path\to\installed-dir feature=value feature2=value2 hklm/software/mozilla.org/gre/1.8_2 version=1.8 grehome=c:\path\to\second-installation when installing a gre via the mozilla suite gre installer, the installer will blindly overwrite any previous gre info...
Java in Firefox Extensions - Archive of obsolete content
vascript code linked from or contained in xul files. if you wish to call java code from within javascript code that implements some xpcom components, at this time, you need a different technique (refer to the complete java firefox extension). a good reason for calling java from within an xpcom component rather than from xul is to maintain a singleton (some singular java object) across all firefox
windows. if you call java from xul, then each firefox
window will have its own class loader and hence its own "singleton". the following approach is taken from the extension xquseme (note you must use the latest version, currently still in the sandbox, as prior versions only worked with liveconnect before java 6 update 11) which borrows some of the code of the java firefox extension in order to grant f...
Basics - Archive of obsolete content
on message.string bodythe messagestringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox
window. the namespace for this class is jetpack.tabs. 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 ...
Jetpack Snippets - Archive of obsolete content
</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(
window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }}); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global fu...
slideBar - Archive of obsolete content
about status: in development instantiation: jetpack.future.import('slidebar') last update: v0.6 summary: slidebar is a reinvention of the old sidebar feature of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser
window. when a slidebar feature is selected, its contents will be revealed from behind the current web page. creating a slidebar and adding options to implement a new slidebar within your jetpack code, use the method jetpack.slidebar.append(options) ...
slideBar - Archive of obsolete content
his page documents the jetpack prototype, which is no longer under active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! slidebar is a reinvention of the old sidebar features of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser
window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. iconhref ...
UI - Archive of obsolete content
a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content
window mitigates and eases interactions between different browser
windows ...
Mac OS X Build Prerequisites/fink - Archive of obsolete content
cports. it doesn't seem to be as well maintained (in terms of available packages) as macports, so it is strongly suggested that you use macports instead of fink. you may download the most recent version of fink that is compatible with your operating system release. fink installs in /sw by default. the installer should configure the fink environment for you, making it available in any new terminal
window. if you perform a major operating system upgrade on your computer, such as an upgrade from tiger to leopard, you should remove the /sw directory and re-install fink and the packages below. libidl, glib using fink. libidl is included in the orbit installation. $ sudo apt-get update $ sudo apt-get install orbit orbit-dev glib autoconf-2.13 using fink. autoconf is installed at /sw/bin/autoconf. d...
Metro browser chrome tests - Archive of obsolete content
the metro browser chrome test suite is an automated testing framework designed to allow testing of the immersive version of firefox for
windows 8 and above using javascript. it currently allows you to run javascript code in the same scope as the immersive browser and report results using the same functions as the mochitest test framework. running the metro browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest-metro this will launch metro browser chrome tests in the default immersive browser. for information on setting your local build as the default, visit the
windows 8 integration wiki page. it is possible to run individual tests as well. as with mochitest, the path given as an argument is the path to a test file within the mozilla sourc...
Microsummary topics - Archive of obsolete content
ute must be a valid uri, but you can specify an arbitrary identifier using a urn, for example: urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16} to guarantee uniqueness, use urns containing uuids generated by the nsuuidgenerator component. see generating a uuid in the nsiuuidgenerator documentation. you may also use another form appropriate to your extension. note: when web sites install generators via
window.sidebar.addmicrosummarygenerator(), firefox sets their uri attribute to urn:source:sourceurl, where sourceurl is the url from which the generator was downloaded. in the future, firefox may access source urls to download updated versions of generators, so unless you are installing generators which are available from urls, you should not use this form for your programmatically-installed generators.
Mozilla Application Framework - Archive of obsolete content
with other libraries. dozens of existing applications from both large and small development teams. did you know? the mozilla app framework can be used to build standalone desktop applications like komodo, apps that run on top of the mozilla application suite like mozblog, and web applications like the mozilla amazon browser. 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. you can build simple but powerful mozilla-based applications using just javascript and xul. original document information author(s): myk melez last updated date: march 3, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content availab...
Mozilla Crypto FAQ - Archive of obsolete content
ber 2000. nss 3.1 will be used in the 1.3 release of psm, which will provide a complete open source implementation of ssl for mozilla. psm 1.3 will also provide support for mozilla users to obtain personal digital certificates and perform other pki-related functions. note that due to various implementation issues, psm support for mozilla on the macintosh is lagging somewhat behind psm support on
windows, linux, and other platforms. also note that the nss developers are creating code for support of s/mime secure messages; however full s/mime support within mozilla will require further development, and may not be available until after the mozilla 1.0 release. finally, note that nss (and thus psm) can also be built using a licensed copy of the rsa bsafe crypto-c library (versions 4.1 or 5.0). ipl...
Overview of how downloads work - Archive of obsolete content
ay is to encounter a file with an unknown content type, the other is to choose "save link target as" from the context menu of a link. things like file|save page as, save image as, etc. are all part of the second codepath. this document describes both codepaths (see below for the second one). click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser
window. downloads via the helper app service this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads.dia downloads via "save link target as" and friends this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads_path2.dia original document information author: christian biesinger ...
BlogPosts - Archive of obsolete content
m - webrunner with pazzaz mozilla prism - a revolution in web apps thanscorner: mozilla webrunner 0.7 site specific browsers webrunner using webrunner webrunner + gears = offline desktop reader webrunner 0.5 webrunner 0.5 - mac support webrunner 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-
window, tabless browser with no url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific browsers mozilla prism portable (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundle custom google reader + talk (french) just browsing: site-specific brow...
Bundles - Archive of obsolete content
zipped bundle package to install a webapp. 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. this folder is located in the application data folder of the user's home directory on
windows, in the ~/.webapps directory on linux and under ~/library on os x. since this folder maybe be located in a directory that requires elevated privileges, the web application should not write data to it. the application profile directory can be used instead for this purpose. note: the webapp must have an id in order to be installed. when prism is launched with a "-webapp [bundle]" command line, the...
Extensions - Archive of obsolete content
ion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:targetapplication> in addition to the install manifest changes, you may want to expose your extension into the prism ui. prism does have a few ui elements, such as a toolbox, toolbar, menubar, popup menus, statusbar and a container for the browser. you can use these ui elements to merge in your extension ui. see the prism main
window xul file for the actual structure: webrunner.xulporting an existing extension since there aren't many extensions designed explicitly for prism, you may need to port your favorite extensions. this usually means extracting and editing the install.rdf file to add prism as a target application. you may also need to modify the extension's overlay to be able to work with the prism ui. many archive tool...
Installer - Archive of obsolete content
the installer should configure the os to associate *.webapp files with prism. this means that when you double-click or launch a *.webapp file, prism is launched and automatically opens the web application. current
windows and mac installs automatically associate *.webapp with prism. one interesting side effect is that after this change, you can select a link to a .webapp file in a web page and you get it run by prism - in ie this runs anywhere, but this won't work in firefox unless the webapp is being issued with an appropriate mime type on the server: application/x-webapp works (see an example ). ...
Styling - Archive of obsolete content
web application, regardless of the platform or os. it is also possible to create platform-specific styles. in this scenario, the css file is specific to an os. this allows prism webapps to take on an os-specific look. to use platform-specific styles, create a folder in the bundle archive for each supported os and place a webapp.css file in the folder. the folder names must match the following:
windows - winnt mac os x - darwin linux - linux the folder names are pulled from mozilla and are the same as those used in other mozilla projects, such as extension and xul applications. note: you can also include a root level webapp.css which will be used if a platform-specific version is not found. ...
Prism - Archive of obsolete content
lications. one way to make the illusion seem more real is to use styling (or theming). prism supports a simple styling system that allows the user to add css files to the webapp bundle. scripting prism allows for some client-side web application customization. some simple objects and utilities are exposed to webapp scripts. host
window prism provides a simple, scaled down browser
window for running web applications. using configuration files and webapp scripting, the host
window can be modified. installer installing prism. view all... community blog posts prism forum #prism on irc.mo...
Priority Content - Archive of obsolete content
cko compatibility handbook wiki location: gecko compatibility handbook migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated. they are dependant on some code that cannot be integrated in the page. dependant on: updating dhtml web pages for next generation browsers on devedge the tune-up wizard (see below, in the wishlist section) mostly completed: popup
window controls devedge article migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated. they are dependant on some style instructions that can only be placed in the header of the page. started: scripting plugins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these pa...
New Skin Notes - Archive of obsolete content
n the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86. a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles. that our screen resolutions are now wider than 800 pixels width does not mean that we always want to enlarge the
window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will most likely require fonts settings changes as well). but it should work by default with 800 pixels width, imo. --mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'base' font-size to anything other than 100%, let the user ...
Proxy UI - Archive of obsolete content
products firefox menu: preferences > advanced tab > networking tab > connection button. thunderbird menu: preferences > advanced tab > networking tab > connection button. seamonkey menu: preferences > advanced group > proxies panel menu: right-click on offline-online button (on browser
windows). camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "related" ui. the "ok" button saves the preferences. the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui wh...
Remote debugging - Archive of obsolete content
c unlimited", run firefox from the command line, and make firefox crash. when firefox crashes, a core will be placed in /cores. you can then load the core file into gdb (gdb firefox-bin corefile), and it will be as if you caught the crash while running firefox under gdb! when transferring a mac or linux core dump, you'll also have to transfer the firefox executable (and maybe more). core dumps on
windows on
windows you can produce a "minidump". see here for instructions on how to do so with microsoft's free debugger, windbg. debugging over bugzilla explain in the bug that you have a core file or can reproduce the crash as many times as needed. the developer can give you appropriate commands to type into the debugger. examples: 367650, 374356, 393325, 418139 debugging over irc find the developer ...
SpiderMonkey coding conventions - Archive of obsolete content
ate data do use a js_ prefix). scalar type names are lowercase and js-prefixed: jsdouble. aggregate type names are js-prefixed and mixed-case: jsobject. macros are generally all_caps and underscored, to call out potential side effects, multiple uses of a formal argument, etc. linkage dll entry points have their return type expanded within a js_public_api() macro call, to get the right
windows secret type qualifiers in the right places for all build variants. dll entry points that are not public apis use js_friend_api() instead. ...
File object - Archive of obsolete content
s either begin or end with the pipe (|) symbol. description filenames are specified as strings that have an implementation defined format. use of standard "file:" urls is encouraged. if no argument is supplied to the constructor, the current working directory is the file object that is returned. examples of possible prefix strings are "/" to indicate the unix root directory, "c:" to specify a
windows drive letter, and "file:" to indicate a file url. when a file is constructed, leading and trailing spaces are removed from the filename, so new file(" abc.txt ") just creates a file called abc.txt. filenames starting and ending with the pipe symbol (|) are interpreted as pipes. readable pipelines (i.e. pipe to programs generating output on stdout) begin with the pipe symbol; writeable pipe...
Standalone XPCOM - Archive of obsolete content
pcom. the contents of this standalone xpcom in general are: nspr : mozilla/nsprpub xpcom : mozilla/xpcom note 1: xpcom apis are not frozen yet. by xpcom 1.0 release they will be. note 2: xpcom standalone differs from the xpcom built with mozilla. hence cannot be used with the mozilla browser. building standalone xpcom here are the instructions for building the standalone xpcom on unix or
windows: step 1 : pull the sources cvs -z 3 co mozilla/client.mk cd mozilla gmake -f client.mk pull_all build_modules=xpcom step 2 : build xpcom standalone ./configure --enable-standalone-modules=xpcom --enable-application=standalone gmake testing standalone xpcom xpcom/sample contains a sample application and a component. this should get built by default. nstestsample is the sample ap...
Stress testing - Archive of obsolete content
although for win2003, it should install into winxp fine (win2000 compatibility is unknown). the only downside is you can't specify how much of the resource to use, only which one to consume. ...
Tamarin mercurial commit hook - Archive of obsolete content
it is highly recommended that all developers enable the mercurial commit hook for tamarin. the hook is located in the tamarin-redux repository in the file utils/hooks/tamarin-commit-hook.py this is a simple mercurial hook that checks the following filetypes ('.cpp', '.h', '.as', '.abs', '.py') for the following: tabs anywhere in the line trailing whitespace
windows line endings (\r\n) "mark_security_change" - looks for this text and warns user as security changes should not be checked into the public tamarin-redux repository. installing the commit hook the easiest way to implement the hook is to sync to the tip of tamarin-redux then add the following to your tamarin-redux/.hg/hgrc file (or to ~/.hgrc to implement for all local repos): [hooks] pretxncommit.commit = python:/path/to/tam...
The life of an HTML HTTP request - Archive of obsolete content
w how to draw itself on the screen. when the presshell [note: not true, who really does the call?] has layouted (reflowed) the frames it calls nsiframe::paint() method of all frames. these get passed references to the presentation context and a rendering context to do the drawing on. the rendering context implementation is a native class (nsgtkrenderingcontext on unix) that knows how to draw in a
window. todo: views, viewmanager, eventstatemanager? diagram created with dia. original document information author(s): alexander larsson last updated date: october 8, 1999 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
Tuning Pageload - Archive of obsolete content
rser every content.max.tokenizing.time microseconds. in mode b we interrupt the parser every 3000 microseconds. every content.switch.threshold microseconds, we decide whether we should be in mode a or mode b. the decision is based on whether there were any user events on the relevant widget in the last content.switch.threshold microseconds. as in, if the user is moving the mouse or typing in that
window, we'll be more responsive; if there is no user activity, we will aim for less parser interruption and less responsiveness but lower overall load time. content.notify.* controls the information flow from content sink to rendering model. in particular, the way things work right now is that the parser and content sink construct the dom; then every so often, the content sink lets the rendering mo...
URIScheme - Archive of obsolete content
moz-icon://.ext?size=32 : you can replace ext by your some file extension like js, css, xul, xml, etc. and the size number by 1 to 127 mailto:emailaddress@domain.com about: chrome:// ... ...
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
this is a cautionary note that may be old information for some of you. however, since it affects the portability of code, it was deemed prudent to include a short memo describing the issue. problem statement win-16 (aka,
windows 3.1, et al), is unique in that the architecture depends on the operating environment (i.e.,
windows) knows the address of the stack, and that there is only one such address. consequently, implementing threads, with their implication of a unique stack for each thread, requires that the nspr copy the stacks during thread context switches. the actual copying of the stack is not such a hardship as one would imagine. with the speed of today's processors (even those running win-16), the copying of 10 - 50 kilobytes of data between two locations in memory is barely m...
Using Breakpoints in Venkman - Archive of obsolete content
ging a script or software program is the ability to examine variables—function return values, errors, counters, variable scopes—as they change over the course of the script execution. the onflipx function in figure 1, for example, uses the variable newsign to figure out what image to use for the fish. when you set a breakpoint at line 81, you can start animation on the web page in the browser
window and see venkman stop execution as it enters the onflipx function. stopped there, venkman displays the value of the newsign variable as "1" in the local variables view. using breakpoints and the interactive view, you can change the values of the variables that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code. fo...
Venkman - Archive of obsolete content
latform. venkman is named after the character dr. peter venkman, played by bill murray in the movies ghostbusters and ghostbusters ii. getting venkman firefox and thunderbird the latest version of javascript debugger is available from firefox add-ons. mozilla suite and seamonkey these releases come with venkman pre-installed. on
windows, it is an install option; choose advanced install. also available from firefox add-ons as an extension. nvu and kompozer javascript debugger extension version 0.9.84 is available from nvu's downloads page. we encourage you to use the latest available version 0.9.87.1 (or higher) with firefox instead. source code the source code for venkman may be f...
Elements - Archive of obsolete content
modifiers is not empty and the modifier is not present in the list, then the modifier key must not be set in the dom event object in order for the handler to be matched. supported modifiers are: shift alt control meta accel - the platform's primary accelerator key. it is left up to the user agent to decide which modifier key represents the primary key. (it's the control key on
windows and meta on mac.) accesskey - the platform's primary shortcut mnemonic key should be used (the alt key on
windows and linux, has no effect on mac). any - this causes the filter to ignore the state of any modifiers that occur before the any keword. for example: key="x" modifiers="control shift any" - the handler will match whether or not the control and/or shift keys are pressed.
Mac stub installer - Archive of obsolete content
an xpi for your module with a dummy install.js. if it finds your module's jst file it will substitute that for the install.js. and finally it will do the copying of files from dist per the directives in packages-mac if your module's section has some file entries. unfortunately, at the time of this writing there is no convenient way to test an installer build like there is on unix (deliver.pl) and
windows (build.pl). original document information author(s): samir gehani other contributors: curt patrick last updated date: march 12, 2003 copyright information: copyright (c) samir gehani, curt patrick ...
Install script template - Archive of obsolete content
/** doron rosenberg -- doronatnospamallowedherenetscape.com arun k. ranganathan -- aruneratnospamallowedherenetscape.com petter ericson -- petteratnospamallowedherecycore.com this is an install.js file that does the following -- 1. installs to the current browser that is invoking the installation 2. additionally installs to a secondary location on the
windows desktop, in this case c:\winnt\system32\myplugin\ 3. writes registry keys exposing the above secondary install location for other browsers to find. the keys are written according to the specification: http://mozilla.org/projects/plugins/first-install-problem.html and follows the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.html **/ // define some global variables var plugin_file = "...
Methods - Archive of obsolete content
returns a boolean value indicating whether an object is a file. moddate returns a number representing the last modified date of the given file. moddatechanged specifies whether the last modification on a file is older than a specified date move moves a file from one location to another. remove removes a file. rename renames a file in place. size returns the size of the file in bytes.
windowsshortcut creates a
windows shortcut for a file. macalias creates a macintosh alias for a file.
windowsgetshortname returns the
windows shortname of the path.
windowsregisterserver registers dlls with the registry. ...
addFile - Archive of obsolete content
l location, call the performinstall method after you've successfully added all files. note: if you are installing binary files on a macintosh, be aware that the binary format for those files must be applesingle if the resource information is to be installed properly. some file transfer programs will convert apple binaries to this format on transfer if you transfer them from a macintosh to a unix/
windows machine before zipping up those files on that target system. example var xpisrc = "file.txt"; initinstall("adding a file", "addfile", "1.0.1.7", 1); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
getFolder - Archive of obsolete content
ie documents" "macosx music documents" "macosx picture documents" "macosx user applications" "macosx user desktop" "macosx user documents" "macosx user frameworks" "macosx user internet plugin" "macosx user preferences" "unix lib" "unix local" "
windows" "win appdata" "win common files" "win desktop" "win desktop common" "win program files" "win programs" "win programs common" "win startmenu" "win startmenu common" "win startup" "win startup common" "win system" the "file:///" form is only valid w...
Methods - Archive of obsolete content
bout the operating environment. (mac os only) getcomponentfolder returns an object representing the directory in which a component is installed. getfolder returns an object representing a directory, for use with the addfile method. getlasterror returns the most recent non-zero error code. getwinprofile constructs an object for working with a
windows .ini file. getwinregistry constructs an object for working with the
windows registry. initinstall initializes installation for the given software and version. loadresources returns an object whose properties are localized strings loaded from the specified property file. logcomment add a comment line to the install log. patch a...
Properties - Archive of obsolete content
nt versions of gecko with different feature sets might be built on the same day), using this property to "detect" the application version may produce false results. additionally, the build id can be 0 for custom builds. jarfile alias for archive platform contains information about the platform xpinstall was compiled for/runs on. for example, the value could begin with "
windows", "macintosh" or "x11" (for unix/linux). for more details, see the corresponding code living in the getinstallplatform method of class nsinstall. url the fully qualified url of the xpi (file url, http url, ftp url, etc.) (e.g. http://dolfin/sgehani/zzz/ip.xpi). note, even if triggered using relative urls this will show the full url (after qualification). ...
Install Object - Archive of obsolete content
d packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. install use the install object to manage the downloading and installation of software with the xpi installation manager. overview the install object is used primarily in installation scripts. in all cases, the install object is implicit--like the
window object in regular web page scripts--and needn't be prefixed to the object methods. the following two lines, for example, are equivalent: f = getfolder("program"); f = install.getfolder("program"); an installation script is composed of calls to the install object, and generally takes the following form: initialize the installation call initinstall with the name of the installation...
Return Codes - Archive of obsolete content
re defined as part of the xpinstall object (formerly the softwareupdate object in netscape communicator 4.5). name code explanation success 0 success. reboot_needed 999 the files were installed, but one or more components were in use. restart the computer and the application to complete the installation process. on
windows nt, you may only need to restart the application as long as you did not replace operating system files. bad_package_name -200 a problem occurred with the package name supplied to initinstall unexpected_error -201 an unrecognized error occurred. access_denied -202 the user (or the os) did not grant the required se...
createKey - Archive of obsolete content
ry. method of winreg object syntax int createkey ( string subkey, string classname); parameters the method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail". classname usually an empty string. for information on this parameter, see the description of regcreatekeyex in your
windows api documentation. returns 0 if it succeeded; a nonzero number if it failed to schedule the creation. for a list of possible values, see return codes. description the createkey method adds a key to the registry. you must add a key to the registry before you can add a value for that key. ...
setRootKey - Archive of obsolete content
ters the method has the following parameter: key an integer representing a root key in the registry. returns nothing. description the setrootkey changes the root key. when you create a winreg object, it is set to access keys under the hkey_classes_root portion of the registry. if you want to access keys in another portion, you must use this method to change the root key. on 16-bit
windows platforms, hkey_classes_root is the only valid value and this method does nothing. these root keys are represented as fields of the winreg object. the values you can use are: hkey_classes_root hkey_current_user hkey_local_machine hkey_users example to use the hkey_users section, use these statements: winreg = getwinregistry(); winreg.setrootkey(winreg.hkey_users); ...
accesskey - Archive of obsolete content
used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. on non-macintosh platforms, the character on the element's label matching the accesskey is underlined. for example, when a menu labeled 'file' has an accesskey of 'f', the generated label will be 'file'. when the user presses a modifier key specific to the platform (eg, control* on
windows, command* on macintosh) and the access key, the element will be focused and/or activated from anywhere in the
window. on the macintosh, labels are never underlined, however accesskeys can still be used by pressing the letter combined with the command key. *(these are the keys corresponding to event.ctrlkey and event.metakey respectively when listening to key events) although the value is cas...
activetitlebarcolor - Archive of obsolete content
« xul reference home activetitlebarcolor type: color string specify background color of the
window's titlebar when it is active (foreground). moreover this hides separator between titlebar and
window contents. this only affects mac os x. ...
Attribute (XUL) - Archive of obsolete content
ode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width
windowtype wrap wraparound ...
command - Archive of obsolete content
property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not cancelable read only boolean whether the event is cancellable or not? view read only
windowproxy document.defaultview (
window of the document) detail read only long (float) unused; always zero. sourceevent read only event the activation event that caused this command event to be generated. currently only set when a command event is redirected though use of the command attribute. ctrlkey read only boolean true if the control key was down...
Accessing Files - Archive of obsolete content
op directory. usually, you would use this as the default directory for saving files. components the components directory where xpcom components are installed. temp the temporary directory. you would store any temporary or cache files here. there are a number of other values that may be used, most of which are platform specific. for instance, on
windows, the value 'strt' returns the start directory, where applications which run when the system starts up are placed. on other platforms, using this value will just result in an error. ...
Menus - Archive of obsolete content
. firefox context menu element id description relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area. spell-no-suggestions the no spelling suggestions item - notable as it is the first item on the context menu. ...
getEditor - Archive of obsolete content
« xul reference home geteditor(
window ) return type: nsieditor returns the editing interface for the editor which contains numerous methods for manipulating the document. pass the editor's content
window as the argument. ...
getHTMLEditor - Archive of obsolete content
« xul reference home gethtmleditor(
window ) return type: nsihtmleditor returns the html editing interface for the editor which contains methods for manipulating an html document. pass the editor's content
window as the argument. ...
openSubDialog - Archive of obsolete content
« xul reference home opensubdialog( url, features, params ) return type:
window opens a child modal dialog. usually this method would be used to allow the user to configure advanced options. the arguments are similar to the
window's opendialog method except that the
window name does not need to be supplied. the url should be a xul file. if the child dialog is also a pref
window, set its type attribute to child so that preferences will be saved properly when the main dialog is closed. ...
removeTab - Archive of obsolete content
« xul reference home removetab( tabelement ) return type: no return value removes a specific tabbed page corresponding to the given tab element. if only one tab is displayed, this method does nothing (unless the preference browser.tabs.close
windowwithlasttab is true, in which case the
window containing the tab is closed). if browser.tabs.autohide is true, the row of tabs will collapse if only one tab remains. ...
Namespaces - Archive of obsolete content
ar:textbox favorite-food="pancakes"/> </foobar:some-element> notice i've mixed two <textboxes/> in the same document. the only way to distinguish that they have different meanings is with namespaces. there's only one other thing to know: "default namespace". every xml element has a "default namespace", and this is used with xul elements all the time. in xul documents, you'll usually see this: <
window id="foo" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ... ... </
window> and in xhtml documents, you'll see this: <html xmlns="http://www.w3.org/1999/xhtml"> ... ... </html> there is a very subtle difference here than before. before i wrote xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" but here the :xul piece is omitt...
Extensions - Archive of obsolete content
rder, you should not rely on any menuitems being in particular positions in the presence of other extensions. modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or focused. 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. an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected. in firefox, the browser area that displays web pages has only one context menu. instead of having separate context menus depending on what type of element was the target of the context menu, only one context menu is...
Floating Panels - Archive of obsolete content
, the popup will not close when the user clicks outside of it, nor when the user presses the escape key. the titlebar attribute creates a panel with a titlebar. currently, only the value normal is supported, which creates a default titlebar. in the future, a distinction will be available to support titlebars of differing styles. the floating panel can be placed and moved independently of the main
window, however it will always appear above the main
window. on mac, floating panels are invisible when another application is made active, and become visible again when the xul application is made active. a floating panel may contain any type of element. a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal"...
MenuItems - Archive of obsolete content
er key varies on each platform, but is the key typically used for shortcut keys. for instance, if the "accel" key is control, the menu might display "ctrl + o". although there isn't usually a need to do so, you can also set a custom label for the keyboard shortcut on the menu using the acceltext attribute. you might do this if the key associated with the item changes, for instance a list of open
windows displayed on a
window menu. <menuitem label="first
window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well. adding icons to menu items an icon may be added to a menu item using the image attribute. the icon will appear to the left of the menuitem label. in addition to the image, a special class "menuitem-iconic" mus...
PopupEvents - Archive of obsolete content
selected menuitem and the operation already carried out. this is one special case in which the popuphiding event is fired after the popup has been removed from the screen. the reason for this is if, as is quite common, the menu item's action is to open a modal dialog. here, the menu would need to be removed first, before the dialog can be opened. otherwise, the user would have a menu for a parent
window that is no longer active. so instead, the popup is removed first. note that this means that the popuphiding event doesn't fire until after the modal dialog has been closed. there are situations when the popuphiding event will not fire when a menu is closed so you should make sure not to call any necessary code there. a better way is to just reinitialize the menu or popup in the popupshowing event...
treeBoxObject - Archive of obsolete content
« xul reference treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the
window. this object implements the nsitreeboxobject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree. this property is equivalent to the boxobject property. ...
Property - Archive of obsolete content
ers 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 content
window contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautosel...
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. otherwise, this option will be ignored for this toolbar and it will always be visible. ...
Building Menus With Templates - Archive of obsolete content
g 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. note that the generated content does not get removed again when the menu is closed again; this extra feature of menus is only intended to be a performance enhancement to speed up the time it takes to display a
window by avoiding extra generation that can be put off until later. you might be wondering why we couldn't just put the datasources attribute on the menupopup instead and not have a menupopup inside the action body. you can actually do this, however, you no longer receive the performance benefit as the entire content will be generated right away. the special feature of menus to not generate content imm...
Introduction - Archive of obsolete content
r's browser bookmarks and use your own datasource to add custom data about those bookmarks. <vbox datasources="rdf:bookmarks http://www.xulplanet.com/ds/sample.rdf"> in addition, when using the rdf type for chrome xul (such as in extensions), the datasource rdf:local-store is always included in the composite. 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. you can query for any data in the local store in a template though this is rarely done. sometimes, you will want to specify the datasource to be used later, possibly determined dynamically by a script. the special uri rdf:null is used to indicate that you intend no datasources, or an empty datasource. this special uri will...
Simple Example - Archive of obsolete content
atches total have been found. the action body might look like the following, which displays the image using its url and title in a label. you might note that the image's src attribute uses the member variable ?photo <action> <vbox uri="?photo" align="start"> <image src="?photo"/> <label value="?title"/> </vbox> </action> it shouldn't be too difficult to tell what would appear in the
window in this example. you can see if you guessed correctly by viewing the example. « previousnext » ...
Template Builder Interface - Archive of obsolete content
interface, while the tree builder also implements the nsixultreebuilder interface. the builder associated with an element is accessible via the element's 'builder' property both for content builders and for tree builders. an element that does not have a builder will have this property set to null. the processes of creating a builder for an element applies both when an element is created when the
window is loaded and when an element is inserted dynamically. templates can only be used in xul documents, however, there is no requirement that the templates generate xul elements. they could also be used, for example, to generate html elements. this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos5.rdf" ...
Template and Tree Listeners - Archive of obsolete content
ar idx = builder.getindexofresource(this.item) if (idx != -1) builder.root.view.selection.select(idx); } } }; tree.builder.addlistener(somelistener); this example is very simple and just saves and restores the selected index after a rebuild. since the content goes away during a rebuild, the selection is lost, so it is restored here during the didrebuild method. the firefox bookmarks
window uses this technique. if you try an example using the code above, you will notice that the first tree will maintain the selection when the rebuild button is pressed, whereas in the second tree does not. this is because the listener is only attached to the first tree. the example above makes use of the getresourceatindex and getindexofresource methods. these two methods are available for tree build...
XML Templates - Archive of obsolete content
at prefixes are defined within the template as well, so that they can be used in the xpath expressions. the namespace prefixes that may be used in an xpath expression are those that are defined on the query or assign element where the expression is used. be aware that when xml data is included inline as in this example, the content may be displayed and may affect the layout of other parts of the
window. you may wish to hide the inline xml by placing it inside a hidden box. « previousnext » ...
Adding more elements - Archive of obsolete content
tem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been added in between each element to separate them. these spacers have been given an explicit width of 10 pixels each. you will notice that if the
window is resized, the textbox grows but the other components do not. you will also notice that the label was removed. if you resize the
window vertically, the elements do not change size. this is because they are inside horizontal boxes. in might be more appropriate if the find and cancel buttons always stayed along the bottom of the
window. this is easy to do by adding a spacer in between the two hori...
Anonymous Content - Archive of obsolete content
> <xul:scrollbarbutton type="increment"/> </scrollbar> the elements within the content tag are added to the scroll bar anonymously. although anonymous content is displayed on screen, you cannot get to it through a script in the normal way. to the xul, it's as if there was only one single element, even though it is really made up of a number of elements. if you look at a scroll bar in a mozilla
window, you will see that it is made up of an arrow button, a slider, a thumb inside it and a second arrow button at the end, which are the elements that appear in the xbl above. these elements would in turn be bound to other bindings that use the base xul elements. notice that the content elements need the xul namespace (they appear preceded with xul:), because they are xul elements and aren't valid in...
Broadcasters and Observers - Archive of obsolete content
automatically. this is a useful way to simplify the amount of code you need to write. the technique also works for other attributes as well. for instance, if you place a label attribute on a command element, any buttons attached to the command will share the same label. 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 button will share the label with the command. the checkbox already has a label, however, it will be overridden by the command's label. the result is that both the button and the checkbox will have the same label 'open'. if you were to modify the command's labe...
Creating an Installer - Archive of obsolete content
and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. « previousnext » this section will describe packaging a xul application into an installer. xpinstall packages mozilla provides a mechanism which can be used to package xul
windows, scripts, skins and other files into single file installers. you can place this installer file somewhere for users to download. a simple script can be used to have the package downloaded and installed. this mechanism is called xpinstall (cross platform install). xpinstall installers are packaged into jar files. inside the jar file, you can add all the various files that you want to have install...
Grids - Archive of obsolete content
tton label="browse..."/> </hbox> </row> </rows> </grid> notice in the image how the first column of elements containing the labels has only a single element in each row. the second column contains a box in its second row, which in turn contains two elements, a textbox and a button. you could add additional nested boxes or even another grid inside a single cell. if you resize the
window of the last example, you will see that the textboxes resize, but no other elements do. this is because of the flex attributes added to the textboxes and the second column. the first column does not need to be flexible as the labels do not need to change size. the initial width of a column is determined by the largest element in the column. similarly, the height of a row is determined by the size...
Groupboxes - Archive of obsolete content
"/> </hbox> <checkbox label="compress archived files"/> </groupbox> in this example, a checkbox has been used as a caption. we might use a script to enable and disable the contents of the groupbox when the checkbox is checked and unchecked. the groupbox contains a horizontal box with a label and textbox. both the textbox and groupbox have been made flexible so the textbox expands when the
window is expanded. the additional checkbox appears below the textbox because of the vertical orientation of the groupbox. we'll add a groupbox to the find files dialog in the next section. radio groups you can use the radiogroup element to group radio elements together. the radiogroup is a type of box. you can put any element you want inside it, and apart from its special handling of radio buttons, it ...
Input Controls - Archive of obsolete content
e. this should be set to the number of rows and columns of characters to display. our find files example let's add a search entry field to the find file dialog. we'll use the textbox element. <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/> add these lines before the buttons we created in the last section. if you open this
window, you will see something much like that shown in the image. notice that the label and the text input field have now appeared in the
window. the textbox is fully functional and you can type into it and select text. note that the control attribute has been used so that the textbox is selected when the label is clicked. checkboxes and radio buttons two additional elements are used for creating ch...
Introduction to RDF - Archive of obsolete content
f/xml rdf consists of a model, which is a graph representation of data. rdf/xml is an xml language which can be used to represent rdf data. it contains a fairly simple set of elements. the sample below shows a simple rdf template. <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> ... </rdf:rdf> this has some similarities to the xul header. instead of the
window element, the rdf element is used. you can see the namespace for rdf was declared so that the rdf elements are recognized properly. inside, the rdf element, you will place the data. to see some example rdf/xml files, look at those provided with mozilla. they have the extension rdf. rdf database let's take the example of a bookmarks list generated from rdf. a bookmarks list contains a set of record...
Modifying a XUL Interface - Archive of obsolete content
us functions to modify the document. creating new elements you can create new elements using the createelement() function of the document. it takes one argument, the tag name of the element to create. you can then set attributes of the element using the setattribute() function and append it to the xul document using the appendchild() function. for example, the following will add a button to a xul
window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul. no...
More Button Features - Archive of obsolete content
ll be different. the image to the right shows the difference. the left one is a 'menu' and the second one is a 'menu-button'. it has an arrow indicating the presence of a menu. for the 'menu', the user may click anywhere on the button to show the menu. for the 'menu-button', the user must click the arrow to show the menu. next, we will learn more details about how xul elements are positioned in a
window. « previousnext » ...
More Menu Features - Archive of obsolete content
menu element is valid even when it isn't directly placed inside a menu bar. the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="
window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple commands to a file me...
Open and Save Dialogs - Archive of obsolete content
r a features of the dialog by using the interface. when the dialog is closed, you can use the interface functions to get the file that was selected. creating a file picker to begin, you need to create a file picker component and initialize it. var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(
window, "select a file", nsifilepicker.modeopen); first, a new file picker object is created and stored in the variable 'fp'. the 'init' function is used to initialize the file picker. this function takes three arguments, the
window that is opening the dialog, the title of the dialog and the mode. the mode here is modeopen which is used for an open dialog. you can also use modegetfolder and modesave f...
Scroll Bars - Archive of obsolete content
adding scroll bars a scroll bar is typically used so that a user can move around in a large document. you can also use it when you need to ask for a value that falls within a certain range. scroll bars can be created in a number of ways. in xul, one can be created using the scrollbar tag. some elements, such as text boxes, will also add scroll bars as necessary when the content inside is too large. in this section, we'll discuss creating a stand-alone scroll bar. the user will set the value by adjusting the scroll bar. you probably won't use this too often. ...
Simple Menu Bars - Archive of obsolete content
e. for that reason, you should specify a character that exists in the text (although the key will still work if it doesn't). the menu element is normally placed on a menubar, although it does not have to be. however, it will be given a different look. the image here shows what the earlier example would look like without the menu bar. menupopup element the menupopup element creates the popup
window containing the menu commands. it is a type of box which defaults to a vertical orientation. you could change it to horizontal if you wanted to and the menuitems would be placed in a row. normally only menuitems and menuseparators would be placed on a menupopup. you can place any element on a menupopup, however they will be ignored on a macintosh. menuitem element the menuitem element is much li...
Stacks and Decks - Archive of obsolete content
ast element in the stack. that means that buttons will only work properly as the last element of the stack. decks a deck element also lays out its children on top of each other much like the stack element, however decks only display one of their children at a time. this would be useful for a wizard interface where a series of similar panels are displayed in sequence. rather than create separate
windows and add navigation buttons to each of them, you would create one
window and use a deck where the content changes. like stacks, the direct children of the deck element form the pages of the deck. if there are three children of the deck element, the deck will have three children. the displayed page of the deck can be changed by setting an selectedindex attribute on the deck element. the index is ...
XPCOM Interfaces - Archive of obsolete content
implement it. the implementation of the file interface is left to a component. the component will have code which can retrieve the file's name, date and size. in addition, it will have code which copies and renames it. we don't care how the component implements it, as long as it implements the interface correctly. of course, we'll have different implementations anyway, one for each platform. the
windows and macintosh versions of a file component would be significantly different. however, they would both implement the same interface. thus, we can use a component by accessing it using the functions we know from the interface. in mozilla, interfaces are usually preceded by 'nsi' or 'mozi' so that they are easily recognized as interfaces. for example, the nsiaddressbook is the interface for intera...
Using the standard theme - Archive of obsolete content
by default, no style is associated with xul extension
windows or dialogs. you can either provide a complete custom styling, but most of the time you also want to be able to reuse the standard theme (also called the "global skin") of the base application for non-custom elements, transparently with regard to which theme the user has currently chosen. at the beginning, there is no style when creating a new xul <tt>
window</tt> (or a new <tt>dialog</tt>, for that matter) in your extension, and you do not associate a style sheet with it, your widgets will be unstyled. meaning, some internal default will be applied, which does by no means correspond to the standard theme (the theme currently chosen by the user in the theme selector), or even the default theme delivered with your the base appl...
XUL Changes for Firefox 1.5 - Archive of obsolete content
arbitrary content. this element works similarly to the <listbox> which is designed primarily for lists of textual items. the <richlistbox> supports much of the same api as the <listbox> and single items, created with the <richlistitem> element may be selected. see xul:richlistbox for more information. preferences system several elements have been added which may be used for creating preference
windows. these
windows are special types of dialogs which support several panels, each of which may be contained in the same file or a separate file. a set of icons will appear across the top of the dialog allowing the user to switch panels. along with the new preference elements and some additional attributes for existing elements, they make it easy to set preferences without having to use code. for mo...
XUL Parser in Python/source - Archive of obsolete content
source code for the xul parser in python. 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. def strip(snip): t = re.sub('http://.*?\s', '', snip) 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 ...
XUL controls - Archive of obsolete content
more information about the checkbox element. checkbox reference <colorpicker> a control that may be used to select a color. <colorpicker color="#ff0000"/> colorpicker reference <colorpicker type="button"> a specialized type of color picker which shows only a button. pressing the button displays a color picker popup
window. <colorpicker type="button" color="#cc0080"/> colorpicker reference <datepicker> a set of textboxes which may be used to allow the entry of a date. <datepicker value="2007/03/26"/> datepicker reference <datepicker type="grid"> a datepicker which displays a calendar grid for selecting a date. <datepic...
checkbox - Archive of obsolete content
a label. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute...
command - Archive of obsolete content
it menu, a context menu and by pressing a keyboard shortcut. you attach the code to the command using the oncommand attribute. it will be called no matter how it is invoked by the user. in addition, disabling the command will automatically disable the menu items and keyboard shortcuts. commands are identified by their id. if you include the script chrome://global/content/globaloverlay.js in your
window, you can use the function godocommand function to invoke the command. using this function has the advantage that the command will be sent to the part of the ui which will respond to it. typically, this will be the currently focused element. like a broadcaster, commands forward attributes to other elements. more information is available in the xul tutorial. see also: command attribute, commandse...
datepicker - Archive of obsolete content
on: there is also a datepicker in tb-calendar with differing definitions for members (value is a date there) the change event is fired whenever the date is changed. however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the date is changed using the keyboard instead of the mouse. to avoid this, you can use the workaround described here, i.e., use
window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers. a monthchange event is fired for the grid and popup datepickers whenever a new month is navigated to or displayed. attributes disabled, firstdayofweek, readonly, type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, month...
listbox - Archive of obsolete content
can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disabled by setting this attribute to true. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. seltype type: one of the val...
listitem - Archive of obsolete content
tributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved whe...
menulist - Archive of obsolete content
urs when a user selects a menu item or presses a keyboard shortcut attached to the command. 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. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. sizetopopup type: one of the values below indicates how the menu width and the menupopup width are determined. if the sizetopopup attribute is left out or set to none, th...
page - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] similar to a
window, except it should be used for xul files that are to be loaded into an iframe. examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
preferences - Archive of obsolete content
ookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related preferences system documentation: introduction: getting started | examples | troubleshooting reference: pref
window | prefpane | preferences | preference | xul attributes ...
promptBox - Archive of obsolete content
s the tab-modal prompts (or alerts) on a given tab. it's returned by the tabbrowser method gettabmodalpromptbox method. a tab may have multiple prompts on it; the tabmodalpromptshowing attribute on the tabbrowser will tell you how many prompts a given tab has. note: this is largely an implementation detail; if you're developing an add-on, you shouldn't need to tinker with this. you should use the
window.alert() method or the nsiprompt interface instead. see using tab-modal prompts for details. method overview nsidomelement appendprompt(args, onclosecallback); void removeprompt(nsidomelement aprompt); nodelist listprompts(nsidomelement aprompt); methods appendprompt() creates a new prompt, adding it to the tab. nsidomelement appendprompt( args, onclosecallback ); parameters args ...
radiogroup - Archive of obsolete content
ly. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not use...
richlistbox - Archive of obsolete content
can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disabled by setting this attribute to true. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cel...
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. more information is available in the xul tutorial. ...
scrollbox - Archive of obsolete content
alue="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or even desired. in our case an enclosing element also was overflow:auto. if the user made the
window smaller, the outer box would get smaller in response and sprout its scroll bars. we wanted our vbox to get smaller and sprout its scroll bars instead. note that this example doesn't use a scrollbox tag; you only need that tag if you want to programmatically scroll in addition to the automatic scroll bars. note: avoid nested scroll boxes; it's maddening for the experienced user and confusing for...
tabbox - Archive of obsolete content
ibutes eventnode type: one of the values below indicates where keyboard navigation events are listened to. if this attribute is not specified, events are listened to from the tabbox. thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply. parent keyboard navigation is captured at the parent of the tabbox.
window keyboard navigation is captured at the
window level. tab navigation will occur as long as any element in the
window is focused. document keyboard navigation is captured at the document level. tab navigation will occur as long as any element in the document is focused. handlectrltab type: boolean if set to true or omitted, the tabbox will switch to the next tab when the contr...
textbox - Archive of obsolete content
hen a user enters text in a textbox. this event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys. placeholder type: string a string that appears in the textbox when it has no value. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a pref
window. more information is available in the preferences system article. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the...
timepicker - Archive of obsolete content
hour, minute and second properties may be used to retrieve and modify each component of the time separately. the change event is fired whenever the time is changed. however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the time is changed using the keyboard instead of the mouse. to avoid this, you can use the workaround described here, i.e., use
window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers. attributes disabled, hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled, hideseconds, hour, hourleadingzero, increment, is24hourclock, ispm, minute, minuteleadingzero, pmindicator, readonly, second,...
Building XULRunner - Archive of obsolete content
the corresponding tag is cvs is : firefox_2_0_0_3_release to find out how those firefox tags and xulrunner version maps, check out the file mozilla/config/milestone.txt . you can also check the user agent string in firefox help/about menu to get the mapping from a certain binary firefox version to the corresponding xulrunner version. for instance, in firefox 2.0.0.9 you will get : mozilla/5.0 (
windows; u;
windows nt 5.1; en-us; rv:1.8.1.9) gecko/20071025 firefox/2.0.0.9 therefore the xulrunner version for this firefox version is : 1.8.1.9 fetching sources from mercurial as with all other mozilla products, one would fetch recent sources from mercurial. for example, to build xulrunner with the top of the tree: hg clone http://hg.mozilla.org/mozilla-central/ src cd src echo ". \$topsrcdir/x...
Components - Archive of obsolete content
s of existing ones to be noticed at all, you need to change the buildid in application.ini to trigger a re-registration of the components. alternatively, you can delete compreg.dat and xpti.dat in the user profile directory - that of your xulrunner app, not that of firefox/mozilla. it's named after your vendor and app name in application.ini, e.g. linux: ~/.yourcompany/yourapp/oihizuf.default/
windows: %appdata%\yourcompany\yourapp\profiles\jhfdfdi.default\ ...
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
ion packaging. in this case you can basically copy over the file as is, since once again variables are used for things like the application name and version. but you will have to change the id to something unique to your app. default-prefs.js - these are the default mozilla preferences used by xulrunner when running your app. the important ones are described in xulrunner:specifying startup chrome
window. you can add other preferences for things like debugging, as mccoy does (e.g. javascript.options.showinconsole). default.ico and default.xpm - icons for your app on
windows and linux. macbuild/ - when steve jobs said "think different", we took that to heart, and not just by rejecting useless adverbial endings. we've included a whole subdirectory just for the mac. it's got a lot of stuff in it, bu...
Deploying XULRunner - Archive of obsolete content
d deploy it with a generic installer that would create shortcuts to scripts that launch your application in the unregistered bundled xulrunner. the responsibility still lies with the developer to provide the correct version of xulrunner per platform. in the end, most users are afraid of links that don't have a pretty icon so you may want to have a look at the branding section of xulrunner tips.
windows on
windows, xulrunner does not yet have a complete built-in installation solution; app developers should use pre-existing solutions for a native
windows installer. an example of one such solution may be found in the article: creating a
windows inno setup installer for xulrunner applications. the installed files should be arranged in the following directory structure: installdir/ appli...
XULRunner/Old Releases - Archive of obsolete content
1.9.2.x xulrunner releases these builds are built from the stable 1.9.2 branch. nightly builds of xulrunner 1.9.0.x these builds are built from the stable 1.9 branch. community contributed builds of xulrunner 1.8.1.3 these builds are contributed by the eclipse atf community and are intended for embedding. the
windows and linux builds will run normal xulrunner applications, but the mac build uses cocoa widgets and will not run xulrunner applications. xulrunner 1.8.0.4 this is the last official stable developer preview release from the 1.8.0 branch. it has known security holes and should not be used in applications that deal with public web content. ...
XUL Application Packaging - Archive of obsolete content
ulrunner with a command line flag "--install-app" if xulrunner is registered on the system. see command line options for more details. note: for instructions on deploying your applications see deploying xulrunner. application.ini the application.ini manifest is located at the root of the extension and provides metadata that allows xulrunner to launch the application properly. it is parsed as a
windows-style ini file with [headings] and key=value pairs. lines beginning with ; or # are treated as comments. a sample application.ini file can be found in the mozilla source tree. the [app] section the app section specifies metadata about the application name specifies the application name. required name example: name=testapplication version specifies the application version num...
xulauncher - Archive of obsolete content
ulappini # create chrome.manifest file ############################################################################## echo " content $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## echo " pref(\"toolkit.defaultchromeuri\", \"chrome://$xulname/content/$xulfile\"); /* debugging prefs */ 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); ">$xulprefs # copy xul file to right location and run it ############################################################################## cp $xulfile $xuldir xulrunner $xulappini $@...
mozilla.dev.platform FAQ - Archive of obsolete content
ed in /library/frameworks. any suggestions? " a: make sure the app can find the framework or you can use the packages of the firefox release repackager which uses the embedded framework successfully. please make sure you're using 1.8.0.4 or later (not 1.8.0.1, which had a bug that prevented this from working properly). q: when using xul elements <browser/> and <tabbrowser/> the javascript popup
windows don't work out of the box, what needs to be implement? a: have the browser.chromeurl preference - this should be a xul document containing a <browser type="content-primary"> element in which the popup
window's content should get loaded. visual studio express 2005 q: when i try to run xulrunner-stub.exe i get the error "this application failed to start because msvcr80.dll was not found." a: see...
Mozprocess - Archive of obsolete content
longer maintained. for more information about mozprocess as part of the mozbase project, please see the mozbase project page. mozprocess provides python process management via an operating system and platform transparent interface to mozilla platforms of interest. mozprocess aims to provide the ability to robustly terminate a process (by timeout or otherwise), along with any child processes, on
windows, os x, and linux. mozprocess utilizes and extends subprocess.popen to these ends. api mozprocess.processhandler:processhandler is the central exposed api for mozprocess. processhandler utilizes a contained subclass of subprocess.popen, process, which does the brunt of the process management. basic usage: process = processhandler(['command', '-line', 'arguments'], cwd=non...
xbDesignMode.js - Archive of obsolete content
.tagname.tolowercase() == "iframe") ){ this.miframeelement = aiframe; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ // gecko this.meditordocument = this.miframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocument = this.miframeelement.content
window.document; this.meditordocument.designmode = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.miframeelement.content
window.document; } } xbdesignmode.prototype.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordo...
Gecko Compatibility Handbook - Archive of obsolete content
r 4 or netscape navigator 4 support the w3 dom. instead, each browser supports its own proprietary api for manipulating the content, style and position of html elements in a web page. in addition, internet explorer 4 and netscape navigator 4 use completely different methods of embedding third-party software into the browser. gecko is a cross-platform browser engine, compatible with a number of
windows versions including
windows xp, as well as mac and linux. because of gecko's cross-platform nature, functionality is generally very much the same on different platforms unlike internet explorer for mac and ie for
windows, which are very different programs and so may behave quite differently from each other. quick compatibility test if your site uses netscape 4.x and microsoft proprietary techno...
2006-10-06 - Archive of obsolete content
release tag being created lilmatt announced the sunbird 0.3 realse tag being created. 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. discussions dialogs on app startup discussion regarding improvement of dialog of app
window what are tasks? what are events? discussion regarding tasks and events meetings none this week. authors mark paruzel yi (eric) shen [back to weekly summaries ] ...
2006-11-03 - Archive of obsolete content
eek. discussions google adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the browser without logging into google. request to add option for removal of firefox profiles during setup or uninstall a user suggests an option to remove profiles during setup or uninstall. does firefox provide any classes/objects or events to
windows wmi ? a user asks if firefox provides any classes/objects or events to
windows wmi. no replies yet. source code for the nsinstall contained in moztools a user asks for advice about building nsinstall on
windows. no replies yet. picking an alternate search engine for a particular search large discussion about how the search engine could be imporved. firing pageshow/pagehide when user...
2006-11-04 - Archive of obsolete content
ncements none this week. discussions adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the browser without logging into google. to add option for removal of firefox profiles during setup or uninstall a user suggests an option to remove profiles during setup or uninstall. firefox provide any classes/objects or events to
windows wmi ? a user asks if firefox provides any classes/objects or events to
windows wmi. no replies yet. code for the nsinstall contained in moztools a user asks for advice about building nsinstall on
windows. no replies yet. an alternate search engine for a particular search large discussion about how the search engine could be imporved. pageshow/pagehide when users change tabs discussi...
2006-11-10 - Archive of obsolete content
bookmark are viewed. followed by a discussion whether this is an improvement. what is the build date for firefox 2? quesiton about why a user using firefox 2 rc3 didn't get a prompt for updating to firefox 2 after the release date. improving the ue for content control suggestion about how to improve user experience with options controlling the appearance of web content. popup blockers..
window handlers inquiry of how to implement the pop-up blocker on the mozilla toolbar. no replies as of yet. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-10 - Archive of obsolete content
reflow branch build failed with vc 7.1 sp1 november 8th: roy received an error when he tried to reflow a branch build using vc 7.1 sp1. on the same day he posted the answer to his posting that he found in last weeks posting. click here to see the answer to the problem. building xulrunner application with mozilla november 8th: kirans is trying to build mozilla with xulrunner option on a
windows machine. when he ran this "make -f client.mk build" command he receive an error saying "no such file or directory". he stated that he set is home variable to c:\mozilla, and is not sure what he is doing wrong. november 9th: jonathan watt responded to his posting stating that he must have the wrong line endings in his mozconfig or some other script fill that he is probably using to run. ...
2006-10-20 - Archive of obsolete content
this is a xulrunner 1.8.0.4 application. benjamin smedberg would like to know what paths were used. started wed, oct 18 2006 9:38 am - a xulrunner developer, frank, discusses his desire to make xul/browser based applications. he wants to be able to build applications that will run inside the browser. ...
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.platform - october 28th - november 3rd, 2006 announcements developer chat with brendan eich! 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. alex vinten and neil help him out by figuring out exactly which environment he's running in. john gaunt discusses a proposed xulrunner unit-tests like xpcshell. robert sayre notes that he and dave liebreich have a nice, simple environment set up for browser-based js tests meetings no meetings this week ...
2006-11-10 - Archive of obsolete content
ailable at o'reily, in the creating applications with mozilla section. benjamin smedberg has been "working on some xptcall refactoring which will allow us to expose xptcall via a frozen api (and c linkage)". he is looking for xptcall port maintainers to submit patches to bug 349002. matthew gertner wants to know if anyone has written code to paste images from the clipboard on platforms other than
windows? as of the end of the week, there is no reply. harry is looking for help with create thread in javascript using nsithread. he wants to know how to create new threads using javascript for background download operations. neil deakin points out that "downloads and other network operations are always done in another thread so you shouldn't be creating one yourself". meetings no meetings this week ...
JS-Engine FAQ - Archive of obsolete content
e pointers? 2-byte aligned. check the jsval macros at the top of js/src/jsapi.h can an embedded spidermonkey js engine use domparser extension of mozilla? domparser is not part of js but part of mozilla browser which makes it available to script in the browser using xpconnect. an alternative would be to use built-in e4x. newly created threads in js from mozilla_1_8_branch causes to hang in
windows patch from bug 351602 should fix the problem. after applying that patch, recompile js and define js_use_only_nspr_locks in the build. spidermonkey library loading mechanism? to write wrappers in pure javascript to interface with any c library on the system there are mechanisms such as xpcshell, wxjs, jsdb, jsni coding spidermonkey in c check out this tutorial how to compile tamarin on linu...
2006-10-27 - Archive of obsolete content
lp for getting html element width info discussion on retrieving width information on html elements when using the gecko engine. it was determined that the offsetwidth property can be used to get this value. multiple presshells discussion on why current interfaces allow for multiple presshells and how the relationships work for the following objects: docshell, presshell, prescontext, document, dom
window, widget, docshell and contentviewer. boris zbarsky explains in detail the relationships between these objects. the presshells are currently used for printing, but should or could have been used for print previews and multiple views in editors. meetings none this week. ...
2006-09-22 - Archive of obsolete content
summary: mozilla.dev.tech.xpcom - sept 22-29, 2006 announcements none during this week. discussions java vs. xpcom discussion of the limitation and merits of java in place of xpcom. xpidl.exe crashes on
windows problem with creating header files from idl's in 1.8 branch due to wrong compiler. meetings none during this week. ...
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.tech.xpcom - oct 13-20, 2006 announcements none during this week. 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. general xpcom and nscomptr questions nscomptr basics regarding myicomponent usage. fedora security blocking xpcom registration fedora core 5.0 security settings impeding xpcom registration. meetings none during this week. ...
Logging Multi-Process Plugins - Archive of obsolete content
when multi-process plugins are enabled, firefox has the ability to dump additional information about interactions between the browser and a plugin. this is done using nspr logging. run firefox in a custom environment to enable this special logging mode. make sure you have write permissions to wherever you wish to save the log. your safest bet is your home directory (c:\users\username on
windows vista and above, c:\documents and settings\username on
windows xp, and ~ (home directory) on mac os x and linux).
windows make sure firefox is not running. from within a command prompt: c:\> set nspr_log_modules=ipcplugins:5 c:\> set nspr_log_file=c:\plugins.log c:\> cd c:\program files\mozilla firefox c:\> firefox.exe the log file will be saved to c:\plugins.log (or wherever nspr_log_file is set). linu...
Multi-process plugin architecture - Archive of obsolete content
ich would normally be implemented directly by the plugin). the calls are transferred to the plugin process via the ipdl protocol language. in the plugin process, the shim layer serves as a plugin host, implementing the npn_ functions used by the plugin, and forwards the calls to the plugin dll: multi-process plugins, also called out of process plugins or oopp first shipped in firefox 3.6.4 on
windows and linux, and in firefox 4 on mac os x. in addition to crash protection, the multi-process plugin architecture allows firefox to see plugins which respond very slowly or have completely stopped responding. for more details on hang protection, see the page on the plugin hang detector. ...
Browser-side plug-in API - Archive of obsolete content
the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. ...
NPAnyCallbackStruct - Archive of obsolete content
this structure contains the file pointer to which the plug-in should write its postscript data. 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. see also npp_print() npembedprint npset
windowcallbackstruct npprintcallbackstruct ...
NPFullPrint - Archive of obsolete content
ntrol of the printing process and prints full-page. false: (default) plug-in renders its area of the page only (for embedded plug-in). printone not currently in use. should always be false. true: print single copy of page to the default printer. false: display print dialogs so user can choose printer, other options. platformprint platform-specific printing information. mac os: thprint ms
windows: printer's device context description the npp_print function passes the plug-in a pointer to an npprint object (previously allocated by the browser). the npfullprint structure is used when the mode field of npprint is set to np_full. the pluginprinted field of this structure determines whether the plug-in prints in full-page mode or not. if you want the plug-in to take complete control of the ...
NPN_Evaluate - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary evaluates a script in the scope of the specified npobject. syntax #include <npruntime.h> bool npn_evaluate(npp npp, npobject *npobj, npstring *script, npvariant *result); parameters the function has the following parameters: npp the npp indicating which plugin instance's
window to evaluate the script in. npobj the scope object. script the script to evaluate. result on return, contains the value returned by the script. can't be null. returns true if the script was evaluated successfully, otherwise false. description the script is evaluated in the context of the
window that the calling plugin instance (the <tt>npp</tt> argument) is loaded in. note: t...
NPN_ForceRedraw - Archive of obsolete content
asks the plugin host to immediately (synchronously) repaint invalid areas. note: as of firefox 4, this function no longer has any effect when running with separate plugin processes. syntax #include <npapi.h> void npn_forceredraw(npp instance); parameters the function has the following parameters: instance plug-in instance for which the function forces redrawing. description once a region of a
windowless plugin has been invalidated with npn_invalidaterect() or npn_invalidateregion(), a plug-in can call npn_forceredraw() to force a paint message. this causes a synchronous update event or paint message for the plug-in. browsers may ignore this request. see also drawing and event handling npn_invalidaterect() npn_invalidateregion() npp_handleevent() npp ...
NPN_GetURLNotify - Archive of obsolete content
eturlnotify(npp instance, const char* url, const char* target, void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance. url pointer to the url of the request. can be of any type, such as http, ftp, news, or mailto. target name of the target
window or frame, or one of several special target names. for values, see npn_geturl(). notifydata plug-in-private value for associating the request with the subsequent npp_urlnotify() call, which passes this value (see description below). returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible val...
NPN_PostURLNotify - Archive of obsolete content
uint32 len, const char* buf, npbool file, void* notifydata); parameters the function has the following parameters: instance current plug-in instance, specified by the plug-in. url url of the post request, specified by the plug-in. target target
window, specified by the plug-in. for values, see npn_geturl. len length of the buffer buf. buf path to local temporary file or data buffer that contains the data to post. file whether to post a file. values: true: post the local file whose path is specified in buf, then delete the file. false: post the raw data in buf. notifydata...
NPN_Status - Archive of obsolete content
's status line. syntax #include <npapi.h> void npn_status(npp instance, const char* message); parameters the function has the following parameters: instance pointer to the current plug-in instance. message pointer the buffer that contains the status message string to display. description you can use this function to make your plug-in display status information in the browser
window, in the same place the browser does. if your plug-in has a button or other object that acts as a link when clicked, you can call npn_status() to display a description or url when the user moves the cursor over it. the browser always displays the last status line message it receives, regardless of the message source. your message is always displayed, but you have no control over how long it stays ...
NPN_Version - Archive of obsolete content
more information and an example, see getting the current version. you can use npn_version() to inquire on version constants (npvers constants), which represent particular browser features. once the plug-in obtains a version number, it can inquire on a version constant to find out if the feature it represents exists in this version. for example, the plug-in could inquire on the constant npvers_has_
windowless to see if it is running in a browser that supports
windowless functionality. for more information and an example, see finding out if a feature exists. for a listing of version constants defined in the plug-in api, see version feature constants. note: platform-specific code in the plug-in api files npwin.cpp, npmac.cpp, or npunix.c checks version numbers automatically. a plug-in whose major ...
NPObject - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary npobject is a structure that holds a pointer to an npclass and an integer reference count, and possibly also implementation specific (i.e. plugin specific, or browser specific) members. npobject is the type used to express objects exposed by either the plugin or by the browser through this api. the browsers are expected to expose their
window objects and everything reachable from it through this api. npobjects are reference counted objects, so callers need to be careful to properly release acquired references to them. to aid with the reference counting and ownership management in general, the functions npn_createobject(), npn_retainobject(), npn_releaseobject(), and npn_releasevariantvalue() are provided as part of this api. npobject ...
NPP_New - Archive of obsolete content
argv[], npsaveddata *saved); parameters the function has the following parameters: plugintype pointer to the mime type for new plug-in instance. instance contains instance-specific private data for the plug-in and the browser. this data is stored in instance->pdata. mode display mode of plug-in. values: np_embed: (1) instance was created by an embed tag and shares the browser
window with other content. np_full: (2) instance was created by a separate file and is the primary content in the
window. argc number of html arguments in the embed tag for an embedded plug-in; determines the number of attributes in the argn and argv arrays. argn[] array of attribute names passed to the plug-in from the embed tag. argv[] array of attribute values passed to the plug-...
NPP_Print - Archive of obsolete content
the printer device context, and any other tasks involved in printing, as well as printing the rest of the page. for an embedded plug-in, set the printinfo field to npembedprint. a full-page plug-in handles all aspects of printing itself. for a full-page plug-in, set the printinfo field to npfullprint or null. for information about printing on your platform, see your platform documentation. ms
windows on ms
windows printinfo->print.embedprint.platformprint is the device context (dc) handle. be sure to cast this to type hdc. the coordinates for the
window rectangle are in twips format. this means that you need to convert the x-y coordinates using the
windows api call dptolp when you output text. see also npprint, npfullprint, npembedprint ...
NPPrintCallbackStruct - Archive of obsolete content
s required by the platformprint field of the npembedprint structure during embedded mode printing. 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. see also npp_print, npembedprint, npset
windowcallbackstruct, npanycallbackstruct ...
NP_Initialize - Archive of obsolete content
if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description the browser calls this function only once: when a plug-in is loaded, before the first instance is created. ...
Adobe Flash - Archive of obsolete content
. an algorithmic approach to detecting flash plugin version might be: var plugin = navigator.mimetypes["application/x-shockwave-flash"].enabledplugin; var description = plugin.description; // 1. tokenize description string to its constituent parts var versionarray = description.match(/[\d.]+/g); // 2. determine if the flash version is greater than 6r.49 // 3. if so, the plugin is scriptable on
windows and linux // 4. determine whether the browser is a mach-o browser // 5. if the browser is a mach-o browser, determine whether the version of the plugin // is greater than 12, a hypothetical version when flash will fix the plugin to be // scriptable on mach-o browsers also var flashversionosxscriptable = 12; if(navigator.useragent.indexof("mach-o")!=-1) { if(flashversion < flashversionosxscript...
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
one of the new features that is available in firefox 1.5 is the ability to place browser plugins in a toolkit bundle. historically, most people have chosen to use an install.js script to install a plugin. when this method is used, you can choose to either place the plugin into the plugins directory, or place it into your own directory and modify the
windows registry to let firefox know where to find the plugin. the downside to this method is that once the plugin is installed, it might be difficult for users to upgrade, uninstall, or disable the plugin. as of firefox 3 (and any gecko 1.9 based application) the use of install.js scripts is no longer supported and plugins must either be shipped as an executable installer or in a bundle as described here. bundle structure toolkit bundles can...
.htaccess ( hypertext access ) - Archive of obsolete content
the term .htaccess stands for "hypertext access". a file with the htaccess file extension is an access configuration file for apache server. the .htaccess file configures the current directory with things like password protection, url rewrites & redirects, and more. file accessing : htaccess files can be opened using any text editor, like
windows notepad, vin, sublime text editor or any other. syntax highliting support for .htaccess files less. common application url redirects & rewrite: htaccess files are often used to redirect traffic to a web page to another or from traffic to a directory to another even between domains is possible. it's a fast and efficient way of redirecting traffic, because the redirect happens before the pages are served. redirects can be made on a temporary ...
Introduction to Public-Key Cryptography - Archive of obsolete content
if you want to get a commercial license for an eighteen-wheeler, the requirements are much more stringent. if you live in some other state or country, the requirements for various kinds of licenses will differ. similarly, different cas have different procedures for issuing different kinds of certificates. in some cases the only requirement may be your email address. in other cases, your unix or
windows login and password may be sufficient. at the other end of the scale, for certificates that identify people who can authorize large expenditures or make other sensitive decisions, the issuing process may require notarized documents, a background check, and a personal interview. depending on an organization's policies, the process of issuing certificates can range from being completely transparen...
Developing cross-browser and cross-platform pages - Archive of obsolete content
n be "spoofed" because, in many modern browsers, the navigator.appversion and navigator.useragent string properties are user configurable strings. for example, firefox 1.x users and users of any/all mozilla-based browsers can customize the "general.useragent.*" string properties to any value. opera 6+ allows users to set the browser identification string via a menu internet explorer uses the
windows registry safari, konqueror and icab browsers can mask their browser identity under internet explorer or netscape labels a user or browser distributor can put what they want in the navigator.useragent string and this may trick your code into executing a "wrong" block of code. moreover, there are many cases where even the accurately-identified browser does not perform as it is reputed/expected ...
-ms-accelerator - Archive of obsolete content
focus. <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by
windows 2000 and later. it enables users to hide navigation indicators for menu items and controls until the alt key is pressed. an access key is a single character used as a keyboard shortcut for selecting an object. the user presses the alt key and holds it while pressing the character to move input focus to the object, and to invoke the default event associated with the object. in internet explorer...
-ms-content-zoom-chaining - Archive of obsolete content
it during page manipulation. chained the nearest zoomable parent element begins zooming when the user hits a zoom limit during page manipulation. no bounce effect is shown. formal syntax none | chained specifications not part of any specification. remarks this property has no effect on non-zoomable elements. for information on zoomable elements, see -ms-content-zooming. starting with
windows 8.1, this property is also supported for touchpad interaction. this property requires
windows 8 or later. ...
-ms-content-zoom-limit-max - Archive of obsolete content
ypediscrete syntax values <percentage> the maximum zoom factor. formal syntax <percentage> specifications not part of any specification. remarks this property constrains the limit for touch zooming as well as values of the mscontentzoomfactor property. this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. starting with
windows 8.1, this property is also supported for touchpad interaction. this property requires
windows 8 or later. ...
-ms-content-zoom-limit-min - Archive of obsolete content
ypediscrete syntax values <percentage> the minimum zoom factor. formal syntax <percentage> specifications not part of any specification. remarks this property constrains the limit for touch zooming as well as values of the mscontentzoomfactor property. this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. starting with
windows 8.1, this property is also supported for touchpad interaction. this property requires
windows 8 or later. ...
-ms-content-zoom-limit - Archive of obsolete content
in value of the -ms-content-zoom-limit-min property. -ms-content-zoom-limit-max value of the -ms-content-zoom-limit-max property. formal syntax <'-ms-content-zoom-limit-min'> <'-ms-content-zoom-limit-max'> specifications not part of any specification. remarks this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. starting with
windows 8.1, this property is also supported for touchpad interaction. this property requires
windows 8 or later. ...
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
igation directives form-action restricts the urls which can be used as the target of a form submissions from a given context. frame-ancestors specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. 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. learn more https://www.w3.org/tr/csp/#directives-navigation other kinds of directives: fetch directive document directive reporting directive block-all-mixed-content upgrade-insecure-requests require-sri-for trusted-types content-security-policy ...
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
value! in the second function, a local foo variable had been created. we are increasing its value by 2, not the original (external) foo's value! also, in this situation, the external foo variable cannot be accessed directly. this is because of javascript's lexical scoping and the resulting variable shadowing. the local foo hides the external foo. for more information, see closures. (note that
window.foo could still be used to access the external foo variable.) in conclusion, any changes inside our functions won't affect the original foo at all, as we are modifying copies of it that's why primitives are immutable - instead of changing them directly, we're modifying a copy, without affecting the original. primitive wrapper objects in javascript except for null and undefined, all prim...
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
plorer and microsoft edge) property and method prefixes the prefixes for properties and methods are lower-case: webkit (chrome, safari, newer versions of opera, almost all ios browsers (including firefox for ios); basically, any webkit based browser) moz (firefox) o (old, pre-webkit, versions of opera) ms (internet explorer and microsoft edge) sample usage: var requestanimationframe =
window.requestanimationframe ||
window.mozrequestanimationframe ||
window.webkitrequestanimationframe ||
window.orequestanimationframe ||
window.msrequestanimationframe; learn more general knowledge vendor prefix on wikipedia ...
Sizing items in CSS - Learn web development
h is sized as 20vh and 20vw. the box contains a letter a, which has been given a font-size of 10vh. if you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. to see the example change when you change the viewport size you will need to load the example in a new browser
window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). open the example, resize the browser
window, and observe what happens to the size of the box and text. sizing things according to the viewport can be useful in your designs. for example, if you want a full-page hero section to show before the rest of your content, making that part of your page 1...
CSS values and units - Learn web development
ple below you can see how some relative and absolute length units behave. the first box has a width set in pixels. as an absolute unit this width will remain the same no matter what else changes. the second box has a width set in vw (viewport width) units. this value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. if you change the width of your browser
window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. to see this in action you'll have to try the example after opening it in its own browser tab. the third box uses em units. these are relative to the font size. i've set a font size of 1em on the containing <div>, which has a class of .wrapper. change this value to 1.5em and y...
Test Your Skills: Fundamental layout comprehension - Learn web development
tion items in a row, with an equal amount of space between the items. the navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it. the image that is inside the article should have text wrapped around it. the <article> and <aside> elements should display as a two column layout. the columns should be a flexible size so that if the browser
window shrinks smaller the columns become narrower. the photographs should display as a two column grid with a 1 pixel gap between the images. you will not need to edit the html in order to achieve this layout and the techniques you should use are: positioning float flexbox css grid layout there are a few ways in which you could achieve some of these tasks, and there often isn’t a single ri...
Introduction to CSS layout - Learn web development
objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. css page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/
window. the page layout techniques we'll be covering in more detail in this module are normal flow the display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. by understanding what each method is designed for you will be in a good place to understand...
Legacy layout methods - Learn web development
-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } you'll notice here that we are using percentages for all the widths — this is quite a good strategy, as it creates a liquid layout, one that adjusts to different screen sizes and keeps the same proportions for the column widths at smaller screen sizes. try adjusting the width of your browser
window to see for yourself. this is a valuable tool for responsive web design. note: you can see this example running at 0_two-column-layout.html (see also the source code). creating simple legacy grid frameworks the majority of legacy frameworks use the behavior of the float property to float one column up next to another in order to create something that looks like a grid. working through the pro...
Positioning - Learn web development
flow behavior described above, to produce interesting effects. what if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? positioning is your tool. or if you want to create a ui element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser
window no matter how much the page is scrolled? positioning makes such layout work possible. there are a number of different types of positioning that you can put into effect on html elements. to make a specific type of positioning active on an element, we use the position property. static positioning static positioning is the default that every element gets — it just means "put the element into it...
Practical positioning examples - Learn web development
ver the top of the other panels. that's it for the first example. keep your code open, as we'll be adding to it in the second one. a fixed position tabbed info-box in our second example, we will take our first example — our info-box — and add it into the context of a full web page. but not only that — we'll give it fixed position so that it stays in the same position in the browser
window. when the main content scrolls, the info-box will stay in the same position on the screen. our finished example will look like this: note: you can see the finished example running live at fixed-info-box.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, you can use your completed example from the first section of...
Supporting older browsers - Learn web development
uce labs, as detailed in the cross browser testing module. you can also download and install virtual machines, and run older versions of browsers in a contained environment on your own computer. having access to older versions of internet explorer is particularly useful, and for that purpose, microsoft has made a range of virtual machines available for free download. these are available for mac,
windows and linux operating systems and so are a great way to test in old and modern
windows browsers even if you are not using a
windows computer. summary you now have the knowledge to confidently use techniques such as grid and flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future. see also using feature queries in css backwards com...
Test your skills: Media Queries and Responsive Design - Learn web development
code and work locally, or use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. your task download the starting point. open this in your browser and you will find a wireframed site which will load in a mobile device in a readable manner. you can drag your
window smaller or use the responsive design view in firefox devtools to view this as if on a phone. your task is to create a desktop version of this layout which displays when there is enough screen width to accomodate it. you can see the layout you are aiming for in the screenshot below. there are a number of ways that you could create the desktop layout, enjoy experimenting. you could also add a s...
Styling links - Learn web development
let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an icon usually looks like a little arrow pointing out of a box — for this example, we'll...
Styling lists - Learn web development
= htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput);
window.addeventlistener("load", drawoutput); ...
What do common web layouts contain? - Learn web development
me examples (1 represents header, 2 footer; a main content; b1, b2 things on the side): 1-column layout. especially important for mobile browsers so you don't clutter the small screen up. 2-column layout. often used to target tablets, since they have medium-size screens. 3-column layouts. only suitable for desktops with big screens. (even many desktop-users prefer viewing things in small
windows rather than full-screen.) the real fun begins when you start mixing them all together: … these are just examples and you're quite free to lay things out as you want. you may notice that, while the content can move around on the screen, we always keep the header (1) on top and the footer (2) at the bottom. also, the main content (a) matters most, so give it most of the space. these a...
Client-side form validation - Learn web development
xecution of the event callback. if (output === false) return false; if (typeof previouseventcallback === 'function') { output = previouseventcallback(e); if(output === false) return false; } } }; // now we can rebuild our validation constraint // because we do not rely on css pseudo-class, we have to // explicitly set the valid/invalid class on our email field addevent(
window, "load", function () { // here, we test if the field is empty (remember, the field is not required) // if it is not, we check if its content is a well-formed e-mail address. const test = email.value.length === 0 || emailregexp.test(email.value); email.classname = test ? "valid" : "invalid"; }); // this defines what happens when the user types in the field addevent(email, "input", functi...
The HTML5 input types - Learn web development
search fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when clicked). additionally, on devices with dynamic keyboards, the keyboard's enter key may read "search", or display a magnifying glass icon. the below screenshots show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on
windows 10. note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused. another feature worth noting is that the values of a search field can be automatically saved and re-used to offer auto-completion across multiple pages of the same website; this tends to happen automatically in most modern browsers. phone number field a...
Example 2 - Learn web development
.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: #ffffff; } javascript content
window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> <...
Example 3 - Learn web development
st(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- //
window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); });
window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (opt...
Example 5 - Learn web development
', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- //
window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); });
window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(sele...
Other form controls - Learn web development
tml/"rich" content instead of plain text). visually, the text entered wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area. the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on
windows 10. note: you can find a slightly more interesting example of text area usage in the example we put together in the first article of the series (see the source code also). controlling multi-line rendering <textarea> accepts three attributes to control its rendering across several lines: cols specifies the visible width (columns) of the text control, measured in average character width...
Sending form data - Learn web development
is code is executed, the output in the browser is hi mom. note: this example won't work when you load it into a browser locally — browsers cannnot interpret php code, so when the form is submitted the browser will just offer to download the php file for you. to get it to work, you need to run the example through a php server of some kind. good options for local php testing are mamp (mac and
windows) and ampps (mac,
windows, linux). note also that if you are using mamp but don't have mamp pro installed (or if the mamp pro demo time trial has expired), you might have trouble getting it working. to get it working again, we have found that you can load up the mamp app, then choose the menu options mamp > preferences > php, and set "standard version:" to "7.2.x" (x will differ depending on w...
JavaScript basics - Learn web development
rt, are built into the browser. if you see something which looks like a variable name, but it's followed by parentheses— () —it is likely a function. functions often take arguments: bits of data they need to do their job. arguments go inside the parentheses, separated by commas if there is more than one argument. for example, the alert() function makes a pop-up box appear inside the browser
window, but we need to give it a string as an argument to tell the function what message to display. you can also define your own functions. in the next example, we create a simple function which takes two numbers as arguments and multiplies them: function multiply(num1,num2) { let result = num1 * num2; return result; } try running this in the console; then test with several arguments. for exampl...
Publishing your website - Learn web development
file transfer protocol (ftp) program (see how much does it cost: software for more details) to actually transfer the website files over to the server. ftp programs vary widely, but generally, you have to connect to your web server using details provided by your hosting company (typically username, password, hostname). then the program shows you your local files and the web server's files in two
windows, and provides a way for you to transfer files back and forth. tips for finding hosting and domains mdn does not promote specific commercial hosting companies or domain name registrars. to find hosting companies and registrars, just search for "web hosting" and "domain names". all registrars will have a feature to allow you to check if the domain name you want is available. your home or of...
Use JavaScript within a webpage - Learn web development
external script usually, you'll be writing scripts in their own .js files. if you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its url: <script src="path/to/my/script.js"></script> writing javascript within html you may also add javascript code between <script> tags rather than providing an src attribute. ...
Document and website structure - Learn web development
p>ron was backed into a corner by the marauding netherbeasts. scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> <hr> <p>meanwhile, harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his
window and landed in his lap. he read it hazily and sighed; "better get back to work then", he mused.</p> would render like this: planning a simple website once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best po...
Adding vector graphics to the Web - Learn web development
updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode);
window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = text...
Responsive images - Learn web development
s its inherent width (480w) is closest to the slot size. the 800px picture is 128kb on disk, whereas the 480px version is only 63kb — a saving of 65kb. now, imagine if this was a page that had many pictures on it. using this technique could save mobile users a lot of bandwidth. note: when testing this with a desktop browser, if the browser fails to load the narrower images when you've got its
window set to the narrowest width, have a look at what the viewport is (you can approximate it by going into the browser's javascript console and typing in document.queryselector('html').clientwidth). different browsers have minimum sizes that they'll let you reduce the
window width to, and they might be wider than you'd think. when testing it with a mobile browser, you can use tools like firefox's abou...
Graceful asynchronous programming with Promises - Learn web development
rn its result (unless of course, it takes far too long!), and more interested in being able to respond to it being returned, whenever that is. and of course, it's nice that it doesn't block the rest of the code execution. one of the most common engagements you'll have with promises is with web apis that return a promise. let's consider a hypothetical video chat application. the application has a
window with a list of the user's friends, and clicking on a button next to a user starts a video call to that user. that button's handler calls getusermedia() in order to get access to the user's camera and microphone. since getusermedia() has to ensure that the user has permission to use those devices and ask the user which microphone to use and which camera to use (or whether to be a voice-only call,...
Silly story generator - Learn web development
y, except to apply the javascript to your html. if you are unsure whether the javascript is applied to your html properly, try removing everything else from the javascript file temporarily, adding in a simple bit of javascript that you know will create an obvious effect, then saving and refreshing. the following for example turns the background of the <html> element red — so the entire browser
window should go red if the javascript is applied properly: document.queryselector('html').style.backgroundcolor = 'red'; math.round() is a built-in javascript method that simply rounds the result of a calculation to the nearest whole number. there are three instances of strings that need to be replaced. you may repeat the replace() method multiple times, or you can use regular expressions. for in...
Handling text — strings in JavaScript - Learn web development
le quotes, it is called a string literal. concatenation in context let's have a look at concatenation being used in action — here's an example from earlier in the course: <button>press me</button> const button = document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?'); alert('hello ' + name + ', nice to see you!'); } here we're using a
window.prompt() function in line 4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case name. we then use a
window.alert() function in line 5 to display another popup containing a string we've assembled from two string literals and the name variable, via concatenation. numbers vs. strings so what happens when we try...
Storing the information you need — Variables - Learn web development
again, this is a sensible language decision. there is no reason to redeclare variables — it just makes things more confusing. for these reasons and more, we recommend that you use let as much as possible in your code, rather than var. there is no reason to use var, unless you need to support old versions of internet explorer with your code (it doesn't support let until version 11; the modern
windows edge browser supports let just fine). updating a variable once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. try entering the following lines into your console: myname = 'bob'; myage = 40; an aside on variable naming rules you can call a variable pretty much anything you like, but there are limitations. generally, ...
What is JavaScript? - Learn web development
. they generally fall into two categories. browser apis are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. for example: the dom (document object model) api allows you to manipulate html and css, creating, removing and changing html, dynamically applying new styles to your page, etc. every time you see a popup
window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the dom in action. the geolocation api retrieves geographical information. this is how google maps is able to find your location and plot it on a map. the canvas and webgl apis allow you to create animated 2d and 3d graphics. people are doing some amazing things using these web technologies ...
Test your skills: JSON - Learn web development
no matter how many cats are in the json? why are the para1.textcontent = motherinfo; and para2.textcontent = kitteninfo; lines inside the displaycatinfo() function, and not at the end of the script? this has something to do with async code. try updating the live code below to recreate the finished example: warning: to answer this question, you'll need to write your code into the live code
window above. the example won't work locally, or in an environment like codepen or jsfiddle, because of something called cross-origin security. this basically means that you can't request a file from one origin using code on a different origin. in the live code editor above, both the javascript code and the requested json file are on the same origin (the code sits on a github repo, and is embedded here ...
Measuring performance - Learn web development
visualize that data. performance apis when writing code for the web, there are a large number of web apis available that allow you to create your own performance measuring tools. you can use the navigation timing api to measure client-side web performance; including the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the
window's load handler, and more. you can use the api for metrics related to all of the navigation events displayed in the didagram below. the performance api, which provides access to performance-related information for the current page, includes the performance timeline api, the navigation timing api, the user timing api, and the resource timing api. these interfaces allows the accurate measurement ...
Getting started with React - Learn web development
ct-app, you need to have node.js installed. it's recommended that you use the long-term support (lts) version. node includes npm (the node package manager), and npx (the node package runner). you may also use the yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using
windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbash (which comes as part of the git for
windows toolset) or
windows subsystem for linux (wsl) are both suitable. see command line crash course for more information on these, and on terminal commands in general. also bear in mind that react and...
TypeScript support in Svelte - Learn web development
h the ctrl + ` keyboard shortcut), cmd/ctrl + clicking on the file name will take you to the line containing the error. you can also run the validate script in watch mode with npm run validate -- --watch. in this case, the script will execute whenever you change any file. if you are running this in your regular terminal, you are advised to keep it running in the background in a separate terminal
window of its own so that it can keep reporting errors but won't interfere with other terminal usage. creating a custom type typescript supports structural typing. structural typing is a way of relating types based solely on their members, even if you do not explicitly define the type. we'll define a todotype type to see how typescript enforces that anything passed to a component expecting a todotype...
Getting started with Svelte - Learn web development
you need to have node.js installed. it's recommended that you use the long-term support (lts) version. node includes npm (the node package manager), and npx (the node package runner). note that you can also use the yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using
windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbash (which comes as part of the git for
windows toolset) or
windows subsystem for linux (wsl) are both suitable. cmder is another very good and complete alternative. see command line crash course for more information on these, and on terminal c...
Working with Svelte stores - Learn web development
like log, status and alert. in our case, just adding a role="alert" to the <div> container will do the trick, like this: <div role="alert" on:click={() => visible = false}> in general, testing your applications using screen readers is a good idea, not only to discover accessibility issues but also to get used to how visually impaired people use the web. you have several options, like nvda for
windows, chromevox for chrome, orca on linux, and voiceover for mac os x and ios, among other options. to learn more about detecting and fixing accessibility issues check out our handling common accessibility problems article. using the store contract to persist our todos our little app lets us manage our todos quite easily, but is rather useless if we always get the same list of hardcoded todos when...
Git and GitHub - Learn web development
that includes all the essential information you need to work towards your goal. get started prerequisites to use git and github, you need: a desktop computer with git installed on it (see the git downloads page). a tool to use git. depending on how you like to work, you could use a git gui client (we'd recommend github desktop, sourcetree or git kraken) or just stick to using a terminal
window. in fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a gui. a github account. if you haven't already got one, sign up now using the provided link. in terms of prerequisite knowledge, you don't need to know anything about web development, git/github or vcses to start this module. however, it is recommended that you know s...
Learn web development
ant to copy them all to your computer, the easiest way is to download a zip of the latest master code branch. if you prefer to copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions: install git on your machine. this is the underlying version control system software that github works on top of. open your computer's command prompt (
windows) or terminal (linux, macos). to copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: git clone https://github.com/mdn/learning-area you can now enter the directory and find the files you are after (either using your finder/file explorer or the cd command). you can update the learning-a...
Information for Assistive Technology Vendors
assistive technology vendors accessibility features in mozilla & call for testers! mozilla now has enough accessibility support that we're reading for early adopters and testers to start giving it a try. please read this page if you're interested in an alternative accessible browser. keyboard documentation this lists mozilla's keyboard docs in a single long document. gecko info for
windows accessibility vendors mozilla supports msaa (microsoft active accessibility) in html and in our user interface (based on xul technology). this makes it possible for the vendors of
windows accessibility software, such as screen readers, voice dictation packages and screen magnifiers to provide support for mozilla. in addition, we provide some simple interfaces via which we expose a read-only do...
Information for External Developers Dealing with Accessibility
ss reference should be helpful at anyone looking at implementing accessibility api support for a product on multiple platforms. contains info on accessible roles, states and events. accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget. in addition, here is a list of official keyboard ui guidelines for each desktop:
windows keys: guidelines on keyboard ui design and on implementing keyboard shortcuts: an excellent resource from microsoft. mac keys: keyboard shortcuts quick reference for mac os x complete reference on keyboard for mac os x: this document list all functions of specified keys, known keyboard shortcuts, explains how to create keyboard shortcuts, explains appropriate use for the a...
Information for users
p topics (from the menubar: ? > help contents f1 > accessibility features) which describe any special features and keyboard shortcuts designed to help users with disabilities. please check the accessibility help topic for more information. firefox accessibility features this page defines most of the accessibility features possible in firefox. features include assistive technology support on
windows (like
window-eyes, jaws, etc.), firefox keyboard support, available accessibility extensions like fire vox and other extensions. assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input software and on screen keyboards...
Links and Resources
ury 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. it can work offline. it can also report accessibility errors and warnings according to selectable accessibility guidelines (section 508, wcag priorities 1, 2 or 3). its accessibility report is viewable in the view source
window. this html advanced validator may also be downloaded from firefox add-ons: 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 ...
Mozilla Plugin Accessibility
4 above. the plugin will be responsible for bubbling up shift+tab and tab when the user has reached the end of the tab cycle within the plugin. the bug tracking this work is bug 93149. ? no target 3. many plugins lack accessibility api support most plugins that work with mozilla do not yet support accessibility apis. a notable acception is the adobe pdf plugin on
windows, which supports msaa. in other cases, vendors need to find or be convinced of the business justification so that resources are applied to the problem. plugin vendors. unknown 4. seamonkey has no message bar for plugin installation the message bar will be ported to seamonkey as part of the toolkit merging work that will occur for xulrunner. mozilla communit...
Frequently Asked Questions for Lightweight themes
to-use skins that change the look of your firefox web browser. there are hundreds of thousands community-designed themes to choose from, with more added every day. start looking here for designs that fit your style. what kind of computers and operating systems do lightweight themes work with? lightweight themes work with any type of computer that has firefox installed. this includes mac, linux,
windows, and android platforms. what can lightweight themes do? lightweight themes change the header area of your browser, including the tab text color and the background tab colors. you can easily preview a design and install it without needing to restart. installing lightweight themes how do i add lightweight themes to my firefox? in just a few seconds, you can install a theme and transform the...
Testopia
rom the bugzilla team for his work in making this possible. testopia 2.4 this version supports bugzilla 3.6. important notice: if you are upgrading on a case sensitive filesystem you must remove the existing testopia folder in the extensions directory. if you have made modifications to the testopia source code, you will need to merge them into the new testopia folder (capital t). if you are on
windows or another case insensitive file system you should first rename the folder (testopia-old for example) and then unzip the tarball. you can then merge your changes before deleting the old version. api users take note: positional parameters are now deprecated. all params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls key, value pairs). though all atte...
Creating JavaScript callbacks in components
but you can use the same magic in your own idl callbacks. the nsidomeventlistener interface is "marked" with the function attribute. see it here. the function attribute tells the xpconnect machinery to treat the javascript function as if it was...
Creating a Firefox sidebar
extension can be an option. the document might be obsolete, though.obsolete since gecko 57 the social api obsolete since gecko 57 (firefox 57 / thunderbird 57 / seamonkey 2.54)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this content covers features introduced in firefox 17. the
window.sidebar api obsolete since gecko 23 (firefox 23 / thunderbird 23 / seamonkey 2.20)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. as of firefox 23, the addpanel and addpersistentpanel functions have been removed from the deprecated, netscape-derived
window.sidebar object. that means the...
Debugging JavaScript
ort the console utility: const { console } = components.utils.import("resource://gre/modules/devtools/console.jsm", {}); this has an advantage over dump in that you can list out properties of an object logged with console.log. dump() the dump() function allows you to print text on the native console. use \n to output a newline at the end. to see anything, you need to set the pref browser.dom.
window.dump.enabled to true, e.g. in about:config (add new pref, it doesn't exist per default). under microsoft
windows you additionally need to start firefox via the following command to have a native console : firefox.exe -console using normal javascript object inspection, you can write a function that dumps a whole object, similar to this ddumpobject(). log.jsm (formerly log4moz) this is a part...
Debugging OpenGL
e future when it happens to run and crash. if an opengl error occurred when executing the call, an error message is output. note: you can download debug builds from mozilla taskcluster — click an appropriate platform's debug build on the left, e.g. linux64-debug, then find the build link on the right hand side (this would be target.tar.bz2 for linux, target.dmg for macos, and target.zip for
windows). if you need more verbose debug output, you can enable the verbose debug mode by defining the environment variable moz_gl_debug_verbose. with this enabled, messages are printed before and after every opengl call. this can help make it much easier to debug crashes and hangs that make the computer unusable (thereby stymieing attempts to debug). the moz_gl_debug_abort_on_error environment varia...
Debugging Safari
to enable the very useful debug menu in safari use the following: defaults write com.apple.safari includeinternaldebugmenu 1 it is often useful to switch into single process mode by turning off "use multi-process
windows" ...
Makefiles - Best practices and suggestions
latform specific logic within a makefile as possible, a conditional and compiler flags at most should be needed. for ex use defines within sources to shift platform logic into your source code. if a unit test is platform specific write your makefile so it can be used on all platforms but only do work on the specific hardware or class of hardware. for classes of hardware (unix/
windows) place your makefile in a subdirectory, unix/makefile.in always include dependencies when creating a target initial make call should always be the workhorse: build, generate, deploy, install, etc. all subsequent make calls must become a nop unless sources or dependencies change or have been removed. incorrect dependencies will contribute to wasted...
How Mozilla's build system works
ir@ include $(depth)/config/autoconf.mk module = layout library_name = gkbase_s # requires and cppsrcs omitted here for brevity # # we don't want the shared lib, but we want to force the creation of a static lib. force_static_lib = 1 include $(topsrcdir)/config/rules.mk the key here is setting force_static_lib = 1. this creates libgkbase_s.a (on unix) and gkbase_s.lib on
windows and copies it to dist/lib. now, let's take a look at how to link several static libraries together to create a component: depth = ../.. topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = layout library_name = gklayout export_library = 1 is_component = 1 module_name = nslayoutm...
Gecko Logging
glevel::warning, ("loop took %dms!", elapsed)); } } if (i != 10) { moz_log(slogger, loglevel::error, ("i should be 10!")); } } enabling logging the log level for a module is controlled by setting an environment variable before launching the application. it can also be adjusted by setting prefs. by default all logging output is disabled. set moz_log="example_logger:3" in the
windows command prompt (cmd.exe), don't use quotes: set moz_log=example_logger:3 if you want this on geckoview example, use the following adb command to launch process: adb shell am start -n org.mozilla.geckoview_example/.geckoviewactivity --es env0 "moz_log=example_logger:3" there are special module names to change logging behavior. you can specify one or more special module names without logging l...
Reviewer Checklist
cy review if needed. resource leaks in java, memory leaks are largely due to singletons holding on to caches and collections, or observers sticking around, or runnables sitting in a queue. in c++, cycle-collect as needed. if javascript can see your object, it probably needs to be cycle-collected. [fennec: if your custom view does animations, it's better to clean up runnables in ondetachfrom
window().] ensure all file handles and other closeable resources are closed appropriately. [fennec: when writing tests that use paintedsurface, ensure the paintedsurface is closed when you're done with it.] performance impact check for main-thread io [fennec: android may warn about this with strictmode]. remove debug logging that is not needed in production. threading issues enormous: corre...
Developer guide
ebugging find helpful tips and guides for debugging mozilla code. performance performance guides and utilities to help you make your code perform well (and to play nicely with others). the mozilla platform information about the workings of the mozilla platform. mozilla much more additional information about mozilla coding practices. adding apis to the navigator object how to augment the
window.navigator object with additional apis. interface compatibility guidelines for modifying scriptable and binary apis in mozilla. customizing firefox information about creating customized versions of firefox. task-graph generation what controls the jobs that run on a push to version control? how can you change that? obsolete build caveats and tips a place to put build tips which are no long...
Index
otects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. this article explains how the new policy works and how you can test it. 171 tracking protection privacy, private browsing, blocking, tracking starting in version 42, firefox desktop and firefox for android include built-in tracking protection. in private browsing
windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites. 172 security best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this article will help firefox developers understand the security controls in place and avoid common pitfalls ...
Firefox
with broad compatibility, the latest in web technologies, and powerful development tools, firefox is a great choice for both web developers and end users. firefox is an open source project; much of the code is contributed by our huge community of volunteers. here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics. ...
Using the Browser API
wser-like applications. it was originally used in firefox os to implement browser applications before that project was cancelled; since firefox 47 it is available to desktop chrome code and used in places like the firefox devtools. it consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser
window to the embedded content. this means that
window.top,
window.parent,
window.frameelement, etc. should not reflect the frame hierarchy. api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface. note: an iframe enhanced by the browser api is commonly referred to as a "browser...
HTMLIFrameElement.getContentDimensions()
note: the values returned are equivalent to document.body.scrollwidth and document.body.scrollheight. syntax var instanceofdomrequest = instanceofhtmliframeelement.getcontentdimensions(); returns a domrequest for handling the dimensions request. its request.onsuccess handler handles the success case, and its request.onerror handler handles the failure case. the x and y dimensions are available in the request.result.x and request.result.y properties, respectively. ...
mozbrowseractivitydone
ser.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 mozbrowseropen
window 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 mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowservisibilitychange
ventlistener("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 mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange ...
HTMLIFrameElement.setVisible()
is used to define the level of resources required by the browser <iframe>. if the visible state is set to true, it means that the browser <iframe> should have high priority over the resources needed to render and handle its content. on the contrary, if its visible state is set to false, it has low priority over the resources it needs. as an example, if the content of a browser <iframe> uses the
window.requestanimationframe method and if the visible state is set to true,
window.requestanimationframe will be called as often as necessary. however, if the visible state is set to false,
window.requestanimationframe will be called only when there are free resources to do it. syntax instanceofhtmliframeelement.setvisible(visible); returns void. parameters visible a boolean that indicates if ...
Chrome-only CSS reference
this page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg. ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these. -moz-
window-draggingthe -moz-
window-dragging css property specifies whether a
window is draggable or not. it only works in chrome code, and only on mac os x.:-moz-lwthemethe :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz...
MozScrolledAreaChanged
property type description targetread only eventtarget the event target (the topmost target in the dom tree). typeread only domstring the type of event. bubblesread only boolean whether the event normally bubbles or not. cancelableread only boolean whether the event is cancellable or not. viewread only
windowproxy document.defaultview (
window of the document) detailread only long (float) 0. widthread only long (int) the width of the visible region of the document. heightread only long (int) the height of the visible region of the document. xread only long (int) the x coordinate of the left edge of the visible region of the document. ...
Chrome-only Events reference
this page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg. ua widgets). mozbeforepaintgecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same
window.mozscrolledareachangedthe mozscrolledareachanged event is fired when the document view has been scrolled or resized. smartcard-insertthe smartcard-insert event is fired when the insertion of a smart card has been detectedsmartcard-removethe smartcard-remove event is fired when the removal of a smart card has been detected. ...
Gecko SDK
eta, it is suitable for building extensions; your component should work with release builds of the sdk without any modifications. due to the rapid release process, it may be a good idea to target the sdk in beta. ...
Creating a New Protocol
e. the method signatures can be read from the generated pnewprotocolparent.h and pnewprotocolchild.h headers. writing the tests protocols which are managed by pbrowser must be tested using the mochitest-chrome test framework with a <browser remote="true">. it is acceptable to use synchronous calls on jpw wrappers for testing purposes. it may be possible to test protocols unrelated to a particular
window using the xpcshell testing framework, which has additional primitives in electrolysis for launching and running js commands in a content process. ...
JavaScript Tips
var uniquename = { _privatemember: 3, publicmember: "a string", init: function() { this.dosomething(this.anothermember); }, dosomething: function(aparam) { alert(aparam); } }; xpconnect don't use object methods and properties more than you have to. it is often faster to store the result in a temporary variable. don't call methods that you don't have to. for instance,
windowmanager.getenumerator(atype).hasmoreelements() may be replaced with
windowmanager.getmostrecent
window(atype) != null for a single
window. don't query interfaces unless you need to access methods and properties of that interface. you do not have to query interfaces to compare objects, nor to pass objects as parameters (this is different from c++, where you do have to query interfaces in both cases...
Addon
type read only string the type of the add-on. userdisabled boolean true if the user wants this add-on to be disabled. version read only string the version of the add-on. optional properties attribute type description abouturl read only string the url of the about dialog to display for this add-on. this is passed to
window.opendialog() when presenting the about dialog. if you don't provide an abouturl, a generic about dialog is displayed. the dialog receives the addon object representing your add-on as a parameter. applybackgroundupdates integer indicates whether updates found in the background for this add-on will be applied automatically. see auto update values. the user is provided a ui for this i...
Add-on Manager
you can pass the url to a page in the add-on manager tab to load that page. 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. these pages show you how to load pages such as services page etc. ...
DownloadSource
a downloadsource object represents the source of a download, for example a document or an uri. properties attribute type description url read only string the uri for the download source. isprivate read only boolean indicates whether the download originated from a private
window. this determines the context of the network request that is made to retrieve the resource. referrer read only string referrer uri of the download source, or null if no referrer should be sent or the download source is not http. ...
OS.File.Error
oes not exist, false otherwise. becauseclosed true if the operation failed because a file or directory is closed, false otherwise. platform-specific attributes unixerrno (defined under unix only) the system error number (errno) for the error. for more details, you may compare it with the error constants of os.constants.libc.e*. winlasterror (defined under
windows only) the system error number (getlasterror) for the error. for more details, you may compare it with the error constants of os.constants.win.error_*. ...
PerfMeasurement.jsm
, from within the application itself or an add-on. before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") see measuring performance using the perfmeasurement.jsm code module for details on how to use this api. note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for
windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems. method overview static bool canmeasuresomething(); void reset(); void start(); void stop(); member fields recorded data variables these variables provide access to the recorded data. any measurable event that was not being recorded has a value of -1 (that is, 0xffffffffffffffff). note: t...
Services.jsm
string bundle service sysinfo nsipropertybag2 system info service telemetry nsitelemetry telemetry service tm nsithreadmanager thread manager service urifixup nsiurifixup uri fixup service urlformatter nsiurlformatter url formatter service vc nsiversioncomparator version comparator service wm nsi
windowmediator
window mediator service ww nsi
windowwatcher
window watcher service 1 mobile only 2
windows only 3 main process only 4 child process only ...
Using JavaScript code modules
can be observed in the other scope. scope 1: components.utils.import("resource://app/my_module.jsm"); alert(bar.size + 3); // displays "6" bar.size = 10; scope 2: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "13" this sharing behavior can be used to create singleton objects that can share data across
windows and between xul script and xpcom components. note: each scope that imports a module receives a by-value copy of the exported symbols in that module. changes to the symbol's value will not propagate to other scopes (though an object's properties will be manipulated by reference). scope 1: components.utils.import("resource://app/my_module.jsm"); bar = "foo"; alert(bar); // displays "fo...
WebChannel.jsm
between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code
window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code
window.dispatchevent(new
window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
Webapps.jsm
ad: function canceldownload(amanifesturl, aerror) startofflinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpackage(adata, amm) pushcontentaction: function(
windowid) popcontentaction: function(
windowid) actioncancelled: function(
windowid) denyinstall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _read...
Bootstrapping a new locale
.x/security/manager/locales/ mozilla-1.9.x/toolkit/locales/ and then copied them so that the files for localization end up in the following directories: ab-cd/browser/ ab-cd/dom/ ab-cd/netwerk/ ab-cd/other-licenses/branding/firefox/ ab-cd/security/manager/ ab-cd/toolkit/ translating to start editing, you will need a text editing application. you can choose to use: notepad++ or notepad2 on
windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x. (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by th...
Index
ocalizable files themselves, too. these comments are generally referred to as localization notes. there is an established format for those, which is described in this document. 11 localization prerequisites internationalization, localization, delete to work on localization, you need a subset of the mozilla build prerequisites. on mac and linux, you should be just fine, and on
windows, mozillabuild should get you everything you need. 12 localization quick start guide guide, translation this guide is filled with all of the basic, technical information you need to get involved in the mozilla l10n program. 13 initial setup localization as a pre-requisite to contributing to the l10n program, you need to have access to code, tools, and a p...
Localizing with Mozilla Translator
re alternate solutions; read on). a bit of history on mt mt has been evolving from long ago, when l10n were done always on shipped en-us jars and when mozilla suite had five l10n jars: ab-cd.jar, ab-win.jar, ab-mac.jar, ab-unix.jar, and cd.jar. mt thus referred to ab-cd.jar contents as ''platform neutral'' platform, cd.jar as '''region''' platform (or regional files), and the other three as ''
windows platform'', ''mac platform'' and ''unix platform''. this jar structure is now used just by seamonkey 1.1.x. when mozilla l10n switched to ''source l10n'', one of the many problems that mt had to solve was how to fit a directory structure in what had been designed for five jars, and the ''patch'' consisted of providing a ''read from dir instead of jar'' and ''put everything inside platform neutr...
Localizing without a specialized tool
ated directory. your compare locales output follows the exact nested source structure. each time you see a directory or set of sub-directories, you will need to run the mkdir command inside your locale directory and then copy the .dtd or .properties files into that directory. translating to start editing, you will need a text editing application. you can choose to use: notepad++ or notepad2 on
windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x. (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (l10n-mozilla-1.9.2/x-testing/browser/chrome/browser) $ edit l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translat...
Initial setup
nstructions here. locale switcher or quick locale switcher both locale switcher and quick locale switcher are add-ons for mozilla applications. either one is necessary to enable you to see your work within a mozilla application. you can install either by searching for them in firefox's add-ons manager or following these links. a solid, unicode-based, text editor here are some suggestions:
windows: notepad++ or notepad2 gnu/linux: vim, gedit or kate mac os x: textwrangler gnu make make is a tool which controls the generation of executables. you can find version 3.79.1 or higher here. unfortunately, other varieties of make won't do. end of initial setup now that you've finished your initial setup, it's time for the best part: translating! « previousnext » ...
SVN for Localizers
d files back onto the server. installing svn client: linux users can download the svn client from http://subversion.apache.org/packages.html or install packages provided within their distribution (for example, in debian, sudo apt-get install subversion). mac os x users can find svn inside the command line tools (available on the apple developer website), or use tools like homebrew or fink.
windows users can install the svn client directly from the cygwin setup file. if you already installed cygwin but it didn't include the svn package, run the cygwin installer again and be sure to check the box beside subversion package. this option is found in the devel category. a possible alternative is to install tortoisesvn (graphical interface and command line client). note: if you do not already ...
Creating localizable web applications
ght require putting the word firefox in the correct grammatical case. image 4. bad: image 5 & snippet 1. good: image file (/img/tignish/firefox/performance-chart.png): html: (in this case, no gettext was used and the localizers worked on pure html files) <div id="performance-chart"> <h4>firefox performance: fast — faster — <em>fastest</em></h4> <p>results of a sunspider test on a
windows xp machine</p> <img src="/img/tignish/firefox/performance-chart.png" alt="firefox 2, firefox 3, firefox 3.5 performance chart" /> <ul> <li>18,148 ms</li> <li>3,669 ms</li> <li>1,524 ms!</li> </ul> </div> in the above example, not only does the text above the clock charts require translation, but so do the milliseconds captions below them. many languages use different number f...
What every Mozilla translator should know
content type: patch mark the approval1.9.xxx with ? asking for approval (use the appropriate branch) if you get the approval you will see who_is_ap:approval1.8.xxx+ now, you can upload the changes approved to the cvs server. when you commit the changes you must write in the comment the bug number, what you have changed and who has approved. for example: bug 12345, fix typos and resize pref
window, a=l10n as soon as you have committed, put the bug in fixed state and write fixed1.8.xxx in the keyword field you have to verify in the next build that the changes have been successful. if so, change the state of the bug to verified and write verified1.8.xxx in the keyword field tinderbox in tinderbox you can see the result of the build process. once you have made some changes in mercuria...
Basics
complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations y = a x + b , etc. notice how the mathematics appear in the main flow of text and respond as you resize the
window. you can also make displayed equations, such as the following ones: x → maps to y = f n ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a ≤ η ≤ b | x | = { - x if x < 0 x otherwise you can also typeset 2d mathematical...
Extras
script html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlistener("denum"); }
window.addeventlistener("load", init); ...
MathML Torture Test
amily: xits math; } javascript content function updatemathfont() { var mathfont = document.getelementbyid("mathfont").value; if (mathfont == "default") { document.body.removeattribute("class"); } else { document.body.setattribute("class", mathfont); } } function load() { document.getelementbyid("mathfont"). addeventlistener("change", updatemathfont, false) }
window.addeventlistener("load", load, false); the following test contains sample tex formulas from knuth's tex book and equivalent mathml representations. 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 appr...
MathML In Action
</mstyle> </math> </p> javascript content function zoomtoggle() { if (this.hasattribute("mathsize")) { this.removeattribute("mathsize"); } else { this.setattribute("mathsize", "200%"); } } function load() { document.getelementbyid("zoomablemath"). ...
Mozilla Development Strategies
nch means dealing with conflicts when you land, and waiting a long time for reviews. here's how to create a branch: from your linux or mac os x box: # start from your trunk tree on your local disk cd mozilla find . -type d \! -name cvs | xargs -l -p10 cvs tag -l my_base_tag > & ../taglog1.txt find . -type d \! -name cvs | xargs -l -p10 cvs tag -b -l my_branch_tag > & ../taglog2.txt from your
windows box: cvs co -r my_branch_tag mozilla/client.mak cd mozilla edit client.mak, putting my_branch_tag in the right places. cvs commit client.mak nmake -f client.mak original document information author(s): seth spitzer and alec flett last updated date: september 3, 2006 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content avail...
Activity Monitor, Battery Status Menu and top
n which case it disappears immediately. and it appears that a program with an “energy impact” of roughly 20 or more will eventually show up as significant, and programs that have much higher “energy impact” values tend to show up more quickly. all of these battery status menu observations are difficult to make reliably and so should be treated with caution. it is clear, however, that the
window used by the battery status menu is measured in seconds or minutes, which is much less than the 8 hour
window used for “average energy impact” in activity monitor. top top is similar to activity monitor, but is a command-line utility. to see power-related measurements, invoke it as follows. top -stats pid,command,cpu,idlew,power -o power -d note: -a and -e can be used instead of -d to get...
BloatView
xpcom_mem_log_classes=myclass [options] for getting allocation stacks in automation, you can add the appropriate --setenv options to the test configurations for the platforms you're interested in. those configurations are located in testing/mozharness/configs/. the most likely configs you'll want to modify are listed below: linux: unittests/linux_unittest.py mac: unittests/mac_unittest.py
windows: unittests/win_unittest.py android: android/androidarm_4_3.py how to instrument your objects for bloatview first, if your object is an xpcom object and you use the ns_impl_addref and ns_impl_release (or a variation thereof) macro to implement your addref and release methods, then there is nothing you need do. by default, those macros support refcnt logging directly. if your object is not an...
JS::PerfMeasurement
the js::perfmeasurement class, found in jsperf.h, lets you take detailed performance measurements of your code. it is a stopwatch profiler -- that is, it counts events that occur while code of interest is running; it does not do call traces or sampling. ...
Measuring performance using the PerfMeasurement.jsm code module
he application itself or an add-on. the first thing you need to do is to import the module into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") you can then create a perfmeasurement object. you give the constructor a bit-mask of events you're interested in; see note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for
windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems. for instance, let's measure instructions executed, cache references, and cache misses: let monitor = new perfmeasurement(perfmeasurement.cpu_cycles | perfmeasurement.cache_references | perfmeasurement.cache_misses); this creates a new perfmeasurement object, configured to record the specif...
Refcount tracing and balancing
ut where refcounting went wrong. how to build for refcount tracing build with --enable-debug or --enable-logrefcnt. how to run with refcount tracing on there are several environment variables that can be used. first, you select one of three environment variables to choose what kind of logging you want. you almost certainly want xpcom_mem_refcnt_log. note: due to an issue with the sandbox on
windows (bug 1345568), refcount logging currently requires the moz_disable_content_sandbox environment variable to be set. xpcom_mem_refcnt_log setting this environment variable enables refcount tracing. if you set this environment variable to the name of a file, the log will be output to that file. you can also set it to 1 to log to stdout or 2 to log to stderr, but these logs are large and expe...
tools/power/rapl
. sudo $objdir/dist/bin/rapl alternatively, it can be run without root privileges by setting the contents of /proc/sys/kernel/perf_event_paranoid to 0. note that if you do change this file, its contents may reset when the machine is next rebooted. you must be running linux kernel version 3.14 or later for rapl to work. otherwise, it will fail with an error message explaining this requirement.
windows unfortunately, rapl does not work on
windows, and porting it would be difficult because
windows does not have apis that allow easy access to the relevant model-specific registers. output the following is 10 seconds of output from a default invocation of rapl. total w = _pkg_ (cores + _gpu_ + other) + _ram_ w #01 5.17 w = 1.78 ( 0.12 + 0.10 + 1.56) + 3.39 w #02 9.43 w = 5.44 ( 1.44...
accessibility.tabfocus
the preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key. note: on mac os x, if this preference is not set, the full keyboard access setting in system preferences > keyboard is honored. type:integer default value: 7 (
windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.7 status: active introduction: bugs: bug 140612 values 1 give focus only to text fields (default on mac osx) 2 give focus to all form elements except text fields. 4 give focus only to links and linked images. other you can add these values to combine their functionality. the value 7 (give focus to all elements) is the default on
windows and linux. ...
nglayout.debug.disable_xul_cache
n is displayed. the xul cache is serialized and saved between mozilla sessions in the xul fastload file, which saves a “compiled” version of the xul and javascript in a document to disk for faster startup the next time the application runs. during development of xul applications, it’s convenient to disable the xul cache so that changes you make to files on disk take effect the next time the
window or dialog is loaded (instead of the next time mozilla starts). possible values and their effects: true: do not cache parsed xul documents and do not save the cache to the xul fastload file on exit; re-read the source files each time the
window or dialog needs to be displayed. false: cache xul documents in memory and save the cache to disk on exit to improve performance. (default) see also: http:...
Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.browser.altclicksavethe preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.browser.dom.
window.dump.enabledthis setting enables the dump function, which sends messages to the system console. set it to true to enable it, or false to disable it.browser.dom.
window.dump.filebrowser.dom.
window.dump.file redirects the ouput of
window.dump() calls to a file whose address is specified in this preference if browser.dom.
window.dump.enabled is set to true. changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory pr...
Leak Monitor
leak monitor is a firefox extension by l. david baron that helps extension and chrome developers to find memory leaks. it will pop-up an alert when a
window is closed and javascript still links to that
window (for example, an observer that is not cleared when the
window closes). obtain the extension on amo (addons.mozilla.org) view more information on leak monitor on david baron's page ...
Leak And Bloat Tests
number from build to build where no source code has changed. provide reasonable coverage for the normal activities that a user performs. method current method: measure leaks and bloats, in a similar way to firefox (using xpcom_mem_leak_log and --trace-malloc). the method of testing memory bloat and leaks will be the same sequence of events, using the same set of test data. 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. results printed on tinderbox output, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap size mail a allocations - nu...
Midas editor module security preferences
ences. warning: changing these preferences can leave your browser insecure, especially if you grant permission to untrusted sites. only change these settings as needed to try the demo above and to test your own add-on or firefox-internal code, and be sure to restore the default settings when you're done! changing the preferences in firefox quit firefox. if you have quick launch running (on
windows, this is an icon in the toolbar), quit that too. find your firefox profile directory. open the user.js file from that directory in a text editor. if there's no user.js file, create one. add these lines to user.js: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); user_pref("capability.policy.
Midas
gnmode by setting this property to "on", the document becomes editable. notes since an entire document becomes editable, authors often load the editable document into an iframe and do the bulk of the scripting in the parent document. according to standards, the iframe element has the contentdocument property that refers to the document in the inline frame. it also has a property called content
window that refers to the
window object inside the inline frame. this also avoids problems with bug 198155. in addition to the built-in commands, advanced editing can be done by manipulating the selection and range objects. it is beneficial to be familiar with these objects when working with an editable document. examples this example shows the basic structure described in the notes section : <html>...
NSPR release procedure
ibutions using the "gmake release" makefile target. these binary distributions are jar files, which are really zip files, and they are published in the directory /share/builds/components. this design comes from the netscape days. the repackage.sh script repackages the jar files into the form most commonly used on that platform. so on unix it repackages the jar files into gzipped tar files, and on
windows it repackages the jar files into zip files. edit the repackage.sh script to customize it for your environment. after you have run repackage.sh, follow the instructions in to upload the files to ftp.mozilla.org's staging server, so that they eventually show up on ftp.mozilla.org. the host ftp.mozilla.org can be accessed via the ftp, http, and https protocols. we recommend using https://ftp.mozill...
IPC Semaphores
this chapter describes the nspr api for using interprocess communication semaphores. nspr provides an interprocess communication mechanism using a counting semaphore model similar to that which is provided in unix and
windows platforms. note: see also named shared memory ipc semaphore functions ipc semaphore functions pr_opensemaphore pr_waitsemaphore pr_postsemaphore pr_closesemaphore pr_deletesemaphore ...
I/O Functions
nctions that operate on pathnames a file or directory in a file system is specified by its pathname. nspr uses unix-style pathnames, which are null-terminated character strings. only the ascii character set is supported. the forward slash (/) separates the directories in a pathname. nspr converts the slashes in a pathname to the directory separator of the native os--for example, backslash (\) on
windows and colon (:) on mac os--before passing it to the native system calls. some file systems also differentiate drives or volumes. 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...
NSPR LOG FILE
exact syntax is platform specific. description use this environment variable to specify a log file other than the default. if nspr_log_file is not in the environment, then log output is written to stdout or stderr, depending on the platform. set nspr_log_file to the name of the log file you want to use. nspr logging, when enabled, writes to the file named in this environment variable. for ms
windows systems, you can set nspr_log_file to the special (case-sensitive) value windebug. this value causes logging output to be written using the
windows function outputdebugstring(), which writes to the debugger
window. ...
PR ImportTCPSocket
returns the function returns one of the following values: upon successful completion, a pointer to the prfiledesc object created for the newly imported native tcp socket. ...
PR_OpenAnonFileMap
ize the size of the shared memory. prot how the shared memory is mapped. returns pointer to prfilemap or null on error. description if the shared memory already exists, a handle is returned to that shared memory object. on unix platforms, pr_openanonfilemap uses dirname as a directory name, without the trailing '/', to contain the anonymous file. a filename is generated for the name. on
windows platforms, dirname is ignored. ...
PR_Poll
nting a socket or a pollable event. this field can be set to null to indicate to pr_poll that this prfiledesc object should be ignored. on unix, the fd field can be set to a pointer to any prfiledesc object, including one representing a file or a pipe. cross-platform applications should only set the fd field to a pointer to a prfiledesc object representing a socket or a pollable event because on
windows the select function can only be used with sockets. in_flags a bitwise or of the following bit flags: pr_poll_read: fd is readable. pr_poll_write: fd is writable. pr_poll_except: fd has an exception condition. out_flags a bitwise or of the following bit flags: pr_poll_read pr_poll_write pr_poll_except pr_poll_err: fd has an error. pr_poll_nval: fd is bad. note that the ...
PR_ReadDir
es an open directory. flags specifies which directory entries, if any, to skip. values can include the following: pr_skip_none. do not skip any files. pr_skip_dot. skip the directory entry "." representing the current directory. pr_skip_dot_dot. skip the directory entry ".." representing the parent directory. pr_skip_both. skip both "." and ".." pr_skip_hidden. skip hidden files. on
windows platforms and the mac os, this value identifies files with the "hidden" attribute set. on unix platform, this value identifies files whose names begin with a period ("."). returns a pointer to the next entry in the directory. if the end of the directory is reached or an error occurs, null. the reason can be retrieved via pr_geterror. description pr_readdir returns a pointer to a dir...
NSPR
escribes each api public macro, structure and function in the nspr api. nspr build instructions how to checkout and build from source. nspr release process how to prepare an nspr release. legacy nspr content older nspr content is available in svn for browsing and/or migration to this site getting nspr nspr is available in various source and binary packages, depending on your platform:
windows: build the source package, using the nspr build instructions. mac: install the macports nspr package, or the homebrew nspr package. ubuntu: install the libnspr4-dev package via apt-get. debian: install the libnspr4-dev package via apt-get. opensuse linux: install one or more of the following via yast or zypper : mozilla-nspr : binary libraries for your platform mozilla-nspr-32bit : ...
Cryptography functions
getslotseries mxr 3.2 and later pk11_getsymkeynickname mxr 3.4 and later pk11_getsymkeytype mxr 3.9 and later pk11_getsymkeyuserdata mxr 3.11 and later pk11_gettokeninfo mxr 3.2 and later pk11_gettokenname mxr 3.2 and later pk11_get
window mxr 3.2 and later pk11_getwrapkey mxr 3.2 and later pk11_hashbuf mxr 3.2 and later pk11_hasrootcerts mxr 3.4 and later pk11_importcert mxr 3.5 and later pk11_importcertforkeytoslot mxr 3.2 and later pk11_importcrl mxr 3...
NSS FAQ
mplete software development kit that uses the same architecture used to support security features in many client and server products from netscape and other companies. what platforms and development environments are supported? this section is out of date iplanet e-commerce solutions has certified nss 3.1 on 18 platforms, including aix 4.3, hp-ux 11.0, red hat linux 6.0, solaris (2.6 or later),
windows nt (4.0 or later), and
windows 2000. other contributors are in the process of certifying additional platforms. the nss 3.1 api requires c or c++ development environments. for the latest nss release notes and detailed platform information, see project information. what cryptography standards are supported? nss supports ssl v2 and v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, and x.509...
NSS 3.12.9 release notes
bug 536485: crash during ssl handshake in [@ intel_aes_decrypt_cbc_256] bug 444367: nss 3.12 softoken returns the certificate type of a certificate object as ckc_x_509_attr_cert. bug 620908: certutil -t -d "sql:." dumps core bug 584257: need a way to expand partial private keys. bug 596798: ...
NSS 3.14.1 release notes
imarily for purposes of testing. new functions in ocspt.h cert_createocspsingleresponsegood cert_createocspsingleresponseunknown cert_createocspsingleresponserevoked cert_createencodedocspsuccessresponse cert_createencodedocsperrorresponse new types in ocspt.h certocspresponderidtype notable changes in nss 3.14.1
windows ce support has been removed from the code base. bug 812399 - in nss 3.14, a regression caused bug 641052 / cve-2011-3640 to be re-introduced under certain situations. this regression only affected applications that initialize nss via the nss_nodb_init function. nss 3.14.1 includes the complete fix for this issue. bug 357025 - nss 3.14 added support for tokens that make use of cka_always_auth...
NSS 3.14.2 release notes
linux systems in 64-bit mode, nss will include runtime detection to check if the platform supports aes-ni and pclmulqdq. if so, nss uses the optimized code path, reducing the cpu cycles per byte to 1/20 of what was required before the patch (https://bugzilla.mozilla.org/show_bug.cgi?id=805604 and https://crypto.stanford.edu/realworldcrypto/slides/gueron.pdf). support for other platforms, such as
windows, will follow in a future nss release. (https://bugzilla.mozilla.org/show_bug.cgi?id=540986) sqlite has been updated to 3.7.15. note: please apply the patch in https://bugzilla.mozilla.org/show_bug.cgi?id=837799 if you build nss with the system sqlite library and your system sqlite library is older than 3.7.15. bug 816853 - when using libpkix for certificate validation, applications may now s...
NSS 3.15.1 release notes
lue in the sslextensiontype enum type. new pkcs #11 mechanisms none. notable changes in nss 3.15.1 bug 856060 - enforce name constraints on the common name in libpkix when no subjectaltname is present. bug 875156 - add const to the function arguments of sec_certnicknameconflict. bug 877798 - fix ssltap to print the certificate_status handshake message correctly. bug 882829 - on
windows, nss initialization fails if nss cannot call the rtlgenrandom function. bug 875601 - secmod_closeuserdb/secmod_openuserdb fails to reset the token delay, leading to spurious failures. bug 884072 - fix a typo in the header include guard macro of secmod.h. bug 876352 - certutil now warns if importing a pem file that contains a private key. bug 565296 - fix the bug that shlibsign exited wit...
NSS 3.15.4 release notes
ms none. notable changes in nss 3.15.4 reordered the cipher suites offered in ssl/tls client hello messages to match modern best practices. updated the set of root ca certificates (version 1.96). improved ssl/tls false start. in addition to enabling the ssl_enable_false_start option, an application must now register a callback using the ssl_setcanfalsestartcallback function. when building on
windows, os_target now defaults to win95. to use the winnt build configuration, specify os_target=winnt. bugs fixed in nss 3.15.4 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.4&product=nss compatibility nss 3.15.4 shared libraries are backward compat...
NSS 3.16.2 release notes
.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_rtm/src/ new in nss 3.16.2 new functionality dtls 1.2 is supported. the tls application layer protocol negotiation (alpn) extension is also supported on the server side. rsa-oeap is supported. use the new pk11_privdecrypt and pk11_pubencrypt functions with the ckm_rsa_pkcs_oaep mechanism. new intel aes assembly code for 32-bit and 64-bit
windows, contributed by shay gueron and vlad krasnov of intel. new functions in cert.h cert_addextensionbyoid - adds an extension to a certificate. it is the same as cert_addextension except that the oid is represented by a secitem instead of a secoidtag. in pk11pub.h pk11_privdecrypt - decrypts with a private key. the algorithm is specified with a ck_mechanism_type. pk11_pube...
NSS 3.17 release notes
ephemeral ecdh key is reused for multiple handshakes. this option does not affect the tls client code, which always generates a fresh ephemeral ecdh key for each handshake. new macros in ssl.h ssl_reuse_server_ecdhe_key notable changes in nss 3.17 the manual pages for the certutil and pp tools have been updated to document the new parameters that had been added in nss 3.16.2. on
windows, the new build variable use_static_rtl can be used to specify the static c runtime library should be used. by default the dynamic c runtime library is used. bugs fixed in nss 3.17 this bugzilla query returns all the bugs fixed in nss 3.17: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17 ...
NSS 3.40 release notes
he draft-00 version of encrypted sni support is implemented tstclnt now takes -n option to specify encrypted sni key new functions none notable changes in nss 3.40 the mozilla::pkix library has been ported from mozilla psm to nss. this is a c++ library for building certification paths. mozilla::pkix apis are not exposed in the libraries nss builds. it is easier to build nss on
windows in mozilla-build environments. the following ca certificates were removed: cn = visa ecommerce root sha-256 fingerprint: 69fac9bd55fb0ac78d53bbee5cf1d597989fd0aaab20a25151bdf1733ee7d122 bugs fixed in nss 3.40 bug 1478698 - ffdhe key exchange sometimes fails with decryption failure this bugzilla query returns all the bugs fixed in nss 3.40: https://bugzill...
NSS 3.45 release notes
rv does not yet support delegated credentials. see bug 1548360. note: in 3.45 the sslchannelinfo is left unmodified, while an upcoming change in 3.46 will set sslchannelinfo.authkeybits to that of the delegated credential for better policy enforcement. see bug 1563078. ...
NSS 3.50 release notes
bug 1547639 - update zlib in nss to 1.2.11 bug 1609181 - detect arm (32-bit) cpu features on freebsd bug 1602386 - fix build on freebsd/powerpc* bug 1608151 - intr...
NSS 3.54 release notes
sha-256 fingerprint: eb04cf5eb1f39afa762f2bb120f296cba520c1b97db1589565b81cb9a17b7244 a number of certificates had their email trust bit disabled. see bug 1618402 for a complete list. bugs fixed in nss 3.54 bug 1528113 - use arm cryptography extension for sha256. bug 1603042 - add tls 1.3 external psk support. bug 1642802 - add uint128 support for hacl* curve25519 on
windows. bug 1645186 - add "certsign root ca g2" root certificate. bug 1645174 - add microsec's "e-szigno root ca 2017" root certificate. bug 1641716 - add microsoft's non-ev root certificates. bug 1621151 - disable email trust bit for "o=government root certification authority; c=tw" root. bug 1645199 - remove addtrust root certificates. bug 1641718 - remove "luxtrust global root 2" root certific...
NSS 3.56 release notes
g 1648822 - add stricter validation of dh keys in fips mode. bug 1656986 - properly detect arm64 during gyp build architecture detection. bug 1652729 - add build flag to disable rc2 and relocate to lib/freebl/deprecated. bug 1656429 - correct rtt estimate used in 0-rtt anti-replay. bug 1588941 - send empty certificate message when scheme selection fails. bug 1652032 - fix failure to build in
windows arm64 makefile cross-compilation. bug 1625791 - fix deadlock issue in nssslot_istokenpresent. bug 1653975 - fix 3.53 regression by setting "all" as the default makefile target. bug 1659792 - fix broken libpkix tests with unexpired paypal cert. bug 1659814 - fix interop.sh failures with newer tls-interop commit and dependencies. bug 1656519 - update nspr dependency to 4.28. this bugzilla q...
NSS API Guidelines
that logic into the allocators. knowing what to then free does takes discipline not to leak memory, but it simplifies things a lot. also, the implementation of free works (doesn't crash), no matter if from an arena, or the heap, as long as from our allocators. combined with purify, this also helps us catch cases where things being allocated by one allocator are freed by another, which is a common
windows pitfall. the security code often wants to be sure to zero memory, when it's being freed; we'll add it to the primitives to deal with. the arena_threadmark preprocessor definition (default in debug builds), and code it encloses, will add some checking for the following situation: thread a marks the arena, and allocates some memory from it. thread b allocates some memory from the arena. th...
NSS Sample Code Utilities_1
pr_close(fd); if (nb == 0) { fprintf(stderr,"password file contains no data\n"); port_free(phrases); return null; } if (slot) { tokenname = pk11_gettokenname(slot); if (tokenname) { tokenlen = port_strlen(tokenname); } } i = 0; do { int startphrase = i; int phraselen; /* handle the
windows eol case */ while (phrases[i] != '\r' && phrases[i] != '\n' && i < nb) i++; /* terminate passphrase */ phrases[i++] = '\0'; /* clean up any eol before the start of the next passphrase */ while ( (i<nb) analyze="" char="" current="" getmodulepassword="" if="" int="" now="" passphrase="" phrase="&phrases[startphrase];" phraselen="" pk11slotinfo="" pwdat...
Utilities for nss samples
pr_close(fd); if (nb == 0) { fprintf(stderr,"password file contains no data\n"); port_free(phrases); return null; } if (slot) { tokenname = pk11_gettokenname(slot); if (tokenname) { tokenlen = port_strlen(tokenname); } } i = 0; do { int startphrase = i; int phraselen; /* handle the
windows eol case */ while (phrases[i] != '\r' && phrases[i] != '\n' && i < nb) i++; /* terminate passphrase */ phrases[i++] = '\0'; /* clean up any eol before the start of the next passphrase */ while ( (i<nb) && (phrases[i] == '\r' || phrases[i] == '\n')) { phrases[i++] = '\0'; } /* now analyze the current passphrase */ phrase...
nss tech note2
r displays all activity between nss and a specified pkcs #11 module. it works by inserting a special set of entry points between nss and the module. to enable the module logger, you must set the environment variable nss_debug_pkcs11_module to the name of the target module. for example, to log the softoken, use: nss_debug_pkcs11_module="nss internal pkcs #11 module" note: in the command prompt on
windows, do not quote the name of the target module, otherwise the quotes are considered part of the name. for example, to log the softoken on
windows, use: set nss_debug_pkcs11_module=nss internal pkcs #11 module the logger is available by default in debug builds. for optimized builds, nss must be built with the variable debug_pkcs11 set. modes of operation the logger has several modes of operat...
PKCS11 module installation
rnal certificate stores. this article covers the two methods for installing pkcs #11 modules into firefox. users can use the preferences dialog to install or remove pkcs #11 module. extensions can programmatically manage pkcs #11 modules using the nsipkcs11 programming interface. note: the information in this article is specific to firefox 3.5 and newer. older versions of firefox may support the
window.pkcs11 property for installing pkcs #11 modules. 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. choose "advanced" > "encryption" > "security devices" choose "load" enter a name for the security module, such as "my client database". note: there is currently a bug in firefo...
NSS PKCS11 Functions
argument is pr_true can result in an endless loop. several functions in the nss libraries use the password callback function to obtain the password before performing operations that involve the protected information. the third parameter to the password callback function is application-defined and can be used for any purpose. for example, mozilla uses the parameter to pass information about which
window is associated with the modal dialog box requesting the password from the user. when nss ssl libraries call the password callback function, the value they pass in the third parameter is determined by ssl_setpkcs11pinarg. see also for examples of password callback functions, see the samples in the samples directory. ...
PKCS11 Implement
d c_unwrapkey are optional. the nss always attempts to use these two functions but uses c_encrypt and c_decrypt instead if c_wrapkey and c_unwrapkey aren't implemented. installation you can install your module in any convenient location on the user's hard disk, but you must tell the user to type the module name and location in the cryptographic modules portion of the communicator security info
window. to do so, the user should follow these steps: click the security icon near the top of any communicator
window. in the security info
window, click cryptographic modules. in the cryptographic modules frame, click add. in the create a new security module dialog box, add the security module name for your module and the full pathname for the security module file. to avoid requiring the user to ...
FC_Initialize
rved should be null. the library parameters string has this format: "configdir='dir' certprefix='prefix1' keyprefix='prefix2' secmod='file' flags= " here are some examples. ...
NSS functions
getslotseries mxr 3.2 and later pk11_getsymkeynickname mxr 3.4 and later pk11_getsymkeytype mxr 3.9 and later pk11_getsymkeyuserdata mxr 3.11 and later pk11_gettokeninfo mxr 3.2 and later pk11_gettokenname mxr 3.2 and later pk11_get
window mxr 3.2 and later pk11_getwrapkey mxr 3.2 and later pk11_hashbuf mxr 3.2 and later pk11_hasrootcerts mxr 3.4 and later pk11_importcert mxr 3.5 and later pk11_importcertforkeytoslot mxr 3.2 and later pk11_importcrl mxr 3...
NSS tools : crlutil
t will be used to control crl generation/modification. see crl-cript-file format below. if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard input. -d directory specify the database directory containing the certificate and key database files. on unix the certificate database tool defaults to $home/.netscape (that is, ~/.netscape). on
windows nt the default is the current directory. the nss database files must reside in the same directory. -i crl-import-file specify the file which contains the crl to import -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthoriz...
troubleshoot.html
remember to set use_64=1 testing nss the ssl stress test opens 2,048 tcp connections in quick succession. kernel data structures may remain allocated for these connections for up to two minutes. some systems may not be configured to allow this many simultaneous connections by default; if the stress tests fail, try increasing the number of simultaneous sockets supported. building jss
windows only: the shell invoked by gmake, shmsdos.exe, is likely to crash when invoking some java tools on
windows. the current workaround is to use some other shell in place of shmsdos, such as sh.exe, which should be distributed with the cygnus toolkit you installed to build nss. the change is unfortunately rather drastic: to trick gmake, you rename the shell program. cd c:/programs/cygnus/bin ...
pkfnc.html
ent is pr_true can result in an endless loop. several functions in the nss libraries use the password callback function to obtain the password before performing operations that involve the protected information. the third parameter to the password callback function is application-defined and can be used for any purpose. for example, communicator uses the parameter to pass information about which
window is associated with the modal dialog box requesting the password from the user. when nss libraries call the password callback function, the value they pass in the third parameter is determined by ssl_setpkcs11pinarg. see also for examples of password callback functions, see the samples in the samples directory. ...
sslfnc.html
ing operations that involve the protected information. when nss libraries call the password callback function, the value they pass in as the third parameter is the value of the a argument to pk11_setpkcs11pinarg. the third parameter to the password callback function is application-defined and can be used for any purpose. for example, communicator uses the parameter to pass information about which
window is associated with the modal dialog box requesting the password from the user. you can obtain the pin argument by calling ssl_revealpinarg. callback configuration at the beginning of an ssl application, it is often necessary to set up callback functions for the ssl api to use when it needs to call the application. these functions are used to request authentication information from the ...
NSS Tools certutil
l derive its authenticity. use the exact nickname or alias of the ca certificate, or use the ca's email address. bracket theissuer string with quotation marks if it contains spaces. -d directory specify the database directory containing the certificate and key database files. on unix the certificate database tool defaults to $home/.netscape (that is, ~/.netscape). on
windows nt the default is the current directory. the cert8.db and key3.db database files must reside in the same directory. -p dbprefix specify the prefix used on the cert8.db and key3.db files (for example, my_cert8.db and my_key3.db). this option is provided as a special case. changing the names of the certificate and key databases is not recommended. ...
NSS Tools crlutil
tion. see crl-cript-file format below. if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard input. -d directory specify the database directory containing the certificate and key database files. on unix the certificate database tool defaults to $home/.netscape (that is, ~/.netscape). on
windows nt the default is the current directory. the nss database files must reside in the same directory. -i crl-import-file specify the file which contains the crl to import -f password-file specify a file that will automatically supply the password to include in a certif...
NSS tools : crlutil
. see crl-cript-file format below. if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard input. -d directory specify the database directory containing the certificate and key database files. on unix the certificate database tool defaults to $home/.netscape (that is, ~/.netscape). on
windows nt the default is the current directory. the nss database files must reside in the same directory. -i crl-import-file specify the file which contains the crl to import -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a pl...
Network Security Services
mers of this list must consider the trust bit setting for each included root certificate. more information, extracting roots and their trust bits nss is built on top of netscape portable runtime (nspr) netscape portable runtime nspr project page. nspr reference nspr api documentation. ...
Multithreading in Necko
ed page loads, file url loads, and jar url loads all utilize the file transport service. the jar protocol handler, for rexample, passes a special nsiinputstream impl that does gzip decoding on the fly. dns thread (0-1) on most platforms dns requests a processed on a background thread. however, the details of the implementation are heavily platform dependent. for example, on xp_win an invisible
window is created with a message pump on a background thread for processing wsa asynchronous dns events. in this way, necko takes advantage of the platforms specific routines for dns lookups. the default implementation does not spawn a worker thread, and instead simply calls pr_getipnodebyname (essentially equivalent to gethostbyname). original document information author(s): darin fisher last upd...
The JavaScript Runtime
ssion obj["3"] will invoke the get(int, scriptable) method even though the property name was presented in the script as a string. similarly, values of numbers that do not fix in integers (like 1.1 and 0x100000000) must be converted to strings. defining host objects host objects are javascript objects that provide special access to the host environment. for example, in a browser environment, the
window and document objects are host objects. the easiest way to define new host objects is by using scriptableobject.defineclass(). this method defines a set of javascript objects using a java class. several of the examples define host objects this way. if the services provided by defineclass are insufficient, try other methods of scriptableobject and functionobject, such as defineproperty and define...
Scripting Java
rt() js> running rhino also allows use of javascript functions as implementations of java interfaces with more than one method if all the methods have the same signature. when calling the function, rhino passes the method's name as the additional argument. function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.add
windowlistener(function(event, methodname) { if (methodname == "
windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.setsize(100, 100); js> frame.visible = true; true js> calling system.exit()... creating java arrays rhino provides no special syntax for creating java arrays. you must use the java.lang.reflect.array class for this purpose. to...
Rhino shell
in>", line 18: uncaught javascript exception: java.io.ioexception: bad_command: not found js> // passing explicit environment to the system shell js> runcommand("sh", "-c", "echo $env1 $env2", { env: {env1: 100, env2: 200}}) 100 200 0 js> // use args option to provide additional command arguments js> var arg_array = [1, 2, 3, 4]; js> runcommand("echo", { args: arg_array}) 1 2 3 4 0 examples for
windows are similar: js> // invoke shell command js> runcommand("cmd", "/c", "date /t") 27.08.2005 0 js> // run sort collectiong the output js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> // invoke notepad and wait until it exits js> runcommand("notepad") 0 ...
Shumway
an use the version hosted on mozilla's github. several methods exist to allow inspector access to your swf file. once your flash content is loaded, you can see how shumway manages it in detail. several buttons are available at the bottom of the screen to enable or disable various shumway options. note: if your applet runs at an abnormal speed, try toggling "turbo" at the bottom of the inspector
window. you may wish to do this before opening your swf file. limitations of shumway might be encountered through testing. there are two places where shumway bugs are tracked: github (via issues and pull requests) manages problems relating to shumway, itself. bugzilla is intended for problems with integrating shumway into firefox. end-users and less involved developers may report issues by hover...
Rebranding SpiderMonkey (1.8.5)
types --with-system-nspr note: your desired configuration may be different. the only required part in this step is the ../configure command. so far, so good. now for the tricky parts. we need to perform a recursive find and replace text operation on all files in the current directory. in the unix world we would issue the following command: find ./ -type f -exec sed -i "s/mozjs185/$brand/" {} \;
windows users: notepad++ can be used to perform the recursive find and replace text operation. if you have failed to insert your brand name in any of the previous steps where it is called for, you must delete this build directory and restart this process from the beginning. this time paying careful attention to the commands you issue to your command shell. the above command has actually changed some inf...
SpiderMonkey compartments
e collecting of individual compartments, in addition to global collection. spidermonkey simply assumes that all objects referenced from outside the compartment are live, and then walks the object graph inside the compartment. objects that are found to be disconnected from the graph are discarded. with this new per-compartment garbage collection we shortcut having to walk unrelated heap areas of a
window or tab that triggered a garbage collection. see also js_newcompartmentandglobalobject() js_entercrosscompartmentcall() js_leavecrosscompartmentcall() jsautocompartment invariants spidermonkey internals: thread safety andreas gal blog post bobby holley blog post sfink/contexts_and_compartments xpconnect security membranes ...
JS::CompileOptions
:readonlycompileoptions method description bool mutederrors() const determines if errors are muted. the web platform allows scripts to be loaded from arbitrary cross-origin sources. this allows an attack by which a malicious website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a
window.onerror handler) for juicy morsels of its contents. to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded. callers should set this flag for cross-origin scripts, and it will be propagated appropriately to child scripts and passed back in jserrorreports. const char *filena...
JSErrorReport
column unsigned zero-based column index in line in the source that caused the error. ismuted bool the web platform allows scripts to be loaded from arbitrary cross-origin sources. this allows an attack by which a malicious website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a
window.onerror handler) for juicy morsels of its contents. to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded. callers should set this flag for cross-origin scripts, and it will be propagated appropriately to child scripts and passed back in jserrorreports. linebuf const ch...
JSObjectPrincipalsFinder
ameprincipals and js_evalframeprincipals also use this callback. since it is very common for jsobjectops.checkaccess or jsclass.checkaccess hooks to call these functions, the object principals finder callback is a key security feature. the callback returns a pointer to the principals associated with obj, possibly via the immutable parent chain leading from obj to a top-level container (such as a
window object in the dom). if there are no principals associated with obj, return null. therefore null does not mean an error was reported; in no event should an error be reported or an exception be thrown by this callback's implementation. the callback should not call jsprincipals_hold. see also bug 784551 ...
JS_GetGlobalObject
te: use js_getglobalforobject or js_getglobalforscopechain instead. the concept of a global object belonging to a context will likely be phased out in future versions of spidermonkey. js_getglobalobject retrieves the global object for a specified jscontext *, cx. this returns null if cx has no global object. spidermonkey supports applications that have multiple global objects, such as the various
window objects in a web browser. the object returned by js_getglobalobject is not necessarily the same thing as the global object seen by any javascript code that runs in cx! if a function is executing, the global object used by that function is determined when the function is created. furthermore, some jsapi functions, such as js_executescript, allow the caller to specify a global object in which the s...
JS_ObjectIsDate
cx jscontext * pointer to a javascript context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * jsobject that should be checked. description js_objectisdate() can be used to check if you are dealing with a date object, or a date object used across compartments (or
windows or sites, in the browser embedding). this function returns true if the object is a date. see also mxr id search for js_objectisdate js_newdateobject js_newdateobjectmsec bug 625870 ...
JS_SetGCZeal
a runtime, for the purpose of finding or reproducing bugs. there are several different levels which have different functions: zeal level description 0 normal amount of collection. the default: no additional collections are performed. 1 collect when roots are added or removed. 2 collect when every frequency allocations. 3 collect on
window paints. 4 verify pre write barriers between instructions. 5 verify pre write barriers between
window paints. 6 verify stack rooting. 7 collect the nursery every frequency nursery allocations. 8 incremental gc in two slices: 1) mark roots 2) finish collection. 9 incremental gc in two slices: 1) mark all 2) new marking and fini...
JS_ShutDown
rations have completed, to be future-proof. it is currently not possible to initialize spidermonkey multiple times (that is, calling js_init, then other jsapi methods, then js_shutdown in that order, then doing so again). this restriction may eventually be lifted. implementation note: this method has been used to clean up memory allocated by jsdtoa.cpp, memory allocated to implement date.now() on
windows, and when the internationalization api is enabled, memory internally allocated by icu. exact details about what this method cleans up will vary depending upon the version of spidermonkey in use. see also mxr id search for js_shutdown js_init js_newruntime js_destroyruntime js_newcontext js_destroycontext ...
SpiderMonkey 1.8.5
in the javascript shell, mostly useful for testing spidermonkey. the scatter function has been removed, and a shell worker class (similar to html dom workers) has been added. known issues mac os x 10.5 (leopard) and xcode 3.2 spidermonkey will not build with certain builds of apple's gcc 4.2 c++ compiler. to check what version you are running, issue the command /usr/bin/g++-4.2 -v from a terminal
window. the following builds are known to not work: i686-apple-darwin9-g++-4.2.1 (gcc) 4.2.1 (apple inc. build 5574) to work around this issue, either upgrade your xcode or use an alternate version of gcc, such as the one that shipped with leopard. to select an alternate c++ compiler, invoke configure thus: cxx=/usr/bin/g++-4.0 /path/configure --my-configuration-options js-config the new configure-ba...
SpiderMonkey 1.8.7
in the javascript shell, mostly useful for testing spidermonkey. the scatter function has been removed, and a shell worker class (similar to html dom workers) has been added. known issues mac os x 10.5 (leopard) and xcode 3.2 spidermonkey will not build with certain builds of apple's gcc 4.2 c++ compiler. to check what version you are running, issue the command /usr/bin/g++-4.2 -v from a terminal
window. the following builds are known to not work: i686-apple-darwin9-g++-4.2.1 (gcc) 4.2.1 (apple inc. build 5574) to work around this issue, either upgrade your xcode or use an alternate version of gcc, such as the one that shipped with leopard. to select an alternate c++ compiler, invoke configure thus: cxx=/usr/bin/g++-4.0 /path/configure --my-configuration-options js-config the new configure-ba...
SpiderMonkey 1.8
t may bypass the resolve hook. js_newdouble is now deprecated. use js_newdoublevalue. the security apis js_setcheckobjectaccesscallback, js_setprincipalstranscoder, and js_setobjectprincipalsfinder are still present but are deprecated in this release. in spidermonkey 1.8.1 they will be removed and replaced with a new set of apis (js_getsecuritycallbacks and friends, bug 451729). js.mak, an old
windows-specific nmake file, has been deleted. it hasn't worked for a long time. it is fairly easy to create a microsoft visual studio project file for spidermonkey 1.8 from scratch. (if you would like to contribute and maintain a project file, please feel free to contact the spidermonkey team via email, bugzilla, or irc.) alternatively, you can install mozillabuild and run the command make -f makefile.
SpiderMonkey 52
spidermonkey 52 is the javascript engine that shipped in firefox 52. it continues to improve performance over previous spidermonkey releases. ...
SpiderMonkey releases
e tip of the gecko tree minimally working as an embeddable source package. we are very limited in our ability to support older versions, including those labeled as "releases" on this page. the easiest way to fetch the version corresponding to the current firefox release is to visit the treeherder page for the release repository and click on the first sm(pkg) link you see. that will open a small
window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2". past releases spidermonkey 52 spidermonkey 45 spidermonkey 38 spidermonkey 31 spidermonkey 24 spidermonkey 17 spidermonkey 1.8.8 spidermonkey 1.8.7 spidermonkey 1.8.5 spidermonkey 1.8 ...
Setting up CDT to work on SpiderMonkey
general", then "preprocessor include patterns". under the "providers" group tab, select "cdt gcc build output parser" and add the string |(ccache) to the end of the "compiler command pattern" text input. start the build by selecting "build all" from the "project" menu. start the indexer by either: selecting "index > rebuild" from the project's context menu located in the project explorer
window, or selecting "c/c++ index > rebuild" from the "project" menu. and that is pretty much it: large parts of spidermonkey should now be indexed. unfortunately, there are also large parts that are not properly indexed, leading to errors and warnings being shown for perfectly valid code, but i find that the parts that do work do so nicely enough to make it totally worth it. ...
Shell global objects
ld be. some of these modes can be set simultaneously, by passing multiple level options, e.g. "2;4" will activate both modes 2 and 4. modes can be specified by name or number. ...
TPS Tab Lists
ges/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. tabs.verify - verifies that the specified tabs can be found in the specified profile. tabs.verifynot - verifies that the specified tabs cannot be found in the specified profile. there are a handful of static pages at http://hg.mozilla.org/services/tps/file/tip/pages which can be used for tab testing, and data: url's can be used as well. example see the tps tabs unit test: http://hg.mozill...
TPS Tests
on steps for you. even if you opt not to use restmail, do not use your personal firefox account, as tps will delete and replace the data in it many times, not to mention the first run is very likely to fail, since it expects a clean start). 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. steps get the source code clone mozilla-central (choose your flavor): hg clone hg.mozilla.org/mozilla-central or git clone github.com/mozilla/gecko-dev cd into the tps folder cd testing/tps create the environment i suggest the path to be outside of the mc source tree python create_venv.py --username=%email% --password=%password% %pa...
Web Replay
ebugger integration is currently only able to handle js code that runs on the main thread. webgl is not supported yet, as it uses a pretty different rendering path from normal web content. media elements are not supported yet, as many of these run third party multithreaded code which hasn't been tested with the infrastructure. porting almost all implementation work so far has been on macos.
windows port work is underway, but is not yet working. the difficulties are in figuring out the set of system library apis to intercept, in getting the memory management and dirty memory parts of the rewind infrastructure to work, and in handling the different graphics and ipc pathways on different platforms. comparison with other projects there is lots of existing work in this area. the closest pro...
WebReplayRoadmap
(bug 1304147) webrtc (bug 1304149) webassembly (bug 1481007) webgl (bug 1506467) support more operating systems (not yet implemented) only macos is supported right now. web replay's architecture should allow it to work on any operating system: the os features needed are not specific to macos or to posix systems. still, porting it to other posix systems (linux, android) will be easier than
windows, due to the overlap with macos. there is, however, a partial
windows port from an older version of the architecture that can replay a simple page but not rewind, which should make writing a complete
windows port easier. cloud integration (partially implemented) storing recordings in the cloud and interacting with them via the debugger could streamline several features described above: diff...
compare-locales
installation compare-locales needs to be installed, and it requires that you have python 2.7 or 3.5+ installed on your machine. the easiest way is to just run $ pip install -u compare-locales running it compare-locales gathers the directories to compare from a toml file, usually found in $app/locales/l10n.toml. the details of the configuration file are described in the l10n-config docs. ...
Mozinfo
it defined what we are checking for. mozinfo proposes to solve this problem. mozinfo is a bridge interface, making the underlying (complex) plethora of os and architecture combinations conform to a subset of values of relevance to mozilla software. the current implementation exposes relevant key, values: os, version, bits, and processor. additionally, the service pack in use is available on the
windows platform. api usage mozinfo is a python package. downloading the software and running python setup.py develop will allow you to do import mozinfo from python. mozinfo.py is the only file contained is this package, so if you need a single-file solution, you can just download or call this file through the web. the top level attributes (os, version, bits, processor) are available as module glob...
Mozilla Projects
neral javascript code. l20n l20n lets localizers reach higher levels of free linguistic expression by sharpening the divide between localization and application logic. leak monitor leak monitor is a firefox extension by l. david baron that helps extension and chrome developers to find memory leaks. it will pop-up an alert when a
window is closed and javascript still links to that
window (for example, an observer that is not cleared when the
window closes). mailnews mailnews stands for "mail and newsgroups". mailnews is the back end of the messaging parts of seamonkey and thunderbird. it provides a number of functions and capabilities, including: ...
Using RAII classes in Mozilla
on the heap, or in static storage. this involves just one addition to the class, and the inclusion of attributes.h: class moz_raii nsautoscriptblocker {...} this is much simpler and more thorough than the guardobject runtime assertions, but are unfortunately currently only run on mac os x and linux builds, which means that guardobject should still be used for raii guards which may be used in
windows-only code. assertions runtime assertions offer two benefits - firstly, they run on
windows, which the static analysis currently does not, and secondly they will run locally, even if the developer did not choose to run static analysis locally. the static analys runtime assertions are often better at catching bugs in code that a developer is currently working on than static analysis, which he m...
Signing Mozilla apps for Mac OS X
of accounts only allow for the "agent" role to create developer ids. contact the person who created your group apple developer account if you get stuck here. the codesign tool apple provides a tool called codesign; this command-line application is used to add a signature to an application bundle. the man page for codesign is available online, or you can simply type "man codesign" in a terminal
window. the main options of note are: -s your-signing-identity lets you specify the signing certificate you want to sign the application with your-signing-identity is the name of your certificate. --keychain /path/to/keychain lets you specify which keychain contains the signing certificate specified by your-signing-identity, rather than allowing the codesign to search the keychain list. the path s...
Gecko object attributes
orms: from boud instance node datatype draggable true when the accessible object can be grabbed. dropeffect indicates what functions can be performed when the dragged object is released on the drop target. refer to aria-dropeffect for the list of possible values. grabbed true when the accessible object has been selected for dragging. haspopup true when the object displays a pop-up menu or
window when invoked. applied to: state_haspopup exposed in aria: aria-haspopup note: this is only supported on atk/at-spi. on msaa, state_system_haspopup is used. sort if "ascending" or "descending", then child items within the container are currently sorted as indicated. applied to: any container exposed in aria: aria-sort image related attributes src src attribute is placed on html image ...
ROLE_ALERT
« gecko roles page represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. should be used for warning dialogs, etc. mapped to at-spi: role_alert atk: atk_role_alert msaa/ia2: role_system_alert ua: nsaccessibility
windowrole events event_alert - fires when the widget is shown. used by aria: alert, alertdialog xul: <notification/>, <panel noautofocus = "true"/> ...
AT Development
the progress and technology as it has developed. guidelines at apis implementation by gecko at vendors guide to support gecko-based applications like firefox, thunderbird and so on. accessibility architecture how the accessibility hierarchy is implemented in mozilla (some issues aren't addressed by previous guide). building xulrunner with python how to build xulrunner with python on
windows. then comtypes gives access to msaa and iaccessible2. references at apis implementation references shows how gecko handles atk, iaccessible2, msaa and universal access api accessible web specifications references provides the map of reflecting web specification to at apis. this page includes: aria references - w3c specification reflecting aria mapping into at apis. xforms refe...
XForms Accessibility
ow. for firefox, you may directly download the nighly "trunk" build of firefox and install the xforms extension which lives in 'xpi' directory of the build. note, xforms accessibility is implemented only on trunk. trunk builds are not considered stable and should not be installed on top of the firefox used for daily browsing. currently we have verified that xforms accessibility is working on the
windows platform, and linux testing has not yet been done, although everything should work and is ready to be tested. you will find trunk builds of firefox at ftp.mozilla.org, trunk builds of xforms extension (
windows) at ftp.mozilla.org or trunk builds of xforms extension (linux) ftp.mozilla.org. build it yourself if you would like to build firefox/seamonkey yourself then please ensure your .mozconfi...
Accessibility API Implementation Details
these pages contain documentation on mozilla specific implementation details of assistive technology apis. at apis supportthis documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software. we provide for them the support of these products on
windows, linux/unix and os x platforms.at developmentthe accessibility of computer software has seen drastic improvements over the past two decades. this article (from 2007) reviews the progress and technology as it has developed. xforms accessibilitythis article provides a quick guide to how accessibility is handled in gecko for xforms.xul accessibilitythis article shows how xul control elements are mapped to accessibili...
Using the Places history service
sited returns true, the link gets the "visited" style. otherwise, the link is colored as unvisited. nsiglobalhistory3.getgeckoflags: retrieves information previously set using setgeckoflags. it is not yet implemented in the places history system. nsibrowserhistory.lastpagevisited: contains the uri of the last page visited. this is used when the preference is set that causes the last page in new
windows. nsibrowserhistory.count: the number of pages in history. this is used by the "clear history" button to determine if there are any pages in history. because actually counting all the pages in history is expensive,navhistory will always return the value 0 or 1. 0 is returned when there is no history, 1 is returned when there are one or more pages in history.deprecated, use hashistoryentries inst...
places.sqlite Database Troubleshooting
proceed, make a backup of the firefox profile folder, in any case. create a folder to use temporarily for this work, such as my_work_folder. copy places.sqlite-corrupt from the firefox profile folder to the work folder. download the latest precompiled binary sqlite command-line shell from: https://www.sqlite.org/download.html extract sqlite3 executable into the work folder. 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> .clone places.sqlite sqlite> pragma user_version; note the version number returned by the last pragma query. sqlite> .exit open a new shell for the new database: my...
Preferences API
preferences api allows you to save and read strings, numbers, booleans, and references to files to the preferences store. it is relatively easy to use, while providing a number of useful user and developer features, including support for default preferences, user overrides via user.js, and locking. you can also create a xul-based options
window easily to allow user modify some preferences. many applications including firefox and thunderbird have an additional tool for power users, about:config, which can be used to tweak the preferences without ui. interfaces the preferences api is exposed as a set of xpcom components and interfaces: nsiprefservice, nsiprefbranch. ... see also code snippets:preferences (more detailed discussion with multiple examples) ...
FUEL
d in thunderbird ("steel") and in seamonkey ("smile"). objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueli
window xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); ...
SMILE
tion interface that implements all the functions of extiapplication. the library has also been implemented in firefox ("fuel") and in thunderbird ("steel"). objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smilei
window smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/smile/application;1"].getservice(components.interfaces.smileiapplication); ...
extIApplication
ge object for the application. events readonly attribute extievents the events object for the application. supports: "load", "ready", "quit", "unload" the following interfaces are only available to firefox: attribute type description bookmarks readonly attribute fuelibookmarkroots the root bookmarks object for the application.
windows readonly attribute nsivariant an array of browser
windows within the application. active
window readonly attribute fueli
window the currently active browser
window. methods quit() attempts to shutdown the application. it is possible for the shutdown to be canceled. boolean quit() return value boolean value indicating whether the shutdown was successful. restart()...
Bundling multiple binary components
dynamic method loading stub loader dynamic method loading the idea with this approach is to figure out all the methods imported from gecko and dynamically load the methods. create small wrappers for calling the methods, as you may need to thunk parameters depending on how much has changed between gecko versions. this means using something like loadlibrary / getprocaddress / freelibrary on
windows. actually, nspr has portable versions of those features that work across platforms. this approach uses only one binary for each platform (win/mac/linux) but creates complexity in the binaries - loading the methods and creating the wrappers. the costs get higher if you have many methods that need to be loaded. stub loader this approach involves using a stub loader component. the stub component...
Creating a Python XPCOM component
, so it's fairly easy to pass information from one to the other. note: there are exceptions; see this discussion for information on the use of string and wstring for unicode transfer. see here for info on describing interfaces, and on which types can be used. registering the interface in the "components" directory, execute : ../xpidl -m typelib -w -v -i /usr/share/idl/mozilla/ nsipysimple.idl on
windows you must point to the idl directory as part of your mozilla build. for example: xpidl.exe -m typelib -w -v -i c:\source\mozilla\obj-i686-pc-mingw32\dist\idl foo.idl xpidl will then create nsipysimple.xpt, which should be placed correctly (e.g., in the 'components' directory). implementing the component unlike c++, pyxpcom does much of the work for you. make a file named "py_simple.py" for the a...
Generating GUIDs
te: if you do choose to use an email-style id for your add-on, you probably don't want it to be a real email address, since it might attract spam. online tools generate guid online uuid (guid) generator on the web uuid generator for mozilla code (both idl and c++.h forms) you can get a guid from one of the bots (such as botbot, firebot) on #firefox irc channel by /msging "uuid" to them.
windows
windows users can use the guidgen tool from microsoft to obtain a guid. (this tool is also part of ms visual c++) linux use /usr/bin/uuidgen. this can be found in package uuid-runtime (debian). mac os x use /usr/bin/uuidgen. perl jkeiser's mozilla tools include a uuid generator with output format of both c++ and idl style. sfink's update-uuids will change the uuid for a given interface...
An Overview of XPCOM
s on the latter - extending gecko - but the fundamental ideas in the book will be important to developers embedding gecko as well. gecko is used in many internet applications, mostly browsers and most notably mozilla firefox. components xpcom allows you to break up large software projects into smaller pieces known as components. they are usually contained in reusable binary libraries (a dll on
windows, for example, or a dso on unix), which can include one or more components. when two or more related components are grouped together in a binary library, the library is referred to as a module. modular, component-based programming makes software easier to develop and maintain and has some well-known advantages: benefit description reuse modular code can be reused in othe...
Component Internals
enerally implemented in xpcom, or you can skip to the next chapter, where the weblock component tutorial takes you step by step through the component creation process. xxx mediawiki...xxx sucks creating components in c++ let's start by examining how xpcom components are written in c++. the most common type of component is one that is written in c++ and compiled into a shared library (a dll on a
windows system or a dso on unix). the illustration below shows the basic relationship between the shared library containing the component implementation code you write and the xpcom framework itself. in this diagram, the outer boundary is that of the module, the shared library in which a component is defined. a component in the xpcom framework when you build a component or module and compile it int...
Creating the Component Code
or universal unique identifiers, which were discussed in object interface discovery. generating cids to generate a cid for your component, you can use the uuidgen tool that comes with most unix distributions and with microsoft visual c++. uuidgen is a command-line tool that returns a unique 128-bit number when you call it with no arguments: $ uuidgen ce32e3ff-36f8-425f-94be-d85b26e634ee on
windows, a program called guidgen.exe does the same thing and also provides a graphical user interface if you'd rather point and click. or you can use one of the special "bots" on irc in #developers, where you can also get help from human beings. irc irc.mozilla.org /join #developers /msg firebot uuid this command makes the bot generate and return a uuid, which you can then copy into your component s...
Resources
« previous this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer. ...
Starting WebLock
lfile will have a value of null. note that the out parameter of the method getfilesize is a 64-bit integer. the type of this variable is print64, but this type is not represented as a primitive on all platforms. on some platforms, print64 is a struct with two fields - a high and a low 32-bit integer. so operations on this type must use special macros that do the right thing on each platform. ...
Using XPCOM Components
in working with xpcom - especially when you are designing the interface to a component that will be used by others, as we do in starting weblock - is to look at how clients are already using xpcom components. applications like the mozilla browser are sophisticated, modularized clients of xpcom components. in fact, virtually all of the functionality that you associate with a browser - navigation,
window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces. mozilla is made of xpcom components. this chapter demonstrates how mozilla uses some of these xpcom objects, such as the cookiemanager, and shows how access to the weblock component will be defined. component examples ...
Using XPCOM Utilities to Make Things Easier
laining how all the string classes work is outside the scope of this book, but we can show you how to use strings in the weblock component. the first thing to note is that the string classes themselves are not frozen, which means that you should not link against them when you can avoid it. linking the full string library (.lib or .a) into a component may raise its footprint by more than 100k (on
windows), which in many cases is an unacceptable gain (see the xpcom string guide). for weblock, where the string classes need to be only wrappers around already existing string data, trading advanced functionality for a much smaller footprint is the right way to go. the weblock string classes don't need to append, concatenate, search, or do any other real work on the string data; they just need to repr...
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. distribution of substantively modified versions of this ...
Receiving startup notifications
r with the "app-startup" category using nsicategorymanager; having done so, the component will receive these startup notifications, including: xpcom-startup sent when xpcom finishes starting up. most application features are not yet available at this point, but xpcom itself is. app-startup sent when the application has finished starting up. final-ui-startup sent just before the first application
window is displayed. registering with the category manager to register with the category manager, simply call its nsicategorymanager.addcategoryentry() method: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "contract-id", pr_true, pr_true, ge...
How to build a binary XPCOM component using Visual Studio
mponent object model, similar to microsoft’s com technology. xpcom components can be implemented in c, c++, and javascript, and can be used from c, c++, and javascript. that means you can call javascript methods from c++ and vice versa. for more information on the workings of xpcom look elsewhere. development setup the simplest way to get an xpcom component built is to use the gecko sdk. on
windows, the sdk is built using a microsoft compiler, so you need to use one too. this tutorial uses microsoft’s free visual c++ express and the sample project in the next paragraph. you could try to use a different vendor's compiler, but you are going to need to build the sdk from source code. not the simplest thing to do and it may be incompatible with production releases of firefox, thunderbird, an...
Introduction to XPCOM for the DOM
yntax of xpidl is straightforward: #include "domstubs.idl"; [scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsidomfabian : nsisupports { void fabian(); readonly attribute boolean neat; }; this is the definition of the nsidomfabian interface. the uuid of the interface is a unique identifier. every interface needs one. you can generate them using guidgen on
windows, or by issuing the command "mozbot uuid" in #mozilla on irc.mozilla.org. at compile-time, the xpidl compiler will turn this interface definition into real c++ code, a header file that will contain the pure abstract class. this class will look like this: #define ns_idomfabian_iid \ {0xxxxxxxxx, 0xxxxx, 0xxxxx, \ { 0xxx, 0xxx, 0xxx, 0xxx, 0xxx, 0xxx, 0xxx, 0xxx }} class nsidomfabian...
Components.utils.forceGC
this case it can be important to be able to force a garbage collection cycle from javascript. another instance where it can be useful to force garbage collection is before cleaning out dead reference from a hash of weak javascript references. users should note that garbage collection is a very expensive operation and should only be forced when it is known to be absolutely necessary. note: nsidom
windowutils.garbagecollect() offers similar functionality but will trigger the cycle collector in addition to the garbage collector in the javascript engine. this will make sure that xpcom components that build cycles with javascript objects also get collected which might be important, for example for testcases that depend on the garbage collector. requires universalxpconnect privileges. if you want to ...
Components.utils.getGlobalForObject
obal = components.utils.getglobalforobject(obj); parameters obj an object whose corresponding global object is to be retrieved; non-optional, must be object-valued example var obj = {}; function foo() { } var global = this; var g1 = components.utils.getglobalforobject(foo); var g2 = components.utils.getglobalforobject(obj); // g1 === global, g2 === global, g1 === g2 // in a script in another
window var global2 = this; function bar() { } var obj2 = {}; // then, assuming bar refers to the function defined in that other
window: var o1 = components.utils.getglobalforobject(bar); var o2 = components.utils.getglobalforobject(obj2); // o1 === global2, o2 === global2 ...
Components.utils
in the scope of the specified object's compartment. dispatch() dispatches a runnable to the current/main thread. if the parameter is passed, the runnable will be dispatch in the compartment of the parameter, which affects which error reporter gets called. evalinsandbox() runs javascript code in a sandbox, usually used to run code with restricted privileges. evalin
window() removed in gecko 34. evaluate javascript code in a less-privileged javascript context. exportfunction() export a javascript function from a more-privileged to a less-privileged scope, allowing it to be called in the less-privileged scope. forcegc() forces a garbage collection cycle. forcecc() forces a cycle collection cycle. ...
Architecture basics
it lets you get pointers to components inside mozilla, and it lets you talk about their interfaces as well. xpconnect is what lets javascript talk with mozilla guts, the xpcom system. you can imagine it like a bridge between javascript code, and mozilla guts. xpcshell is a command line interface to mozilla javascript. it's an interactive interpreter -- it gives you a shell that talks straight to mozilla, via javascript's xpconnect bridge into it. ...
XPConnect wrappers
appear in the console log; for example "[object xraywrapper [object blah]]". because these are wrapped, you won't be able to peek down inside them from the console. basic xpconnect objects xpcwrappednative these objects are created when any natively implemented xpcom object (that is, any object implemented in c++) needs to be reflected into javascript. this includes all dom objects (including
window) and chrome elements that are reflected into javascript. this wrapper is responsible for mapping calls from javascript into c++. this means that when you say
window.focus(), you're calling into xpcwrappednative code. if you call 'tostring()' and get "[xpconnect wrapped nsifoo]" then the reference is to a xpcwrappednative object with interface nsifoo. they are implicitly created by xpconnect an...
xpcshell
sh /usr/lib/thunderbird-0.9/run-mozilla.sh /usr/local/mozilla/run-mozilla.sh /opt/mozilla/run-mozilla.sh /root/.trash/mozilla/run-mozilla.sh just pick one, cd over there, and run-mozilla.sh xpcshell, if it's present. (however, it might not be there if you have a non-debug version of firefox, mozilla, thunderbird, etc.) $ cd /opt/mozilla $ ./run-mozilla.sh ./xpcshell js> execute xpcshell from
window the built xpcshell.exe can't be executed under the mozilla build shell(bash). it should be executed under the
window command prompt source_directory/obj-xxxxx/dist/bin> xpcshell.exe using the latest version of javascript at present, xpcshell doesn't use the latest version of javascript, so newer language features, such as the let statement introduced in javascript 1.7, are not available. to r...
Language bindings
cope. it returns a reference to the clone:components.utils.createobjectincomponents.utils.createobjectin creates a new javascript object in the scope of the specified object's compartment.components.utils.evalinsandboxthe evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor.components.utils.evalin
windowthis function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context. the result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xraywrapper already), so it's guaranteed to behave predi...
NS_NewLocalFile
nsilocalfile** aresult ); parameters apath [in] a utf-16 string object that specifies an absolute filesystem path. this path does not need to reference an existing file. it is an error to pass a relative filesystem path. afollowlinks [in] this attribute will determine if the nsilocalfile instance will automatically resolve symbolic links. this parameter has no effect on unix systems. on
windows, passing true causes shortcuts to be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved. aresult [out] a reference to the newly created nsilocalfile instance. return values the ns_newlocalfile function returns ns_ok if successful. otherwise, it returns an error code. ns_error_file_unrecognized_path indicates that the specified path is i...
amIWebInstallInfo
.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void install(); attributes attribute type description installs nsivariant an array of addoninstall objects. read only. originatinguri nsiuri the uri that started the installs. for example, the referring page for a link to an xpi download. read only. originating
window nsidom
window the
window that started the installs. read only. note: prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5), this was an nsidom
windowinternal. methods install() starts all installs. void install(); parameters none. ...
imgICache
var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(relevantdocument); // alternatively, tools.getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie. any images from
windows in private browsing mode will not be present in the cache returned from a call with a null parameter). method overview void clearcache(in boolean chrome); nsiproperties findentryproperties(in nsiuri uri); void removeentry(in nsiuri uri); methods clearcache() evict images from the cache. void clearcache( in boolean chrome ); parameters ...
mozIAsyncFavicons
afaviconuri uri of the favicon to associate with the page. aforcereload if false, we try to reload the favicon only if we do not have it or it has expired from the cache. setting to true causes us to reload the favicon even if we have a usable copy. afaviconloadtype set to nsifaviconservice.favicon_load_private if the favicon is loaded from a private browsing
window. set to nsifaviconservice.favicon_load_non_private otherwise acallback optional once we're done setting and/or fetching the favicon, we invoke this callback. replacefavicondata() sets the data for a given favicon uri either by replacing existing data in the database or taking the place of otherwise fetched icon data when calling setandfetchfaviconforpage later. favicon data for fav...
mozIAsyncHistory
object implementing the mozivisitedstatuscallback.isvisited() method; this method will be called with the results once the request has been completed. updateplaces() adds a set of visits for one or more moziplaceinfo objects, and updates each moziplaceinfo's title or guid. note that this lets you add to history even in private browsing mode; if that's not desired you can first check whether the
window is in private browsing mode. void updateplaces( in moziplaceinfo aplaceinfo, in mozivisitinfocallback acallback optional ); parameters aplaceinfo the moziplaceinfo object[s] containing the information to store or update. this can be a single object, or an array of objects. acallback optional a mozivisitinfocallback object to be notified for each visit addition, title change,...
mozIPlacesAutoComplete
ods registeropenpage() mark a page as being currently open. note: pages will not be automatically unregistered when private browsing mode is entered or exited. therefore, consumers must unregister or register themselves. void registeropenpage( in nsiuri auri ); parameters auri the uri to register as an open page. unregisteropenpage() mark a page as no longer being open (either by closing the
window or tab, or by navigating away from that page). note: pages will not be automatically unregistered when private browsing mode is entered or exited. therefore, consumers must unregister or register themselves. void unregisteropenpage( in nsiuri auri ); parameters auri the uri to unregister as an open page. ...
nsIAccessibleCoordinateType
iptable these constants define which coordinate system a point is located in. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) prior to gecko 1.9, these constants were implemented in nsiaccessibletext. constants constant value description coordtype_screen_relative 0x00 the coordinates are relative to the screen. coordtype_
window_relative 0x01 the coordinates are relative to the
window. coordtype_parent_relative 0x02 the coordinates are relative to the upper left corner of the bounding box of the immediate parent. ...
nsIAccessibleDocument
is being displayed but not edited. if a <div> is contenteditable, then it has its own document, with iseditable == true. read only. obsolete since gecko 1.9 mimetype astring the mime type of the document. read only. title astring the title of the document, as specified in the document. read only. url astring the url of the document read only.
window nsidom
window the nsidom
window that the document resides in. read only.
windowhandle voidptr the
window handle for the os
window the document is being displayed in. for example, in
windows you can static cast it to an hwnd. read only. native code only! methods getaccessibleinparentchain() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonke...
nsIAuthPrompt2
this implementation may: coalesce identical prompts. this means prompts that are guaranteed to want the same authentication information from the user. a single prompt will be shown; then the callbacks for all the coalesced prompts will be notified with the resulting authentication information. serialize prompts that are all in the same "context" (this might mean application-wide, for a given
window, or something else depending on the user interface) so that the user is not deluged with prompts. note: this method may throw any exception when the prompt fails to queue, for example because of out-of-memory error. it must not throw when the prompt could already be potentially shown to the user. in that case information about the failure has to come through the callback. this way we prevent mu...
nsIAuthPromptWrapper
the nsiauthpromptwrapper interface is an override of nsiauthprompt which performs some action on the data going through nsiauthprompt methods. persisting data from the prompts and using it to pre-fill subsequent prompts would be one such action. embedding/components/
windowwatcher/public/nsiauthpromptwrapper.idlscriptable please add a summary to this article. last changed in gecko 1.7 inherits from: nsiauthprompt method overview void setpromptdialogs(in nsiprompt dialogs); methods setpromptdialogs() this method sets a prompt dialog using the given dialog implementation which will be used to display the prompts. void setpromptdialogs( in nsiprompt dialogs ); parameters dialogs the dialog implementation which will be used to display the prompts. see also nsiprompt nsia...
nsIBrowserBoxObject
to a xul browser element implements this interface. note: please consider using nsicontainerboxobject instead. attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. the browser.xml binding uses this property to gain access to the webnavigation, contentdocument, content
window, webbrowserfind, webprogress and sessionhistory properties. ...
nsIClipboard
void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard); boolean supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use kglobalclipboard, which is the one also used by the typical control-c/control-v keyboard shortcuts. the kselectionclipboard is peculiar to the x
windows system, where it refers to the primary selection, which is the one that simple mouse selection and middle-click paste operations are using. constant value description kselectionclipboard 0 clipboard for selection. kglobalclipboard 1 clipboard for global use. kfindclipboard 2 clipboard for find strings. methods emptyclipboard() ...
nsICommandLineHandler
the user (on stdout). the text should have embedded newlines which wrap at 76 columns, and should include a newline at the end. by convention, the right column which contains flag descriptions begins at the 24th character. read only. methods handle() processes a command line. 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. void handle( in nsicommandline acommandline ); parameters acommandline command line to process. see also nsicommandline chrome: command line xulrunner:commandline ...
nsIContentPrefService2
either the usual permanent storage or temporary storage set() aside for private browsing sessions. pass null to unconditionally use permanent storage. pass an nsiloadcontext to use storage appropriate to the context's useprivatebrowsing attribute: if useprivatebrowsing is true, temporary private-browsing storage is used, and otherwise permanent storage is used. a context can be obtained from the
window or channel whose content pertains to the preferences being modified or retrieved. callbacks the methods of callback objects are always called asynchronously. see nsicontentprefcallback2 for more information about callbacks. method overview void addobserverforname(in astring name, in nsicontentprefobserver observer); void getbydomainandname(in astring domain, in astr...
nsIContentView
void scrollto(in float xpx, in float ypx); void setscale(in float xscale, in float yscale); attributes attribute type description contentheight float read only. contentwidth float dimensions of scrolled content in chrome-document css pixels. read only. id nscontentviewid id that can be used in conjunction with nsidom
windowutils to change the actual document, instead of just how it is transformed; this is a 64-bit unsigned integer. read only. scrollx float horizontal scroll offset in chrome-document css pixels. when this view is active (that is it is being painted because it's in the visible region of the screen), this value is at first lined up with the content's scroll offset. note: wh...
nsIControllers
content/xul/document/public/nsicontrollers.idlscriptable represents a list of nsicontroller elements. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is used to manage instances of the nsicontroller interface.
windows and text inputs have default controllers that allow commands such as cmd_copy to act on the focused element or
window. xul elements can also have controllers, although they do not have any default controllers. implemented by: @mozilla.org/xul/xul-controllers;1. you should not normally need to create an instance, as you normally need to alter the
window or element's existing list of controllers. to create an instance, use: var controllers = components.classes["@mozilla.org/xul/xul-controllers;1"] .createinsta...
nsICookieService
t is an nsiarray of deleted cookies. cleared the entire cookie list was cleared. the subject is null. reload the entire cookie list was changed, and the observer should reload the list of cookies. the subject is null. private-cookie-changed since firefox 20 (see bugzilla #837091) same as cookie-changed, except used in lieu of cookie-changed for private
windows. see cookie-changed. cookie-rejected broadcast whenever the user's preferences cause a cookie to be rejected from being set. an nsiuri interface pointer representing the uri that attempted to set the cookie. none. method overview string getcookiestring(in nsiuri auri, in nsichannel achannel); string getcookiestringfromhttp(in nsiuri auri, in ns...
nsICrashReporter
orting not initialized. native code only!appendobjcexceptioninfotoappnotes append note containing an obj-c exception's info. void appendobjcexceptioninfotoappnotes( in voidptr aexception ); parameters aexception nsexception object to append note for. native code only!writeminidumpforexception write a minidump immediately, with the user-supplied exception information. this is implemented on
windows only, because seh (structured exception handling) exists on
windows only. void writeminidumpforexception( in voidptr aexceptioninfo ); parameters aexceptioninfo exception_info* provided by
window's seh. ...
nsICryptoHash
nit() or initwithstring() has not been called. example computing the hash of a file you can easily compute the hash of a file using 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. ...
nsIDOMNSHTMLDocument
, and was removed entirely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11). boolean execcommandshowhelp( in domstring commandid ); parameters commandid the name of the command. return value this method is not supported and always throws an exception. getselection() domstring getselection(); parameters none. return value the text of the current selection, the same as
window.getselection.tostring(). open() nsidomdocument open( in acstring acontenttype, in boolean areplace ); parameters acontenttype the content type of the new document. if the type is not supported by the html content sink, trying to write to the document will probably throw. areplace whether the document should replace the existing document in session history. return value the ...
nsIDOMOrientationEvent
dom/interfaces/events/nsidomorientationevent.idlscriptable please add a summary to this article. last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsidomevent method overview void initorientationevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg, in double x, in double y, in double z); attributes attribute type description x double the amount of tilt along the x axis. read only. ...
nsIDOMSimpleGestureEvent
implementation-specific; however, positive values indicate zooming in, and negative values indicate zooming out. read only. note: on mac os x, the units used for magnification gestures by the underlying operating system api are not documented at this time; typical values appear to be in the range 0.0 to 100.0, but currently you can only rely on the value being either positive or negative. on
windows, the units indicate the difference between the previous and current width between the two touch points, in pixels. direction unsigned long the direction in which the gesture moved. see direction constants and rotation constants on this page. read only. constants direction constants constant value description direction_up 1 upward swipe. ...
nsIDOMStorage
om/interfaces/storage/nsidomstorage.idlscriptable this interface represents the storage space used for session storage in the dom. items stored in session storage may be accessed by any interested party in the same browsing context. 1.0 66 introduced gecko 1.8.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) a dom
window's session storage object can be retrieved from the
window's sessionstorage attribute. a storage object stores an arbitrary set of key-value pairs, which may be retrieved, modified and removed as needed. a key may only exist once within a storage object, and only one value may be associated with a particular key. keys are stored in a particular order with the condition that this order not change b...
nsIDOMStorageList
ing domain); methods nameditem() called when the list of available access points changes. nsidomstorage nameditem( in domstring domain ); parameters domain the name of the domain for whom to return the storage object. return value the nsidomstorage object representing the data store for the specified domain.see also dom storage structured client-side storage (html 5 specification) nsidom
window ...
nsIDOMXULLabeledControlElement
from: nsidomxulcontrolelement last changed in gecko 1.7 attributes attribute type description accesskey domstring this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label for the element. when the user presses the appropriate modifier and the access key, the element will be focused and/or activated from anywhere in the
window. on non-macintosh platforms, the character on the element's label matching the access key is underlined. note: the access key is copied to any associated label element. command domstring this property reflects the element's command attribute. crop domstring this property reflects the element's crop attribute. image domstring this property reflects the element's image attribute. label doms...
nsIDialogParamBlock
inherits from: nsisupports last changed in gecko 1.7 method overview print32 getint( in print32 inindex ); wstring getstring( in print32 inindex ); void setint( in print32 inindex, in print32 inint ); void setnumberstrings( in print32 innumstrings ); void setstring( in print32 inindex, in wstring instring); attributes attribute type description objects nsimutablearray a place where you can store an nsimutablearray to pass nsisupports. methods getint() get a previously set integer. ...
getFile
ns_osx_local_frameworks_dir "locfrmwrks" ns_osx_user_preferences_dir "usrprfs" ns_osx_local_preferences_dir "locprfs" ns_osx_picture_documents_dir "pct" ns_osx_movie_documents_dir "mov" ns_osx_music_documents_dir "music" ns_osx_internet_sites_dir "intrntsts" available on
windows only these locations are supported only on microsoft
windows builds of gecko. c constant string value notes ns_win_
windows_dir "wind" ns_win_program_files_dir "progf" ns_win_home_dir ns_os_home_dir ns_win_desktop_dir "deskv" virtual folder at the root of the namespace ns_win_programs_dir "progs" u...
nsIEditor
s to support cases where only parts of the document are editable, by letting you see if the current selection is in an editable section. rootelement nsidomelement read only. the root editable element, which for a document is its body. selection nsiselection read only. the selection/caret for this editor. in the case of a design mode document, this is the same as the
window's selection. selectioncontroller nsiselectioncontroller read only. the selection controller for the current presentation. methods native code only!init initializes the editor's services. [noscript] void init( in nsidomdocument doc, in nsipresshellptr shell, obsolete since gecko 5 in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags )...
nsIEditorBoxObject
g to a xul editor element implements this interface. note: please consider using nsicontainerboxobject instead. attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. the editor.xml binding uses this property to gain access to the webnavigation, contentdocument, content
window, webbrowserfind, editingsession and commandmanager properties. ...
nsIEnvironment
to a "portable" definition (which is incorrect for unix/linux!!!!) which simply checks whether the string returned by get() is empty or not. boolean exists( in astring aname ); parameters aname the variable name to probe. return value if the variable has been set, the value returned is pr_true. if the variable was not defined in the environment pr_false will be returned. examples
windows this example gets the path to the porgram files directory on
windows. credit to morat from mozillazine. var nsienvironment = components.classes["@mozilla.org/process/environment;1"].getservice(components.interfaces.nsienvironment); var pathtoprogramfiles = nsienvironment.get("programfiles"); //for me this returns "c:\program files" ...
nsIFaviconService
ache. if set, it will always try to reload the favicon. afaviconloadtype one of nsifaviconservice.favicon_load_private or nsifaviconservice.favicon_load_non_private to indicate that any network requests performed should act like ones from a private browsing context (ie. no history entries, only store in the temporary disk cache, etc.). this should be determined via privatebrowsingutils.is
windowprivate(somerelated
window) if the favicon may expose the user's private browsing data by performing a network request, otherwise favicon_load_non_private may be used. acallback optional from gecko 2.0 an nsifavicondatacallback. example var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var pag...
nsIFileProtocolHandler
return value corresponding url string. the resulting string may contain url-escaped characters. newfileuri() this method constructs a new file uri. nsiuri newfileuri( in nsifile afile ); parameters afile the nsifile to convert. return value a reference to a new nsiuri object. readurlfile() takes a local file and tries to interpret it as an internet shortcut (for example .url files on
windows). nsiuri readurlfile( in nsifile file ); parameters file the nsifile to read. return value the nsiuri the file refers to. exceptions thrown ns_error_not_available the os does not support such files. ns_error_not_available the file is not an internet shortcut. see also code_snippets:file_i/o ...
nsIGlobalHistory2
main nsiuri and the referrer. void adduri( in nsiuri auri, in boolean aredirect, in boolean atoplevel, in nsiuri areferrer ); parameters auri the nsiuri of the page being added. aredirect whether the uri was redirected to another location; this is true for the original uri which is redirected. atoplevel whether the uri is loaded in a top-level
window. areferrer the uri of the referring page. isvisited() checks to see whether the given uri is in history. boolean isvisited( in nsiuri auri ); parameters auri the nsiuri of the page. return value true if a uri has been visited. setpagetitle() set the page title for the given uri. uris that are not already in global history will not be added. void setpagetitle( ...
nsIGlobalHistory3
error_not_implemented result. void adddocumentredirect( in nsichannel aoldchannel, in nsichannel anewchannel, in print32 aflags, in boolean atoplevel ); parameters aoldchannel anewchannel aflags flags to add. these are defined by the history that is implementing this interface. atoplevel whether the uri is loaded in a top-level
window. if false, the load is in a subframe. geturigeckoflags() get the gecko flags for this uri. these flags are used by gecko as hints to optimize page loading. not all histories have them; this need not be supported (just return ns_error_not_implemented. these flags are opaque and should not be interpreted by the history engine. unsigned long geturigeckoflags( in nsiuri auri ); parameters ...
nsIIFrameBoxObject
a xul iframe element implements this interface. note: please consider using nsicontainerboxobject instead. attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. the general.xml binding uses this property to gain access to the webnavigation, contentdocument and content
window properties. ...
nsIINIParserWriter
erview void setstring(in autf8string asection, in autf8string akey, in autf8string avalue); void writefile([optional] in nsifile ainifile, [optional] in unsigned long aflags); constants file writing constants these constants are specified when calling writefile(), in order to change its behavior. constant value description write_utf16 0x1
windows and the nsis installer code sometimes expect ini files to be in utf-16 encoding. on
windows only, this flag to writefile() can be used to change the encoding from its default utf-8. methods setstring() set the value of a property string for a particular section and key. void setstring( in autf8string asection, in autf8string akey, in autf8string avalue ); parameters asectio...
nsIIdleService
nd receive a 'back' (gecko 3 to 15) or 'active' (gecko 16+) notification when the user starts using their computer again. note: the idle service is for computer-wide idle detection, not just application idle detection. in other words, even if the user is working in other applications, the idle service will still consider the user to be active. currently nsiidleservice implementations exist for
windows, mac os x, and linux (via xscreensaver). implemented by: @mozilla.org/widget/idleservice;1. to create an instance, use: var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice); method overview void addidleobserver(in nsiobserver observer, in unsigned long time); void removeidleobserver(in...
nsIJumpListBuilder
mmon actions performed by users within the application. a task can be represented by an application shortcut and associated command line parameters or a uri. task lists should generally be static lists that do not change often, if at all - similar to an application menu. tasks are given the highest priority of all lists when space is limited. jumplist_category_recent 1 recent lists are based on
window's recent document lists. the lists are generated automatically by
windows. applications that use recent or frequent lists should keep document use tracking up to date by calling the shaddtorecentdocs shell api. jumplist_category_frequent 2 frequent lists are based on
window's recent document lists. the lists are generated automatically by
windows. applications that use recent or frequent lists ...
nsIJumpListItem
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: to consumers: it's reasonable to expect we'll need support for other types of jump list items (an audio file, an email message, etc.). to add types, create the specific interface here, add an implementation class to winjumplistitem, and add support to addlistbuild and removed items processing. method overview boolean equals(in nsijumplistitem item); attributes attribute type description type short retrieves the jump list item type. read only. ...
nsILocalFile
s fromfile the file to which the descriptor is relative. relativedesc the relative descriptor obtained from getrelativedescriptor(). remarks the methods initwithnativepath() and appendrelativenativepath() take string valued parameters that are encoded using the native character encoding. that means, you cannot deal with files whose name contain characters outside the default code page on
windows even though
windows 2000 or later has no problem with them. therefore, never use these functions unless you are absolutely sure that the path passed to them is always ascii-only. see nsifile for more information on the native character encoding. see also nsifile ...
nsIMessageBroadcaster
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers. for example, broadcasting a message through a
window message manager will broadcast the message to all frame message managers within its
window. see message manager interfaces for more details on the distinction between message senders and message broadcasters. methods void broadcastasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects); nsimessagelistenermanager getchildat(in unsigned long aindex); broadcastasyncmessage() like ...
nsIMessageListener
endsyncmessage, false otherwise. data a structured clone of the message payload: the second argument passed into the message-sending function. json same as data. deprecated. objects an object whose properties are any cross process object wrappers exposed by the sender as the third argument to the message-sending function. principal principal for the
window app. each listener is invoked with its own copy of the message parameter. when the listener is called, 'this' value is the target of the message. if the message is synchronous, the possible return value is returned as json (will be changed to use structured clones). when there are multiple listeners to synchronous messages, each listener's return value is sent back as an element in an ar...
nsIMsgDBViewCommandUpdater
the nsimsgdbviewcommandupdater interface controls changes that occur as the selection changes. mailnews/base/public/nsimsgdbview.idl#349scriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports in thunderbird this is implemented for different
windows in several different places: nsmsgdbviewcommandupdater (for the standalone message
window) nsmsgdbviewcommandupdater (for the threadpane message
window) nsmsgsearchcommandupdater (for search dialogs) method overview void updatecommandstatus(); void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring akeywords); void updatenextmessageafterdelete(); methods updatecommandstatus() called when the number of selected items changes. void up...
nsIMsgFilterList
e() void nsimsgfilterlist::savetodefaultfile ( ) applyfilterstohdr() void nsimsgfilterlist::applyfilterstohdr ( in nsmsgfiltertypetype filtertype, in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long headersize, in nsimsgfilterhitnotify listener, in nsimsg
window msg
window, in nsilocalfile amessagefile ) writeinattr() void nsimsgfilterlist::writeintattr ( in nsmsgfilterfileattribvalue attrib, in long value, in nsioutputstream stream ) writestrattr() void nsimsgfilterlist::writestrattr ( in nsmsgfilterfileattribvalue attrib, in string v...
nsIMsgIdentity
e whether or not to ask the user to complete all the fields. smtpserverkey astring the preferred smtp server for this identity. if this is set, this is the smtp server that should be used for the message send. requestreturnreceipt boolean readonly: default request for return receipt option for this identity. if this is set, the return receipt menu item on the compose
window will be checked. receiptheadertype long readonly: requestdsn boolean readonly: default request for dsn option for this identity. if this is set, the dsn menu item on the compose
window will be checked. methods clearallvalues() note: this is really dangerous! this destroys all pref values; do not call this unless you know what you're doing! void clearallval...
nsINavHistoryService
story (it must enumerate each item). this is pretty fast. historydisabled boolean true if history is disabled. currently, history is disabled if the browser.history_expire_days pref is "0". constants transition type constants constant value description transition_link 1 this transition type means the user followed a link and got a new toplevel
window. transition_typed 2 this transition type is set when the user typed the url to get to the page. transition_bookmark 3 this transition type is set when the user followed a bookmark to get to the page. transition_embed 4 this transition type is set when some inner content is loaded. this is true of all images on a page, and the contents of the iframe. it...
Component; nsIPrefBranch
may hold a weak reference to it instead of a strong one. the nsprefbranch object listens for xpcom-shutdown and frees all of the objects currently in its observer list. this ensures that long lived objects (services for example) will be freed correctly. the observer can request to be held as a weak reference when it is registered. this insures that shorter lived objects (say one tied to an open
window) will not fall into the cyclical reference trap. the list of registered observers may be changed during the dispatch of nspref:changed notification. however, the observers are not guaranteed to be notified in any particular order, so you can't be sure whether the added/removed observer will be called during the notification when it is added/removed. it is possible to change preferences during...
nsIPrefBranch2
may hold a weak reference to it instead of a strong one. the nsprefbranch object listens for xpcom-shutdown and frees all of the objects currently in its observer list. this ensures that long lived objects (services for example) will be freed correctly. the observer can request to be held as a weak reference when it is registered. this insures that shorter lived objects (say one tied to an open
window) will not fall into the cyclical reference trap. the list of registered observers may be changed during the dispatch of nspref:changed notification. however, the observers are not guaranteed to be notified in any particular order, so you can't be sure whether the added/removed observer will be called during the notification when it is added/removed. it is possible to change preferences during...
nsIProcess
as of gecko 1.9.1, and is removed entirely in gecko 1.9.2. void initwithpid( in unsigned long pid ); parameters pid the process id to begin to represent. kill() immediately terminates the process represented by the nsiprocess object. this only works if the process was run without blocking enabled. gecko 1.9.1 note prior to gecko 1.9.1 (firefox 3.5), this method did not work on
windows or mac os x. now it does. void kill(); parameters none. run() starts executing the process. gecko 1.9.1 note prior to gecko 1.9.1 (firefox 3.5), this method returned the process id of the newly executing process. it no longer returns a value. void run( in boolean blocking, [array, size_is(count)] in string args, in unsigned long count ); parameters blocking if true, th...
nsIPrompt
netwerk/base/public/nsiprompt.idlscriptable this is the prompt interface which can be used without knowledge of a parent
window. the parentage is hidden by the getinterface though which it is obtained. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: this interface is identical to nsipromptservice but without the parent nsidom
window parameter. to avoid redundancy, all methods here link to nsipromptservice. if you are using this interface, you must remove the nsidom
window arguments from those methods. normally you would use the prompt service as it is more flexible, but sometimes a callback will request an nsiprompt via nsiinterfacerequestor.getinterface(). to get an instance, call the nsi
windowwatcher.getnewprompter(). m...
nsISHistory
a handle to the session history object can be obtained from nsiwebnavigation. ...
nsIScreen
long the screen's pixel depth; this is the number of bits used to represent a pixel. read only. rotation unsigned long the screen's current rotation; you may set this to any of the values listed in screen rotation constants. this will only have an effect on platforms that support screen rotation. gecko 1.9.2 note starting in gecko 1.9.2, gecko running on microsoft
windows reports 24 bits per pixel instead of 32 bits per pixel on 8-bits per color component displays, since this is typically what the caller is actually looking for. constants screen brightness constants constant value description brightness_dim 0 the screen is fully dimmed (that is, off). brightness_full 1 the screen is at full brightness. bright...
nsIScreenManager
( in voidptr nativewidget ); native code only! nsiscreen screenforrect( in long left, in long top, in long width, in long height ); attributes attribute type description numberofscreens unsigned long the number of screens on the user's computer. read only. primaryscreen nsiscreen the primary display screen; this is the screen with the menu bar (on the mac) or taskbar or equivalent on
windows or linux. read only. methods native code only!screenfornativewidget returns the nsiscreen instance for the native widget pointer. this pointer's definition is specific to the platform's native widget implementation, and is typically of the same type as ns_native_
window. nsiscreen screenfornativewidget( in voidptr nativewidget ); parameters nativewidget the native widget for which to obta...
nsISound
ed to not play system sound effects, this will do nothing. note: this function is not supported on the macintosh. void playsystemsound( in astring soundalias ); parameters soundalias two different types of names are supported: you can specify the name of a system sound provided by the host operating system; for example, if you specify "systemexclamation", you can play the
windows alert sound, but it's played only on
windows. similarly, if you specify "blow", you can play the mac os x "blow" system sound, but, similarly, it's played only on the macintosh. if you wish to use this method for playing sounds, you should check the platform before you call playsystemsound(). note: this second usage is obsolete starting in gecko 1.9.2. you should instead use playevent...
nsITextInputProcessorCallback
break; } return true; } catch (e) { return false; } }, setcomposition: function simpleime_setcomposition(atext, aclauses, acaret) { if (!this._tip) { this._tip = components.classes["@mozilla.org/text-input-processor;1"]. createinstance(components.interfaces.nsitextinputprocessor); } if (!this._tip.begininputtransaction(
window, this._callback)) { return false; } ... }, } method overview boolean onnotify(in nsitextinputprocessor atextinputprocessor, in nsitextinputprocessornotification anotification); methods onnotify() this is called when gecko requests or notifies something to ime. boolean onnotify(in nsitextinputprocessor atextinputprocessor, in nsitextinputproce...
nsIToolkitProfile
sing platform-specific locking methods. nsiprofilelock lock( out nsiprofileunlocker aunlocker ); parameters aunlocker on error, contains an nsiprofileunlocker object you can use to unlock the profile. note: the unlocker object cannot be returned to javascript as the error causes an exception to be thrown. the unlocker object is only available in gecko 34 or later when running on
windows vista or later. return value an nsiprofilelock object which holds a profile lock as long as you hold a reference to it. example: var profile = profilelist.getnext().queryinterface(ci.nsitoolkitprofile); var locker = profile.lock({}); remove() removes the profile from the registry of profiles. void remove( in boolean removefiles ); parameters removefiles indicates whether or not ...
nsIURI
the uri scheme (e.g. about:blank) prepath autf8string the prepath returns the string before the path (such as "scheme://user:password@host:port"). this is related to the web origin concept of rfc6454. this is useful for authentication, managing sessions, or for checking the origin of an uri to prevent cross-site scripting attacks while using methods such as
window.postmessage(). note: some characters may be escaped. read only. ref autf8string returns the reference portion (the part after the "#") of the uri. if there is not one, an empty string is returned. note: some characters may be escaped. scheme acstring (us-ascii) the scheme is the protocol to which this uri refers. the scheme is restricted to the us-...
nsIUserInfo
changed in gecko 1.7 implemented by: @mozilla.org/userinfo;1. to get the service, use: var userinfo = components.classes["@mozilla.org/userinfo;1"] .getservice(components.interfaces.nsiuserinfo); you can then look at the userinfo object's attributes to learn what the system knows about the user. attributes attribute type description linux mac osx os/2
windows domain string read only. the computer's domain, or the domain of its hostname. the domain portion of the email address, if available. not supported. not supported. emailaddress string read only. the concatenation of the user's login name and the computer's domain. the user's email address as saved in the system address book. not supported. no...
nsIWebBrowserChromeFocus
it represents the focus up-calls from mozilla to the embedding chrome. inherits from: nsisupports last changed in gecko 1.7 method overview void focusnextelement(); void focusprevelement(); methods focusnextelement() set the focus at the next focusable element in the chrome. void focusnextelement(); parameters none. focusprevelement() set the focus at the previous focusable element in the chrome. ...
nsIWebBrowserFindInFrames
embedding/components/find/public/nsiwebbrowserfind.idlscriptable controls how find behaves when multiple frames or iframes are present. inherits from: nsisupports last changed in gecko 1.7 get an instance by doing a queryinterface from nsiwebbrowserfind. attributes attribute type description currentsearchframe nsidom
window frame at which to start the search. once the search is done, this will be set to be the last frame searched, whether or not a result was found. has to be equal to or contained within the rootsearchframe. rootsearchframe nsidom
window frame within which to confine the search (normally the content area frame). set this to only search a subtree of the frame hierarchy. searchparentframes boolean whether to allow the search to propagate out of the currentse...
nsIWebPageDescriptor
inherits from: nsisupports last changed in gecko 1.7 method overview void loadpage(in nsisupports apagedescriptor, in unsigned long adisplaytype); attributes attribute type description currentdescriptor nsisupports retrieves the page descriptor for the current document. read only. constants display type constants constant value description display_as_source 0x0001 generates an optionally syntax-highlighted (for xml/html documents) source of the original page. ...
nsIWebProgressListener2
n nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with awebprogress. progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstatechange being called with astateflags including the state_stop and state_is_
window flags). this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports 64-bit values. note: if any progress value is unknown, then its value is replaced with -1. void onprogresschange64( in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in lo...
nsIZipWriter
but note that if dir doesnt exist zw.open throws problems //var path = fp.file.path; //returns c:\users\3k2kyc1\documents\pr...
Setting HTTP request headers
ify-request"); } }; this object has a convenience register() and unregister() methods, so in order to activate it you just need to call: httprequestobserver.register(); you should also remember to unregister the observer at shutdown: httprequestobserver.unregister(); and that's it. xpcom components you need to register a single http-on-modify-request observer per application (and not one per
window). this means that you should put the observer's implementation in an xpcom component instead of an overlay. if you want to support gecko2 (firefox4) you need to register your javascript component as described here: https://developer.mozilla.org/en/xpcom/xpcom_changes_in_gecko_2.0#javascript_components. var headername = "x-hello"; var headervalue = "world"; function log(text) { // var con...
XUL Overlays
l-overlay href="chrome://global/content/dialogoverlay.xul"?> and includes an empty box with an id of okcancelbuttons in the ui. 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.new
window"/> <html:label for="dialog.new
window">&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. toolbars, submenus, boxes, and any other subtrees that appear in multiple places can be defined in overlays files in this way and refere...
Events
events that can be fired in mail code. some of these are standard events, such as those created by the dom. others are internal to gecko or other parts of mozilla application code. this reference will help you track those events down and learn how to use them. composition event name event type fired when... 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. no load event is fired in this case. folders event name event type fired when... msgcreatedbview onactivecreatedview onactivemessagesloaded ...
nsIMsgCloudFileProvider
e of the service, if applicable. iconclass acstring readonly: a chrome url for an icon to be used for representing the service. accountkey acstring readonly: the unique identifier for the account associated with an instance of an nsimsgcloudfileprovider. settingsurl acstring readonly: a chrome url for an xhtml page displayed in the account setup dialog
window, used for displaying and setting provider-specific settings. this url should not point to external web content. managementurl acstring readonly: a chrome url for an xhtml page displayed within the filelink preferences dialog, used for displaying and setting provider-specific settings once the account has already been set up. this url should not point to external web content. ...
Filelink Providers
erver string or port number. a provider implementation can choose what information it gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a form with the extra information. that url is then loaded into an iframe directly beneath the provider menulist. note: the setup dialog
window should resize itself automatically in order to fit the content of the iframe without scrollbars. custom settings fields to handle custom settings, the settings xhtml page should contain a form with the id "provider-form", with its onsubmit attribute set to "return false;". example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <input id="userna...
LDAP Support
as an introduction to ldap and mozilla products. it assumes you are already familiar with configuring preferences for deployed builds in addition to setting up thunderbird to use an ldap directory. it should be noted that all of this information applies to both thunderbird and the seamonkey application suite. mail compose typedown in mail compose, when typing a partial mail address, a typedown
window appears listing possible matches against address books and ldap directories. for large companies, there may be a large number of users in the directory with the same name. in such a scenario, it may be hard to tell which person you really want to send the message to. in thunderbird, the type down
window can be customized to show arbitrary ldap fields. this can be accomplished by setting the follo...
Mail and RDF
rs queries about messages in folders. all rdf properties of a message currently come from the database that backs the containing folder. datasources and the ui mail does not link the ui to datasources in a "traditional" manner. instead of having a singleton datasource that is shared across all ui components, we have per-view datasources. this allows each template-based widget to maintain view/
window-specific data with each datasource. for example...??? (sorting? what else do we store?) datasources are created when each
window's javascript is loaded by declaring the datasource variables in the source javascript as global variables. in the document's onload= handler the datasources are attached to their respective widgets by setting the database property on each rdf template's parent element.
Mailnews and Mail code review requirements
o approve such things, though.) the patch does not change public test frameworks, specifically, nothing in mailnews/test/resources/ or mail/test/mozmill/shared-modules/. for mozmill tests, the patch has passed on the try server. for xpcshell tests, it has either passed on try or has been run locally on the appropriate platform(s). specifically, if the xpcshell test will do different things on
windows than it will do on os x or linux, it must be run on
windows and one of os x / linux. the author of the patch is the module owner or a peer of the module to which the test corresponds. a bug is still required, even if it is immediately marked fixed. rs=orange-debugging requirements: the patch is trying to fix an intermittent orange test failure. the patch only touches test logic. the pa...
Thunderbird API documentation
relevant. see developer.thunderbird.net for newer information. these pages have been moved from mozilla.org, and may or may not be relevant. ...
Creating a Custom Column
this we use a new function, addcolumnhandler that takes a column id and a handler object. our implementation will need to call something similar to: gdbview.addcolumnhandler("colreplyto", columnhandler); setting the custom column handler we've added a special event that gets fired whenever a view is created. when that event fires, you should set up the custom column handler on the new view. ...
Finding the code for a feature
nt links to this on my firefox toolbar, one to comm-central string search, and one to comm-central file search. so, how did i use those to figure out how to do this? i know there is a menu command "tag" to tag the message - how does it do it? using dom inspector, i find the tag menu item, and i see that it uses command "cmd_tag". then i use mxr and look for "cmd_tag". i see it occurs in mail3pane
windowcommands.js a couple of times. i look at the last occurrence, and see it is just an enable item with no real action involved. oops, i guess i need to get the submenu instead. repeating this process, i see that the submenu items all call a function togglemessagetagmenu. looking that up in mxr, its underlying function uses a very strange call prevhdrfolder[toggler](messages, key) to change the key. ...
Activity Manager examples
nd in nsactivity.js file. if activity developers would like to extend the default ui representation of the activity types, they can provide their own xbl elements for their own activity types. all custom activity xbl elements should inherit from "activity-base" binding. for xbl samples please see activity.xml and activitybinding.css files. showing a user-defined activity in the activity manager
window the following sample will show a process and an event for junk processing in the activity manager
window. // step 1: adding a process into the activity manager const nsiap = components.interfaces.nsiactivityprocess; const nsiae = components.interfaces.nsiactivityevent; const nsiam = components.interfaces.nsiactivitymanager; let gactivitymanager = components.classes["@mozilla.org/activity-mana...
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messenger
window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Detect Opening Folder
some actions require execution every time you open a folder (for example, registering a custom column handler. ...
Use SQLite
abase(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.execut...
Theme Packaging
the documentation here is out of date. this document describes how to package themes for thunderbird. pre-requisites making a theme for thunderbird requires knowledge of cascading stylesheets (css), probably xbl, and some graphic design and aesthetic skill (...or maybe not). this document describes only how themes are packaged in order to be shown in firefox's themes
window. theme file layout thunderbird themes are packaged in an xpi file with the following structure: theme.xpi: install.rdf preview.png icon.png chrome/ browser/files communicator/files global/files mozapps/files ... you must have a top-level chrome.manifest file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metada...
Tips and Tricks from the newsgroups
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 scan for new messages at startup and manually scan...
Thunderbird extensions
r information. documentation getting started with thunderbird a brave, young developer wants to develop an add-on for thunderbird. these links to help through this journey. start by reading the tutorial and learn how to build a thunderbird extension. also see thunderbird 57-60 add-ons guide for changes introduced in thunderbird 60. read about the main
windows to learn about « thread pane », « preview pane », and « folder pane ». play with a demo add-on that exercises some more advanced thunderbird-specific features want to do even more? don't reinvent the wheel: steal from the thunderbird-stdlib project (doc here). functions for dealing with messages (delete, archive, change tags, etc.) are included. mailutils.js. haven't found w...
Using the Multiple Accounts API
(etc) alecf on pop.myisp.com +- inbox +- trash +- (etc) news.myisp.com +- comp.os.linux.announce +- etc.. news.mozilla.org +- netscape.public.mozilla.announce +- netscape.public.mozilla.mail-news relevant api calls: nsimsgaccount.incomingserver nsimsgaccountmanager.allservers: a list of all servers held by all accounts. identities identities are used in the compose
window. if identities are shared between accounts, you will only see that identity once in the list. in the above example, the list of identities would be as follows: alec flett <alecf@mywork.com>) alec flett <alecf@myisp.com>) alec flett <alecfnospam@myisp.com>) relevant api calls: nsimsgaccount.identities nsimsgaccountmanager.allservers: a list of all servers across all accounts st...
Examples
position on each os. mac os x these examples require mac os x to operate. add image to iphoto an extension that adds a contextual menu item to images that lets you easily add them to iphoto on mac os x. using objective-c from js-ctypes an example how to use objective-c from js-ctypes, by converting objective-c code into c code. using com from js-ctypes an example how to use com api of
windows systems from js-ctypes, by converting c++ code to c code. using jni from js-ctypes an example how to use java from js-ctypes, by converting java code into c code. js-macosx an extension that demonstrates javascript-cocoa bridge for mac os x. lightweight bridge for calling cocoa frameworks from javascript, js-macosx transparently handles definition of cocoa api, both c and objective-c, and ...
Declaring types
or example, to define a new 32-bit integer variable with the value 5: var i = ctypes.int32_t(5); you can then pass a pointer to this value to a c function that requires a pointer to a 32-bit integer, like this: some_c_function(i.address()); declaring new primitive types there are times when you want to create new types that are simply new names for existing primitive types. for example, on
windows, you may wish to be able to use the
windows-standard dword type name for unsigned 32-bit integers. to declare this type, you can simply do: const dword = ctypes.uint32_t; after doing this, dword is a ctype that can then be used to represent 32-bit unsigned integers. structures structures are declared using the ctypes.structtype() constructor. this method accepts as input the name of the str...
Working with ArrayBuffers
ointer type will pass the pointer to buffer (based on //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080). further, it returns datapointer, and there is no extra allocation (based on //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301). ...
ctypes.open
ypes.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 ...
Library
g it to be used from javascript. this can be used both for exported data symbols and for functions. cdata declare( name[, abi, returntype argtype1, ...] ); parameters name the name of the symbol exported by the native library that is to be declared as usable from javascript abi the abi used by the exported function; this will be ctypes.default_abi for most libraries, except for
windows libraries, which will be ctypes.winapi_abi or ctypes.stdcall_abi. see abi constants. you don't need to provide this for exported data; it's only needed for function declarations. returntype the ctype type returned by the defined api, if it's a function. this parameter should not be provided if the api is an exported data symbol. argtype1...argtypen zero or more parameter ctype may be specifi...
js-ctypes reference
d understanding them will alleviate much of the confusion surrounding js-ctypes. calling a type constructor will return a ctype. calling a ctype will return a cdata. you declare the arguments and return value of a native function with ctype objects. you call a native function with cdata objects. other features error-handling js-ctypes supports both errno (on all platforms) and getlasterror (on
windows platforms). callbacks you can pass regular javascript functions as callbacks to native functions. see the callbacks page for details. 64-bit integer handling because javascript number objects can't directly represent every possible 64-bit integer value, js-ctypes provides new types for these. see int64 and uint64. ...
js-ctypes
es is not available to websites, only application and extension code. 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. abi cdata ctype ctypes ...
Constants - Plugins
npvers constant: version feature information value description npvers_has_streamoutput 8 streaming data. npvers_has_notification 9 notification of completion. npvers_has_liveconnect 9 liveconnect. npvers_win16_has_liveconnect 9 liveconnect (win16). npvers_68k_has_liveconnect 11 liveconnect (68k). npvers_has_
windowless 11
windowless plug-in. npvers_has_xpconnect_scripting 13 plug-in is scriptable using xpconnect. npvers_has_npruntime_scripting 14 plug-in is scriptable using npruntime. npvers_has_form_values 15 nppvformvalue nppvariables are supported. npvers_has_popups_enabled_state 16 the npn_pushpopupsenabledstate() and npn_poppopupsenabled...
Wait-cursor - XUL
maybe i'm missing something here, but
window.setattribute(...) throws an error. i'm using
window.setcursor('wait') and
window.setcursor('auto') for get this effect. - ng.mangine ...
Accessibility Inspector - Firefox Developer Tools
reason, you should keep it turned off when you aren't specifically using it. when first implemented, the accessibility engine had to be explicitly turned on. starting in firefox 79, it is automatically enabled when you do one of the following: choose accessibility in the tools > web developer menu. select the accessibility tab in the developer tools toolbox. right-click in the main browser
window, and choose inspect accessibility properties in the context menu. right-click an item in the html pane of the page inspector, and choose show accessibility properties in the context menu. once activated, the accessibility engine remains running until you close the developer tools toolbox. if you don't wish to allow the accessibility features to be automatically enabled, you can use the config...
DOM Inspector - Firefox Developer Tools
this tool is an add-on for xul-based applications such as firefox and thunderbird. if you are looking for the dom inspector that's built into firefox, see the documentation for the page inspector. documentation introduction to dom inspector a guided tutorial that will help you get started with dom inspector. ...
Search - Firefox Developer Tools
e following: only the functions with load in their name are shown. this feature may not seem terribly useful when searching a file with a handful of functions in it but when you are searching through a file with dozens of functions, it comes in handy. searching in all files you can also search for a string in all of the files included in the currently opened project. press shift + ctrl + f (
windows and linux) or shift + cmd + f (macos) and then enter the string you are trying to find. if the string exists in any of the files in the project, the search will return a list showing a list by file and line number. click on any entry in the list to go directly to the line in the file where the string occurs. ...
Step through code - Firefox Developer Tools
d 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. this lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. 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. if you want to turn this feature off, since firefox 71 you can do so by going to about:config in a new tab, setting the devtools.debugger.features.overlay pref to false, and restarting the browser. inline variable preview new in firefox 71, the source pan...
Set a logpoint - Firefox Developer Tools
alue in your code but you don't want to pause execution. rather than sprinkle console.log() statements throughout your code, you can use a special type of breakpoint, the logpoint. logpoints print a message to the console panel instead of pausing code execution. the logpoint is especially useful in cases where breaking the execution breaks testing procedures, such as when you are debugging popup
windows, or executing focus-related logic. to create a logpoint: right click on a line number in the debugger panel and pick add log action from the context menu. create an expression inline. the result is logged in the console panel every time the line with the logpoint executes. you can use any variable or function available in the current scope. working with logpoints when you set a lo...
UI Tour - Firefox Developer Tools
all items in the call stack (including their uris and line number) to the clipboard. scopes in the right-hand pane you'll see a label "scopes" with a disclosure arrow next to it. when the debugger's paused, you'll be able to expand this section to see all objects that are in scope at this point in the program: objects are organized by scope: the most local appears first, and the global scope (
window, in the case of page scripts) appears last. within the scopes pane, you can create watchpoints that pause the debugger when a value is read or assigned. ...
Debugger.Memory - Firefox Developer Tools
values include the following: “api” “eager_alloc_trigger” “destroy_runtime” “last_ditch” “too_much_malloc” “alloc_trigger” “debug_gc” “compartment_revived” “reset” “out_of_nursery” “evict_nursery” “full_store_buffer” “shared_memory_limit” “periodic_full_gc” “incremental_too_slow” “dom_
window_utils” “component_utils” “mem_pressure” “cc_waiting” “cc_forced” “load_end” “page_hide” “nsjscontext_destroy” “set_new_document” “set_doc_shell” “dom_utils” “dom_ipc” “dom_worker” “inter_slice_gc” “refresh_frame” “full_gc_timer” “shutdown_cc” “user_inactive” nonincremen...
Debugger.Object - Firefox Developer Tools
his debugger.object’s compartment is permitted to unwrap, return a debugger.object instance referring to the wrapped object. if we are not permitted to unwrap the referent, return null. if the referent is not a wrapper, return this debugger.object instance unchanged. unsafedereference() return the referent of this debugger.object instance. if the referent is an inner object (say, an html5
window object), return the corresponding outer object (say, the html5
windowproxy object). this makes unsafedereference more useful in producing values appropriate for direct use by debuggee code, without using invocation functions. this method pierces the membrane of debugger.object instances meant to protect debugger code from debuggee code, and allows debugger code to access debuggee objects throug...
Debugger.Script - Firefox Developer Tools
e refers to a jsscript, the length, in characters, of this script’s code within the debugger.source instance given by source. if the instance refers to webassembly code, throw a typeerror. global if the instance refers to a jsscript, a debugger.object instance referring to the global object in whose scope this script runs. the result refers to the global directly, not via a wrapper or a
windowproxy (“outer
window”, in firefox). if the instance refers to webassembly code, throw a typeerror. format if the instance refers to a jsscript, "js". if the instance refers to webassembly code, "wasm". function properties of the debugger.script prototype object the functions described below may only be called with a this value referring to a debugger.script instance; they may no...
Debugger - Firefox Developer Tools
er kinds of objects. adddebuggee(global) add the global object designated byglobal to the set of global objects this debugger instance is debugging. if the designated global is already a debuggee, this has no effect. return this debugger’s debugger.object instance referring to the designated global. the valueglobal may be any of the following: a global object. an html5
windowproxy object (an “outer
window”, in firefox terminology), which is treated as if the
window object of the browsing context’s active document (the “inner
window”) were passed. a cross-compartment wrapper of an object; we apply the prior rules to the wrapped object. a debugger.object instance belonging to this debugger instance; we apply the prior rules to the referent. ...
Eyedropper - Firefox Developer Tools
alue in the rules view color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. ...
Aggregate view - Firefox Developer Tools
ight of the pane. you can use this to filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated. type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or
window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape". these are prefixed with "js::". each type gets a row in the table, and rows are ordered by the amount of memory occupied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count"...
Tree map view - Firefox Developer Tools
sing the most memory. a treemap displays "hierarchical (tree-structured) data as a set of nested rectangles". the size of the rectangles corresponds to some quantitative aspect of the data. for the treemaps shown in the memory tool, things on the heap are divided at the top level into four categories: objects: javascript and dom objects, such as function, object, or array, and dom types like
window and htmldivelement. scripts: javascript sources loaded by the page. strings other: this includes internal spidermonkey objects. each category is represented with a rectangle, and the size of the rectangle corresponds to the proportion of the heap occupied by items in that category. this means you can quickly get an idea of roughly what sorts of things allocated by your site are using the mos...
Performance Analysis - Firefox Developer Tools
udes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site. using the performance analysis tool to run the performance analysis tool click the stopwatch icon in the toolbar. (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. this simulates the first time a user visits your site, and subsequent visits. it displays the results for each run side by side, or vertically if the browser
window is narrow: the results for each run are summarised in a table and a pie chart. the tables group resources by ...
Network request details - Firefox Developer Tools
for each line in the request headers section, a question mark links to the documentation for that request header, if one is available. a raw toggle button in the section heading controls whether the headers are shown with formattin...
Network Monitor - Firefox Developer Tools
there are a few different ways to open the network monitor: press ctrl + shift + e ( command + option + e on a mac). select "network" from the web developer menu, (which is a submenu of the tools menu on os x and linux). click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "network". the network monitor will appear at the bottom of the browser
window. 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 ...
Page inspector 3-pane mode - Firefox Developer Tools
available — 3-pane mode. when activated, this allows you to see the following simultaneously: the html pane on the left hand side, as usual. the css rules in the middle in their own separate pane, rather than as a tab. the other css related features — such as computed styles view, animations view, and fonts view — in tabs on the right hand side, as usual. note: at narrower browser
window widths, the tabs appear below the css rules pane. having the css rules in their own pane is very useful because it allows you to not only inspect your html and edit the css applied to it, but also see the effect this has on css features such as computed styles and grids in real time. you just need to have the relevant tab open to see the effect. a brief walkthrough the 3-pane inspector is dis...
Examine and edit CSS - Firefox Developer Tools
e brings up a tooltip showing what color value is stored in that variable (bug 1431949). editing keyboard shortcuts you can use the arrow and page up/down keys (along with others) to increase/decrease numeric rules while editing: the up arrow increments values by 1 — for example, "1px" changes to "2px". shift + up/down increments or decrements values by 10. ctrl + up/down (on linux and
windows) or alt + up/down (on mac) increments or decrements values by 0.1. shift + page up/page down increments or decrements values by 100. track changes when you are editing the rules in the rules view, you can see the changes you have made in the changes pane. note: you can view changes made to the rules view only. if you edit the css using the style editor, the changes will not be shown in t...
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. right-click an element on a web page and select inspect element. the inspector will appear at the bottom of the browser
window: you can also set the pane to appear at the left side of the browser
window: to the right side of the browser
window: or in a separate
window: to start finding your way around the inspector, see the ui tour. ...
Debugging Firefox Desktop - Firefox Developer Tools
ext, you need to start the debugger server in the debuggee. run the debuggee from the command line, passing it the --start-debugger-server option: /path/to/firefox --start-debugger-server passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. to use a different port, pass the desired port number: /path/to/firefox --start-debugger-server 1234 note: in
windows, the start-debugger-server call will only have one dash: firefox.exe -start-debugger-server 1234 note: by default, and for security reasons, the devtools.debugger.force-local option is set. if you want to debug a firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it. ...
Responsive Design Mode - Firefox Developer Tools
when simulation is disabled, it is black. 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 toggled: when this option is enabled, the page is reloaded whenever you toggle touch support. reload when user agent is changed: when this option is enabled, the page isreloaded whenever the user agent is changed. reloading on thes...
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 ... (the elipsis) on the right of the tab. the menu includes settings to control the location of the developer tools. you can choose between the default setting at the bottom of the
windows, or move the tools to the left or right side of the screen. these settings are particularly useful if you have a widescreen monitor. you can also choose to open the tools in a separate
window. show split console adds a section at the bottom of the tools showing the console. it makes visible the command line and one or two lines of the console output. the rest of the settings are on the developer tools settings pane. to see the settings, open any of the develop...
Storage Inspector - Firefox Developer Tools
torage. but we're working to let you edit storage contents in future releases. 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. the toolbox will appear at the bottom of the browser
window, with the storage inspector activated. it's just called "storage" in the developer toolbox. storage inspector user interface the storage inspector ui is split into three main components: storage tree table widget sidebar storage tree the storage tree lists all the storage types that the storage inspector can inspect: under each type, objects are organized by origin. for cookies, ...
Taking screenshots - Firefox Developer Tools
ean when present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included. --filename string the name to use in saving the file. the file should have a ".png" extension. --fullpage boolean if included, the full webpage will be saved. with this parameter, even the parts of the webpage which are outside the current bounds of the
window will be included in the screenshot. when used, "-fullpage" will be appended to the file name. --selector string a css selector that selects a single element on the page. when supplied, only this element and its descendants will be included in the screenshot. note: if you capture an image to a filename like test.png, and then you capture to that same filename, the new image ...
Tips - Firefox Developer Tools
describing the available commands. :screenshot <filename.png> --fullpage saves a screenshot to your downloads directory using the optional file name. if no filename is included, the file name will be in this format: screen shot date at time.png the --fullpage parameter is optional. if you include it, the screenshot will be of the whole page, not just the section visible in the browser
windows. the file name will have -fullpage appended to it as well. see web console helpers for all parameters. in the console output: click on the inspector icon () next to an element in the output to select it within the inspector. check "enable persistent logs" in the settings to keep logged messages from before even after navigation. check "enable timestamps" in the settings to show timestamps...
Web Console UI Tour - Firefox Developer Tools
ossible, before you press enter to submit it. message display pane this is where the messages appear, both those generated by the code in the page, and those generated by the commands entered on the command line. see console messages for a lot more detail on what the messages can contain. note: you can clear the contents of the console by entering the keyboard command ctrl + shift + l (
windows, macos, and linux) or cmd + k on macos. command line the command line starts with double angle brackets (>>). use it to enter javascript expressions. 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
d shortcuts shortcut reference. 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. the toolbox appear at the bottom, left, or right of the browser
window (depending on your docking settings), with the web console activated (it's just called console in the devtools toolbar). ...
Firefox Developer Tools
note: if you are just getting started with web development and using developer tools, our learning docs will help you — see getting started with the web and what are browser developer tools? for good starting points. 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. the ellipsis menu on the right-hand side of developer tools contains several commands that let you perform actions or change tool settings. this button only appears when there are multiple iframes on a page. click it to display a list of the iframes on the current page and select the one with which you want to work. click this b...
ANGLE_instanced_arrays - Web APIs
formation, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default and the constants and methods are available without the "angle" suffix. despite the name "angle", this extension works on any device if the hardware supports it and not just on
windows when using the angle library. "angle" just indicates that this extension has been written by the angle library authors. constants this extension exposes one new constant, which can be used in the gl.getvertexattrib() method: ext.vertex_attrib_array_divisor_angle returns a glint describing the frequency divisor used for instanced rendering when used in the gl.getvertexattrib() as the pname...
AddressErrors - Web APIs
meainder of the properties' values are taken from defaultpaymentdetails. the final step is to call the event's updatewith() method, passing along the updatedetails object. this lets the payment request api know to present the specified error or errors but to allow the user to keep trying to edit the address. setting up the donate now button this code creates a handler for the load event on the
window which in turn adds the needed click event handler to the "donate now" button so that clicking it starts the payment process.
window.addeventlistener("load", function(ev) { document.getelementbyid("pay").addeventlistener("click", process, false); }, false); see addeventlistener() for information about event handlers and how they work. html here's the simple html for this example. <p>donat...
AmbientLightSensor.illuminance - Web APIs
hosting device. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation insfructions. syntax var level = ambientlightsensor.illuminance value a number indicating the current light level in lux. ...
AmbientLightSensor - Web APIs
ur server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. constructor ambientlightsensor.ambientlightsensor() creates a new ambientlightsensor object. properties ambientlightsensor.illuminance returns the current light level in lux of the ambient light level around the hosting device. ...
AnalyserNode.frequencyBinCount - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw...
AnalyserNode.getByteFrequencyData() - Web APIs
n value none. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canva...
AnalyserNode.getByteTimeDomainData() - Web APIs
xample the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). const audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); const analyser = audioctx.createanalyser(); ... analyser.fftsize = 2048; const bufferlength = analyser.fftsize; const dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getbytetimedomaindat...
AnalyserNode.getFloatFrequencyData() - Web APIs
node.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width =
window.innerwidth; canvas.height =
window.innerheight; document.body.appendchild(canvas); const canvasctx = canvas.getcontext('2d'); canvasctx.clearrect(0, 0, canvas.width, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data analysernode.getfloatfrequencydata(dataarray); //draw black background canvasctx.fillstyle = 'rgb(0, 0, 0)'; ...
AnalyserNode.getFloatTimeDomainData() - Web APIs
ue none. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... analyser.fftsize = 1024; var bufferlength = analyser.fftsize; console.log(bufferlength); var dataarray = new float32array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getfloattimedomaindata(dataarray); canvasctx.f...
AnalyserNode.maxDecibels - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw...
AnalyserNode.minDecibels - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw...
AnalyserNode - Web APIs
sic usage the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new(
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); // ... analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // get a canvas defined with id "oscilloscope" var canvas = document.getelementbyid("oscilloscope"); var canvasctx = canvas.getcontext("2d")...
AnimationEffect.getComputedTiming() - Web APIs
neffect.gettiming() method, the values returned by this object differ in the following ways: duration returns the calculated value of the iteration duration. if effecttiming.duration is the string auto, this attribute will return 0. fill the auto value is replaced with the appropriate effecttiming.fill value. these values are comparable to the computed styles of an element returned using
window.getcomputedstyle(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. return value a computedeffecttiming dictionary object, which contains the following properties: endtime the end time of the animation in milliseconds from the animation's start (if the keyframeeffect is associated with an animation). (also includes effecttiming.enddelay in that calc...
AudioContext() - Web APIs
per tab at a time. non-standard exceptions in chrome if the value of the latencyhint property isn't valid, chrome throws a typeerror exception with the message "the provided value '...' is not a valid enum value of type audiocontextlatencycategory". example this example creates a new audiocontext for interactive audio (optimizing for latency) and a sample rate of 44.1khz. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext({ latencyhint: 'interactive', samplerate: 44100, }); specifications specification status comment web audio apithe definition of 'audiocontext()' in that specification. working draft initial definition. ...
AudioContext.createMediaStreamDestination() - Web APIs
hen the button is clicked, the oscillator starts, and the mediarecorder is started. when the button is stopped, the oscillator and mediarecorder both stop. stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. 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. from here, you can play and save the opus file. <!doctype html> <html> <head> <title>createmediastreamdestination() demo</title> </head> <body> <h1>createmediastreamdestination() demo</h1> <p>encoding a pure sine wave to an opus file </p> <button>make sine wave</button> <audio controls></audio> <scri...
AudioContext.getOutputTimestamp() - Web APIs
audio context was first rendered examples in the following code we start to play an audio file after a play button is clicked, and start off a requestanimationframe loop running, which constantly outputs the contexttime and performancetime. you can see full code of this example at output-timestamp (see it live also). ...
AudioContext - Web APIs
.resume() resumes the progression of time in an audio context that has previously been suspended/paused. audiocontext.suspend() suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing cpu/battery usage in the process. examples basic audio context declaration: var audioctx = new audiocontext(); cross browser variant: var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); var finish = audioctx.destination; // etc. specifications specification status comment web audio apithe definition of 'audiocontext' in that specification. working draft ...
AudioNode.disconnect() - Web APIs
nels (see audio channels). if this parameter is out-of-bound, an indexsizeerror exception is thrown. exceptions indexsizeerror a value specified for input or output is invalid, referring to a node which doesn't exist or outside the permitted range. invalidaccesserror the node on which disconnect() was called isn't connected to the specified destination node. example var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); gainnode.disconnect(); specifications specification status comment web audio apithe definition of 'disconnect' in that specification. ...
AudioParam - Web APIs
aram.cancelandholdattime() cancels all scheduled future changes to the audioparam but holds its value at a given time until further changes are made using other methods. examples first, a basic example showing a gainnode having its gain value set. gain is an example of an a-rate audioparam, as the value can potentially be set differently for each sample frame of the audio. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var gainnode = audioctx.creategain(); gainnode.gain.value = 0; next, an example showing a dynamicscompressornode having some param values maniuplated. these are examples of k-rate audioparam's, as the values are set for the entire audio block at once. var compressor = audioctx.createdynamicscompressor(); compressor.t...
BaseAudioContext.createAnalyser() - Web APIs
node. example the following example shows basic usage of an audiocontext to create an analyser node, then use requestanimationframe() to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); analyser.getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.getby...
BaseAudioContext.createConvolver() - Web APIs
audiobuffer containing a sound sample to be used as an ambience to shape the convolution (called the impulse response,) and apply that to the convolver. the example below uses a short sample of a concert hall crowd, so the reverb effect applied is really deep and echoey. for applied examples/information, check out our voice-change-o-matic demo (see app.js for relevant code). var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var convolver = audioctx.createconvolver(); ... // 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.
BaseAudioContext.createDelay() - Web APIs
simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code). if you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... var synthsource; playsynth.onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattri...
BaseAudioContext.createWaveShaper() - Web APIs
ocontext to create a wave shaper node. for applied examples/information, check out our voice-change-o-matic demo (see app.js for relevant code). note: sigmoid functions are commonly used for distortion curves because of their natural properties. their s-shape, for instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * d...
BaseAudioContext.currentTime - Web APIs
the currenttime read-only property of the baseaudiocontext interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. it starts at 0. syntax var curtime = baseaudiocontext.currenttime; example var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ... console.log(audioctx.currenttime); reduced time precision to offer protection against timing attacks and fingerprinting, the precision of audioctx.currenttime might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will ...
BaseAudioContext.listener - Web APIs
the listener property of the baseaudiocontext interface returns an audiolistener object that can then be used for implementing 3d audio spatialization. syntax baseaudiocontext.listener; value an audiolistener object. example note: for a full web audio spatialization example, see our panner-node demo. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ... var mylistener = audioctx.listener; specifications specification status comment web audio apithe definition of 'listener' in that specification. working draft ...
BaseAudioContext.sampleRate - Web APIs
hat sample-rate converters are not supported. syntax baseaudiocontext.samplerate; value a floating point number indicating the audio context's sample rate, in samples per second. example note: for a full web audio example implementation, see one of our web audio demos on the mdn github repo, like panner-node. try entering audioctx.samplerate into your browser console. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ... console.log(audioctx.samplerate); specifications specification status comment web audio apithe definition of 'samplerate' in that specification. working draft ...
BaseAudioContext - Web APIs
ly decodes audio file data contained in an arraybuffer. in this case, the arraybuffer is usually loaded from an xmlhttprequest's response attribute after setting the responsetype to arraybuffer. this method only works on complete files, not fragments of audio files. examples basic audio context declaration: const audiocontext = new audiocontext(); cross browser variant: const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audiocontext = new audiocontext(); const oscillatornode = audiocontext.createoscillator(); const gainnode = audiocontext.creategain(); const finish = audiocontext.destination; specifications specification status comment web audio apithe definition of 'baseaudiocontext' in that specification. working draft ...
Battery Status API - Web APIs
rred to as the battery api, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. this can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss. the battery status api extends
window.navigator with a navigator.getbattery() method returning a battery promise, which is resolved in a batterymanager object providing also some new events you can handle to monitor the battery status. example in this example, we watch for changes both to the charging status (whether or not we're plugged in and charging) and for changes to the battery level and timing. this is done by listening for...
BeforeInstallPromptEvent.prompt() - Web APIs
the prompt() method of the beforeinstallpromptevent interface allows a developer to show the install prompt at a time of their own choosing. syntax beforeinstallpromptevent.prompt() parameters none. returns an empty promise. example var istoosoon = true;
window.addeventlistener("beforeinstallprompt", function(e) { if (istoosoon) { e.preventdefault(); // prevents prompt display // prompt later instead: settimeout(function() { istoosoon = false; e.prompt(); // throws if called more than once or default not prevented }, 10000); } // the event was re-dispatched in response to our request // ... }); ...
BroadcastChannel - Web APIs
messages are broadcasted via a message event fired at all broadcastchannel objects listening to the channel. note: this feature is available in web workers. ...
Broadcast Channel API - Web APIs
note: this feature is available in web workers. by creating a broadcastchannel object, you can receive any messages that are posted to it. you don't have to maintain a reference to the frames or workers you wish to communicate with: they can “subscribe” to a particular channel by constructing their own broadcastchannel with the same name, and have bi-directional communication between all of them. broadcast channel interface creating or joining a channel a client joins a broadcast channel by creating a broadcastchannel object. ...
CSS.registerProperty() - Web APIs
the given name has already been registered. syntaxerror the given name isn't a valid custom property name (starts with two dashes, e.g. --foo). typeerror the required name and/or inherits dictionary members were not provided. examples the following will register a custom property, --my-color, using registerproperty(), as a color, give it a default value, and have it not inherit its value:
window.css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); in this example, the custom property --my-color has been registered using the syntax <color> . we can now use that property to transition a gradient on hover or focus. notice that with the registered property the transition works, but that it doesn't with the unregistered property...
CSSPrimitiveValue.getFloatValue() - Web APIs
the value is an <angle> in radians. css_s the value is a <time> in seconds. return value a float value in the specified unit. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if the float value can't be converted into the specified unit. example var cs =
window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("margin-top"); console.log(cssvalue.getfloatvalue(cssprimitivevalue.css_cm)); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getfloatvalue' in that specification. obsolete initial definition ...
CSSPrimitiveValue.getRGBColorValue() - Web APIs
erty can be achieved using the rgbcolor interface. syntax var rgbcolorvalue = cssprimitivevalue.getrgbcolorvalue(); return value an rgbcolor object representing the color value. exceptions type description domexception an invalid_access_err is raised if the attached property can't return an rgb color value (i.e. this is not css_rgbcolor). example var cs =
window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.getrgbcolorvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrgbcolorvalue' in that specification. obsolete initial definition ...
CSSPrimitiveValue.getRectValue() - Web APIs
to the corresponding style property can be achieved using the rect interface. syntax var rectvalue = cssprimitivevalue.getrectvalue(); return value a rect object representing the rect value. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a rect value. (i.e. this is not css_rect). example var cs =
window.getcomputedstyle(document.getelementbyid("clippeddiv")); var cssvalue = cs.getpropertycssvalue("clip"); console.log(cssvalue.getrectvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrectvalue' in that specification. obsolete initial definition ...
CSSPrimitiveValue.getStringValue() - Web APIs
mitivevalue interface is used to get a string value. if this css value doesn't contain a string value, a domexception is raised. syntax var stringvalue = cssprimitivevalue.getstringvalue(); return value a string value. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a string value. example var cs =
window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("display"); console.log(cssvalue.getstringvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getstringvalue' in that specification. obsolete initial definition ...
CSSPrimitiveValue.primitiveType - Web APIs
the getfloatvalue() method. css_string the value is a <string>. the value can be obtained by using the getstringvalue() method. css_unknown the value is not a recognized css2 value. the value can only be obtained by using the csstext attribute. css_uri the value is a <uri>. the value can be obtained by using the getstringvalue() method. example var cs =
window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.primitivetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitivetype' in that specification. obsolete initial definition ...
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
lue() instead. syntax var value = style.getpropertycssvalue(property); parameters property is a domstring representing the property name to be retrieved. return value value is a cssvalue containing the css value for a property. if none exists, returns null. example the following javascript code gets an object containing the computed rgb values of the color css property: var style =
window.getcomputedstyle(elem, null); var rgbobj = style.getpropertycssvalue('color').getrgbcolorvalue(); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification. obsolete declared as obsolete in july 2003. ...
CSSStyleDeclaration - Web APIs
yle-related methods and properties. a cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <div style="...">). via the cssstylesheet api. for example, document.stylesheets[0].cssrules[0].style returns a cssstyledeclaration object on the first css rule in the document's first stylesheet. via
window.getcomputedstyle(), which exposes the cssstyledeclaration object as a read-only interface. attributes cssstyledeclaration.csstext textual representation of the declaration block. setting this attribute changes the style. cssstyledeclaration.lengthread only the number of properties. see the item() method below. cssstyledeclaration.parentruleread only the containing cssrule. css prope...
CSS Object Model (CSSOM) - Web APIs
css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx ...
CSS Properties and Values API - Web APIs
ss custom properties. access this interface through css.registerproperty in javascript. @property defines how a browser should parse a css custom properties. access this interface through @property in css. ...
CanvasRenderingContext2D.drawWidgetAsOnScreen() - Web APIs
the non-standard and internal only canvasrenderingcontext2d.drawwidgetasonscreen() method of the canvas 2d api renders the root widget of a
window into the canvas. unlike draw
window(), this api uses the operating system to snapshot the widget on-screen, rather than reading from gecko's own compositor. this api cannot be used by web content. it is only supported on
windows, only on widgets that use omtc, and only from within the chrome process. syntax void ctx.drawwidgetasonscreen(
window); parameters
window the
window to render. specifications not part of any current specification or draft. this is a non-standard and internal only api. ...
CanvasRenderingContext2D - Web APIs
ting with gecko 7.0. use canvasrenderingcontext2d.measuretext() instead. canvasrenderingcontext2d.mozpathtext() this method was introduced in gecko 1.9 and is removed starting with gecko 7.0. canvasrenderingcontext2d.moztextalongpath() this method was introduced in gecko 1.9 and is removed starting with gecko 7.0. internal apis (chrome-context only) canvasrenderingcontext2d.draw
window() renders a region of a
window into the canvas. the contents of the
window's viewport are rendered, ignoring viewport clipping and scrolling. canvasrenderingcontext2d.demote() this causes a context that is currently using a hardware-accelerated backend to fallback to a software one. all state should be preserved. internet explorer canvasrenderingcontext2d.msfillrule the fill rule to ...
Basic usage of canvas - Web APIs
"text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document. this function, or one like it, could also be called using
window.settimeout(),
window.setinterval(), or any other event handler, as long as the page has been loaded first. here is how a template would look in action. as shown here, it is initially blank. a simple example to begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. we'll explore how this works in more detail in later examples.
Compositing example - Web APIs
e of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].reverse(); var width = 320; var height = 340; main program when the page loads, this code runs to set up and run the example:
window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number ...
Drawing text - Web APIs
measuretext() returns a textmetrics object containing the width, in pixels, that the specified text will be when drawn in the current text style. the following code snippet shows how you can measure a text and get i...
Channel Messaging API - Web APIs
ing the messagechannel() constructor. once created, the two ports of the channel can be accessed through the messagechannel.port1 and messagechannel.port2 properties (which both return messageport objects.) the app that created the channel uses port1, and the app at the other end of the port uses port2 — you send a message to port2, and transfer the port over to the other browsing context using
window.postmessage along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.) when these transferable objects are transferred, they are 'neutered' on the previous context — the one they previously belonged to. for instance a port, when is sent, cannot be used anymore by the original context. the other browsing context can listen for the mes...
Client.postMessage() - Web APIs
the message is received in the "message" event on navigator.serviceworker. syntax client.postmessage(message[, transfer]); client.postmessage(message[, { transfer }]); parameters message the message to send to the client. this can be any structured-clonable type. transfer optional a sequence of objects that are transferred with the message. the ownership of these objects is given to the destination side and they are no longer usable on the sending side. return value undefined. ...
Clients.get() - Web APIs
e worker client matching a given id and returns it in a promise. syntax self.clients.get(id).then(function(client) { // do something with your returned client }); parameters id a domstring representing the id of the client you want to get. return value a promise that resolves to a client object or undefined. examples self.clients.get(id).then(function(client) { self.clients.open
window(client.url); }); specifications specification status comment service workersthe definition of 'get()' in that specification. working draft initial definition ...
CompositionEvent.initCompositionEvent() - Web APIs
.initcompositionevent(typearg, canbubblearg, cancelablearg, viewarg, dataarg, localearg) parameters typearg a domstring representing the type of composition event; this will be one of compositionstart, compositionupdate, or compositionend. canbubblearg a boolean specifying whether or not the event can bubble. cancelablearg a boolean shether or not the event can be canceled. viewarg the
window object from which the event was generated. dataarg a domstring representing the value of the data attribute. localearg a domstring representing the value of the locale attribute. return value void. specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'initcompositionevent()' in that specification...
console - Web APIs
the console object provides access to the browser's debugging console (e.g. the web console in firefox). the specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided. the console object can be accessed from any global object.
window on browsing scopes and workerglobalscope as specific variants in workers via the property console. it's exposed as
window.console, and can be referenced as simply console. 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. note: this feature is available in web workers. note: the actual console interface is defined as all lower case (i.e. not console), for historical reasons. methods ...
Console API - Web APIs
stent ways. the console api spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions. find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via
window.console, or workerglobalscope.console in workers; accessible using just console — contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's web console. by far the most commonly-used method is console.log, which is used to log the current value contained inside a specific variable. interfaces console pr...
ConvolverNode.buffer - Web APIs
ime when this attribute is set, the buffer and the state of the attribute will be used to configure the convolvernode with this impulse response having the given normalization. the initial value of this attribute is null. syntax var audioctx = new audiocontext(); var convolver = audioctx.createconvolver(); convolver.buffer = myaudiobuffer; value an audiobuffer. example var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var convolver = audioctx.createconvolver(); ... // 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.
ConvolverNode.normalize - Web APIs
impulse responses. if normalize is set to false, then the convolution will be rendered with no pre-processing/scaling of the impulse response. changes to this value do not take effect until the next time the buffer attribute is set. syntax var audioctx = new audiocontext(); var convolver = audioctx.createconvolver(); convolver.normalize = false; value a boolean. example var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var convolver = audioctx.createconvolver(); ... // 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.
ConvolverNode - Web APIs
equal-power normalization when the buffer attribute is set, or not. methods no specific method; inherits methods from its parent, audionode. convolvernode example the following example shows basic usage of an audiocontext to create a convolver node. note: you will need to find an impulse response to complete the example below. see this codepen for an applied example. let audioctx = new
window.audiocontext(); async function createreverb() { let convolver = audioctx.createconvolver(); // load impulse response from file let response = await fetch("path/to/impulse-response.wav"); let arraybuffer = await response.arraybuffer(); convolver.buffer = await audioctx.decodeaudiodata(arraybuffer); return convolver; } ... let reverb = await createreverb(); // som...
Crypto.getRandomValues() - Web APIs
o provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number generator built into the user agent itself, but seeded with values taken from an external source of pseudorandom numbers, such as a platform-specific random number function, the unix /dev/urandom device, or other source of random or pseudorandom data. examples /* assuming that
window.crypto.getrandomvalues is available */ var array = new uint32array(10);
window.crypto.getrandomvalues(array); console.log("your lucky numbers:"); for (var i = 0; i < array.length; i++) { console.log(array[i]); } specification specification status comment web cryptography api recommendation initial definition ...
DOMPointReadOnly.toJSON() - Web APIs
method tojson() returns a dompointinit object giving the json form of the point object. syntax pointjson = dompointreadonly.tojson(); parameters none. return value a new dompointinit object whose properties are set to the values in the dompoint or dompointreadonly on which the method was called. example this example creates a dompoint object representing the top-left corner of the current
window, in screen coordinates, then converts that to json. var topleft = new dompoint(
window.screenx,
window.screeny); var pointjson = topleft.tojson(); specifications specification status comment geometry interfaces module level 1the definition of 'dompointreadonly.tojson()' in that specification. candidate recommendation initial definition ...
DataTransfer.mozCursor - Web APIs
eturns or sets the drag cursor's state. this is primarily used to control the cursor during tab drags. the possible values are: auto uses the default system behavior. default uses the default gecko behavior, which is to set the cursor to an arrow during the drag operation. note: if any value other than default is set, auto is assumed. note: this property is currently only implemented on
windows. note: this property is gecko-specific. syntax datatransfer.mozcursor; return value a domstring representing one of the values listed above. example this example shows the use of the mozcursor property. function drop_handler(event) { var dragdata = event.datatransfer; console.log("mozcursor = " + dragdata.mozcursor); } specifications this property is not defined in any web standa...
DelayNode.delayTime - Web APIs
simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code). if you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... var synthsource; playsynth.onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattri...
DelayNode - Web APIs
simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code). if you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time. var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... var synthsource; playsynth.onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattri...
DeviceMotionEvent - Web APIs
acceleration is expressed in m/s2. devicemotionevent.rotationrateread only an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is expressed in degrees per seconds. devicemotionevent.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. example
window.addeventlistener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); specifications specification status comment deviceorientation event specificationthe definition of 'devicemotionevent' in that specification. editor's draft initial definition. ...
DeviceOrientationEvent - Web APIs
tionevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. deviceorientationevent.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. example
window.addeventlistener('deviceorientation', function(event) { console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); }); specifications specification status comment deviceorientation event specification editor's draft initial specification. ...
Device Memory API - Web APIs
hmark the device or infer the device capabilities based on other factors like device manufacturer or user agent strings. accessing device memory capacity there are two ways to acces the approximate amount of ram device has: via javascript api and via client hints http header. javascript api you may query the approximate amount of ram device has by retreiving navigator.devicememory var ram1 =
window.navigator.devicememory; var ram2 = navigator.devicememory; both of these will return the same result. client hints header you also may use client hints directive device-memory to retreive the same approximate ram capacity. specifications specification status comment device memory 1 editor's draft initial definition. ...
Document: DOMContentLoaded event - Web APIs
trol; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent ='';
window.settimeout(() => {
window.location.reload(true); }, 200); });
window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log...
Document.defaultView - Web APIs
syntax var win = document.defaultview; this property is read-only. specifications specification status comment html living standardthe definition of 'document.defaultview' in that specification. living standard no change html5the definition of 'document.defaultview' in that specification. ...
Document.execCommand() - Web APIs
ption — it will wrap any containing block element). requires a tag-name string as a value argument. virtually all block-level elements can be used. (internet explorer and edge support only heading tags h1–h6, address, and pre, which must be wrapped in angle brackets, such as "<h1>".) forwarddelete deletes the character ahead of the cursor's position, identical to hitting the delete key on a
windows keyboard. heading adds a heading element around a selection or insertion point line. requires the tag-name string as a value argument (i.e. "h1", "h6"). (not supported by internet explorer and safari.) hilitecolor changes the background color for the selection or at the insertion point. requires a color value string as a value argument. usecss must be true for this to function. (not supporte...
Document.fullscreenEnabled - Web APIs
although this property is read-only, it will not throw if it is modified (even in strict mode); the setter is a no-operation and it will be ignored. ...
Document.importNode() - Web APIs
h gecko 29.0 (firefox 29 / thunderbird 29 / seamonkey 2.26)), a shallow clone is defaulted instead of a deep clone. return value the copied importednode in the scope of the importing document. note: importednode's node.parentnode is null, since it has not yet been inserted into the document tree! example const iframe = document.queryselector("iframe"); const oldnode = iframe.content
window.document.getelementbyid("mynode"); const newnode = document.importnode(oldnode, true); document.getelementbyid("container").appendchild(newnode); notes before they can be inserted into the current document, nodes from external documents should either be: cloned using document.importnode(); or adopted using document.adoptnode(). best practice: although firefox doesn't currently enforce t...
Document: readystatechange event - Web APIs
trol; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent ='';
window.settimeout(() => {
window.location.reload(true); }, 200); });
window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log...
Document.referrer - Web APIs
rrer = document.referrer; value the value is an empty string if the user navigated to the page directly (not through a link, but, for example, by using a bookmark). because this property returns only a string, it doesn't give you document object model (dom) access to the referring page. inside an <iframe>, the document.referrer will initially be set to the same value as the href of the parent
window's
window.location. specifications specification status comment html living standardthe definition of 'document.referrer' in that specification. living standard ...
Document: scroll event - Web APIs
events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. this example optimizes thescroll event for requestanimationframe. // reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position }
window.addeventlistener('scroll', function(e) { last_known_scroll_position =
window.scrolly; if (!ticking) {
window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); see more, similar examples on the resize event page. specifications specification status css object model (cssom) v...
Document.visibilityState - Web APIs
itystate read-only property returns the visibility of the document, that is in which context this element is now visible. it is useful to know if the document is in the background or an invisible tab, or only loaded for pre-rendering. possible values are: 'visible' the page content may be at least partially visible. in practice this means that the page is the foreground tab of a non-minimized
window. 'hidden' the page content is not visible to the user. in practice this means that the document is either a background tab or part of a minimized
window, or the os screen lock is active. 'prerender' the page content is being prerendered and is not visible to the user (considered hidden for purposes of document.hidden). the document may start in this state, but will never transition to it fr...
DocumentOrShadowRoot.activeElement - Web APIs
hich elements are focusable varies depending on the platform and the browser's current configuration. for example, on macos systems, elements that aren't text input elements are not typically focusable by default. note: focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document). you can get the current selection using
window.getselection(). syntax element = documentorshadowroot.activeelement value the element which currently has focus, <body> or null if there is no focused element. example html <p>select some text from one of the text areas below:</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">this is text area one. lorem ipsum dolor sit amet, consectetur adipiscing elit.
Events and the DOM - Web APIs
onclick = function(event){alert('hello world')} the function can be defined to take an event parameter. the return value is treated in a special way, described in the html specification. the problem with this method is that only one handler can be set per element and per event. accessing event interfaces event handlers may be attached to various objects (including dom elements, document, the
window object, etc.). when an event occurs, an event object is created and passed sequentially to the event listeners. the event interface is accessible from within the handler function, via the event object passed as the first argument. the following simple example shows how an event object is passed to the event handler function, and can be used from within one such function. function print(evt) { ...
EXT_texture_compression_bptc - Web APIs
on is part of the webgl api and exposes 4 bptc compressed texture formats. these compression formats are called bc7 and bc6h in microsoft's directx api. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: support depends on the system's graphics driver. there is no support on
windows. this extension is available to both, webgl1 and webgl2 contexts. constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ext.compressed_rgba_bptc_unorm_ext compresses 8-bit fixed-point data. each 4x4 block of texels consists of 128 bits of rgba or image data. see also bc7 format. ext.com...
EXT_texture_compression_rgtc - Web APIs
ture formats. rgtc is a block-based texture compression format suited for unsigned and signed red and red-green textures (red-green texture compression). webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: support depends on the system's graphics driver. there is no support on
windows. this extension is available to both, webgl1 and webgl2 contexts. constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ext.compressed_red_rgtc1_ext each 4x4 block of texels consists of 64 bits of unsigned red image data. see also bc4 unsigned. ext.compressed_signed_red_rgtc1_ext each ...
Element: auxclick event - Web APIs
hat 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. when listening for auxclick events originating on elements that do not support input or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button. on
windows this is usually autoscroll, and on macos and linux this is usually clipboard paste. this can be done by preventing the default behaviour of the mousedown or pointerdown event. additionally, you may need to avoid opening a system context menu after a right click. due to timing differences between operating systems, this too is not a preventable default behavior of auxclick. instead, this can be ...
Element.closest() - Web APIs
totype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el.nodetype === 1); return null; }; } however, if you really do require ie 8 support, then the following polyfill will do the job very slowly, but eventually. however, it will only support css 2.1 selectors in ie 8, and it can cause severe lag spikes in production websites. ...
Element.currentStyle - Web APIs
element.currentstyle is a proprietary property which is similar to the standardized
window.getcomputedstyle() method. it is available in old versions of microsoft internet explorer. however, it returns the units set in css while
window.getcomputedstyle() returns the values in pixels. polyfill this polyfill returns the values in pixels and is likely to be rather slow, as it has to call
window.getcomputedstyle() every time its value is read. /* any copyright is dedicated to the public domain. * http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", { get: function() { return
window.getcomputedstyle(this); } }); } specification not part of any specification. microsoft...
Element.getBoundingClientRect() - Web APIs
ctangle. this means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). if you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using
window.scrollx and
window.scrolly) to get a bounding rectangle which is independent from the current scrolling position. cross-browser fallback scripts requiring high cross-browser compatibility can use
window.pagexoffset and
window.pageyoffset instead of
window.scrollx and
window.scrolly. scripts without access to these properties can use code like this: // for scrollx (((t = document.documentelemen...
Element.onfullscreenchange - Web APIs
cking the value of event.target, then compares the document's fullscreenelement value to the element to see if they're the same node. this gives us a value, isfullscreen, which we pass into a function called adjustmycontrols(), which we imagine to be a function that makes adjustments to the app's user interface to present itself optimally when it's in full-screen mode versus being displayed in a
window. function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange...
Element: paste event - Web APIs
rom this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata ||
window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection =
window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste)); event.preventdefault(); }); result specifications specification status clipboard api and events ...
Element.scrollHeight - Web APIs
-bottom border-top border-bottom problems and solutions determine if an element has been totally scrolled the following equivalence returns true if an element is at the end of its scroll, false if it isn't. element.scrollheight - element.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll:
window.getcomputedstyle(element).overflowy === 'visible'
window.getcomputedstyle(element).overflowy !== 'hidden' scrollheight demo associated with the onscroll event, this equivalence can be useful to determine whether a user has read a text or not (see also the element.scrolltop and element.clientheight properties). for example: html <form name="registration"> <p> <textarea id="rules">lorem ...
Element.scrollIntoViewIfNeeded() - Web APIs
this method is a proprietary variation of the standard element.scrollintoview() method. syntax todo parameters opt_center is an optional boolean value with a default value of true: if true, the element will be aligned so it is centered within the visible area of the scrollable ancestor. ...
Element.scrollTop - Web APIs
olltop property gets or sets the number of pixels that an element's content is scrolled vertically. an element's scrolltop value is a measurement of the distance from the element's top to its topmost visible content. when an element's content does not generate a vertical scrollbar, then its scrolltop value is 0. when scrolltop is used on the root element (the <html> element), the scrolly of the
window is returned. this is a special case of scrolltop. on systems using display scaling, scrolltop may give you a decimal value. syntax // get the number of pixels scrolled. var intelemscrolltop = someelement.scrolltop; after running this code, intelemscrolltop is an integer corresponding to the number of pixels that the element's content has been scrolled upwards. // set the number of pixels ...
Element: scroll event - Web APIs
events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. this example optimizes thescroll event for requestanimationframe. // reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position }
window.addeventlistener('scroll', function(e) { last_known_scroll_position =
window.scrolly; if (!ticking) {
window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); note: you can find more examples on the resize event page. specifications specification status css object model (...
Event.composed - Web APIs
notice two things. the composed property returns true beause the click event is always able to propagate across shadow boundaries. you'll notice a difference in the value of composedpath for the two elements. 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. specifications specification status ...
Event.composedPath() - Web APIs
wo things. first, the composed property returns true beause the click event is always able to propagate across shadow boundaries. second, you'll notice a difference in the value of composedpath for the two elements. 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. specifications specification status ...
Event.msConvertURL() - Web APIs
: domstring one of the following values indicating the desired conversion type: "specified", "base64", or "unchanged". targeturl [in, optional] type: url the target url. return value this method does not return a value. example var bloblist = []; document.getelementbyid("pastezone").addeventlistener('paste', handlepaste, false); function handlepaste(evt) { var filelist =
window.clipboarddata.files; // note that
window.datatransfer.files is not applicable. if (!filelist) { console.log("filelist is null."); return; } for (var i = 0; i < filelist.length; i++) { var file = filelist[i]; var url = url.createobjecturl(file); if (evt.converturl) { // use standard if available. evt.converturl(file, "specified...
EventTarget - Web APIs
eventtarget is a dom interface implemented by objects that can receive events and may have listeners for them. element, document, and
window are the most common event targets, but other objects can be event targets, too. for example xmlhttprequest, audionode, audiocontext, and others. many event targets (including elements, documents, and
windows) also support setting event handlers via onevent properties and attributes. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect ...
ExtendableEvent - Web APIs
oke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope. it is not available when it is a
window, or the scope of another kind of worker. constructor extendableevent() creates a new extendableevent object. properties doesn't implement any specific properties, but inherits properties from its parent, event. methods inherits methods from its parent, event. extendableevent.waituntil() extends the lifetime of the event. it is intended to be called in the install eventhandler fo...
FetchEvent.respondWith() - Web APIs
er: if a fetch() is intercepted, then you can observe the final url on the result's response.url. if a worker script is intercepted, then the final url is used to set self.location and used as the base url for relative urls in the worker script. if a stylesheet is intercepted, then the final url is used as the base url for resolving relative @import loads. note that navigation requests for
windows and iframes do not use the final url. the way the html specification handles redirects for navigations ends up using the request url for the resulting
window.location. this means sites can still provide an "alternate" view of a web page when offline without changing the user-visible url. syntax fetchevent.respondwith( // promise that resolves to a response. ); parameters a response or...
Using Fetch - Web APIs
tch('/login', { method: 'post', body: form }); both request and response (and by extension the fetch() function), will try to intelligently determine the content type. a request will also automatically set a content-type header if none is set in the dictionary. feature detection fetch api support can be detected by checking for the existence of headers, request, response or fetch() on the
window or worker scope. for example: if (
window.fetch) { // run my fetch request here } else { // do something with xmlhttprequest? } polyfill to use fetch in unsupported browsers, there is a fetch polyfill available that recreates the functionality for non-supporting browsers. specifications specification status comment fetch living standard initial definitio...
File.type - Web APIs
actually read the bytestream of a file to determine its media type. it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png". moreover, file.type is generally reliable only for common file types like images, html documents, audio and video. uncommon file extensions would return an empty string. client configuration (for instance, the
windows registry) may result in unexpected values even for common types. developers are advised not to rely on this property as a sole validation scheme. specifications specification status comment file apithe definition of 'type' in that specification. working draft initial definition. ...
FileSystem - Web APIs
a "virtual drive" within the browser sandbox. if you want to gain access to the users filesystem you need to invoke the user by eg. installing a chrome extension. the relevant chrome api can be found here. basic concepts there are two ways to get access to a filesystem object: you can directly ask for one representing a sandboxed file system created just for your web app directly by calling
window.requestfilesystem(). if that call is successful, it executes a callback handler, which receives as a parameter a filesystem object describing the file system. you can get it from a file system entry object, through its filesystem property. properties filesystem.name read only a usvstring representing the file system's name. this name is unique among the entire list of exposed file system...
FileSystemFileEntry - Web APIs
ewriter.onwriteend = function(e) { console.log('write completed.'); }; filewriter.onerror = function(e) { console.log('write failed: ' + e.tostring()); }; // create a new blob and write it to log.txt. var bb = new blobbuilder(); bb.append('meow'); filewriter.write(bb.getblob('text/plain')); }, errorhandler); }, errorhandler); }
window.requestfilesystem(
window.temporary, 1024*1024, oninitfs, errorhandler); specifications specification status comment file and directory entries apithe definition of 'filesystemfileentry' in that specification. draft draft of proposed api browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contrib...
FileHandle API - Web APIs
rror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "temporary file" as long as you hold the filehandle instance. if you want a file to survive a page refresh/app relaunch, you need to store the handle in a database (not necessarily the one used to create the filehandle object). ...
File and Directory Entries API support in Firefox - Web APIs
ementrysync entrysync filesystemfileentry fileentry filesystemfileentrysync fileentrysync be sure to account for this in your code by allowing for both names. hopefully chrome will be updated soon to use the newer names! to ensure your code will work in both chrome and other browsers, you can include code similar to the following: var filesystemdirectoryentry =
window.filesystemdirectoryentry ||
window.directoryentry; var filesystementry =
window.filesystementry ||
window.entry; limitations in firefox next, let's look at limitations of the firefox implementation of the api. in broad strokes, those limitations can be summarized as follows: content scripts can't create file systems or initiate access to a file system. there are only two ways to get access ...
Introduction to the File and Directory Entries API - Web APIs
pass a callback function. you send requests for operations to happen, and get notified by callbacks. in contrast, the synchronous api does not use callbacks because the api methods return values. global methods of the asynchronous and synchronous apis. the asynchronous api has the following global methods: requestfilesystem() and resolvelocalfilesystemurl(). these methods are members of both the
window object and the worker global scope. the synchronous api, on the other hand, uses the following methods: requestfilesystemsync() and resolvelocalfilesystemsyncurl(). these synchronous methods are members of the worker's global scope only, not the
window object. the synchronous api can be simpler for some tasks. its direct, in-order programming model can make code easier to read. the drawback o...
File and Directory Entries API - Web APIs
lesystemflags defines a set of values which are used when specifying option flags when calling certain methods in the file and directory entries api. fileerror represents an error which is generated by asynchronous file system calls. there are also two global functions (which are not part of the specification at this time and are implemented only by google chrome). they're available on the
window object and implemented in localfilesystem: requestfilesystem() and resolvelocalfilesystemurl(). synchronous api the synchronous api is should only be used in workers; these calls block until they're finished executing, and simply return the results instead of using callbacks. using them on the main thread will block the browser, which is naughty. the interfaces below otherwise mirror the ones f...
Using the Frame Timing API - Web APIs
fied when the observer was created. creating an observer to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer callback. in the following example, two observers for the "frame" performance entry type are created and the first observer constructor uses inline function syntax. ...
Gamepad.id - Web APIs
hexadecimal strings containing the usb vendor and product id of the controller the name of the controller as provided by the driver. for example, a ps2 controller returned 810-3-usb gamepad. this information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user. syntax readonly attribute domstring id; example
window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a string. specifications specification status comment gamepadthe definition of 'gamepad.id' in that specification. working draft initial definition ...
Gamepad.index - Web APIs
the gamepad.index property of the gamepad interface returns an integer that is auto-incremented to be unique for each device currently connected to the system. this can be used to distinguish multiple controllers; a gamepad that is disconnected and reconnected will retain the same index. syntax readonly attribute long index; example
window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a number. specifications specification status comment gamepadthe definition of 'gamepad.index' in that specification. working draft initial definition ...
Gamepad - Web APIs
provide access to experimental features like haptic feedback and webvr controller pose information. gamepad.hand read only an enum defining what hand the controller is being held in, or is most likely to be held in. gamepad.hapticactuators read only an array containing gamepadhapticactuator objects, each of which represents haptic feedback hardware available on the controller. example
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); specifications specification status comment gamepadthe definition of 'gamepad' in that specification. working draft initial definition gamepad ex...
GamepadEvent.gamepad - Web APIs
the gamepadevent.gamepad property of the gamepadevent interface returns a gamepad object, providing access to the associated gamepad data for fired gamepadconnected and gamepaddisconnected events. syntax readonly attribute gamepad gamepad; example the gamepad property being called on a fired
window.gamepadconnected event.
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); value a gamepad object. specifications specification status comment gamepadthe definition of 'gamepadevent.gamepad' in that specification. working draft initial definition ...
Gamepad API - Web APIs
ller designed to provide haptic feedback to the user (if available), most commonly vibration hardware. see also the extensions to the gamepad interface, for features that allow you to access the above information. extensions to other interfaces navigator navigator.getgamepads() an extension to the navigator object that returns an array of gamepad objects, one for each connected gamepad.
window events
window.ongamepadconnected represents an event handler that will run when a gamepad is connected (when the gamepadconnected event fires).
window.ongamepaddisconnected represents an event handler that will run when a gamepad is disconnected (when the gamepaddisconnected event fires). tutorials and guides using the gamepad api implementing controls using the gamepad api specific...
GlobalEventHandlers.onanimationcancel - Web APIs
ode is hidden—either directly or because any of its containing nodes are hidden—using css. syntax var animcancelhandler = target.onanimationcancel; target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or
window (
window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example html <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { widt...
GlobalEventHandlers.onanimationend - Web APIs
active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay). syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or
window (
window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; bord...
GlobalEventHandlers.onanimationiteration - Web APIs
eted by executing the last animation step. syntax var animiterationhandler = target.onanimationiteration; target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has reached the end of an iteration while running on the target, where the target object is an html element (htmlelement), document (document), or
window (
window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example let's create an animation which automatically pauses at the end of each iteration, allowing the user to choose whether or not to start the next iteration. much of this code is the same as in other examples of animation events, so it may look familiar. html <div c...
GlobalEventHandlers.onanimationstart - Web APIs
vent handler for the animationstart event. this event is sent when a css animation starts to play. syntax var animstarthandler = target.onanimationstart; target.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or
window (
window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; bord...
GlobalEventHandlers.onblur - Web APIs
the blur event is raised when an element loses focus. note: the opposite of onblur is onfocus. syntax target.onblur = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. example this example uses onblur and onfocus to change the text within an <input> element. ...
GlobalEventHandlers.onclose - Web APIs
syntax target.onclose = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one onclose handler can be assigned to an object at a time. ...
GlobalEventHandlers.onkeypress - Web APIs
= event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page. /* type the word "exit" in any point of your page... ...
GlobalEventHandlers.onpointerleave - Web APIs
this event is part of the pointer events api. syntax eventtarget.onpointerleave = leavehandler; var leavehandler = eventtarget.onpointerleave; value leavehandler the eventlistener which will be invoked to handle pointerleave events sent to the target. example this example shows two ways to use onpointerleave to set an element's pointerleave event handler. ...
GlobalEventHandlers.ontransitionend - Web APIs
y attribute which applies to the target. another is if the display attribute is set to none. syntax var transitionendhandler = target.ontransitionend; target.ontransitionend = function value a function to be called when a transitionend event occurs indicating that a css transition has completed on the target, where the target object is an html element (htmlelement), document (document), or
window (
window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration. elapsedtime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elapsedtime...
GlobalEventHandlers - Web APIs
the globaleventhandlers mixin describes the event handlers common to several interfaces like htmlelement, document, or
window. each of these interfaces can, of course, add more event handlers in addition to the ones listed below. note: globaleventhandlers is a mixin and not an interface; you can't actually create an object of type globaleventhandlers. properties this interface doesn't include any properties except for the event handlers listed below. event handlers these event handlers are defined on the globaleventhandlers mixin, and implemented by htmlelement, document,
window, as well as by workerglobalscope for web workers. globaleventhandlers.onabort is an eventhandler representing the code to be called when the abort event is raised. globaleventhandlers.onanimationcancel a...
HTMLButtonElement.labels - Web APIs
ls read-only property returns a nodelist of the <label> elements associated with the <button> element. syntax var labelelements = button.labels; return value a nodelist containing the <label> elements associated with the <button> element. example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living standard ...
HTMLCanvasElement.mozFetchAsStream() - Web APIs
ndard and internal method has been removed. syntax void canvas.mozfetchasstream(callback, type); parameters callback an nsiinputstreamcallback. type optional a domstring indicating the image format. the default type is image/png. return value none. examples save to disk with mozfetchasstream (chrome context only) this technique also converts it to ico, however it will not work in
windows xp as winxp cannot convert from png to ico. it saves to the desktop it uses fileutils.jsm. also uses netutil.jsm var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); var netutilcallback = function() { return functi...
HTMLCanvasElement.toDataURL() - Web APIs
pwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. ...
HTMLDocument - Web APIs
the htmldocument interface, which may be accessed through the
window.htmldocument property, extends the
window.htmldocument property to include methods and properties that are specific to html documents. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="...
HTMLElement.lang - Web APIs
value for lang languageused is a string variable that gets the language in which the text of the current element is written. newlanguage is a string variable with its value setting the language in which the text of the current element is written. example // this snippet compares the base language and // redirects to another url based on language if (document.documentelement.lang === "en") {
window.location.href = "some_document.html.en"; } else if (document.documentelement.lang === "ru") {
window.location.href = "some_document.html.ru"; } specification specification status comment document object model (dom) level 2 html specificationthe definition of 'lang' in that specification. obsolete ...
HTMLElement.offsetHeight - Web APIs
an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var intelemoffsetheight = element.offsetheight; intelemoffsetheight is a variable storing an integer corresponding to the offsetheight pixel value of the element. the offsetheight property is read-only. example the example image above shows a scrollbar and an offsetheight which fits on the
window. however, non-scrollable elements may have large offsetheight values, much larger than the visible content. these elements are typically contained within scrollable elements; consequently, these non-scrollable elements may be completely or partly invisible, depending on the scrolltop setting of the scrollable container. specification specification status comment css ...
HTMLHyperlinkElementUtils.origin - Web APIs
port, 80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is browser dependant; for url using the blob: scheme, the origin of the url following blob:. e.g "blob:https://mozilla.org" will have "https://mozilla.org". note: this feature is available in web workers. syntax string = object.origin; examples // on this page, returns the origin var result =
window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.origin' in that specification. living standard initial definition. ...
HTMLImageElement.height - Web APIs
/files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innertext = clockimage.height; };
window.addeventlistener("load", updateheight);
window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own
window. specifications specification status comment html living standardthe definition of 'htmlimageelement.height' in that specification. living standard browser compatibility the compatibility table on ...
HTMLInputElement.labels - Web APIs
linputelement.labels read-only property returns a nodelist of the <label> elements associated with the <input> element. syntax var labelelements = input.labels; return value a nodelist containing the <label> elements associated with the <input> element. example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living standard no...
HTMLMeterElement.labels - Web APIs
y returns a nodelist of the <label> elements associated with the <meter> element. syntax var labelelements = meter.labels; return value a nodelist containing the <label> elements associated with the <meter> element. example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living standard no...
HTMLOutputElement.labels - Web APIs
ls read-only property returns a nodelist of the <label> elements associated with the <output> element. syntax var labelelements = output.labels; return value a nodelist containing the <label> elements associated with the <output> element. example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living standard ...
HTMLProgressElement.labels - Web APIs
s a nodelist of the <label> elements associated with the <progress> element. syntax var labelelements = progress.labels; return value a nodelist containing the <label> elements associated with the <progress> element. example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living stand...
HTMLSelectElement.labels - Web APIs
ated with the <select> element. syntax var labelelements = select.labels; return value a nodelist containing the <label> elements associated with the <select> element. example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living standard ...
HTMLSelectElement.options - Web APIs
s a htmloptionscollection of the <option> elements contained by the <select> element. syntax var options = select.options; return value a htmloptionscollection containing the <option> elements contained by the <select> element. example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript
window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification. living standard ...
HTMLTextAreaElement.labels - Web APIs
property returns a nodelist of the <label> elements associated with the <textarea> element. syntax var labelelements = textarea.labels; return value a nodelist containing the <label> elements associated with the <textarea> element. example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript
window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living stand...
HTMLTextAreaElement - Web APIs
ngth and number of lines example create a textarea with a maximum number of characters per line and a maximum number of lines: first, create a function that takes the text field and a key event as input and determines if any of the limits have been reached. if the limit has not been reached, it will return the key. ...
Drag Operations - Web APIs
t specifies which operation was performed. the source can use this information after a move operation to remove the dragged item from the old location. the mozusercancelled property will be set to true if the user cancelled the drag (by pressing escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful. a drop can occur inside the same
window or over another application. the dragend event will always fire regardless. the event's screenx and screeny properties will be set to the screen coordinates where the drop occurred. after the dragend event has finished propagating, the drag and drop operation is complete. [1]: in gecko, dragend is not dispatched if the source node is moved or removed during the drag (e.g. on drop or dragover). ...
HashChangeEvent.newURL - Web APIs
the newurl read-only property of the hashchangeevent interface returns the new url to which the
window is navigating. syntax let neweventurl = event.newurl; value a domstring. example
window.addeventlistener('hashchange', function(event) { console.log('hash changed to ' + event.newurl); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: newurl' in that specification. living standard ...
HashChangeEvent.oldURL - Web APIs
the oldurl read-only property of the hashchangeevent interface returns the previous url from which the
window was navigated. syntax let oldeventurl = event.oldurl; value a domstring. example
window.addeventlistener('hashchange', function(event) { console.log('hash changed from ' + event.oldurl); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: oldurl' in that specification. living standard ...
History.forward() - Web APIs
.go(1). this method is asynchronous. add a listener for the popstate event in order to determine when the navigation has completed. syntax history.forward() examples the following examples create a button that moves forward one step in the session history. html <button id='go-forward'>go forward!</button> javascript document.getelementbyid('go-forward').addeventlistener('click', e => {
window.history.forward(); }) specifications specification status comment html living standardthe definition of 'history' in that specification. living standard no change from html5. html5the definition of 'history' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from s...
IDBCursor.delete() - Web APIs
write'); 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. ...
IDBDatabase.close() - Web APIs
n is not actually closed until all transactions created using this connection are complete. no new transactions can be created for this connection once this method is called. methods that create transactions throw an exception if a closing operation is pending. note: this feature is available in web workers. 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...
IDBDatabase.createObjectStore() - Web APIs
as misleading; this has now been fixed (see bug 1176165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database. invalidaccesserror if autoincrement is set to true and keypath is either an empty string or an array containing an empty string. 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(). // this handler is only supported in recent browsers. request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) {...
IDBDatabase.name - Web APIs
syntax var dbname = idbdatabase.name; value a domstring containing the name of the connected database. 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. for a full example, see our to-do notifications app (view example live). // 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 ...
IDBDatabase.objectStoreNames - Web APIs
database interface is a domstringlist containing a list of the names of the object stores currently in the connected database. note: this feature is available in web workers. syntax var list[] = idbdatabase.objectstorenames; value a domstringlist containing a list of the names of the object stores currently in the connected database. 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 variable. this is used a lot...
IDBDatabase.transaction() - Web APIs
he value for the mode parameter is invalid. invalidaccesserror the function was called with an empty list of store names. example in this example we open a database connection, then use transaction() to open a transaction on the database. for a complete example, see our to-do notifications app (view example live.) var db; // 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 displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // op...
IDBDatabase.version - Web APIs
perty of the idbdatabase interface is a 64-bit integer that contains the version of the connected database. when a database is first created, this attribute is an empty string. note: this feature is available in web workers. syntax var myinteger = idbdatabase.version; value an integer containing the version of the connected database. 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 variable. this is used a ...
IDBFactory.cmp() - Web APIs
value description -1 1st key is less than the 2nd key 0 1st key is equal to the 2nd key 1 1st key is greater than the 2nd key exceptions this method may raise a domexception of the following types: attribute description dataerror one of the supplied keys was not a valid key. example var a = 1; var b = 2; var result =
window.indexeddb.cmp(a, b); console.log( "comparison results: " + result ); specifications specification status comment indexed database api 2.0the definition of 'cmp()' in that specification. recommendation indexed database api draftthe definition of 'cmp()' in that specification. recommendation browser compatibility the compatibility table...
IDBFactory.deleteDatabase() - Web APIs
store does not exist. 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. ...
IDBObjectStore.add() - Web APIs
owing 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...
IDBObjectStore.autoIncrement - Web APIs
re does not auto increment. 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(). after the object store has been created, we log objectstore.autoincrement to the console. 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...
IDBObjectStore.clear() - Web APIs
ad-only mode. transactioninactiveerror this idbobjectstore's transaction is inactive. 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 clear...
IDBObjectStore.delete() - Web APIs
ror the key is not a valid key or a key range. 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 trans...
IDBObjectStore.get() - Web APIs
tabase and get one specific record from object store using get() — a sample record with the key "walk dog". once this data object is retrieved, you could then update it using normal javascript, then put it back into the database using a idbobjectstore.put operation. 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,...
IDBObjectStore.indexNames - Web APIs
store.indexnames; value a domstringlist. 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(). after the object store has been created, we log objectstore.indexnames to the console. 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...
IDBObjectStore.keyPath - Web APIs
objectstore.keypath; value any value type. 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(). after the object store has been created, we log objectstore.keypath to the console. 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...
IDBObjectStore.name - Web APIs
ject store is already using the specified name. 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(). after the object store has been created, we log objectstore.name to the console. 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...
IDBObjectStore.transaction - Web APIs
action; value an idbtransaction object. 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(). after the object store has been created, we log objectstore.transaction to the console. 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...
IDBOpenDBRequest.onblocked - Web APIs
n the db variable. // this is used a lot below db = request.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 request.onupgradeneeded = function(event) { var db = event.target.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" }); ... }; request.onblocked =...
IDBOpenDBRequest.onupgradeneeded - Web APIs
web workers. syntax idbopendbrequest.onupgradeneeded = function(event) { ... }; example in the following example you can see the 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; // request version 3 of the database. 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. request.onupgradeneeded = function(event) { db = request.result; db.onerror = function(errorevent) { note.innerhtml += '<li>error load...
IDBRequest - Web APIs
fired when an idbrequest succeeds. also available via the onsuccess property. example in the following code snippet, we open a database asynchronously and make a request; onerror and onsuccess functions are included to handle the success and error cases. 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. db = dbopenrequest.result; }; s...
IDBTransaction.abort() - Web APIs
me 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. at the end, we simply abort any activity done under the current transaction using abort(). 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 inse...
IDBTransaction.db - Web APIs
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. at the end, we return the associated database connection using db. 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...
IDBTransaction.error - Web APIs
event handlers to report on the outcome of the transaction opening in the event of success or failure. note the transaction.onerror = function(event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful. 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...
IDBTransaction.mode - Web APIs
tabase 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. at the end, we simply log the mode of the current transaction using mode. 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...
IDBTransaction.objectStore() - Web APIs
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...
IDBTransaction.onabort - Web APIs
ect 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. note the transaction.onabort = function(event) { }; block, reporting when the transaction has been aborted. 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...
IDBTransaction.oncomplete - Web APIs
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. note the transaction.oncomplete = function(event) { }; block, which reports back when the transaction was successful. 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...
IDBTransaction.onerror - Web APIs
event handlers to report on the outcome of the transaction opening in the event of success or failure. note the transaction.onerror = function(event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful. 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...
IIRFilterNode() - Web APIs
e web audio api, the options passed into the iir filter upon creation are not optional. the filter needs these values to work and with the vast range of filters available, there is no default. return value a new iirfilternode object instance. examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.9991880801, 0.9873035442]; const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification. working draft initial definition. browser compatibility the ...
IdleDeadline.didTimeout - Web APIs
if didtimeout is true, the idledeadline object's timeremaining() method will return approximately 0. idle callbacks support the concept of a timeout in order to ensure that whatever task they're meant to perform actually happens, even if the user agent never has enough idle time available. ...
IdleDeadline - Web APIs
it offers a method, timeremaining(), which lets you determine how much longer the user agent estimates it will remain idle and a property, didtimeout, which lets you determine if your callback is executing because its timeout duration expired. to learn more about how request callbacks work, see collaborative scheduling of background tasks. properties idledeadline.didtimeout read only a boolean whose value is true if the callback is being executed because the timeout specified when the idle callback was installed has expired. ...
ImageBitmapRenderingContext - Web APIs
the imagebitmaprenderingcontext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given imagebitmap. its context id (the first argument to htmlcanvaselement.getcontext() or offscreencanvas.getcontext()) is "bitmaprenderer". this interface is available in both the
window and the worker context. methods imagebitmaprenderingcontext.transferfromimagebitmap() displays the given imagebitmap in the canvas associated with this rendering context. ownership of the imagebitmap is transferred to the canvas. this was previously named transferimagebitmap(), but was renamed in a spec change. the old name is being kept as an alias to avoid code breakage. specifications specification status comment htm...
Basic concepts - Web APIs
lications from accessing data with a different origin. for example, while an app or a page in http://www.example.com/app/ can retrieve data from http://www.example.com/dir/, because they have the same origin, it cannot retrieve data from http://www.example.com:8080/dir/ (different port) or https://www.example.com/dir/ (different protocol), because they have different origins. note: third party
window content (e.g. <iframe> content) can access the indexeddb store for the origin it is embedded into, unless the browser is set to never accept third party cookies (see bug 1147821.) definitions this section defines and explains terms used in the indexeddb api. database database a repository of information, typically comprising one or more object stores. each database must have the followi...
Browser storage limits and eviction criteria - Web APIs
in this context: indexeddb asm.js caching cache api cookies note: in firefox, web storage will soon start to use the same storage management tools too, as described in this document. note: in private browsing mode, most data storage is not supported. local storage data and cookies are still stored, but they are ephemeral — the data is deleted when you close the last private browsing
window. the "last access time" of origins is updated when any of these are activated/deactivated — origin eviction will delete data for all these quota clients. in chrome/opera, the quota management api handles quota management for appcache, indexeddb, websql, and file system api. different types of data storage even in the same browser, using the same storage method, there are different classes ...
IndexedDB API - Web APIs
only talked about. the process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers. browser storage limits and eviction criteria attempts to explain how this works, at least in the case of firefox. interfaces to get access to a database, call open() on the indexeddb attribute of a
window object. this method returns an idbrequest object; asynchronous operations communicate to the calling application by firing events on idbrequest objects. connecting to a database idbenvironment provides access to indexeddb functionality. it is implemented by the
window and worker objects. this interface isn't part of the 2.0 specification. idbfactory provides access to a database. this is t...
Keyboard.getLayoutMap() - Web APIs
e. return value a promise that resolves with an instance of keyboardlayoutmap. example the following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard. var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw');
window.alert('press ' + upkey + ' to move up.'); }) specifications specification status comment keyboard mapthe definition of 'getlayoutmap()' in that specification. editor's draft initial definition. ...
Keyboard - Web APIs
he lock() method and returns synchronously. example the following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard. if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw');
window.alert('press ' + upkey + ' to move up.'); }); } else { // do something else. } specifications specification status comment keyboard mapthe definition of 'keyboard' in that specification. editor's draft initial definition. keyboard lockthe definition of 'keyboard' in that specification. editor's draft adds lock() and unlock(). ...
KeyboardEvent: code values - Web APIs
the following tables show what code values are used for each native scancode or virtual keycode on major platforms. the reason is that some browsers choose to interpret physical keys differently, there are some differences in which keys map to which codes. these tables show those variations when known. code values code values on
windows this table shows the
windows scan codes representing keys and the keyboardevent.code values which correspond to those hardware keys. only keys which generate scan codes on
windows are listed. keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x0004 ...
KeyboardEvent.initKeyboardEvent() - Web APIs
nitkeyboardevent(typearg, canbubblearg, cancelablearg, viewarg, chararg, keyarg, locationarg, modifierslistarg, repeat) parameters typearg the type of keyboard event; this will be one of keydown, keypress, or keyup. canbubblearg whether or not the event can bubble. cancelablearg whether or not the event can be canceled. viewarg the
windowproxy it is associated to. chararg the value of the char attribute. keyarg the value of the key attribute. locationarg the value of the location attribute. modifierslistarg a whitespace-delineated list of modifier keys that should be considered to be active on the event's key. for example, specifying "control shift" indicates that the user was holding down the control and shift keys when p...
KeyboardEvent.metaKey - Web APIs
the keyboardevent.metakey read-only property returning a boolean that indicates if the meta key was pressed (true) or not (false) when the event occurred. some operating systems may intercept the key so it is never detected. note: on macintosh keyboards, this is the ⌘ command key. on
windows keyboards, this is the
windows key (⊞
windows). at least as of firefox 48, the ⊞
windows key is not considered the "meta" key. keyboardevent.metakey is false when the ⊞
windows is pressed. syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) { alert("metakey = " + e.metakey); } <button onclick="ismetakey(event)">click me with the meta key</button> specifications specification status comment docu...
KeyboardLayoutMap.get() - Web APIs
the item to return from the map. return value the value of the specified key. example the following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard. var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw');
window.alert('press ' + upkey + ' to move up.'); } specifications specification status comment keyboard mapthe definition of 'get()' in that specification. editor's draft initial definition. ...
KeyboardLayoutMap - Web APIs
ng whether the keyboardlayoutmap object has an element with the specified key. examples the following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard. var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw');
window.alert('press ' + upkey + ' to move up.'); }) specifications specification status comment keyboard mapthe definition of 'keyboardlayoutmap' in that specification. editor's draft initial definition. ...
Keyboard API - Web APIs
ystem keys section of the ui events keyboardevent code values spec. the following example demonstrates how to get the location-specific or layout-specific string associated with the key labeled w on an english qwerty keyboard. if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw');
window.alert('press ' + upkey + ' to move up.'); }); } else { // do something else. } keyboard locking richly interactive web pages, games, and remote-streaming experiences often require access to special keys and keyboard shortcuts while in full-screen mode. examples of such key/key combinations include escape, alt+tab, and ctrl+n. those keys and key combinations are typically captured by the us...
Location: origin - Web APIs
port, 80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is browser dependant; for url using the blob: scheme, the origin of the url following blob:. e.g "blob:https://mozilla.org" will have "https://mozilla.org". note: this feature is available in web workers. syntax string = object.origin; examples // on this page, returns the origin var result =
window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status comment html living standardthe definition of 'origin' in that specification. living standard initial definition. ...
Location: replace() - Web APIs
he origin of the page originally described by the location object, mostly when the script is hosted on a different domain. if the provided url is not valid, a domexception of the syntax_error type is thrown. syntax object.replace(url); parameters url is a domstring containing the url of the page to navigate to. examples // navigate to the location.reload article by replacing this page
window.location.replace('/docs/web/api/location.reload'); specifications specification status comment html living standardthe definition of 'location.replace()' in that specification. living standard no change from html5. html5the definition of 'location.replace()' in that specification. recommendation initial definition. ...
MSSiteModeEvent - Web APIs
preventdefault cancels the default action of an event. stopimmediatepropagation prevents any further propagation of an event. stoppropagation prevents propagation of an event beyond the current target. properties property description actionurl gets the url of a jump list item that is removed. *this property is not supported for
windows store apps using javascript. bubbles gets a value that indicates whether an event propagates up from the event target. buttonid gets the thumbnail toolbar button id that is clicked. *this property is not supported for
windows store apps using javascript. cancelable gets a value that indicates whether you can cancel an event's default action. cancelbub...
MediaDevices.ondevicechange - Web APIs
hat occurred. there is no information about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices(). example in this example, we create a function called updatedevicelist(), which is called once when mediadevices.getusermedia() successfully obtains a stream, and then is called any time the device list changes. it displays in the browser
window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. because the example provides a handler for the devicechange event, the list is refreshed any time a media device is attached to or removed from the device running the sample. html content <p>click the start button below to begin the demonstration.</p> <di...
MediaElementAudioSourceNode.mediaElement - Web APIs
is receiving audio. this stream was specified when the node was first created, either using the mediaelementaudiosourcenode() constructor or the audiocontext.createmediaelementsource() method. syntax audiosourceelement = mediaelementaudiosourcenode.mediaelement; value an htmlmediaelement representing the element which contains the source of audio for the node. examples const audioctx = new
window.audiocontext(); const audioelem = document.queryselector('audio'); let options = { mediaelement: audioelem } let source = new mediaelementaudiosourcenode(audioctx, options); console.log(source.mediaelement); specifications specification status comment web audio apithe definition of 'mediaelementaudiosourcenode.mediaelement' in that specification. working draft ...
expiration - Web APIs
the mediakeysession.expiration read-only property returns the time after which the keys in the current session can no longer be used to decrypt media data, or nan if no such time exists. this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. this value may change during a session lifetime, such as when an action triggers the start of a
window. syntax var expirationtime = mediakeysessionobj.expiration; specifications specification status comment encrypted media extensionsthe definition of 'expiration' in that specification. recommendation initial definition ...
MediaKeySession - Web APIs
longer valid for decrypting media data. mediakeysession.expiration read only the time after which the keys in the current session can no longer be used to decrypt media data, or nan if no such time exists. this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. this value may change during a session lifetime, such as when an action triggers the start of a
window. mediakeysession.keystatuses read only contains a reference to a read-only mediakeystatusmap of the current session's keys and their statuses. mediakeysession.sessionid read only contains a unique string generated by the cdm for the current media object and its associated keys or licenses. event handlers mediakeysession.onkeystatuseschange sets the eventhandler called when there has b...
MediaQueryList.addListener() - Web APIs
nt to run when the media query status changes. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a mediaquerylistevent, which inherits from event. return value void. ...
MediaQueryList.matches - Web APIs
oolean which is true if the document currently matches the media query list; otherwise, it's false. examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(
window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification. working draft initial definition ...
Recording a media element - Web APIs
used to output text strings to a <div> so we can share information with the user. not very pretty but it gets the job done for our purposes. function wait(delayinms) { return new promise(resolve => settimeout(resolve, delayinms)); } the wait() function returns a new promise which resolves once the specified number of milliseconds have elapsed. it works by using an arrow function which calls
window.settimeout(), specifying the promise's resolution handler as the timeout handler function. that lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later. starting media recording the startrecording() function handles starting the recording process: function startrecording(stream, lengthinms) { let recorder = new mediarecorder(stream);...
MediaStream Recording API - Web APIs
recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ... } } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var url = url.createobjecturl(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click();
window.url.revokeobjecturl(url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can also use the properties of the mediarecorder object to determine the state of the recording process, and its pause() and resume() methods to pause and resume recording of the source media. if you n...
MediaTrackConstraints.logicalSurface - Web APIs
the mediatrackconstraints dictionary's logicalsurface property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the logicalsurface constrainable property. this is used to specify whether or not getdisplaymedia() should allow the user to choose display surfaces which are not necessarily fully visible on the screen, such as occluded
windows or the complete content of
windows which are large enough to require scrolling to see their entire contents. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.logicalsurface as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they'r...
MessageChannel() - Web APIs
using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage), putting it into a paragraph. messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var other
window = ifr.content
window; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { other
window.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications ...
MessageChannel.port2 - Web APIs
using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage), putting it into a paragraph. messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var other
window = ifr.content
window; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { other
window.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications ...
MessageEvent.MessageEvent() - Web APIs
ontained in the messageevent. this can be of any data type, and will default to null if not specified. origin: a usvstring representing the origin of the message emitter. this defaults to an empty string ("") if not specified. lasteventid: a domstring representing a unique id for the event. this defaults to an empty string ("") if not specified. source: an messageeventsource (which can be a
windowproxy, messageport, or serviceworker object) representing the message emitter. this defaults to null if not set. ports: an array of messageport objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker). this defaults to an empty array ([]) if not specified. example...
MessageEvent.source - Web APIs
the source read-only property of the messageevent interface is a messageeventsource (which can be a
windowproxy, messageport, or serviceworker object) representing the message emitter. syntax let mysource = messageevent.source; value a messageeventsource (which can be a
windowproxy, messageport, or serviceworker object) representing the message emitter. example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.source); }; specifications specification status comment html living standardthe definition of ' messageevent: source' in that specification. living standard ...
MessagePort.onmessage - Web APIs
the iframe using messageport.postmessage along with a message. the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives. var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var other
window = ifr.content
window; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { other
window.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too). specifications ...
MouseEvent() - Web APIs
sition of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "screeny", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "clientx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the client
window of user's screen; setting this value doesn't move the mouse pointer. "clienty", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the client
window of the user's screen; setting this value doesn't move the mouse pointer. "ctrlkey", optional and defaulting to false, of type boolean, that indicates if the ctrl key was simultaneously pressed. "shif...
MouseEvent.metaKey - Web APIs
the mouseevent.metakey read-only property is a boolean that indicates whether the meta key was pressed or not when a given mouse event occurs. be aware that many operating systems bind special functionality to the meta key, so this property may be false even when the key is actually pressed. on
windows, for example, this key may open the start menu. note: on macintosh keyboards, this key is the command key (⌘). on
windows keyboards, this key is the
windows key (⊞). syntax var metakeypressed = instanceofmouseevent.metakey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed. example this example logs the metakey property when you trigger a click event. html <p>click anywhere to test the <code>metakey</code> propert...
MouseEvent.pageX - Web APIs
evised data type. example more examples you can also see an example that demonstrates how to access the mouse position information in every available coordinate system. let's take a look at a simple example that shows you the mouse's position relative to the page's origin. since this example is presented in an <iframe>, that top-left corner is the top-left corner of the frame, not the browser
window. javascript var box = document.queryselector(".box"); var pagex = document.getelementbyid("x"); var pagey = document.getelementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updated...
MouseEvent - Web APIs
hod does nothing. example this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods. ...
msPlayToPreferredSourceUri - Web APIs
rget device from a different location, such as a cloud media server. this enables web pages and microsoft store apps to play digital rights management (drm) protected content. the app specifies a preferred uniform resource identifier (uri). this uri can point to a cloud based media server allowing streaming directly from the cloud, which can be drm protected, instead of streaming content from the
windows machine which must be unprotected content. a forward slash ("/") is appended to the uri string when it is sent over the network to a playto device. this is done to conform to uri standards. example <video src="http://www.contoso.com/videos/video.mp4" msplaytopreferredsourceuri="http://www.contoso.com/catalogid=1234" /> var video = document.createelement('video'); document.body.
msSetMediaProtectionManager - Web APIs
there may also be large incompatibilities between implementations and the behavior may change in the future. the mssetmediaprotectionmanager method specifies the media protection manager for a given media pipeline. this proprietary method is specific to internet explorer and microsoft edge. syntax htmlmediaelement.mssetmediaprotectionmanager(mediaprotectionmanager); parameters the
windows.media.protection namespace provides classes to manage digital rights management (drm) media contents. the mediaprotectionmanager class can be passed as an input to a media playback api or the mediaprotectionmanager property inside the tag's video or audio. the optional parameter of the mssetmediaprotectionmanager property is mediaprotectionmanager and can be any type. return value this method...
Navigator.buildID - Web APIs
returns the build identifier of the browser. in modern browsers this property now returns a fixed timestamp as a privacy measure, e.g. 20181001000000 in firefox 64 onwards. syntax buildid = navigator.buildid; value a string representing the build identifier of the application. the build id is in the form yyyymmddhhmmss. example console.log(
window.navigator.buildid); specification not part of any public standard. ...
Navigator.getGamepads() - Web APIs
the navigator.getgamepads() method returns an array of gamepad objects, one for each gamepad connected to the device. elements in the array may be null if a gamepad disconnects during a session, so that the remaining gamepads retain the same index. syntax var gamepads = navigator.getgamepads(); example
window.addeventlistener("gamepadconnected", function(e) { var gp = navigator.getgamepads()[e.gamepad.index]; console.log( "gamepad connected at index %d: %s. %d buttons, %d axes.", gp.index, gp.id, gp.buttons.length, gp.axes.length ); }); specifications specification status comment gamepadthe definition of 'the gamepad api specification' in that specification. working draft initial definition. ...
msSaveBlob - Web APIs
nblob() except that this disables the file open option. syntax navigator.mssaveblob(blob, defaultname); parameters blob a blob to be saved. defaultname the file name to be used when saving file. return value true is returned as long as the download notification bar is displayed, or false if a failure occured. 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. ...
msSaveOrOpenBlob - Web APIs
) except that this enables the file open option. syntax navigator.mssaveoropenblob(blob, defaultname); parameters blob a blob to be saved. defaultname the file name to be used when saving file. return value true is returned as long as the download notification bar is displayed, or false if a failure occurred. 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: content-length: <blob.size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> specifications not part of any specifications. ...
Web-based protocol handlers - Web APIs
handler sample</title> </head> <body> <h1>web protocol handler sample - handler</h1> <p>this web page is called when handling a <code>web+burger:</code> protocol action. the data sent:</p> <textarea> <?php echo(htmlspecialchars($value, ent_quotes, 'utf-8')); ?> </textarea> </body> </html> references http://www.w3.org/tr/2011/wd-html5-20110525/timers.html#custom-handlers see also
window.navigator.registercontenthandler nsiprotocolhandler (xul only) registerprotocolhandler enhancing the federated web at mozilla webdev register a custom protocolhandler at google developers. ...
Navigator.vendor - Web APIs
the value of the navigator vendor property is always either "google inc.", "apple computer, inc.", or (in firefox) the empty string. syntax venstring =
window.navigator.vendor value either "google inc.", "apple computer, inc.", or (in firefox) the empty string. specifications specification status comment html living standardthe definition of 'navigatorid: vendor' in that specification. living standard ...
Navigator.vendorSub - Web APIs
the value of the navigator.vendorsub property is always the empty string, in any browser. syntax vensub =
window.navigator.vendorsub value the empty string specifications specification status comment html living standardthe definition of 'navigatorid: vendorsub' in that specification. living standard initial definition ...
Navigator - Web APIs
properties doesn't inherit any properties, but implements those defined in navigatorid, navigatorlanguage, navigatoronline, navigatorcontentutils, navigatorstorage, navigatorstorageutils, navigatorconcurrenthardware, navigatorplugins, and navigatorusermedia. ...
NavigatorID.platform - Web APIs
r is unable to) identify the platform. platform is a string that must be an empty string or a string representing the platform on which the browser is executing. for example: "macintel", "win32", "freebsd i386", "webtv os" example console.log(navigator.platform); usage notes most browsers, including chrome, edge, and firefox 63 and later, return "win32" even if running on a 64-bit version of
windows. internet explorer and versions of firefox prior to version 63 still report "win64". specifications specification status comment html living standardthe definition of 'navigatorid.platform' in that specification. living standard initial definition. ...
NavigatorID.taintEnabled() - Web APIs
the navigatorid.taintenabled() method always returns false. tainting was a security method used by javascript 1.2. it has long been removed; this method only stays for maintaining compatibility with very old scripts. syntax result =
window.navigator.taintenabled() specifications specification status comment html living standardthe definition of 'navigatorid.taintenabled' in that specification. living standard initial definition ...
NavigatorLanguage.language - Web APIs
ui. syntax const lang = navigator.language value a domstring. lang stores a string representing the language version as defined in bcp 47. examples of valid language codes include "en", "en-us", "fr", "fr-fr", "es-es", etc. note that in safari on ios prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr" etc. example if (/^en\b/.test(navigator.language)) { dolangselect(
window.navigator.language); } specifications specification status comment html living standardthe definition of 'navigatorlanguage: language' in that specification. living standard initial definition ...
NavigatorLanguage.languages - Web APIs
array of domstrings representing the user's preferred languages. the language is described using bcp 47 language tags. in the returned array they are ordered by preference with the most preferred language first. the value of navigator.language is the first element of the returned array. when its value changes, as the user's preferred languages are changed a languagechange event is fired on the
window object. the accept-language http header in every http request from the user's browser uses the same value for the navigator.languages property except for the extra qvalues (quality values) field (e.g. en-us;q=0.8). syntax preferredlanguages = globalobj.navigator.languages examples navigator.language //"en-us" navigator.languages //["en-us", "zh-cn", "ja-jp"] specifications sp...
NavigatorPlugins.javaEnabled() - Web APIs
this method indicates whether the current browser is java-enabled or not. syntax result =
window.navigator.javaenabled() example if (
window.navigator.javaenabled()) { // browser has java } notes the return value for this method indicates whether the preference that controls java is on or off - not whether the browser offers java support in general. specifications specification status comment html living standardthe definition of 'navigatorplugins.javaenabled' in that specification. living standard initial definition. ...
NavigatorStorage - Web APIs
to the navigator and workernavigator interfaces the navigator.storage property, which provides access to the storagemanager singleton used for controlling the persistence of data stores as well as obtaining information note: this feature is available in web workers. there are many apis which provide ways for web content to store data on a user's computer, including cookies, the web storage api (
window.localstorage and
window.sessionstorage), and indexeddb. the storage standard is designed to serve as a common basis for the implementation of all of those apis and storage technologies, so that their constraints and configurations can be understood and controlled using a common set of methods and properties. properties storage read only secure context returns the storagemanager singleton obj...
Node.baseURI - Web APIs
yntax var nodebaseuri = node.baseuri; value a domstring representing the base url of the specified node. it may be null if unable to obtain an absolute uri. although this property is read-only, its value may change in certain situations (see below). details the base url of a document the base url of a document defaults to the document's address (as displayed by the browser and available in
window.location), but it can be changed: when an html <base> tag is found in the document when the document is new (created dynamically) see the base urls section of the html living standard for details. you can use document.baseuri to obtain the base url of a document. note that obtaining the base url for a document may return different urls over time if the <base> tags or the document's locatio...
NodeList.prototype.forEach() - Web APIs
hildnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (
window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg ||
window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (
window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = array.prototype.foreach; } the above behav...
Notification.onclick - Web APIs
ng context. if you don't want that behaviour, call preventdefault() on the event object. 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 'onclick' in that specification. living standard living standard. ...
Notification.permission - Web APIs
rmission was denied. examples the following snippet could be used if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification. ...
Notification.requestPermission() - Web APIs
e we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification. ...
Notification - Web APIs
e we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification. ...
NotificationEvent.action - Web APIs
attribute and can't be modified unless the notification is replaced. returns a domstring object. 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.open
window("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification. living standard living standard. ...
OVR_multiview2 - Web APIs
multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: support depends on the system's graphics driver (
windows+angle and android are supported;
windows+gl, mac, linux are not supported). this extension is only available to webgl 2 contexts as it needs glsl 3.00 and texture arrays. currently, there is no way to use multiview to render to a multisampled backbuffer, so you should create contexts with antialias: false. however, the oculus browser (6+) also supports multisampling using the oculus_multiview ...
OfflineAudioContext.startRendering() - Web APIs
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(renderedbuffer) { console.log('rendering completed successfully'); var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var song = audioctx.createbuffersource(); song.buffer = renderedbuffer; song.connect(audioctx.destination); play.onclick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is...
OffscreenCanvas - Web APIs
constructors offscreencanvas() offscreencanvas constructor. creates a new offscreencanvas object. properties offscreencanvas.height the height of the offscreen canvas. offscreencanvas.width the width of the offscreen canvas. methods offscreencanvas.getcontext() returns a rendering context for the offscreen canvas. offscreencanvas.converttoblob() creates a blob object representing the image contained in the canvas. ...
OscillatorNode.frequency - Web APIs
udioctx.currenttime); // value in hertz note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'frequency' in that specification. working dr...
OscillatorNode.onended - Web APIs
ended event, which fires when the tone has stopped playing. syntax var oscillator = audioctx.createoscillator(); oscillator.onended = function() { ... }; example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.value = 440; // value in hertz oscillator.start(); // start the tone playing oscillator.stop(5); // the tone will stop again in 5 seconds. oscillator.onended = function() { console.log('your tone has now stopped playing!'); } ...
OscillatorNode.start() - Web APIs
rdinate system as audiocontext's currenttime attribute. if a value is not included or is less than currenttime, the oscillator starts playing immediately. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'start' in that specification. working draft...
OscillatorNode.stop() - Web APIs
a value is not included, it defaults to 0. if the time is equal to or before the current audio context time, the oscillator will stop playing immediately. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.connect(audioctx.destination); oscillator.start(); oscillator.stop(audioctx.currenttime + 2); // stop 2 seconds after the current time specifications specification status comment web audio apithe definition of 'stop' in that specification. ...
OscillatorNode.type - Web APIs
invalidstateerror the value custom was specified. to set a custom waveform, just call setperiodicwave(). doing so automatically sets the type for you. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'type' in that specification. working draft ...
PageTransitionEvent.persisted - Web APIs
the persisted read-only property indicates if a webpage is loading from a cache. syntax
window.addeventlistener('pageshow', function(event) { if (event.persisted) { console.log('page was loaded from cache.'); } }); value a boolean. specifications specification status comment html living standardthe definition of 'pagetransitionevent: persisted' in that specification. living standard initial definition ...
PageTransitionEvent - Web APIs
xt-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event. pagetransitionevent.persisted read only indicates if the document is loading from a cache. example html <!doctype html> <html> <body> </body> </html> javascript
window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) { alert("the page was cached by the browser"); } else { alert("the page was not cached by the browser"); } } specifications specification status comment html living standardthe definition of 'pagetransitionevent' in that specification. living standard in...
PaymentRequest.onmerchantvalidation - Web APIs
alled whenever the merchantvalidation event is fired at the paymentrequest, indicating that the payment handler requires the merchant to validate themselves as allowed to use this payment handler. examples an example merchant validation handler for the paymentrequest object request looks like this: request.onmerchantvalidation = ev => { ev.complete(async () => { const merchantserverurl =
window.location.origin + '/validation?url=' + encodeuricomponent(ev.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(r => r.text()); }) }; const response = await request.show(); for more information, see merchant validation in payment processing concepts. specifications specification status comment p...
PaymentRequestEvent - Web APIs
changes to payment details. paymentrequestidread only returns the id of the paymentrequest object. paymentrequestoriginread only returns the origin where the paymentrequest object was initialized. toporiginread only returns the top-level origin where the paymentrequest object was initialized. totalread only returns the total amount being requested for payment. methods open
window() opens the specified url in a new
window, if and only if the given url is on the same origin as the calling page. it returns a promise that resolves with a reference to a
windowclient. respondwith() prevents the default event handling and allows you to provide a promise for a paymentresponse object yourself. specifications specification status comment payment hand...
performance.getEntries() - Web APIs
cts for the page. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. if you are only interested in performance entries of certain types or that have certain names, see getentriesbytype() and getentriesbyname(). note: this feature is available in web workers. syntax general syntax: entries =
window.performance.getentries(); return value entries an array of performanceentry objects. the items will be in chronological order based on the entries' starttime. example function use_performanceentry_methods() { console.log("performanceentry tests ..."); if (performance.mark === undefined) { console.log("... performance.mark not supported"); return; } // create some perfor...
performance.getEntriesByName() - Web APIs
the getentriesbyname() method returns a list of performanceentry objects for the given name and type. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. note: this feature is available in web workers. syntax entries =
window.performance.getentriesbyname(name, type); arguments name the name of the entry to retrieve. type optional the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. return value entries a list of performanceentry objects that have the specified name and type. if the type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order based...
performance.now() - Web APIs
the performance.now() method returns a domhighrestimestamp, measured in milliseconds. note: this feature is available in web workers. the returned value represents the time elapsed since the time origin. bear in mind the following points: in dedicated workers created from a
window context, the value in the worker will be lower than performance.now() in the
window who spawned that worker. it used to be the same as t0 of the main context, but this was changed. in shared or service workers, the value in the worker might be higher than that of the main context because that
window can be created after those workers. it's important to keep in mind that to mitigate potential security threats such as spectre, browsers typically round the returned value by some amount in order to be less predic...
performance.toJSON() - Web APIs
the tojson() method of the performance interface is a standard serializer: it returns a json representation of the performance object's properties. note: this feature is available in web workers. syntax myperf = performance.tojson() arguments none return value myperf a json object that is the serialization of the performance object. example var js; js =
window.performance.tojson(); console.log("json = " + json.stringify(js)); specifications specification status comment high resolution time level 2the definition of 'tojson() serializer' in that specification. recommendation defines tojson(). ...
Performance - Web APIs
note: this interface and its members are available in web workers, except where indicated below. ...
PerformanceObserverEntryList.getEntries() - Web APIs
the getentries() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given filter. the list's members are determined by the set of entry types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to
window and worker interfaces. syntax general syntax: entries = list.getentries(); entries = list.getentries(performanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entrytype: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry. "entr...
PerformanceObserverEntryList.getEntriesByName() - Web APIs
entriesbyname() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given name and entry type. the list's members are determined by the set of entry types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to
window and worker interfaces. syntax entries = list.getentriesbyname(name, type); parameters name a domstring representing the name of the entry to retrieve. type optional a domstring representing the type of entry to retrieve such as "mark". the valid entry types are listed in performanceentry.entrytype. return value a list of explicitly observed performance entry objects that have the spe...
PerformanceObserverEntryList.getEntriesByType() - Web APIs
the getentriesbytype() method of the performanceobserverentrylist returns a list of explicitly observed performance entry objects for a given performance entry type. the list's members are determined by the set of entry types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to
window and worker interfaces. syntax entries = list.getentriesbytype(type); parameters type the type of entry to retrieve such as "frame". the valid entry types are listed in performanceentry.entrytype. return value a list of explicitly observed performanceentry objects that have the specified type. the items will be in chronological order based on the entries' starttime. if no objects have t...
PerformanceObserverEntryList - Web APIs
methods performanceobserverentrylist.getentries() returns a list of explicitly observed performanceentry objects based on the given filter. performanceobserverentrylist.getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type. performanceobserverentrylist.getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type. ...
Using Performance Timeline - Web APIs
" + properties[j] + " = " + pe[properties[j]]); } else { log("... " + properties[j] + " = not supported"); } } } } this interface also includes a tojson() method that returns the serialization of the performanceentry object. the following examples sho...
PluginArray - Web APIs
the pluginarray is not a javascript array, but has the length property and supports accessing individual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods. note: own properties of pluginarray objects are no longer enumerable in the latest browser versions. properties pluginarray.lengthread only the number of plugins in the array. methods pluginarray.item returns the plugin at the specified index into the array. ...
Pointer Lock API - Web APIs
dard mouseevent properties clientx, clienty, screenx, and screeny are held constant, as if the mouse is not moving. the movementx and movementy properties continue to provide the mouse's change in position. there is no limit to movementx and movementy values if the mouse is continuously moving in a single direction. the concept of the mouse cursor does not exist and the cursor cannot move off the
window or be clamped by a screen edge. unlocked state the parameters movementx and movementy are valid regardless of the mouse lock state, and are available even when unlocked for convenience. when the mouse is unlocked, the system cursor can exit and re-enter the browser
window. if that happens, movementx and movementy could be set to zero. simple example walkthrough we've written a simple pointer...
Multi-touch interaction - Web APIs
// log events flag var logevents = false; function enablelog(ev) { logevents = logevents ? false : true; } function log(name, ev) { var o = document.getelementsbytagname('output')[0]; var s = name + ": pointerid = " + ev.pointerid + " ; pointertype = " + ev.pointertype + " ; isprimary = " + ev.ispri...
Pinch zoom gestures - Web APIs
in the event flow. cache management this function helps manage the global event caches evcache. function remove_event(ev) { // remove this event from the target's cache for (var i = 0; i < evcache.length; i++) { if (evcache[i].pointerid == ev.pointerid) { evcache.splice(i, 1); break; } } } event logging these functions are used to send event activity to the application's
window (to support debugging and learning about the event flow). // log events flag var logevents = false; // logging/debugging functions function enablelog(ev) { logevents = logevents ? false : true; } function log(prefix, ev) { if (!logevents) return; var o = document.getelementsbytagname('output')[0]; var s = prefix + ": pointerid = " + ev.pointerid + " ; pointertype = " + ...
PromiseRejectionEvent.reason - Web APIs
the reason passed into promise.reject(). this in theory provides information about why the promise was rejected. syntax reason = promiserejectionevent.reason value a value or object which provides information you can use to understand why the promise was rejected. this could be anything from an error code to an object with text, links, and whatever else you might wish to include. examples
window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'promiserejectionevent.reason' in that specification. living standard initial definition. ...
PromiseRejectionEvent - Web APIs
parent event. events rejectionhandled fired when a javascript promise is rejected, and after the rejection is handled by the promise's rejection handling code. unhandledrejection fired when a javascript promise is rejected but there is no rejection handler to deal with the rejection. examples this simple example catches unhandled promise rejections and logs them for debugging purposes.
window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'promiserejectionevent' in that specification. living standard initial definition. ...
PublicKeyCredential - Web APIs
any extensions were requested, this method will return the results of processing those extensions. publickeycredential.isuserverifyingplatformauthenticatoravailable()secure context a static method returning a promise which resolves to true if an authenticator bound to the platform is capable of verifying the user. with the current state of implementation, this method only resolves to true when
windows hello is available on the system. examples creating a new instance of publickeycredential here, we use navigator.credentials.create() to generate a new credential. var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pub...
PushManager.subscribe() - Web APIs
t the same ecdh key that you use to encrypt the data. for more information, see "using vapid with webpush". note: this parameter is required in some browsers like chrome and edge. returns a promise that resolves to a pushsubscription object. 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. } navigator.serviceworker.register('serviceworker.js'); // use serviceworker.ready to ensure that you can subscribe for push navigator.serviceworker.ready.then( function(serviceworkerregistration) { var options = { uservisibleonly: true, applicationserverkey: applicationserverkey }; serviceworkerregistration.pushmanager.subscribe(options)...
PushManager - Web APIs
sh subscriptions. replaced by pushmanager.getsubscription(). pushmanager.unregister() unregisters and deletes a specified subscription endpoint. in the updated api, a subscription is unregistered by calling the pushsubscription.unsubscribe() method. 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. } navigator.serviceworker.register('serviceworker.js').then( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to ...
RTCDataChannel: open event - Web APIs
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. it enables the message input box and send button as well as enabling the disconnect button and disabling the connect button. finally, the message input box is focused so the user can immediately begin to type. dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutto...
RTCIceCandidateStats.deleted - Web APIs
andidate a value of true means the candidate's turn allocation is no longer active. the net result is the same; the candidate is no longer under consideration if this value is true. example in this example, setinterval() is used to set up a function that runs periodically to display the latest statistics for candidates. only candidates which have not been deleted are included in the output. ...
Screen.mozEnabled - Web APIs
this boolean attribute controls the device's screen. setting it to false will turn off the screen. syntax let screenenabled =
window.screen.mozenabled specifications not part of specification. ...
Screen.orientation - Web APIs
note that older, prefixed versions returned a domstring equivalent to screenorientation.type. example var orientation = (screen.orientation || {}).type || screen.mozorientation || screen.msorientation; if (orientation === "landscape-primary") { console.log("that looks good."); } else if (orientation === "landscape-secondary") { console.log("mmmh... ...
Screen.pixelDepth - Web APIs
returns the bit depth of the screen. per the cssom, some implementations return 24 for compatibility reasons. see the browser compatibility section for those that don't. syntax let depth =
window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if (
window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specifications specification status comment css object model (cssom) view modulethe definition of 'screen.pixeldepth' in that specification. working draft initial definition. ...
Screen.top - Web APIs
returns the distance in pixels from the top side of the current screen. syntax let top =
window.screen.top; specifications not part of any current specification. ...
Screen.unlockOrientation() - Web APIs
the screen.unlockorientation() method removes all the previous screen locks set by the page/app. the screenorientation.unlock() method should be used instead. note: this method only works for installed web apps or for web pages in full-screen mode. syntax var unlocked =
window.screen.unlockorientation(); return value returns true if the orientation was successfully unlocked or false if the orientation couldn't be unlocked. example var unlockorientation = screen.unlockorientation || screen.mozunlockorientation || screen.msunlockorientation || (screen.orientation && screen.orientation.unlock); if (unlockorientation()) { // orientation was unlocked } else { // orientation unlock failed } specifications specification status comment screen orientation ...
Screen - Web APIs
the screen interface represents a screen, usually the one on which the current
window is being rendered, and is obtained using
window.screen. note that browsers determine which screen to report as current by detecting which screen has the center of the browser
window. properties screen.availtop specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features. screen.availleft returns the first available pixel available from the left side of the screen. screen.availheight specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the taskbar on
windows. screen.availwidth returns the amount of horizontal space in pixels available to the w...
Screen Wake Lock API - Web APIs
such as battery statuselem.textcontent = `${err.name}, ${err.message}`; } } releasing wake lock the following example shows how to release the previously acquired wake lock. wakelock.release() .then(() => { wakelock = null; }); listening for wake lock release this example updates the ui if the wake lock has been released for any reason (such as navigating away from the active
window/tab). wakelock.addeventlistener('release', () => { // the wake lock has been released statuselem.textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released. document.addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilit...
Selection.addRange() - Web APIs
supports multiple selection ranges, other browsers will not add new ranges to the selection if it already contains one. ...
Selection.collapse() - Web APIs
ull — if null is specified, the method will behave like selection.removeallranges(), i.e. all ranges will be removed from the selection. offset optional the offset in node to which the selection will be collapsed. if not specified, the default value 0 is used. examples /* place the caret at the beginning of an html document's body. */ var body = document.getelementsbytagname("body")[0];
window.getselection().collapse(body,0); specifications specification status comment selection apithe definition of 'selection.collapse()' in that specification. working draft ...
Selection.getRangeAt() - Web APIs
the selection.getrangeat() method returns a range object representing one of the ranges currently selected. syntax range = sel.getrangeat(index) parameters index the zero-based index of the range to return. a negative number or a number greater than or equal to selection.rangecount will result in an error. return value the specified range object. example let ranges = []; sel =
window.getselection(); for(let i = 0; i < sel.rangecount; i++) { ranges[i] = sel.getrangeat(i); } /* each item in the ranges array is now * a range object representing one of the * ranges in the current selection */ specifications specification status comment selection apithe definition of 'selection: getrangeat()' in that specification. working draft current ...
Selection.rangeCount - Web APIs
cross table cells. firefox allows to select multiple ranges in the document by using ctrl+click (unless the click within an element with display: table-cell). syntax value = sel.rangecount example the following example will show the rangecount every second. select text in the browser to see it change. 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. in gecko browsers, you can select multiple ranges across table cells by holding down ctrl while dragging with the mouse. specifications specification status comment selection apithe definition of 'selection.rangec...
Selection.removeRange() - Web APIs
the selection.removerange() method removes a range from a selection. syntax sel.removerange(range) parameters range a range object that will be removed to the selection. return value undefined examples /* programmaticaly, more than one range can be selected. * this will remove all ranges except the first. */ s =
window.getselection(); if(s.rangecount > 1) { for(var i = 1; i < s.rangecount; i++) { s.removerange(s.getrangeat(i)); } } specifications specification status comment selection apithe definition of 'selection.removerange()' in that specification. working draft current browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check ou...
Selection.selectAllChildren() - Web APIs
is not part of the selection. example html <main> <button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => {
window.getselection().selectallchildren(footer); }); result specifications specification status comment selection apithe definition of 'selection.selectallchildren()' in that specification. working draft current definition ...
Selection.toString() - Web APIs
selection.tostring() method returns a string currently being represented by the selection object, i.e. the currently selected text. syntax sel.tostring() return value a string representing the selection. description this method returns the currently selected text. in javascript, this method is called automatically when a function the selection object is passed to requires a string: alert(
window.getselection()) // what is called alert(
window.getselection().tostring()) // what is actually being effectively called. specifications specification status comment selection apithe definition of 'selection: tostring()' in that specification. working draft current browser compatibility the compatibility table on this page is generated from structured data.
Sensor APIs - Web APIs
on of the apis themselves and defensive programming strategies (see below). the examples below show three methods for detecting sensor apis. additionally you can put object instantiation inside a try...catch block. notice that detection through the navigator interface is not one of the available options. if (typeof gyroscope === "function") { // run in circles... } if ("proximitysensor" in
window) { // watch out! } if (
window.ambientlightsensor) { // go dark... } defensive programming as stated in feature detection, checking for a particular sensor api is insufficient for feature detection. the existence of an actual sensor must be confirmed as well. this is where defensive programming is needed. defensive programming requires three strategies. checking for thrown errors whe...
ServiceWorkerGlobalScope.onfetch - Web APIs
}; example this code snippet is from the service worker prefetch sample (see prefetch example live.) the serviceworkerglobalscope.onfetch event handler listens for the fetch event. when fired, the code returns a promise that resolves to the first matching request in the cache object. if no match is found, the code fetches a response from the network. ...
ServiceWorkerRegistration.pushManager - Web APIs
ager interface for managing push subscriptions; this includes support for subscribing, getting an active subscription, and accessing push permission status. syntax var pushmanager = serviceworkerregistration.pushmanager; value a pushmanager object. 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. } navigator.serviceworker.register('serviceworker.js').then( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.subscriptionid); console.log(pushsubscription.endpoint); // the push subscription details needed by the application ...
Using Service Workers - Web APIs
tents of this function is fairly standard xhr stuff, so we won’t worry about that for now. when we come to call the imgload() function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different: let body = document.queryselector('body'); let myimage = new image(); imgload('mylittlevader.jpg').then((response) => { var imageurl =
window.url.createobjecturl(response); myimage.src = imageurl; body.appendchild(myimage); }, (error) => { console.log(error); }); on to the end of the function call, we chain the promise then() method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. in the resolved case, we display the image i...
Service Worker API - Web APIs
y with other web messaging features. serviceworkerregistration represents a service worker registration. serviceworkerstate associated with its serviceworker's state. syncevent the syncevent interface represents a sync action that is dispatched on the serviceworkerglobalscope of a serviceworker. syncmanager provides an interface for registering and listing sync registrations.
windowclient represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. this is a special type of client object, with some additional methods and properties available. specifications specification status comment service workers working draft initial definition. ...
SpeechSynthesis.cancel() - Web APIs
the cancel() method of the speechsynthesis interface removes all utterances from the utterance queue. if an utterance is currently being spoken, speaking will stop immediately. syntax speechsynthesisinstance.cancel(); returns void. parameters none. ...
SpeechSynthesis.pause() - Web APIs
the pause() method of the speechsynthesis interface puts the speechsynthesis object into a paused state. syntax speechsynthesisinstance.pause(); returns void. parameters none. examples var synth =
window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now? this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.pause(); // pauses utterances being spoken specifications specification status comment web speech apithe definition of 'pause()' in that specification. draft ...
SpeechSynthesis.paused - Web APIs
the speechsynthesis object is in a paused state, or false if not. it can be set to paused even if nothing is currently being spoken through it. if utterances are then added to the utterance queue, they will not be spoken until the speechsynthesis object is unpaused, using speechsynthesis.resume(). syntax var amipaused = speechsynthesisinstance.paused; value a boolean. examples var synth =
window.speechsynthesis; synth.pause(); var amipaused = synth.paused; // will return true specifications specification status comment web speech apithe definition of 'paused' in that specification. draft ...
SpeechSynthesis.pending - Web APIs
the pending read-only property of the speechsynthesis interface is a boolean that returns true if the utterance queue contains as-yet-unspoken utterances. syntax var amipending = speechsynthesisinstance.pending; value a boolean. ...
SpeechSynthesis.resume() - Web APIs
the resume() method of the speechsynthesis interface puts the speechsynthesis object into a non-paused state: resumes it if it was already paused. syntax speechsynthesisinstance.resume(); returns void. parameters none. examples var synth =
window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now? this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.pause(); // pauses utterances being spoken synth.resume() // resumes speaking specifications specification status comment web speech apithe definition of 'resume()' in that specification. draft ...
SpeechSynthesis.speak() - Web APIs
ax speechsynthesisinstance.speak(utterance); returns void. parameters utterance a speechsynthesisutterance object. examples this snippet is excerpted from our speech synthesiser demo. when a form containing the text we want to speak is submitted, we (amongst other things) create a new utterance containing this text, then speak it by passing it into speak() as a parameter. var synth =
window.speechsynthesis; ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputt...
SpeechSynthesis.speaking - Web APIs
the speaking read-only property of the speechsynthesis interface is a boolean that returns true if an utterance is currently in the process of being spoken — even if speechsynthesis is in a paused state. syntax var amispeaking = speechsynthesisinstance.speaking; value a boolean. ...
SpeechSynthesis: voiceschanged event - Web APIs
getvoices() method has changed (when the voiceschanged event fires.) bubbles no cancelable no interface event event handler property onvoiceschanged examples this could be used to repopulate a list of voices that the user can choose between when the event fires. ...
SpeechSynthesisErrorEvent.error - Web APIs
hsynthesisutterance.lang. voice-unavailable the voice set in speechsynthesisutterance.voice was not available. text-too-long the contents of the speechsynthesisutterance.text attribute was too long to synthesize. invalid-argument the content of the speechsynthesisutterance.rate, speechsynthesisutterance.pitch or speechsynthesisutterance.volume property was not valid. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisErrorEvent - Web APIs
t extends the speechsynthesisevent interface, which inherits properties from its parent interface, event. speechsynthesiserrorevent.error read only returns an error code indicating what has gone wrong with a speech synthesis attempt. methods speechsynthesiserrorevent extends the speechsynthesisevent interface, which inherits methods from its parent interface, event. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
eechsynthesisutterance() constructor of the speechsynthesisutterance interface returns a new speechsynthesisutterance object instance. syntax var utterthis = new speechsynthesisutterance(text); parameters text a domstring containing the text that will be synthesized when the utterance is spoken.. examples the following snippet is excerpted from our speech synthesizer demo. var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.lang - Web APIs
perty of the speechsynthesisutterance interface gets and sets the language of the utterance. if unset, the app's (i.e. the <html> lang value) lang will be used, or the user-agent default if that is unset too. syntax var mylang = speechsynthesisutteranceinstance.lang; speechsynthesisutteranceinstance.lang = 'en-us'; value a domstring representing a bcp 47 language tag. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.onboundary - Web APIs
the onboundary property of the speechsynthesisutterance interface represents an event handler that will run when the spoken utterance reaches a word or sentence boundary (when the boundary event fires.) syntax speechsynthesisutteranceinstance.onboundary = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === se...
SpeechSynthesisUtterance.onend - Web APIs
the onend property of the speechsynthesisutterance interface represents an event handler that will run when the utterance has finished being spoken (when the end event fires.) syntax speechsynthesisutteranceinstance.onend = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.
SpeechSynthesisUtterance.onerror - Web APIs
the onerror property of the speechsynthesisutterance interface represents an event handler that will run when an error occurs that prevents the utterance from being succesfully spoken (when the error event fires.) syntax speechsynthesisutteranceinstance.onerror = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].nam...
SpeechSynthesisUtterance.onmark - Web APIs
the onmark property of the speechsynthesisutterance interface represents an event handler that will run when the spoken utterance reaches a named ssml mark tag (when the mark event fires.) syntax speechsynthesisutteranceinstance.onmark = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { ...
SpeechSynthesisUtterance.onpause - Web APIs
the onpause property of the speechsynthesisutterance interface represents an event handler that will run when the utterance is paused part way through (when the pause event fires.) this occurs when the speechsynthesis.pause() method is invoked. syntax speechsynthesisutteranceinstance.onpause = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.leng...
SpeechSynthesisUtterance.onresume - Web APIs
the onresume property of the speechsynthesisutterance interface represents an event handler that will run when a paused utterance is resumed (when the resume event fires.) this occurs when the speechsynthesis.resume() method is invoked on a paused speech synthesis instance. syntax speechsynthesisutteranceinstance.onresume = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'...
SpeechSynthesisUtterance.onstart - Web APIs
the onstart property of the speechsynthesisutterance interface represents an event handler that will run when the utterance has begun to be spoken (when the start event fires.) this occurs when the speechsynthesis.speak() method is invoked. syntax speechsynthesisutteranceinstance.onstart = function() { ... }; examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ;...
SpeechSynthesisUtterance.pitch - Web APIs
eechsynthesisutteranceinstance.pitch = 1.5; value a float representing the pitch value. it can range between 0 (lowest) and 2 (highest), with 1 being the default pitch for the current platform or voice. some speech synthesis engines or voices may constrain the minimum and maximum rates further. if ssml is used, this value will be overridden by prosody tags in the markup. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.rate - Web APIs
pitch for the current platform or voice, which should correspond to a normal speaking rate. other values act as a percentage relative to this, so for example 2 is twice as fast, 0.5 is half as fast, etc. some speech synthesis engines or voices may constrain the minimum and maximum rates further. if ssml is used, this value will be overridden by prosody tags in the markup. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.text - Web APIs
well-formed ssml document. the ssml tags will be stripped away by devices that don't support ssml. syntax var mytext = speechsynthesisutteranceinstance.text; speechsynthesisutteranceinstance.text = 'hello i am speaking'; value a domstring representing the text to the synthesised. the maximum length of the text that can be spoken in each utterance is 32,767 characters. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.voice - Web APIs
svoice objects returned by speechsynthesis.getvoices(). if not set by the time the utterance is spoken, the voice used will be the most suitable default voice available for the utterance's lang setting. syntax var myvoice = speechsynthesisutteranceinstance.voice; speechsynthesisutteranceinstance.voice = speechsynthesisvoiceinstance; value a speechsynthesisvoice object. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
SpeechSynthesisUtterance.volume - Web APIs
ts the volume that the utterance will be spoken at. if not set, the default value 1 will be used. syntax var myvolume = speechsynthesisutteranceinstance.volume; speechsynthesisutteranceinstance.volume = 0.5; value a float that represents the volume value, between 0 (lowest) and 1 (highest.) if ssml is used, this value will be overridden by prosody tags in the markup. examples var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattri...
StorageEvent - Web APIs
a storageevent is sent to a
window when a storage area it has access to is changed within the context of another document. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4"...
Storage API - Web APIs
sing, and even control whether or not they need to be alerted before the user agent disposes of site data in order to make room for other things. note: this feature is available in web workers. site storage—the data stored for a web site which is managed by the storage standard—includes: indexeddb databases cache api data service worker registrations web storage api data managed using
window.localstorage history state information saved using history.pushstate() application caches notification data other kinds of site-accessible, site-specific data that may be maintained site storage units the site storage system described by the storage standard and interacted with using the storage api consists of a single site storage unit for each origin. in essence, every web site or web a...
Storage Access API - Web APIs
rage. document.requeststorageaccess() returns a promise that resolves if the access to first-party storage was granted, and rejects if access was denied. note: user interaction propagates to the promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second click from the user. for example, a caller could open a pop-up
window from the resolved promise without triggering firefox’s pop-up blocker. extensions to <iframe> sandbox the <iframe> element's sandbox attribute has a new token, allow-storage-access-by-user-activation, which permits sandboxed <iframe>s to use the storage access api to request storage access. specifications the api is currently only at the proposal stage — the standardization process has y...
Using readable streams - Web APIs
which creates a custom stream, enqueues some random strings into it, and then reads the data out of the stream again once the stop string generation button is pressed. note: in order to consume a stream using fetchevent.respondwith(), the enqueued stream contents must be of type uint8array; for example, encoded using textencoder. the custom stream constructor has a start() method that uses a
windowtimers.setinterval() call to generate a random string every second. readablestreamdefaultcontroller.enqueue() is then used to enqueue it into the stream. when the button is pressed, the interval is cancelled, and a function called readstream() is invoked to read the data back out of the stream again. we also close the stream, as we’ve stopped enqueuing chunks to it. const stream = new readables...
Streams API - Web APIs
n byte length queuing strategy that can be used when constructing streams. countqueuingstrategy provides a built-in chunk counting queuing strategy that can be used when constructing streams. extensions to other apis request when a new request object is constructed, you can pass it a readablestream in the body property of its requestinit dictionary. this request could then be passed to a
windoworworkerglobalscope.fetch() to commence fetching the stream. body the response body returned by a successful fetch request is exposed by default as a readablestream, and can have a reader attached to it, etc. bytestream-related interfaces important: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them...
Stylesheet.href - Web APIs
uri is a string containing the stylesheet's uri. example // on a local machine: <html> <head> <link rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/
windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location. for inline style sheets, the value of this attribute is null. this property is read-only in firefox, opera, google chrome, and safari, and it is read/write in internet explorer. specifications specification status comment css object model (cssom)the ...
SubtleCrypto - Web APIs
warning: this api provides a number of low-level cryptographic primitives. it's very easy to misuse them, and the pitfalls involved can be very subtle. ...
TextDecoder.prototype.encoding - Web APIs
g algorithm used by the specific decoder. it can be one of the following values: the recommended encoding for the web: 'utf-8'. the legacy single-byte encodings: 'ibm866', 'iso-8859-2', 'iso-8859-3', 'iso-8859-4', 'iso-8859-5', 'iso-8859-6', 'iso-8859-7', 'iso-8859-8'', 'iso-8859-8i', 'iso-8859-10', 'iso-8859-13', 'iso-8859-14', 'iso-8859-15', 'iso-8859-16', 'koi8-r', 'koi8-u', 'macintosh', '
windows-874', '
windows-1250', '
windows-1251', '
windows-1252', '
windows-1253', '
windows-1254', '
windows-1255', '
windows-1256', '
windows-1257', '
windows-1258', or 'x-mac-cyrillic'. the legacy multi-byte chinese (simplified) encodings: 'gbk', 'gb18030', and 'hz-gb-2312'. the legacy multi-byte chinese (traditional) encoding: 'big5'. the legacy multi-byte japanese encodings: 'euc-jp', 'iso-2022-jp', and '...
TextTrack.mode - Web APIs
to the desired chapter, which begins at the cue's start position and ends at the cue's end position. example in this example, we configure the text track's cues so that every time a cue is finished, the video automatically pauses playback. this is done by setting the pauseonexit property on each cue to true. however, to ensure that the track's cues are available, we first set mode to showing. ...
TimeEvent - Web APIs
#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event. for this event type, indicates the repeat number for the animation. timeevent.view read only is a
windowproxy that identifies the
window from which the event was generated. methods inittimeevent(domstring typearg, abstractview viewarg, long detailarg) the inittimeevent method is used to initialize the value of a timeevent created through the documentevent interface. this method may only be called before the timeevent has been dispatched via the dispatchevent method, though it may be called mul...
Touch.target - Web APIs
summary returns the element (eventtarget) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the
window or document anymore. if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target. syntax var el = touchpoint.target; return value el the target element of the touch object. example this example illustrates how to access the touch object's touch.target property. the touch.target property is an element (eventt...
TouchEvent - Web APIs
ty of these events. touchcancel sent when a touch point has been disrupted in some way. there are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser): an event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction. the touch point has left the document
window and moved into the browser's ui area, a plug-in, or other external content. the user has placed more touch points on the screen than can be supported, in which case the earliest touch in the touchlist gets canceled. using with addeventlistener() and preventdefault() it's important to note that in many cases, both touch and mouse events get sent (in order to let non-touch-specific code still i...
Multi-touch interaction - Web APIs
function enablelog(ev) { logevents = logevents ? false : true; } function log(name, ev, printtargetids) { var o = document.getelementsbytagname('output')[0]; var s = name + ": touches = " + ev.touches.length + " ; targettouches = " + ev.targettouches.length + " ; changedtouches = " + ev.changedtouches...
UIEvent() - Web APIs
typearg [, uieventinit]) values typearg is a domstring representing the name of the event. uieventinit optional is a uieventinit dictionary, having the following fields: detail: optional and defaulting to 0, of type long, that is a event-dependant value associated with the event. uievent.detail lists the semantic for standard events. view: optional and defaulting to null, of type
windowproxy, that is the
window associated with the event . sourcecapabilities: an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event. the uieventinit dictionary also accepts fields from the eventinit dictionary. specifications specification status comment inputdevice...
sourceCapabilities - Web APIs
e, when a user lifts their finger off of a touchscreen, several uievents may be generated including touchend, mousedown, click, and focus. all of these events must have the same sourcecapabilities representing the touchscreen. a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the web platform. for example, many user agents allow a
window to be resized with a mouse or a keyboard, but this detail is not exposed to the web platform in any way, and so the sourcecapabilities of a resize event will typically be null. syntax var idc = event.sourcecapabilities value an instance of inputdevicecapabilities. specifications specification status comment inputdevicecapabilitiesthe definition of 'sourcecapabilities...
WebGLRenderingContext.viewport() - Web APIs
syntax void gl.viewport(x, y, width, height); parameters x a glint specifying the horizontal coordinate for the lower left corner of the viewport origin. default value: 0. y a glint specifying the vertical coordinate for the lower left corner of the viewport origin. default value: 0. width a non-negative glsizei specifying the width of the viewport. default value: width of the canvas. ...
Basic scissoring - Web APIs
e the drawing command (in this case, clear()) that starts the processing of fragments down the graphics pipeline. <p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; }
window.addeventlistener("load", function setupwebgl (evt) { "use strict"
window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas html element, as determined by css. canva...
Color masking - Web APIs
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; }
window.addeventlistener("load", function setupanimation (evt) { "use strict"
window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device ...
Hello GLSL - Web APIs
; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict"
window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) {
window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); ...
Textures from code - Web APIs
= 128.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict"
window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) {
window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); ...
WebGL by example - Web APIs
very second. color masking modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades. basic scissoring how to draw simple rectangles and squares with scissoring operations. canvas size and webgl the example explores the effect of setting (or not setting) the canvas size to its element size in css pixels, as it appears in the browser
window. boilerplate 1 the example describes repeated pieces of code that will be hidden from now on, as well as defining a javascript utility function to make webgl initialization easier. scissor animation some animation fun with scissoring and clearing operations. raining rectangles a simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction. shader...
Getting started with WebGL - Web APIs
context const gl = canvas.getcontext("webgl"); // only continue if webgl is available and working if (gl === null) { alert("unable to initialize webgl. your browser or machine may not support it."); return; } // set clear color to black, fully opaque gl.clearcolor(0.0, 0.0, 0.0, 1.0); // clear the color buffer with specified clear color gl.clear(gl.color_buffer_bit); }
window.onload = main; the first thing we do here is obtain a reference to the canvas, assigning it to a variable named canvas. once we have the canvas, we try to get a webglrenderingcontext for it by calling getcontext() and passing it the string "webgl". if the browser does not support webgl, getcontext() will return null in which case we display a message to the user and exit. if the context is ...
Signaling and video calling - Web APIs
ocument.getelementbyid("received_video").srcobject = event.streams[0]; document.getelementbyid("hangup-button").disabled = false; } the incoming stream is attached to the "received_video" <video> element, and the "hang up" <button> element is enabled so the user can hang up the call. once this code has completed, finally the video being sent by the other peer is displayed in the local browser
window! handling the removal of tracks your code receives a removetrack event when the remote peer removes a track from the connection by calling rtcpeerconnection.removetrack(). our handler for "removetrack" is: function handleremovetrackevent(event) { var stream = document.getelementbyid("received_video").srcobject; var tracklist = stream.gettracks(); if (tracklist.length == 0) { closevi...
A simple RTCDataChannel sample - Web APIs
(txtnode); receivebox.appendchild(el); } this method simply performs some basic dom injection; it creates a new <p> (paragraph) element, then creates a new text node containing the message text, which is received in the event's data property. this text node is appended as a child of the new element, which is then inserted into the receivebox block, thereby causing it to draw in the browser
window. disconnecting the peers when the user clicks the "disconnect" button, the disconnectpeers() method previously set as that button's handler is called. function disconnectpeers() { // close the rtcdatachannels if they're open. sendchannel.close(); receivechannel.close(); // close the rtcpeerconnections localconnection.close(); remoteconnection.close(); sendcha...
Taking still photos with WebRTC - Web APIs
a reference to the <canvas> element after the page is done loading. photo this will be a reference to the <img> element after the page is done loading. startbutton this will be a reference to the <button> element that's used to trigger capture. we'll get that after the page is done loading. the startup() function the startup() function is run when the page has finished loading, courtesy of
window.addeventlistener(). this function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image. getting element references first, we grab references to the major elements we need to be able to access. function ...
Using DTMF with WebRTC - Web APIs
rmation will be written. they'll get set up when the page is first loaded. see initialization below. initialization when the page loads, we do some basic setup: we fetch references to the dial button and the log output box elements, and we use addeventlistener() to add an event listener to the dial button so that clicking it calls the connectanddial() function to begin the connection process.
window.addeventlistener("load", function() { logelement = document.queryselector(".log"); dialbutton = document.queryselector("#dial"); dialbutton.addeventlistener("click", connectanddial, false); }); starting the connection process when the dial button is clicked, connectanddial() is called. this starts building the webrtc connection in preparation for sending the dtmf codes. function connec...
WebRTC Statistics API - Web APIs
onnection to get statistics for the connection overall. in this example, a new rtcpeerconnection is created, and then setinterval() is used to set the function getconnectionstats() to be called every second. that function, in turn, uses getstats() to obtain statistics for the connection and to make use of that data. ...
Writing WebSocket client applications - Web APIs
text data format text received over a websocket connection is in utf-8 format. closing the connection when you've finished using the websocket connection, call the websocket method close(): examplesocket.close(); it may be helpful to examine ...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
d as they move through the game world. this is used in a lot of multiplayer online role-playing games, certain shooter games, and so forth. popular examples include world of warcraft, tomb raider, and fortnite. this category also includes games where the camera is placed just over the player's shoulder. some 3d games offer the ability to change your point of view, such as to look out the various
windows of an aircraft in a flight simulator, or to see the views from all the security cameras within the game level (a common feature of spy and stealth-based games). this ability is also used by games offering weapons with scopes, where the view isn't quite based off the head's position in the same way anymore. 3d games might also provide the ability for non-players to observe the action, either by ...
Movement, orientation, and motion: A WebXR example - Web APIs
t need to be applied to convert them to simulate the viewer's current position and orientation. the fragment shader returns the color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects. starting up and shutting down webxr upon initially loading the script, we install a handler for the load event, so that we can perform initialization. ...
Rendering and the WebXR frame animation callback - Web APIs
code—in this case, a function named mydrawframe()—is responsible for scheduling time to draw another frame by once again calling requestanimationframe(). refresh rate and frame rate assuming you've called the xrsession method requestanimationframe() since the last time the screen refreshed, the browser will call your frame renderer callback every time it's ready to repaint your app or site
window. in this context, "repaint" simply means the process of ensuring that the screen's displayed content matches what the dom and the elements within are trying to present at the moment. hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other...
Starting up and shutting down a WebXR session - Web APIs
using a headset or similar device that fully replaces the world around the user with the images you present. immersive-ar an augmented reality session in which images are added to the real world using a headset or similar apparatus. this option is not yet widely supported, as the ar specification is in flux. inline an on-screen presentation of the xr imagery within the context of the document
window. if the session couldn't be created for some reason—such as feature policy disallowing its use or the user declining to grant permission to use the headset—the promise gets rejected. so a more complete function that starts up and returns a webxr session could look like this: async function createimmersivesession(xr) { try { session = await xr.requestsession("immersive-vr"); retur...
WebXR Device API - Web APIs
ted reality module. a typical xr device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor. the equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like. accessing the webxr api to gain access to the webxr api within the context of a given
window, use the navigator.xr property, which returns an xrsystem object through which the entire webxr device api is then exposed. navigator.xr read only this property, added to the navigator interface, returns the xrsystem object through which the webxr api is exposed. if this property is missing or null, webxr is not available. webxr interfaces xr the navigator.xr property returns the windo...
Web Animations API Concepts - Web APIs
change over time—animation. the timing model keeps track of how far along a set timeline we've come. the animation model determines what the animated object should look like at any given time. timing the timing model is the backbone of working with the waapi. each document has a master timeline, document.timeline, which stretches from the moment the page is loaded to infinity — or until the
window is closed. spread along that timeline according to their durations are our animations. each animation is anchored to a point in the timeline by its starttime, representing the moment along the document’s timeline when the animation starts playing. all the animation's playback relies on this timeline: seeking the animation moves the animation’s position along the timeline; slowing down or spe...
Example and tutorial: Simple synth keyboard - Web APIs
: 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-align: baseline; } javascript the javascript code begins by initializing a number of variables. let audiocontext = new (
window.audiocontext ||
window.webkitaudiocontext)(); let osclist = []; let mastergainnode = null; audiocontext is set to reference the global audiocontext object (or webkitaudiocontext if necessary). osclist is set up to be ready to contain a list of all currently-playing oscillators. it starts off empty, since there are none playing yet. mastergainnode is set to null; during the setup process, it...
Using IIR filters - Web APIs
ackward = [1.0126964558, -1.9991880801, 0.9873035442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification. as this filter node gains more popularity we should be able to collate more coefficient values. using an iirfilter in an audio graph let's create our context and our filter node: const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = audioctx.createiirfilter(feedforward, feedback); we need a sound source to play. we set this up using a custom function, playsoundnode(), which creates a buffer source from an existing audiobuffer, attaches it to the default destination, starts it playing, and returns it: function playsourcenode(...
Using the Web Audio API - Web APIs
ferent channel layouts are supported, even within a single context. because of this modular design, you can create complex audio functions with dynamic effects. audio context to be able to do anything with the web audio api, we need to create an instance of the audio context. this then gives us access to all the features and functionality of the api. // for legacy browsers const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audiocontext = new audiocontext(); so what's going on when we do this? a baseaudiocontext is created for us automatically and extended to an online audio context. we'll want this because we're looking to play live sound. note: if you just want to process audio data, for instance, buffer and stream it but not play it, you might want to look int...
Attestation and Assertion - Web APIs
the pre-defined attestation formats in webauthn are: packed - a generic attestation format that is commonly used by devices whose sole function is as a webauthn authenticator, such as security keys. tpm - the trusted platform module (tpm) is a set of specifications from the trusted platform group (tpg). this attestation format is commonly found in desktop computers and is used by
windows hello as its preferred attestation format. android key attestation - one of the features added in android o was android key attestation, which enables the android operating system to attest to keys. android safetynet -prior to android key attestation, the only option for android devices was to create android safetynet attestations fido u2f - security keys that implement the fid...
Web Speech API - Web APIs
cessed in the speech service. speechsynthesisutterance represents a speech request. it contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.) speechsynthesisvoice represents a voice that the system supports. every speechsynthesisvoice has its own relative speech service including information about language, name and uri.
window.speechsynthesis specced out as part of a [nointerfaceobject] interface called speechsynthesisgetter, and implemented by the
window object, the speechsynthesis property provides access to the speechsynthesis controller, and therefore the entry point to speech synthesis functionality. examples the web speech api repo on github contains demos to illustrate speech recognition and synthesis. spec...
WorkerGlobalScope.console - Web APIs
however, if you are calling console.log() from a sharedworkerglobalscope, the global browser console will receive the logs. specifications not yet part of any specification. ...
WorkerGlobalScope.dump() - Web APIs
the dump() method of the workerglobalscope interface allows you to write a message to stdout — i.e. in your terminal, in firefox only. this is the same as firefox's
window.dump, but for workers. syntax dump('my message\n'); parameters a domstring containing the message you want to send. returns void. example to write an output from your worker to your computer's terminal, you first have to run an instance of firefox started from your command line/terminal. for example, on mac os x you'd run it using something like this (assuming you are inside the applications folder): ./firefox.app/contents/macos/firefox-bin -profile /tmp -no-remote now go into about:config and enable the browser.dom.
window.dump.enabled pref. next, run a worker containing the following line: dump('test\...
WorkerNavigator - Web APIs
properties the workernavigator interface implements properties from the navigatorid, navigatorlanguage, navigatoronline, navigatordatastore, and navigatorconcurrenthardware interfaces. ...
Using XMLHttpRequest in IE6 - Web APIs
first introduced by microsoft in internet explorer 5.0 as an activex control. however, in ie7 and other browsers xmlhttprequest is a native javascript object. ...
XMLHttpRequest.timeout - Web APIs
iseconds a request can take before automatically being terminated. the default value is 0, which means there is no timeout. timeout shouldn't be used for synchronous xmlhttprequests requests used in a document environment or it will throw an invalidaccesserror exception. when a timeout happens, a timeout event is fired. note: you may not use a timeout for synchronous requests with an owning
window. 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. do processing here. }; xhr.ontimeout = functi...
XRSession - Web APIs
a promise which resolves when the session has been shut down. requestanimationframe() schedules the specified method to be called the next time the user agent is working on rendering an animation frame for the webxr device. returns an integer value which can be used to identify the request for the purposes of canceling the callback using cancelanimationframe(). this method is comparable to the
window.requestanimationframe() method. requestreferencespace() requests that a new xrreferencespace of the specified type be created. returns a promise which resolves with the xrreferencespace or xrboundedreferencespace which was requested, or throws a notsupportederror if the requested space type isn't supported by the device. updaterenderstate() updates the properties of the session's render state...
Browser Differences - Web APIs
browser differences netscape 7.x (all platforms) and internet explorer 6 (
windows) support the w3c xslt 1.0 standard (http://www.w3.org/tr/xslt). ie 5.0 and 5.5 (both
windows) supported only the working draft of xslt, and thus are not compatible with xslt 1.0 stylesheets. netscape 6.x only partially supported xslt 1.0. ...
mssitemodejumplistitemremoved - Web APIs
user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mssitemodejumplistitemremoved event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user. this proprietary method is specific to internet explorer and microsoft edge. syntax event property object.oncandidate
windowhide = handler; addeventlistener method object.addeventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called. this event is not triggered if mssitemodeclearjumplist has been called. ...
ARIA live regions - Accessibility
here). marquee for text which scrolls, such as a stock ticker. timer or any kind of timer or clock, such as a countdown timer or stopwatch readout. advanced live regions (tbd: more granular information on the support of the individual attributes with combinations of os/browser/at). general support for live regions was added to jaws on version 10.0. in
windows eyes supports live regions since version 8.0 "for use outside of browse mode for microsoft internet explorer and mozilla firefox". nvda added some basic support for live regions for mozilla firefox back in 2008 and was improved in 2010 and 2014. in 2015, basic support was also added for internet explorer (mshtml). the paciello group has some information about the state of the support of live re...
Using the aria-describedby attribute - Accessibility
. </div> </div> example 2: a close button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the document. the aria-describedby attribute is used to associate the description with the link. <button aria-label="close" aria-describedby="descriptionclose" onclick="mydialog.close()">x</button> ... <div id="descriptionclose">closing this
window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document. used by aria roles all elemen...
Using ARIA: Roles, states, and properties - Accessibility
s application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer
window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort ari...
ARIA annotations - Accessibility
tation, an aria-details attribute can be set on the annotated content that contains the id of the annotated element. aria-details has been updated so that it can support multiple ids — this makes sense, for example you can easily envisage having multiple comments relating to the same bit of text. ...
ARIA: application role - Accessibility
mpletely responsible for handling any and all keyboard input, focus management, and other interactions and cannot assume assistive technologies would do any processing on their end. if the web application encompassed by the application role contains parts that should be treated like normal web content, a role of document or article should be used. background for historic reasons, especially on
windows, screen readers and some other assistive technologies (at) have traditionally grabbed the whole web content from the browser at once after it had finished loading. the ats build their own representation of it that makes the most sense for a blind user to consume the content. this is often referred to as virtual document, browse mode, or similar terms. the document is streamlined to a single-colu...
ARIA: tab role - Accessibility
arent element. we then find all tabs with aria-selected=true inside the parent element and sets it to false, then sets the triggering element's aria-selected to true. after that, we find all tabpanel elements in the grandparent element, make them all hidden, and finally select the element whose id is equal to the triggering tab's aria-controls and removes the hidden attribute, making it visible. ...
ARIA: dialog role - Accessibility
dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). ...
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
a-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an html document gets. with jaws 8, i have not found a way to make it to accept the label from the example above. but nvda and
window-eyes do it just fine, and orca on linux also has no problems. tbd: add more compatibility info can this be done without aria? community member ben millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using html 4, simply by embedding the input into the label. thanks for that info, ben! it is very useful and shows that some techniques that...
Alerts - Accessibility
did you put both “(required)” in the label text and the aria-required attribute on some of the inputs? a. if this were a real live form, and the site was being visited by a browser that does not yet support aria, we’d still want to give an indication that this is a required field. q. why don’t you set focus back to the invalid field automatically? a. because this is not allowed by the
windows api specs, and possibly others. also, letting the focus jump around without real user interaction too often is not a nice thing to do in general. tbd: let's rethink this -- personally, i think setting focus might be good if done without causing a keyboard trap. ...
An overview of accessible web applications and widgets - Accessibility
r of the control you are creating. so, for the tabs widget example above, the user should be able to navigate into and out of the widget's container (the <ol> in our markup) using the tab and shift-tab keys. once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the <li> elements). from here, conventions vary from platform to platform. on
windows, the next tab should automatically be activated when the user presses the arrow keys. on mac os x, the user can press either enter or the spacebar to activate the next tab. an in-depth tutorial for creating keyboard-navigable javascript widgets describes how to implement this behavior with javascript. ...
Accessibility FAQ - Accessibility
for interface design with xul, follow the accessibile xul authoring guidelines (archive.org). i'm interested in helping promote the fine accessibility features that firefox provides, what can i do? join...
Accessibility documentation index - Accessibility
fo the contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. this section is commonly called a footer. 59 aria: dialog role aria, accessibility, needscontent, web development the dialog role is used to mark up an html based application dialog or
window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). 60 aria: document role aria, aria role, document, refere...
Accessibility Information for Web Authors - Accessibility
customizable. it's an extension add-on to firefox 2.x and firefox 3.x. it not only checks and reports possible markup errors and warnings (based on w3c tidy and/or based on true sgml validation) but it can also report accessibility errors and warnings according to selectable accessibility guidelines (section 508, wcag priorities 1, 2 or 3). its accessibility report is viewable in the view source
window (view > source code ctrl+u or right-click on the status bar). two panes are added at the bottom of the view source code
window: the left pane contains the errors and warnings (with their correspondent line number) and the right pane identifies the checkpoint along with an example and a clickable link to the reference/guideline. just wonderful! the html advanced validator may also be downloaded...
Web accessibility for seizures and physical reactions - Accessibility
d-motion, or see the example below from the section on new in chrome 74. button { animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { button { animation: none; } } prefers-color-scheme this can be useful if the ambient light api is not available. support is emerging. @media (prefers-color-scheme: dark) { /* adust styles for dark mode */ }
window.matchmedia() there is a powerful tool available to developers via
window.matchmedia(). a great resource is mdn's document on
window.matchmedia() media update feature the more often the screen is refreshed, the more stable it appears to the human eye, and the less it "flickers". the vast majority of modern technology refreshes at a rate that does not cause problems with photosensitivity. ...
Web Accessibility: Understanding Colors and Luminance - Accessibility
epsy analysis tool) measuring color & luminance methods that measures color exploring the rgb color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the rgb color space, such as srgb, scrgb, and rgba. there are also different ways to refrence rgb: rgb decimal reference: 153, 0, 0 and an rgb percent reference: 60, 0, 0.
window.getcomputedstyle() returns values using rgb decimal reference scale. for example, calling
window.getcomputedstyle() on a div with a background-color: #990000; set returns the computed background color as rgb(153, 0, 0) -- the rgb decimal reference.
window.getcomputedstyle() measures color in terms of rgb. css color module level 3 added hsl color values, stating "css3 adds numerical hue-satur...
Operable - Accessibility
controls), and you should only build in custom functionality where needed. see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard. 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. this is very important so that keyboard users do not get trapped on specific sections of your apps. 2.1.3 keyboard — all functionality (aaa) this is a further step beyond criterion 2.1.1. to achieve aaa conformance, all functionality should be accessible using keyboard cont...
-moz-context-properties - CSS: Cascading Style Sheets
note that if a color is set directly on the svg, but then the context color is also specified, the context color overrides the direct color. note: you can find a working example on github. specifications not part of any standard. ...
:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
e :-moz-locale-dir(ltr) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed left-to-right. this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "ltr". note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (this can vary from
window to
window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. this selector does not work properly from html; it always matches, regardless of whether the ui locale is left-to-right or right-to-left. syntax :-moz-locale-dir(ltr...
:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
e :-moz-locale-dir(rtl) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed right-to-left. this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "rtl". note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (this can vary from
window to
window, and even from tab to tab.) it also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics. this selector does not work properly from html; it never matches, no matter whether the ui locale is left-to-right or right-to-left. syntax :-moz-locale-dir(rtl) ex...
::placeholder - CSS: Cascading Style Sheets
is announced, and the person using the screen reader can mute it if they find the extra information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group
windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in
windows high contrast mode. this will make it difficult for some people to determine which content has been entered, and which content is placeholder text. greg whitworth — how to use -ms-high-contrast labels placeholders are not a replacement for the <label> element. with...
:first - CSS: Cascading Style Sheets
ent. furthermore, you may only use absolute-length units when defining the margins. all other properties will be ignored. syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => {
window.print(); }); result press the "print!" button to print the example. the words on the first page should be somewhere around the center, while other pages will have their contents at the default position. specifications specification status comment css paged media module level 3the definition of ':first' in that specification. working draft no change. ...
:visited - CSS: Cascading Style Sheets
-color, and text-emphasis-color. allowable svg attributes are fill and stroke. the alpha component of the allowed styles will be ignored. the alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely. although these styles can be change the appearance of colors to the end user, the
window.getcomputedstyle method will lie and always return the value of the non-:visited color. note: for more information on these limitations and the reasons behind them, see privacy and the :visited selector. syntax :visited examples properties that would otherwise have no color or be transparent cannot be modified with :visited. of the properties that can be set with this pseudo-class, your b...
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
the -moz-device-pixel-ratio gecko-only css media feature can be used to apply styles based on the number of device pixels per css pixel. do not use this feature. use the resolution feature with the dppx unit instead. note: this media feature is also implemented by webkit and by ie 11 for
windows phone 8.1 as -webkit-device-pixel-ratio. the min and max prefixes as implemented by gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibi...
prefers-reduced-motion - CSS: Cascading Style Sheets
types of motion-based animation that trigger discomfort for those with vestibular motion disorders. user preferences for firefox, the reduce request is honoured if: in gtk/gnome: gnome tweaks > general tab (or appearance, depending on version) > animations is turned off. alternatively, add gtk-enable-animations = false to the [settings] block of the gtk 3 configuration file. in
windows 10: settings > ease of access > display > show animations in
windows. in
windows 7: control panel > ease of access > make the computer easier to see > turn off all unnecessary animations (when possible). in macos: system preferences > accessibility > display > reduce motion. in ios: settings > general > accessibility > reduce motion. in android 9+: settings > accessibility > remove animation...
@viewport - CSS: Cascading Style Sheets
cument is viewed. it's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge). lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. this is typically based on the size of the
window on desktop browsers that aren't in full screen mode. on mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. this may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (eith...
CSSOM View - CSS: Cascading Style Sheets
cssom view is a module of css that lets you manipulate the visual view of a document, in particular its scrolling behavior. reference properties scroll-behavior guides coordinate systems a guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a
window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing. specifications specification status comment css object model (cssom) view module working draft initial definition. ...
Border-image generator - CSS: Cascading Style Sheets
var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.checkbox.checked); }; var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.length; for (var i = 0; i < size; i++) new checkbox(elem[i]); }; return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe }; })();
window.addeventlistener("load", function() { borderimage.init(); }); var borderimage = (function borderimage() { var getelembyid = document.getelementbyid.bind(document); var subject; var preview; var guidelines = []; var positions = ['top', 'right', 'bottom', 'left']; var makedraggable = function makedraggable(elem) { var offsettop; var offsetleft; elem.setattribute('data-draggable',...
Border-radius generator - CSS: Cascading Style Sheets
(var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.checkbox.checked); } var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.length; for (var i = 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })();
window.addeventlistener("load", function() { borderradius.init(); }); var borderradius = (function borderradius() { function getelembyid(id) { return document.getelementbyid(id); } /** * shadow dragging */ var previewmousetracking = (function drag() { var active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(...
Box-shadow generator - CSS: Cascading Style Sheets
(var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.checkbox.checked); } var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.length; for (var i = 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })();
window.addeventlistener("load", function(){ boxshadow.init(); }); var boxshadow = (function boxshadow() { function getelembyid(id) { return document.getelementbyid(id); } /** * rgba color class */ function color() { this.r = 0; this.g = 0; this.b = 0; this.a = 1; this.hue = 0; this.saturation = 0; this.value = 0; } color.prototype.copy = function copy(obj) { if(obj inst...
Color picker tool - CSS: Cascading Style Sheets
utslider(elem[i]); }; return { init : init, setmax : setmax, setmin : setmin, setunit : setunit, setstep : setstep, getnode : getnode, getstep : getstep, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe, setprecision : setprecision, setsensivity : setsensivity, getprecision : getprecision, createslider : createslider, }; })(); 'use strict';
window.addeventlistener("load", function() { colorpickertool.init(); }); var colorpickertool = (function colorpickertool() { /*========== get dom element by id ==========*/ function getelembyid(id) { return document.getelementbyid(id); } function allowdropevent(e) { e.preventdefault(); } /*========== make an element resizable relative to it's parent ==========*/ var uicomponent = (func...
Basic Concepts of grid layout - CSS: Cascading Style Sheets
played before turning them into a grid, as grid has created a single column grid for the items. at this point, you may find it useful to work with the grid inspector, available as part of firefox's developer tools. if you view this example in firefox and inspect the grid, you will see a small icon next to the value grid. click this and then the grid on this element will be overlaid in the browser
window. as you learn and then work with the css grid layout this tool will give you a better idea of what is happening with your grids visually. if we want to start making this more grid-like we need to add column tracks. grid tracks we define rows and columns on our grid with the grid-template-columns and grid-template-rows properties. these define grid tracks. a grid track is the space between a...
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
e any available remaining space equally – so we always get equal width column tracks. we achieve this with the minmax() function in our repeat notation for track sizing. .listing { list-style: none; margin: 2em; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } as soon as i add this css, the items start to lay out as a grid. if i make the
window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid. i can then tidy up the internals of the boxes using a little touch of flexbox. i set the list item to display: flex and the flex-direction to column. i can then use an auto margin on the .cta to push this bar down to the bottom of the box. .listing li { bor...
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
bined with the minmax() function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layout in two dimensions. if we look back at the example where i demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. with the flex layout, if we drag our
window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. if we have a lot of space all five items can fit on one row. if we have a very narrow container we may only have space for one. in comparison, the grid version always has three column tracks. the tracks themselves will grow and shrink, but there are always three since we ...
CSS Scrollbars - CSS: Cascading Style Sheets
basic example in this example we have chosen to use a thin scrollbar, with a green track and purple thumb. .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. gumbo beet greens corn soko endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. ...
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
eted elements, then the universal selector comes in handy: :target { color: red; } example in the following example, there are five links that point to elements in the same document. selecting the "first" link, for example, will cause <h1 id="one"> to become the target element. note that the document may jump to a new scroll position, since target elements are placed on the top of the browser
window if possible. <h4 id="one">...</h4> <p id="two">...</p> <div id="three">...</div> <a id="four">...</a> <em id="five">...</em> <a href="#one">first</a> <a href="#two">second</a> <a href="#three">third</a> <a href="#four">fourth</a> <a href="#five">fifth</a> conclusion in cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the ...
Layout and the containing block - CSS: Cascading Style Sheets
px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ background: cyan; } example 4 in this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport). thus, the paragraph's dimensions change based on the size of the browser
window. <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { width: 400px; height: 480px; margin: 30px; padding: 15px; background: lightgray; } p { position: fixed; width: 50%; /* == (50vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (wi...
Using media queries - CSS: Cascading Style Sheets
(such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the
window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. syntax a media query is composed of an optional media type and any number of media feature expressions. multiple queries can be combined in various ways by using logical operators. ...
Media queries - CSS: Cascading Style Sheets
y define the media to which a linked resource (typically css) should be applied. in the <source> element's media attribute, they define the media to which that source should be applied. (this is only valid inside <picture> elements.) in the <style> element's media attribute, they define the media to which the style should be applied. media queries in javascript in javascript, you can use the
window.matchmedia() method to test the
window against a media query. you can also use mediaquerylist.addlistener() to be notified whenever the state of a query changes. with this functionality, your site or app can respond to changes in the device configuration, orientation, or state. you can learn more about programmatically using media queries in testing media queries. reference at-rules @impor...
Visual formatting model - CSS: Cascading Style Sheets
del as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout specifications. in this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on mdn for further details. the role of the viewport in continuous media, the viewport is the viewing area of the browser
window. user agents can change the layout of the page when the viewport size changes — for example, if you resize your
window, or change the orientation of a mobile device. if the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. we most often see this as scrolling in the block dimension — vertic...
animation-delay - CSS: Cascading Style Sheets
r prefix: -webkit-edge full support 12firefox full support 16notes full support 16notes notes before firefox 57, firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. this bug affects only some platforms, such as
windows. full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). to change preferences in ...
animation - CSS: Cascading Style Sheets
lign: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; }
window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; ...
left - CSS: Cascading Style Sheets
ing absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only containing element for this div is the main
window, so it positions itself in relation to it.</p> </div> <div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>relative position in relation to its siblings.</p> </div> <div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>relative to its sibling div above, but rem...
Used value - CSS: Cascading Style Sheets
<p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid =
window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths();
window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a proper...
Getting Started - Developer guides
s is where xmlhttprequest comes in. its predecessor originated in internet explorer as an activex object called xmlhttp. then, mozilla, safari, and other browsers followed, implementing an xmlhttprequest object that supported the methods and properties of microsoft's original activex object. meanwhile, microsoft implemented xmlhttprequest as well. // old compatibility code, no longer needed. if (
window.xmlhttprequest) { // mozilla, safari, ie7+ ... httprequest = new xmlhttprequest(); } else if (
window.activexobject) { // ie 6 and older httprequest = new activexobject("microsoft.xmlhttp"); } note: for illustration purposes, the above is a somewhat simplified version of the code to be used for creating an xmlhttp instance. for a more realistic example, see step 3 of this article. after...
Adding captions and subtitles to HTML5 video - Developer guides
this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element. captioned video example in this article, we will refer to the video player with captions example. this example uses an excerpt from the sintel open movie, created by the blender foundation. note: you can find the source on github, and also view the example live. ...
Live streaming web audio and video - Developer guides
mats a couple of http-based live streaming video formats are beginning to see support across browsers. note: you can find a guide to encoding hls and mpeg-dash for use on the web at setting up adaptive streaming media sources. mpeg-dash dash stands for dynamic adaptive streaming over http and is a new format that has recently seen support added to chrome, and internet explorer 11 running on
windows 8.1. it is supported via media source extensions which are used by javascript libraries such as dash.js. this approach allows us to download chunks of the video stream using xhr and "append" the chunks to the stream that's played by the <video> element. so for example, if we detect that the network is slow, we can start requesting lower quality (smaller) chunks for the next segment. this technol...
Web Audio playbackRate explained - Developer guides
ideo id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it:
window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control be...
Creating and triggering events - Developer guides
present the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods. view the example in action. function simulateclick() { const event = new mouseevent('click', { view:
window, bubbles: true, cancelable: true }); const cb = document.getelementbyid('checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called preventdefault. alert("cancelled"); } else { // none of the handlers called preventdefault. alert("not cancelled"); } } ...
Event developer guide - Developer guides
of the events built-in or defined by modern web browsers. the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms. that is different, but similar, to the change in device vertical orientation. the
window in which the browser is displayed can trigger events; for example, change size if the user maximizes the
window or otherwise changes it. the process loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user. the user interaction with the web page contents can trigger events. the ev...
Making content editable - Developer guides
aultparagraphseparator", 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 { bo...
Index - Developer guides
h with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. 7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and
window.fullscreen apis, and also at how to style the player. this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element. 8 creating a cross-browser video player apps, html5, video, full screen this article describes a simple html5 video player that uses the media and fullscreen apis and works across most m...
Mobile Web Development - Developer guides
d these apis give mobile users new ways to interact with your site. working with small screens responsive web design is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser
window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device. working with touch screens to use a touch screen you'll need to work with dom touch events. you won't be able to use the css :hover pseudo-class, and will ne...
User input and controls - Developer guides
o navigate web sites and apps, and locking them out of your functionality is a bad idea. the following is a set of recommendations and best practices for using such tools in open web apps. decide what input mechanism you’re using keyboard keyboard input can be controlled by your app. for example if you want to add controls when any key gets pressed, you need to add an event listener on the
window object:
window.addeventlistener("keydown", handlekeydown, true);
window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events. note: have a look at the events reference and keyboardevent guide to find out more about keyboard events. mouse the events occurring when the user interacts w...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
ation covered above. example: picking a color let's look at a simple example, in which the user can choose a color. as the user adjusts the color, the border around the example changes to reflect the new color. after finishing up and picking the final color, the color picker's value is displayed. on macos, you indicate that you've finalized selection of the color by closing the color picker
window. html the html here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we'll output some text from our javascript code. <div id="box"> <label for="colorpicker">border color:</label> <input type="color" value="#8888ff" id="colorpicker"> <p id="output"></p> </div> css the css simply establis...
HTML attribute: rel - HTML: Hypertext Markup Language
erenced document. it is often included by search engine optimizers pretending their link farms are not spam pages. noopener relevant to <form>, <a>, and <area>, 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). in other words, it makes the link behave as if
window.opener were null and target="_parent" were set. this is the opposite of opener. noreferrer relevant to <form>, <a>, and <area>, including this value makes the referrer unknown (no referer header will be included), and opens the creates a top-level browsing context, as if noopener were also set. opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level...
<dialog>: The Dialog element - HTML: Hypertext Markup Language
content categories flow content, sectioning root permitted content flow content tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content implicit aria role dialog permitted aria roles alertdialog dom interface htmldialogelement attributes this element includes the global attributes. the tabindex attribute must not be used on the <dialog> element. ...
<form> - HTML: Hypertext Markup Language
tribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form. target indicates where to display the response after submitting the form. in html 4, this is the name/keyword for a frame. in html5, it is a name/keyword for a browsing context (for example, tab,
window, or iframe). the following keywords have special meanings: _self (default): load into the same browsing context as the current one. _blank: load into a new unnamed browsing context. _parent: load into the parent browsing context of the current one. if no parent, behaves the same as _self. _top: load into the top-level browsing context (i.e., the browsing context that is an ancestor of t...
manifest - HTML: Hypertext Markup Language
the manifest attribute of <html> element specifies a url of a application cache manifest that is downloaded in the early stages of page load. note: manifest-based caching mechanism has been deprecated. use service workers instead. the manifest attribute has only effect during early stages of page load, thus changing it via regular dom interfaces has no effect,
window.applicationcache interface instead. specifications specification status comment html5the definition of '<html> manifest attribute' in that specification. recommendation added support for the manifest attribute and deprecated it later ...
<isindex> - HTML: Hypertext Markup Language
documents started by dan connolly who is pushing the idea that indexes are more links than documents. in this thread, different type of solutions are proposed. the question of forms for making queries is mentioned in reference to dynatext browser: "the browser displays toggle buttons, text fields etc. the user fills in the fields, clicks ok, and the query results come up in the table of contents
window." a thread about isindex in november 1992, kevin hoadley questioned the need for an isindex element and proposed to drop it. he proposed to have instead an input element (idea supported by steve putz). tim berners-lee explains the purpose of isindex resulting in aggregated search results. kevin replies that he doesn't like the boolean nature of isindex and would prefer a system where everything ...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the current site. this attribute is not well understood nor supported, even by the defining browser, internet explorer 4. prefetch secure context this attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. this allows the user agent to respond faster when the resource is requested in the future. target defines the frame or
window name that has the defined linking relationship or that will show the rendering of any linked resource. obsolete attributes charset this attribute defines the character encoding of the linked resource. the value is a space- and/or comma-delimited list of character sets as defined in rfc 2045. the default value is iso-8859-1. usage note: to produce the same effect as this obsolete attribut...
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
value is always 0, and the min attribute is not allowed for the <progress> element. note: the :indeterminate pseudo-class can be used to match against indeterminate progress bars. to change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeattribute('value'). examples <progress value="70" max="100">70 %</progress> result on
windows 7, the resulting progress looks like this: specifications specification status comment html living standardthe definition of '<progress>' in that specification. living standard html5the definition of '<progress>' in that specification. recommendation initial definition ...
<script>: The Script element - HTML: Hypertext Markup Language
fore continuing to parse. defer has a similar effect in this case. this is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. see browser compatibility for notes on browser support. see also async scripts for asm.js. crossorigin normal script elements pass minimal information to the
window.onerror for scripts which do not pass the standard cors checks. to allow error logging for sites which use a separate domain for static media, use this attribute. see cors settings attributes for a more descriptive explanation of its valid arguments. defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but bef...
<select>: The HTML Select element - HTML: Hypertext Markup Language
keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them. warning: the mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in firefox. also note: on macos, the ctrl + up and ctrl + down shortcuts conflict with the os default shortcuts for mission control and application
windows, so you'll have to turn these off before it will work. keyboard users can select multiple contiguous items by: focusing on the <select> element (e.g. using tab). selecting an item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options. holding down the shift key and then using the up and down cursor keys to increase or decreas...
<tbody>: The Table Body element - HTML: Hypertext Markup Language
nside the <tbody>. all non-header and non-footer rows must be inside the <tbody> if one is used. when printing a document, the <thead> and <tfoot> elements specify information that may be the same—or at least very similar—on every page of a multi-page table, while the <tbody> element's contents generally will differ from page to page. when a table is presented in a screen context (such as a
window) which is not large enough to display the entire table, the user agent may let the user scroll the contents of the <thead>, <tbody>, <tfoot>, and <caption> blocks separately from one another for the same parent table. you may use more than one <tbody> per table as long as they are all consecutive. this lets you divide the rows in large tables into sections, each of which may be separately format...
<title>: The Document Title element - HTML: Hypertext Markup Language
if your title is just a list of words, algorithms often reduce your page's position in the search results. try to make sure your titles are as unique as possible within your own site. duplicate—or near-duplicate—titles can contribute to inaccurate search results. example <title>awesome interesting stuff</title> this example establishes a page whose title (as displayed at the top of the
window or in the
window's tab) as "awesome interesting stuff". accessibility concerns it is important to provide a title value that describes the page's purpose. a common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. this is because navigating into a page to determine its content can be a time consuming and potentially confu...
HTML elements reference - HTML: Hypertext Markup Language
interactive user interface objects. 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. <dialog> the html <dialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or sub
window. <menu> the html <menu> element represents a group of commands that a user can perform or activate. this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked. <summary> the html disclosure summary element (<summary>) element specifies a summary, c...
accesskey - HTML: Hypertext Markup Language
ll request. note: in the whatwg spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
contextmenu - HTML: Hypertext Markup Language
fire the "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()...
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 specifica...
Data URLs - HTTP
encoding on a unix system base64 encoding of a file or string on linux and mac os x systems can be achieved using the command-line base64 (or, as an alternative, the uuencode utility with -m argument). echo -n hello|base64 # outputs to console: agvsbg8= echo -n hello>a.txt base64 a.txt # outputs to console: agvsbg8= base64 a.txt>b.txt # outputs to file b.txt: agvsbg8= encoding on microsoft
windows encoding on
windows can be done through powershell or some dedicated tool. it can even be done via bash base64 utility (see section encoding on a unix system) if wsl is activated. [convert]::tobase64string([text.encoding]::utf8.getbytes("hello")) # outputs to console: agvsbg8= bash -c "echo -n hello`|base64" # outputs to console: agvsbg8= # the backtick (`) is used to escape the piping (|) ch...
Common MIME types - HTTP
aac aac audio audio/aac .abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp
windows 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 (op...
Using HTTP cookies - HTTP
rvice without receiving cookies. there may be other regulations governing the use of cookies in your locality. the burden is on you to know and comply with these regulations. there are companies that offer "cookie banner" code that helps you comply with these regulations. other ways to store information in the browser another approach to storing data in the browser is the web storage api. the
window.sessionstorage and
window.localstorage properties correspond to session and permanent cookies in duration, but have larger storage limits than cookies, and are never sent to a server. more structured and larger amounts of data can be stored using the indexeddb api, or a library built on it. other techniques have been created to cause cookies to be recreated after they are deleted, known as "zomb...
CSP: navigate-to - HTTP
this is an enforcement on what navigations this document initiates not on what this document is allowed to navigate to. note: if the form-action directive is present, the navigate-to directive will not act on navigations that are form submissions. csp version 3 directive type navigation directive default-src fallback no. ...
CSP: script-src - HTTP
eading or trailing whitespace. <script>var inline = 1;</script> unsafe eval expressions the 'unsafe-eval' source expression controls several script execution methods that create code from strings. if 'unsafe-eval' isn't specified with the script-src directive, the following methods are blocked and won't have any effect: eval() function() when passing a string literal like to methods like:
window.settimeout("alert(\"hello world!\");", 500);
window.settimeout
window.setinterval
window.setimmediate
window.execscript (ie < 11 only) strict-dynamic the 'strict-dynamic' source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. ...
Content-Security-Policy - HTTP
form, for example. form-action restricts the urls which can be used as the target of a form submissions from a given context. frame-ancestors specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. 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. reporting directives reporting directives control the reporting process of csp violations. see also the content-security-policy-report-only header. report-uri instructs the user agent to report attempts to violate the content security policy. these violation reports consist of json documents sent via an http post request to the specified uri. though the repo...
Cross-Origin-Embedder-Policy - HTTP
nce.now() with unthrottled timers, if your document has a coep header with the value require-corp value set. 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. to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to
window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } avoiding coep blockage with cors if you enable coep using require-corp and have a cross origin resource that needs to be loaded, it needs to support cors and you need to explicitly mark the resource as loadable from another origin to avoid blockage from coep. for example, you can use t...
Sec-Fetch-Site - HTTP
examples todo specifications specification title fetch metadata request headers the sec-fetch-site http request header ...
HTTP headers - HTTP
atches the remote resource. used to prevent downloading two ranges from incompatible version of the resource. content-range indicates where in a full body message a partial message belongs. security cross-origin-embedder-policy (coep) allows a server to declare an embedder policy for a given document. cross-origin-opener-policy (coop) prevents other domains from opening/controlling a
window. cross-origin-resource-policy (corp) prevents other domains from reading the response of the resources to which this header is applied. content-security-policy (csp) controls resources the user agent is allowed to load for a given page. content-security-policy-report-only allows web developers to experiment with policies by monitoring, but not enforcing, their effects. these violation re...
HTTP Index - HTTP
ve specifies valid sources for loading media using the <audio> and <video> elements. 89 csp: navigate-to csp, content-security-policy, directive, http, navigation, reference, security the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigations by any means including <form> (if form-action is not specified), <a>,
window.location,
window.open, etc. this is an enforcement on what navigations this document initiates not on what this document is allowed to navigate to. 90 csp: object-src csp, content-security-policy, directive, http, object, reference, security, object-src, source the http content-security-policy object-src directive specifies valid sources for the <object>, <embed>, and <applet...
Redirections in HTTP - HTTP
> </head> the content attribute should start with a number indicating how many seconds the browser should wait before redirecting to the given url. always set it to 0 for accessibility compliance. obviously, this method only works with html, and cannot be used for images or other types of content. javascript redirections redirections in javascript are performed by setting a url string to the
window.location property, loading the new page:
window.location = "https://example.com/"; like html redirections, this can't work on all resources, and obviously, this will only work on clients that execute javascript. on the other hand, there are more possibilities: for example, you can trigger the redirect only if some conditions are met. order of precedence with three ways to trigger redirections...
A re-introduction to JavaScript (JS tutorial) - JavaScript
ated within that function. it is initialized with any variables passed in as function parameters. this is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as this and in browsers as
window) these scope objects cannot be directly accessed from your javascript code. there is no mechanism for iterating over the properties of the current scope object, for example. so when makeadder() is called, a scope object is created with one property: a, which is the argument passed to the makeadder() function. makeadder() then returns a newly created function. normally javascript's garbage collec...
Grammar and types - JavaScript
ly function declarations are hoisted—but not the function expressions. /* function declaration */ foo(); // "bar" function foo() { console.log('bar'); } /* function expression */ baz(); // typeerror: baz is not a function var baz = function() { console.log('bar2'); }; global variables global variables are in fact properties of the global object. in web pages, the global object is
window, so you can set and access global variables using the
window.variable syntax. consequently, you can access global variables declared in one
window or frame from another
window or frame by specifying the
window or frame name. for example, if a variable called phonenumber is declared in a document, you can refer to this variable from an iframe as parent.phonenumber. constants you can create a re...
Indexed collections - JavaScript
are known as iterative methods, because they iterate over the entire array in some fashion. each one takes an optional second argument called thisobject. if provided, thisobject becomes the value of the this keyword inside the body of the callback function. if not provided, as with other cases where a function is invoked outside of an explicit object context, this will refer to the global object (
window) when using arrow function as callback, or undefined when using normal function as callback. the callback function is called with two arguments, that are array's elements. the function below compares two values and returns one of three values: for instance, the following will sort by the last letter of a string: let sortfn = function(a, b) { if (a[a.length - 1] < b[b.length - 1]) return -1;...
Introduction - JavaScript
x is useful for experimenting with javascript; you can use it into two modes: single-line input mode, and multi-line input mode. single-line input in the web console the web console shows you information about the currently loaded web page, and also includes a javascript interpreter that you can use to execute javascript expressions in the current page. 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". the web console appears at the bottom of the browser
window. along the bottom of the console is an input line that you can use to enter javascript, and the output appears in the panel above: the console works the exact same way as eval: the last expression entered is returned. for the ...
Inheritance and the prototype chain - JavaScript
ng (a.k.a. dosomething.prototype). if the __proto__ of dosomeinstancing has the property being looked for, then that property on the __proto__ of dosomeinstancing is used. otherwise, if the __proto__ of dosomeinstancing does not have the property, then the __proto__ of the __proto__ of dosomeinstancing is checked for the property. by default, the __proto__ of any function's prototype property is
window.object.prototype. so, the __proto__ of the __proto__ of dosomeinstancing (a.k.a. the __proto__ of dosomething.prototype (a.k.a. object.prototype)) is then looked through for the property being searched for. if the property is not found in the __proto__ of the __proto__ of dosomeinstancing, then the __proto__ of the __proto__ of the __proto__ of dosomeinstancing is looked through. however, there ...
Memory Management - JavaScript
llection. circular references are a common cause of memory leaks. function f() { var x = {}; var y = {}; x.a = y; // x references y y.a = x; // y references x return 'azerty'; } f(); real-life example internet explorer 6 and 7 are known to have reference-counting garbage collectors for dom objects. cycles are a common mistake that can generate memory leaks: var div;
window.onload = function() { div = document.getelementbyid('mydivelement'); div.circularreference = div; div.lotsofdata = new array(10000).join('*'); }; in the above example, the dom element "mydivelement" has a circular reference to itself in the "circularreference" property. if the property is not explicitly removed or nulled, a reference-counting garbage collector will always have at least on...
TypeError: "x" is not a non-null object - JavaScript
a valid property descriptor object might look like this: object.defineproperty({}, 'key', { value: 'foo', writable: false }); weakmap and weakset objects require object keys weakmap and weakset objects store object keys. you can't use other types as keys. var ws = new weakset(); ws.add('foo'); // typeerror: "foo" is not a non-null object use objects instead: ws.add({foo: 'bar'}); ws.add(
window); ...
Method definitions - JavaScript
a } }; console.log(obj.b()) // "foo" computed property names the shorthand syntax also supports computed property names. const bar = { foo0: function() { return 0 }, foo1() { return 1 }, ['foo' + 2]() { return 2 } } console.log(bar.foo0()) // 0 console.log(bar.foo1()) // 1 console.log(bar.foo2()) // 2 // a global function function foo() { return 1 } let name = 'foo' console.log(
window[name]()) // 1 specifications specification ecmascript (ecma-262)the definition of 'method definitions' in that specification. ...
Functions - JavaScript
} return numstr; } the following statements call the padzeros function. var result; result = padzeros(42,4); // returns "0042" result = padzeros(42,2); // returns "42" result = padzeros(5,4); // returns "0005" determining whether a function exists you can determine whether a function exists by using the typeof operator. in the following example, a test is performed to determine if the
window object has a property called nofunc that is a function. if so, it is used; otherwise, some other action is taken. if ('function' === typeof
window.nofunc) { // use nofunc() } else { // do something else } note that in the if test, a reference to nofunc is used—there are no brackets "()" after the function name so the actual function is not called. specifications specifica...
Array.isArray() - JavaScript
d); array.isarray(17); array.isarray('array'); array.isarray(true); array.isarray(false); array.isarray(new uint8array(32)); array.isarray({ __proto__: array.prototype }); instanceof vs isarray when checking for array instance, array.isarray is preferred over instanceof because it works through iframes. var iframe = document.createelement('iframe'); document.body.appendchild(iframe); xarray =
window.frames[
window.frames.length-1].array; var arr = new xarray(1,2,3); // [1,2,3] // correctly checking for array array.isarray(arr); // true // considered harmful, because doesn't work through iframes arr instanceof array; // false specifications specification ecmascript (ecma-262)the definition of 'array.isarray' in that specification. ...
DataView - JavaScript
r(combined)) console.warn(combined, 'exceeds max_safe_integer. precision may be lost'); return combined; } alternatively, if you need full 64-bit range, you can create a bigint. further, although native bigints are much faster than user-land library equivalents, bigints will always be much slower than 32-bit integers in javascript due to the nature of their variable size. ...
Error.prototype.lineNumber - JavaScript
the linenumber property contains the line number in the file that raised this error. examples using linenumber var e = new error('could not parse input'); throw e; console.log(e.linenumber) // 2 alternative example using error event
window.addeventlistener('error', function(e) { console.log(e.linenumber); // 5 }); var e = new error('could not parse input'); throw e; this is not a standard feature and lacks widespread support. see the browser compatability table below. specifications not part of any standard. ...
Math.clz32() - JavaScript
<< 2); integer = integer | (integer << 1); // 2. now, inversing the bits reveals the lowest bits return 32 - clz(~integer) |0; } function ctron(integer) { // count trailing ones integer = integer | 0; // coerce to an integer return ctrz(~integer) |0; } // unfourtunately, asm.js demands slow crummy objects: return {a: ctrz, b: ctron}; })(
window, null, null); var ctrz = counttrailsmethods.a; var ctron = counttrailsmethods.b; polyfill the following polyfill is the most efficient. if (!math.clz32) math.clz32 = (function(log, ln2){ return function(x) { // let n be touint32(x). // let p be the number of leading zero bits in // the 32-bit binary representation of n. // return p. var asuint = x >>> 0; if (asuint ==...
Math.random() - JavaScript
uniform distribution over that range — which you can then scale to your desired range. the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything related to security. use the web crypto api instead, and more precisely the
window.crypto.getrandomvalues() method. syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive). examples note that as numbers in javascript are ieee 754 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (excluding the one for math.random() itself) aren't exact. if extremely large bounds ...
Math.random() - JavaScript
uniform distribution over that range — which you can then scale to your desired range. the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything related to security. use the web crypto api instead, and more precisely the
window.crypto.getrandomvalues() method. syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive). examples note that as numbers in javascript are ieee 754 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (excluding the one for math.random() itself) aren't exact. if extremely large bounds ...
Number.parseInt() - JavaScript
nd 36 that represents the radix (the base in mathematical numeral systems) of the string. be careful—this does not default to 10! return value an integer parsed from the given string. if the radix is smaller than 2 or bigger than 36, and the first non-whitespace character cannot be converted to a number, nan is returned. polyfill if (number.parseint === undefined) { number.parseint =
window.parseint } examples number.parseint vs parseint this method has the same functionality as the global parseint() function: number.parseint === parseint // true and is part of ecmascript 2015 (its purpose is modularization of globals). please see parseint() for more detail and examples. specifications specification ecmascript (ecma-262)the definition of 'number.parsei...
Object.freeze() - JavaScript
object contains no cycles in the reference graph, otherwise an endless loop will be triggered. an enhancement to deepfreeze() would be to have an internal function that receives a path (e.g. an array) argument so you can suppress calling deepfreeze() recursively when an object is in the process of being made immutable. you still run a risk of freezing an object that shouldn't be frozen, such as [
window]. function deepfreeze(object) { // retrieve the property names defined on object var propnames = object.getownpropertynames(object); // freeze properties before freezing self for (let name of propnames) { let value = object[name]; if(value && typeof value === "object") { deepfreeze(value); } } return object.freeze(object); } var obj2 = { internal: { a: n...
Object.keys() - JavaScript
push(prop); } } if (hasdontenumbug) { for (i = 0; i < dontenumslength; i++) { if (hasownproperty.call(obj, dontenums[i])) { result.push(dontenums[i]); } } } return result; }; }()); } please note that the above code includes non-enumerable keys in ie7 (and maybe ie8), when passing in an object from a different
window. for a simple browser polyfill, see javascript - object.keys browser compatibility. examples using object.keys // simple array const arr = ['a', 'b', 'c']; console.log(object.keys(arr)); // console: ['0', '1', '2'] // array-like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.keys(obj)); // console: ['0', '1', '2'] // array-like object with random key ordering const anobj ...
RegExp - JavaScript
2 to indicate the results of the corresponding matching parentheses in the regular expression pattern. let re = /(\w+)\s(\w+)/ let str = 'john smith' let newstr = str.replace(re, '$2, $1') console.log(newstr) this displays "smith, john". using regular expression to split lines with different line endings/ends of line/line breaks the default line ending varies depending on the platform (unix,
windows, etc.). the line splitting provided in this example works on all platforms. let text = 'some text\nand some more\r\nand yet\rthis is the end' let lines = text.split(/\r\n|\r|\n/) console.log(lines) // logs [ 'some text', 'and some more', 'and yet', 'this is the end' ] note that the order of the patterns in the regular expression matters. using regular expression on multiple lines let s = 'p...
String.prototype.trimStart() - JavaScript
ype.trimleft.name === "trimstart"; polyfill //https://github.com/fabiovergani/js-polyfill_string-trimstart (function(w){ var string=w.string, proto=string.prototype; (function(o,p){ if(p in o?o[p]?false:true:true){ var r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(
window); /* es6: (w=>{ const string=w.string, proto=string.prototype; ((o,p)=>{ if(p in o?o[p]?false:true:true){ const r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(
window); */ examples using trimstart() the following example displays the lowercase string 'foo ': var...
WeakMap() constructor - JavaScript
tax new weakmap([iterable]) parameters iterable iterable is an array or other iterable object whose elements are key-value pairs (2-element arrays). each key-value pair will be added to the new weakmap. null is treated as undefined. examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm3 = new weakmap(); const o1 = {}, o2 = function() {}, o3 =
window; wm1.set(o1, 37); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects. even weakmaps! wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2)...
WeakMap.prototype.clear() - JavaScript
the clear() method used to remove all elements from a weakmap object, but is no longer part of ecmascript and its implementations. syntax wm.clear(); examples using the clear method var wm = new weakmap(); var obj = {}; wm.set(obj, 'foo'); wm.set(
window, 'bar'); wm.has(obj); // true wm.has(
window); // true wm.clear(); wm.has(obj) // false wm.has(
window) // false specifications not part of any standard. ...
WeakMap.prototype.delete() - JavaScript
/github.com/mdn/interactive-examples and send us a pull request. syntax wm.delete(key); parameters key the key of the element to remove from the weakmap object. return value true if an element in the weakmap object has been removed successfully. false if the key is not found in the weakmap or if the key is not an object. examples using the delete method var wm = new weakmap(); wm.set(
window, 'foo'); wm.delete(
window); // returns true. successfully removed. wm.has(
window); // returns false. the
window object is no longer in the weakmap. specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.delete' in that specification. ...
WeakMap.prototype.get() - JavaScript
ject, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax wm.get(key); parameters key required. the key of the element to return from the weakmap object. return value the element associated with the specified key in the weakmap object. if the key can't be found, undefined is returned. examples using the get method var wm = new weakmap(); wm.set(
window, 'foo'); wm.get(
window); // returns "foo". wm.get('baz'); // returns undefined. specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.get' in that specification. ...
WeakMap.prototype.has() - JavaScript
oject, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax wm.has(key); parameters key required. the key of the element to test for presence in the weakmap object. return value boolean returns true if an element with the specified key exists in the weakmap object; otherwise false. examples using the has method var wm = new weakmap(); wm.set(
window, 'foo'); wm.has(
window); // returns true wm.has('baz'); // returns false specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.has' in that specification. ...
WeakMap.prototype.set() - JavaScript
nd us a pull request. syntax wm.set(key, value); parameters key required. must be object. the key of the element to add to the weakmap object. value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. examples using the set method var wm = new weakmap(); var obj = {}; // add new elements to the weakmap wm.set(obj, 'foo').set(
window, 'bar'); // chainable // update an element in the weakmap wm.set(obj, 'baz'); specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.set' in that specification. ...
WeakMap - JavaScript
.prototype.has(key) returns a boolean asserting whether a value has been associated to the key in the weakmap object or not. weakmap.prototype.set(key, value) sets the value for the key in the weakmap object. returns the weakmap object. examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm3 = new weakmap(); const o1 = {}, o2 = function() {}, o3 =
window; wm1.set(o1, 37); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects. even weakmaps! wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2)...
WeakSet.prototype.add() - JavaScript
his interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax ws.add(value); parameters value required. the object to add to the weakset collection. return value the weakset object. examples using add var ws = new weakset(); ws.add(
window); // add the
window object to the weakset ws.has(
window); // true // weakset only takes objects as arguments ws.add(1); // results in "typeerror: invalid value used in weak set" in chrome // and "typeerror: 1 is not a non-null object" in firefox specifications specification ecmascript (ecma-262)the definition of 'weakset.prototype.add' in that specification. ...
WeakSet.prototype.delete() - JavaScript
n/interactive-examples and send us a pull request. syntax ws.delete(value); parameters value required. the object remove from the weakset object. return value true if an element in the weakmap object has been removed successfully. false if the key is not found in the weakmap or if the key is not an object. examples using the delete method var ws = new weakset(); var obj = {}; ws.add(
window); ws.delete(obj); // returns false. no obj found to be deleted. ws.delete(
window); // returns true. successfully removed. ws.has(
window); // returns false. the
window is no longer present in the weakset. specifications specification ecmascript (ecma-262)the definition of 'weakset.prototype.delete' in that specification. ...
WeakSet.prototype.has() - JavaScript
ject, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax ws.has(value); parameters value required. the object to test for presence in the weakset. return value boolean returns true if an element with the specified value exists in the weakset object; otherwise false. examples using the has method var ws = new weakset(); var obj = {}; ws.add(
window); myset.has(
window); // returns true myset.has(obj); // returns false specifications specification ecmascript (ecma-262)the definition of 'weakset.prototype.has' in that specification. ...
WebAssembly.compileStreaming() - JavaScript
fails, the promise rejects with a webassembly.compileerror. examples compile streaming the following example (see our compile-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles it to a webassembly.module object. because the compilestreaming() function accepts a promise for a response object, you can directly pass it a
windoworworkerglobalscope.fetch() call, and it will pass the response into the function when it fulfills. var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.compilestreaming(fetch('simple.wasm')) .then(module => webassembly.instantiate(module, importobject)) .then(instance => instance.exports.exported_func()); the resulting module instance is then instantiated usi...
WebAssembly.instantiateStreaming() - JavaScript
of the failure. examples instantiating streaming the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a resultobject. because the instantiatestreaming() function accepts a promise for a response object, you can directly pass it a
windoworworkerglobalscope.fetch() call, and it will pass the response into the function when it fulfills. var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the resultobject's instance member is then accessed, and the contained exported function invoked. ...
WebAssembly - JavaScript
ream a .wasm module then compile and instantiate it the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a resultobject. because the instantiatestreaming() function accepts a promise for a response object, you can directly pass it a
windoworworkerglobalscope.fetch() call, and it will pass the response into the function when it fulfills. var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the resultobject's instance member is then accessed, and the contained exported function invoked. s...
undefined - JavaScript
r alternative. javascript is a statically scoped language, so knowing if a variable is declared can be read by seeing whether it is declared in an enclosing context. the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the global object, using the in operator, for instance: if ('x' in
window) { // these statements execute only if x is defined globally } void operator and undefined the void operator is a third alternative. var x; if (x === void 0) { // these statements execute } // y has not been declared before if (y === void 0) { // throws uncaught referenceerror: y is not defined } specifications specification ecmascript (ecma-262)the definiti...
delete operator - JavaScript
rn false. in strict mode this will raise a typeerror. var employee = {}; object.defineproperty(employee, 'name', {configurable: false}); console.log(delete employee.name); // returns false var, let, and const create non-configurable properties that cannot be deleted with the delete operator: var nameother = 'xyz'; // we can access this global property using: object.getownpropertydescriptor(
window, 'nameother'); // output: object {value: "xyz", // writable: true, // enumerable: true, // configurable: false} // since "nameother" is added using with the // var keyword, it is marked as "non-configurable" delete nameother; // return false in strict mode, this would have raised an exception. strict vs. non-strict mode when in strict mod...
const - JavaScript
= value1 [, name2 = value2 [, ... [, namen = valuen]]]; namen the constant's name, which can be any legal identifier. valuen the constant's value. this can be any legal expression, including a function expression. description this declaration creates a constant whose scope can be either global or local to the block in which it is declared. global constants do not become properties of the
window object, unlike var variables. an initializer for a constant is required. you must specify its value in the same statement in which it's declared. (this makes sense, given that it can't be changed later.) the const declaration creates a read-only reference to a value. it does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned. for instance, in the c...
let - JavaScript
les that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope. the other difference between var and let is that the latter is initialized to a value only when a parser evaluates it (see below). just like const the let does not create properties of the
window object when declared globally (in the top-most scope). an explanation of why the name "let" was chosen can be found here. examples scoping rules variables declared by let have their scope in the block for which they are defined, as well as in any contained sub-blocks. in this way, let works very much like var. the main difference is that the scope of a var variable is the entire enclosing fun...
var - JavaScript
scoped to the module, and are not, therefore added as properties to the global object. unqualified identifier assignments the global object sits at the top of the scope chain. when attempting to resolve a name to a value, the scope chain is searched. this means that properties on the global object are conveniently visible from every scope, without having to qualify the names with globalthis. or
window. or global.. so you can just type: function foo() { string('s') // note the function `string` is implicitly visible } ...because globalthis.hasownproperty('string') // true so the global object will ultimately be searched for unqualified identifiers. you don't have to type globalthis.string, you can just type the unqualified string. the corollary, in non-strict mode, is that assignment to ...
JavaScript shells - JavaScript
t snippets of javascript code without having to reload a web page. they are extremely useful for developing and debugging code. standalone javascript shells the following javascript shells are stand-alone environments, like perl or python. node.js - node.js is a platform for easily building fast, scalable network applications. jsdb - a standalone javascript shell, with compiled binaries for
windows, mac, and linux. javalikescript - a standalone, extensible javascript shell including both native and javascript libraries. gluescript - a standalone javascript shell for writing cross-platform javascript applications. it can use wxwidgets for gui apps and was formerly called wxjavascript. jspl - a standalone javascript shell enhanced by perl. can use perl modules directly from javascript: d...
CSS and JavaScript animation performance - Web Performance
ease enable fps tools first to see the current frame rate: in the url bar, enter about:config; click the i’ll be careful, i promise! button to enter the config screen. in the search bar, search for the layers.acceleration.draw-fps preference. double-click the entry to set the value to true. now you will be able to see three little purple boxes at the upper left corner of the firefox
window. the first box represents fps. running the performance test initially in the test seen below, a total of 1000 <div> elements are transformed by css animation. the animation can be switched to requestanimationframe() by clicking the toggle button. try running them both now, comparing the fps for each (the first purple box.) you should see that the performance of css animations and reque...
Progressive loading - Progressive web apps (PWAs)
on observer api — using this we can ensure that images will be loaded only when they appear in the viewport. intersection observer this is a progressive enhancement to the previously working example — intersection observer will load target images only when the user scrolls down, causing them to display in the viewport. ...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
ther when you want to provide engaging functionality in your app. push is used to deliver new content from the server to the app without any client-side intervention, and its operation is handled by the app's service worker. notifications can be used by the service worker to show new information to the user, or at least alert them when something has been updated. they work outside of the browser
window, just like service workers, so updates can be pushed and notifications can be shown when the app's page is out of focus or even closed. notifications let's start with notifications — they can work without push, but are very useful when combined with them. let’s look at them in isolation to begin with. request permission to show a notification, we have to request permission to do so first.
Mobile first - Progressive web apps (PWAs)
e: this currently doesn't work, and i'm not sure why. ongoing work required. matchmedia is also very useful in many other ways. imagine you wanted to include some kind of webgl chart in the desktop version of the site requiring a webgl library like three but didn't want it included in the mobile version? you could create a block to only load the library in the case of narrow screen devices: if(
window.matchmedia("(min-width: 481px)").matches) { require('three'); } we can, therefore, save the bandwidth for browsers that don't need it. modernizr css and js back to modernizr! the reason why it is so useful is that it provides a mechanism to selectively serve both css and javascript. modernizr stores the results of all its feature tests as classes on the html element. for example, the moderni...
Web API reference - Web technology reference
each individual interface across all apis is listed in the index. there's also a listing of all available events in the event reference. document object model the dom is an api that allows access to and modification of the current document. it allows manipulation of document node and element. ...
media - SVG: Scalable Vector Graphics
ia attribute specifies a media query that must be matched for a style sheet to apply. only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the
window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied. if not specified, the style sheet is applied unconditionally. specifications ...
xlink:show - SVG: Scalable Vector Graphics
is meant for xlink-aware processors. in case of a conflict, the target attribute has priority, since it can express a wider range of values. 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. this is similar to the effect achieved by an html <a> element with target set to _blank. replace this value specifies that the referenced resource is opened in the same
window or tab. this is similar to the effect achieved by an html <a> element with target set to _self. embed this value specifies that instead of linking to the resource it will be loaded and shown within the document.
Types of attacks - Web security
. for endpoints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>
window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request. post endpoints should not interchangeably accept get requ...
Tutorials
other. we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox. css reference complete reference to css, with details on support by firefox and other browsers. fluid grids design layouts that fluidly resize with the browser
window, while still using a typographic grid. css challenges flex your css skills, and see where you need more practice. advanced level using css transforms apply rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the changes take effect instantl...
Web Components
slots a guide showing how to define a reusable html structure using <template> and <slot> elements, and then use that structure inside your web components. reference custom elements customelementregistry contains functionality related to custom elements, most notably the customelementregistry.define() method used to register new custom elements so they can then be used in your document.
window.customelements returns a reference to the customelementregistry object. life cycle callbacks special callback functions defined inside the custom element's class definition, which affect its behavior: connectedcallback: invoked when the custom element is first connected to the document's dom. disconnectedcallback: invoked when the custom element is disconnected from the document's dom. ...
An Overview - XSLT: Extensible Stylesheet Language Transformations
children, which can be elements, comments, processing instructions and so on. some of those children may also have children. and this can continue for several levels. there are certain constraints on which type of nodes can occur where: for example, text nodes can have no children. the result of the processor's action is also a tree. netscape uses this tree to render the contents in the browser
window. xslt is a high-level declarative language. in essence, an xslt stylesheet is a set of rules, called templates, which declare that any node that matches this specific pattern should be manipulated in this specific way and end up in this specific position in the result tree. the particulars of how this is to be accomplished are left up to the processor. because the order of execution of the st...
WebAssembly Concepts - WebAssembly
to es2015 modules. webassembly key concepts there are several key concepts needed to understand how webassembly runs in the browser. all of these concepts are reflected 1:1 in the webassembly javascript api. module: represents a webassembly binary that has been compiled by the browser into executable machine code. a module is stateless and thus, like a blob, can be explicitly shared between
windows and workers (via postmessage()). a module declares imports and exports just like an es2015module. memory: a resizable arraybuffer that contains the linear array of bytes read and written by webassembly’s low-level memory access instructions. table: a resizable typed array of references (e.g. to functions) that could not otherwise be stored as raw bytes in memory (for safety and portability r...
Loading and running WebAssembly code - WebAssembly
containing both the compiled module object, and an instantiated instance of it. the object looks like this: { module : module // the newly compiled webassembly.module object, instance : instance // a new webassembly.instance of the module object } note: usually we only care about the instance, but it’s useful to have the module in case we want to cache it, share it with another worker or
window via postmessage(), or simply create more instances. note: the second overload form takes a webassembly.module object as an argument, and returns a promise directly containing the instance object as the result. see second overload example. running your webassembly code once you've got your webassembly instance available in your javascript, you can then start using features of it that have be...
Understanding WebAssembly text format - WebAssembly
running in separate web workers, in the same fashion as sharedarraybuffers in javascript. this allows very fast communication between workers, and significant performance gains in web applications. the threads proposal has two parts, shared memories and atomic memory accesses. shared memories as described above, you can create shared webassembly memory objects, which can be transferred between
window and worker contexts using postmessage(), in the same fashion as a sharedarraybuffer. over on the javascript api side, the webassembly.memory() constructor's initialization object now has a shared property, which when set to true will create a shared memory: let memory = new webassembly.memory({initial:10, maximum:100, shared:true}); the memory's buffer property will now return a sharedarraybu...
Using the WebAssembly JavaScript API - WebAssembly
e is confined to one specific — potentially very small — range contained by a webassembly memory object. this allows a single web app to use multiple independent libraries — each of which are using webassembly internally — to have separate memories that are fully isolated from each other. in addition, newer implementations can also create shared memories, which can be transferred between
window and worker contexts using postmessage(), and used in multiple places. in javascript, a memory instance can be thought of as a resizable arraybuffer (or sharedarraybuffer, in the case of shared memories) and, just as with arraybuffers, a single web app can create many independent memory objects. you can create one using the webassembly.memory() constructor, which takes as arguments an initial si...
onunload - XUL
« xul reference home onunload type: script code specifies a set of scripts to execute when the browser
window is closed by the user. this code is used by some programmers to annoyingly pop up alert boxes preventing the users from leaving the page. closing the
window calls this eventhandler on the pref
window. ...