Search completed in 1.11 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.
...And 14 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.
...And 174 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.
...And 125 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.
... implemented by: @mozilla.org/appshell/
window-mediator;1 as a service: var
windowmediator = components.classes["@mozilla.org/appshell/
window-mediator;1"] .getservice(components.interfaces.nsi
windowmediator); method overview void addlistener(in nsi
windowmediatorlistener alistener); boolean calculatezposition(in nsixul
window in
window, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
...And 103 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.
...And 70 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.
... to get this interface, use: var dom
windowutils =
window.
windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko 38.0 void disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax,...
...And 65 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.
...And 52 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.
...And 51 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.
...And 49 more matches
window - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] describes the structure of a top-level
window.
...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.
...And 46 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.
...And 39 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.
...And 38 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).
... note: starting in gecko 2.0, only the top level browser
window has an hwnd.
...And 38 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.
... you can open a preference
window using a
window's opendialog method as with other dialogs.
...And 35 more matches
Features of a Window - Archive of obsolete content
« previousnext » we've already seen some features of
windows.
... 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.
...And 31 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.
...And 29 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.
...And 29 more matches
Gecko info for Windows accessibility vendors
this faq explains how makers of
windows screen readers, voice dictation packages and magnification software can support gecko-based software.
...
windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use.
... embedded clients (support msaa) embedded clients use gecko only in the content
window, at the moment for html and generic xml only.
...And 27 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.
...
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().
...And 27 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.
...add-ons should be updated to use nsidom
window instead.
...And 26 more matches
Creating a Window - Archive of obsolete content
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.
...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.
...And 25 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.
...And 21 more matches
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.
... back 0.9.7, we hit a wall with the compose
window.
...And 21 more matches
WindowEventHandlers - Web APIs
the
windoweventhandlers mixin describes the event handlers common to several interfaces like
window, or htmlbodyelement and htmlframesetelement.
... 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.
...And 20 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.
... 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.
...And 19 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.
... it will be null for dom
windows not corresponding to browsers.
...And 19 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.
...And 18 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.
... if you're writing chrome code, you probably want
windowglobalparent.drawsnapshot from the parent process.
...And 17 more matches
NPWindow - Archive of obsolete content
syntax typedef struct _np
window { void*
window; /* platform specific handle */ uint32_t x; /* coordinates of top left corner */ uint32_t y; /* relative to a netscape page */ uint32_t width; /* maximum
window size */ uint32_t height; nprect cliprect; /* clipping rectangle coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ np
windowtype type; /*
window or drawable target */ } np
window; fields the data structure has the following fields:
window platform-specific handle to a native
window element in the netsc...
...ape
window hierarchy on
windows (hwnd) and unix (x
window id).
... mac os:
window is a pointer to an np_port.
...And 16 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
the setinterval() method, offered on the
window and worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
...this method is defined by the
windoworworkerglobalscope mixin.
... 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.
...And 16 more matches
WindowOrWorkerGlobalScope - Web APIs
the
windoworworkerglobalscope mixin describes several features common to the
window and workerglobalscope interfaces.
... 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.
...And 16 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
the settimeout() method of the
windoworworkerglobalscope mixin (and successor to
window.settimeout()) sets a timer which executes a function or specified piece of code once the timer expires.
... 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).
... 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.
...And 15 more matches
NPP_SetWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary tells the plug-in when a
window is created, moved, sized, or destroyed.
... syntax #include <npapi.h> nperror npp_set
window(npp instance, np
window *
window); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...
window pointer to the
window into which the instance draws.
...And 13 more matches
Debugging on Windows
this document explains how to debug mozilla-derived applications such as firefox, thunderbird, and seamonkey on
windows using the visual c++ ide.
... 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.
... here are some wildcards you can use (tested with vc 8): nscomptr.*\:\:.*=nostepinto (nsg|g)etter_*addrefs.*=nostepinto ns_convertutf.* ; might be too broad: (ns|promise)[^\:]*[ss]tring.* ...add common functions to this list should probably make a .reg file for easy importing obtaining stdout and other file handles running the following command in the command
window in visual studio returns the value of stdout, which can be used with various debugging methods (such as nsgenericelement::list) that take a file* param: debug.evaluatestatement {,,msvcr80d}(&__iob_func()[1]) (alternatively you can evaluate {,,msvcr80d}(&__iob_func()[1]) in the quickwatch
window) similarly, you can open a file on the disk using fopen: >debug.evaluatestatement {,,msvcr80d}fope...
...And 12 more matches
Windows - Archive of obsolete content
opening new browser
windows to open a new browser
window, you can simply use
window.open().
... however,
window.open() returns a
window object for content, not for the browser
window itself, so you should get the chrome
window first.
... the simplest way to do that is to use nsi
windowmediator.
...And 11 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.
...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.
...And 11 more matches
-moz-window-shadow - Archive of obsolete content
the -moz-
window-shadow css property specifies whether a
window will have a shadow.
... 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.
...And 10 more matches
Windows and menus in XULRunner - Archive of obsolete content
this time i want to add some of the things common to a desktop application user interface:
windows and dialogs menus and toolbars os common dialogs controls or widgets
windows each
window or dialog should be created in its own xul file.
...<
window> is the basic
windowing element in xul.
...although i have not seen it mentioned yet, i am assuming that you can only have one <
window> element per xul file.
...And 9 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.
...And 9 more matches
nsIWindowsRegKey
xpcom/ds/nsi
windowsregkey.idlscriptable this interface is designed to provide scriptable access to the
windows registry system.
...method overview void close(); void create(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsi
windowsregkey createchild(in astring relpath, in unsigned long mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); void open(in unsigned ...
...long rootkey, in astring relpath, in unsigned long mode); 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(in boolean recurse); void stopwatching(); void writebinaryvalue(in astring name, in acstring data); void writeint64value(in astring name, in unsigned long long data); void writeintvalue(in astring name, in unsigned long data); void writestringvalue(in astring name, in astring data); ...
...And 9 more matches
NPSetWindowCallbackStruct - Archive of obsolete content
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.
...x visual for the plug-in
window or drawable.
...And 8 more matches
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.
...And 8 more matches
Autodial for Windows NT - Archive of obsolete content
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.
...it is not present in early versions of
windows until internet explorer is installed.
...And 7 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.
... popup
window controls configuration using the preference for privacy & security > popup
windows, users can: allow all sites to open popup
windows except for sites which the user has explicity denied permission what popup
windows are suppressed?
...And 7 more matches
nsITaskbarWindowPreview
widget/public/nsitaskbar
windowpreview.idlscriptable this interface is used on microsoft
windows to represent the preview for a
window in the taskbar.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsitaskbarpreview last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) you can't directly instantiate this interface; instead, call nsiwintaskbar.gettaskbar
windowpreview() to get the taskbar preview for a specific
window.
...
window preview behavior by default,
windows implements much of the behavior for applications in a standard way.
...And 7 more matches
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.
... syntax let intviewportheight =
window.innerheight; value an integer value indicating the
window's layout viewport height in pixels.
...And 7 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.
...And 6 more matches
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.
...And 6 more matches
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.
...as of recently, this also works on chrome for
windows.
...And 6 more matches
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.
...And 6 more matches
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.
...And 6 more matches
Window.scrollY - Web APIs
the read-only scrolly property of the
window interface returns the number of pixels that the document is currently scrolled vertically.
... syntax var y =
window.scrolly value in practice, the returned value is a double-precision floating-point value indicating the number of pixels the document is currently scrolled vertically from the origin, where a positive value means the content is scrolled to upward.
... example // make sure and go down to the second page if (
window.scrolly) {
window.scroll(0, 0); // reset the scroll position to the top left of the document.
...And 6 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.
...And 6 more matches
WindowEventHandlers.onhashchange - Web APIs
the
windoweventhandlers.onhashchange property of the
windoweventhandlers mixin is the eventhandler for processing hashchange events.
... the hashchange event fires when a
window's hash changes (see
window.location and htmlhyperlinkelementutils.hash).
... syntax using an event handler:
window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event listener: to add an event listener, use addeventlistener():
window.addeventlistener("hashchange", funcref, false); parameters funcref a reference to a function.
...And 6 more matches
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.
...And 5 more matches
MSCandidateWindowShow - Web APIs
mscandidate
windowshow fires immediately after the input method editor (ime) candidate
window is set to appear, but before it renders.
... 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.
...And 5 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.
... 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).
... 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.
...And 5 more matches
Window.innerWidth - Web APIs
the read-only
window property innerwidth returns the interior width of the
window in pixels.
... 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.
...And 5 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.
...And 5 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.
... methods
windowclient inherits methods from its parent interface, client.
...
windowclient.focus() gives user input focus to the current client.
...And 5 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
this document presents the
windows registry keys plugin installers can parse to determine where to install a given plugin (for mozilla browsers) on
windows.
... since the prospect of embedded gecko browsers raises the scenario of more than one gecko-based browser that a netscape-style plugin can work with, it becomes important to let plugin developers know how to discover these browsers on a
windows machine.
...on
windows xp and
windows 2000, in order to write to the registry, sometimes the software may need administrator privileges.
...And 4 more matches
Windows stub installer - Archive of obsolete content
where does the
windows stub installer code reside?
... the
windows stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...
windows/setup/> how do we get setup to debug the
windows stub installer?
...(if you need to rebuild stub installer, got to /mozilla/xpinstall/wizard/
windows/setup and type "nmake /f makefile.win") go to mozilla/xpinstall/wizard/
windows/builder on the shell prompt type "perl build.pl".
...And 4 more matches
Main Windows
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.
... 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.
...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.
...And 4 more matches
Window.content - Web APIs
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.
...And 4 more matches
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.
...And 4 more matches
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.
... 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.
...And 4 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.
... syntax yoffset =
window.pageyoffset; value a floating-point number specifying the number of pixels the document is scrolled vertically within its containing
window.
...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.
...And 4 more matches
Window: popstate event - Web APIs
the popstate event of the
window interface is fired when the active history entry changes while the user navigates the session history.
... note: when writing functions that process popstate event it is important to take into account that properties like
window.location will already reflect the state change (if it affected the current url), but document might still not.
... 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.
...And 4 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.
... 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.
...And 4 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.
... 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.
...And 4 more matches
Window.scrollX - Web APIs
the read-only scrollx property of the
window interface returns the number of pixels that the document is currently scrolled horizontally.
... syntax var x =
window.scrollx; value in practice, the returned value is a double-precision floating-point value indicating the number of pixels the document is currently scrolled horizontally from the origin, where a positive value means the content is scrolled to the left.
...if it's greater than 400 pixels, the
window is scrolled back to the beginning.
...And 4 more matches
WindowEventHandlers.onbeforeunload - Web APIs
the onbeforeunload property of the
windoweventhandlers mixin is the eventhandler for processing beforeunload events.
... these events fire when a
window is about to unload its resources.
... syntax
window.addeventlistener("beforeunload", function(event) { ...
...And 4 more matches
WindowOrWorkerGlobalScope.atob() - Web APIs
the
windoworworkerglobalscope.atob() function decodes a string of data which has been encoded using base64 encoding.
... example const encodeddata =
window.btoa('hello, world'); // encode a string const decodeddata =
window.atob(encodeddata); // decode the string 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.atob()' in that specification.
...And 4 more matches
WindowOrWorkerGlobalScope.btoa() - Web APIs
the
windoworworkerglobalscope.btoa() method creates a base64-encoded ascii string from a binary string (i.e., a string object in which each character in the string is treated as a byte of binary data).
... 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.
... specifications specification status comment html living standardthe definition of '
windoworworkerglobalscope.btoa()' in that specification.
...And 4 more matches
-moz-window-dragging
the -moz-
window-dragging css property specifies whether a
window is draggable or not.
... 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.
...And 3 more matches
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.
...And 3 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.
...--> <script> function reg() {
window.captureevents(event.click);
window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level
window and document objects first before arriving at the object that initiated the event.
...And 3 more matches
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.
... framelist ===
window evaluates to true.
...And 3 more matches
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.
...possible values: true: the
window is in full screen mode.
...And 3 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.
... 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.
...And 3 more matches
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.
... 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.
...And 3 more matches
Window.matchMedia() - Web APIs
the
window interface's matchmedia() method returns a new mediaquerylist object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
... syntax mqlist =
window.matchmedia(mediaquerystring) parameters mediaquerystring a string specifying the media query to parse into a mediaquerylist.
...there's a good example of this in the article on
window.devicepixelratio.
...And 3 more matches
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.
...And 3 more matches
Window.ondragdrop - Web APIs
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.
...And 3 more matches
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).
...And 3 more matches
Window.outerWidth - Web APIs
window.outerwidth read-only property returns the width of the outside of the browser
window.
... it represents the width of the whole browser
window including sidebar (if expanded),
window chrome and
window resizing borders/handles.
... notes to change the size of a
window, see
window.resizeby() and
window.resizeto().
...And 3 more matches
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.
... <!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.
...And 3 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.
... 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.
...And 3 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.
... 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.
...And 3 more matches
Window.showModalDialog() - Web APIs
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.
... arguments is an optional variant containing values passed to the dialog; these are made available in the
window object's
window.dialogarguments property.
...And 3 more matches
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.
... <!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.
...And 3 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.
... <!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.
...And 3 more matches
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.
... syntax
window.addeventlistener("beforeprint", function(event) { ...
...And 3 more matches
WindowEventHandlers.onunload - Web APIs
the onunload property of the
windoweventhandlers mixin is the eventhandler for processing unload events.
... these events fire when the
window is unloading its content and resources.
... note: browsers equipped with pop-up blockers will ignore all
window.open() method calls in onunload event handler functions.
...And 3 more matches
WindowProxy - Web APIs
a
windowproxy object is a wrapper for a
window object.
... a
windowproxy object exists in every browsing context.
... all operations performed on a
windowproxy object will also be applied to the underlying
window object it currently wraps.
...And 3 more matches
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.
... logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram = getfolder("program"); var ftemp = getfolder("temporary"); //notes: // can't use a double backslash before subkey // -
windows already puts it in.
...And 2 more matches
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.
...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.
...And 2 more matches
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).
...And 2 more matches
:-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.
... 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.
...And 2 more matches
Window.importDialog() - Archive of obsolete content
summary because opening
windows on mobile isn't necessarily appropriate, the firefox mobile team designed the importdialog() method to replace
window.opendialog().
... instead of opening a new
window, it merges the specified xul dialog into the main
window.
... syntax newdialog = importdialog(aparent, asrc, aarguments) newdialog the opened
window aparent the dialog's parent; can be null.
...And 2 more matches
mozbrowseropenwindow
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.
... name a domstring representing the name of the new browser
window.
...And 2 more matches
Components.utils.evalInWindow
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.
...example suppose a page script defines a variable: // page-script.js var somelocalvariable = { name: "selection1", node: document.documentelement }; an add-on script or other privileged script can access the variable using evalin
window(): // add-on-script.js var result = components.utils.evalin
window("somelocalvariable", content
window); console.log(result); // {"name":"selection1","node":{}} the add-on code can modify the variable as well, of course: // add-on-script.js components.utils.evalin
window("somelocalvariable.newprop = 42", content
window); // page-script.js console.log(
window.somelocalvariable.newprop); // 42 but n...
...And 2 more matches
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.
...And 2 more matches
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.
...And 2 more matches
MSCandidateWindowHide - Web APIs
mscandidate
windowhide fires after the input method editor (ime) candidate
window closes and is fully hidden.
... 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.
...And 2 more matches
MSCandidateWindowUpdate - Web APIs
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.
... 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.
...And 2 more matches
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.
...And 2 more matches
SourceBuffer.appendWindowEnd - Web APIs
the append
windowend property of the sourcebuffer interface controls the timestamp for the end of the append
window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.
... the default value of append
windowend is positive infinity.
... syntax var myappend
windowend = sourcebuffer.append
windowend; sourcebuffer.append
windowend = 120.0; value a double, indicating the end time of the append
window, in seconds.
...And 2 more matches
SourceBuffer.appendWindowStart - Web APIs
the append
windowstart property of the sourcebuffer interface controls the timestamp for the start of the append
window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.
... the default value of append
windowstart is the presentation start time, which is the beginning time of the playable media.
... syntax var myappend
windowstart = sourcebuffer.append
windowstart; sourcebuffer.append
windowstart = 2.0; value a double, indicating the start time of the append
window, in seconds.
...And 2 more matches
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.
...And 2 more matches
Window.crypto - Web APIs
the read-only
window.crypto property returns the crypto object associated to the global object.
... although
window.crypto is available on all
windows, the returned crypto object only has one usable feature in insecure contexts: 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.
...And 2 more matches
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.
... dump() is also available to xpcom components implemented in javascript, even though
window is not the global object in components.
...And 2 more matches
Window.event - Web APIs
the read-only
window property event returns the event which is currently being handled by the site's code.
...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.
...And 2 more matches
Window.getComputedStyle() - Web APIs
the
window.getcomputedstyle() method returns an object containing the values of all css properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
... syntax var style =
window.getcomputedstyle(element [, pseudoelt]); element the element for which to get the computed style.
... 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.
...And 2 more matches
Window.onmozbeforepaint - Web APIs
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.
...And 2 more matches
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.
...And 2 more matches
Window: resize event - Web APIs
the resize event fires when the document view (
window) has been resized.
...however, resize events are only fired on the
window object (i.e.
...only handlers registered on the
window object will receive resize events.
...And 2 more matches
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.
... 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.
...And 2 more matches
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.
... 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.
...And 2 more matches
Window.scrollTo() - Web APIs
window.scrollto() scrolls to a particular set of coordinates in the document.
... syntax
window.scrollto(x-coord, y-coord)
window.scrollto(options) parameters x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.
... examples
window.scrollto(0, 1000); using options:
window.scrollto({ top: 100, left: 100, behavior: 'smooth' }); notes
window.scroll() is effectively the same as this method.
...And 2 more matches
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.
...And 2 more matches
:-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.
...And 2 more matches
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.
... example flongfilepath = getfolder(fprogram, "longfilename.file"); sshortfilepath = file.
windowsgetshortname(flongfilepath); if(sshortfilepath) { // do something } ...
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.
... values for
window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=
windowtype navigator:browser - looks like if
window has gbrowser it has this
window type devtools:scratchpad - scratchpad
windows navigator:view-source - the view source
windows ...
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.
How to get a process dump with Windows Task Manager
this article describes how to get a process dump with task manager on
windows.
... requirements
windows to get a process dump, you need to be using
windows vista or above.
... after the hang open
windows task manager (ctrl+shift+esc).
... see also how to get a stacktrace for a bug report [en-us] how to create a user-mode process dump file in
windows vista and in
windows 7 (msdn) ...
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"].
... 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]".
Window: beforeunload event - Web APIs
the beforeunload event is fired when the
window, the document and its resources are about to be unloaded.
... 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.
...
window.addeventlistener('beforeunload', (event) => { // cancel the event as stated by the standard.
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.
... 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 overuse any function that creates a dialog box (or modal
window).
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).
... by default, a
window's controller contains the code that supports the global
window commands.
... however, the added controllers must be explicitly removed when the
window is unloaded, as this is not done automatically.
Window.directories - Web APIs
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.find() - Web APIs
note: support for
window.find() might change in future versions of gecko.
... the
window.find() method finds a string in a
window.
... syntax
window.find(astring, acasesensitive, abackwards, awraparound, awholeword, asearchinframes, ashowdialog); astring the text string for which to search.
..." +
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 sit...
Window.forward() - Web APIs
moves the
window one document forward in history.
... 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.frameElement - Web APIs
the
window.frameelement property returns the element (such as <iframe> or <object>) in which the
window is embedded.
... 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.
Window.getAttention() - Web APIs
the
window.getattention() method attempts to get the user's attention.
... the mechanism for this happening depends on the specific operating system and
window manager.
... syntax
window.getattention(); notes on
windows, the taskbar button for the
window flashes, if this hasn't been disabled by the user.
... on linux, the behaviour varies from
window manager to
window manager - some flash the taskbar button, others focus the
window immediately.
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.
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.
Window.mozInnerScreenX - Web APIs
summary gets the x coordinate of the top-left corner of the
window's viewport, in screen coordinates.
...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.
Window.mozInnerScreenY - Web APIs
summary gets the y coordinate of the top-left corner of the
window's viewport, in screen coordinates.
...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.
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.
...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...
...usrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of '
window: navigator' in that specification.
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.
... 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.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.preventdefault(); // prevents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window.onpaint - Web APIs
window.onpaint is an event handler for the paint event on the
window.
... syntax
window.onpaint = funcref; funcref is a handler function.
... the paint event is raised when the
window is rendered.
... this event occurs after the load event for a
window, and reoccurs each time the
window needs to be re-rendered, such as when another
window obscures it and is then cleared away.
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.
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 ( ).
Window.requestAnimationFrame() - Web APIs
the
window.requestanimationframe() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint.
... syntax
window.requestanimationframe(callback); parameters callback the function to call when it's time to update your animation for the next repaint.
...you can pass this value to
window.cancelanimationframe() to cancel the refresh callback request.
... 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.
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).
... example this function resizes the
window so that it takes up one quarter of the available screen.
... 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.
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.
...see also
window.scrollmaxy.
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.
...see also
window.scrollmaxx and
window.scrollto.
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.
Window.sessionStorage - Web APIs
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.
... syntax mystorage =
window.sessionstorage; value a storage object which can be used to access the current origin's session storage space.
Window.speechSynthesis - Web APIs
the speechsynthesis read-only property of the
window object returns a speechsynthesis object, which is the entry point into using web speech api speech synthesis functionality.
... syntax var synth =
window.speechsynthesis; value a speechsynthesis object.
... examples in our basic speech synthesiser demo, we first grab a reference to the speechsynthesis controller using
window.speechsynthesis.
... var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if...
Window.stop() - Web APIs
the
window.stop() stops further resource loading in the current browsing context, equivalent to the stop button in the browser.
... because of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new
windows, and other still-loading objects.
... syntax
window.stop() example
window.stop(); specification specification status comment html living standardthe definition of '
window.stop()' in that specification.
... living standard html5the definition of '
window.stop' in that specification.
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.
... console.log(json.parse(
window.localstorage.getitem('samplelist'))); }; specifications specification status html living standardthe definition of 'storage' in that specification.
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.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "
window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.open
window) return clients.open
window('/'); })); }); specifications specification status comment service workersthe definition of 'focus()' in that specification.
WindowEventHandlers.onpopstate - Web APIs
the onpopstate property of the
windoweventhandlers mixin is the eventhandler for processing popstate events on the
window.
... a popstate event is dispatched to the
window each time the active history entry changes between two history entries for the same document.
... syntax
window.onpopstate = funcref; funcref is a handler function.
... examples for example, a page at http://example.com/example.html running the following code will generate alerts as indicated:
window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object assoc...
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
the cleartimeout() method of the
windoworworkerglobalscope mixin cancels a timeout previously established by calling settimeout().
... 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 standardthe definition of '
windoworworkerglobalscope.cleartimeout()' in that specification.
... living standard method moved to the
windoworworkerglobalscope mixin in the latest spec.
HostWindow - Archive of obsolete content
prism hosts web applications in a simple, minimal
window.
... the
window does have some ui components (as shown in the screenshot below).
...sidebar - section of
window area used to display ancillary web content, including web applications.
Static Analysis for Windows Code under Linux - Archive of obsolete content
this document will describe how to run mozilla static check for
windows code under linux platform by creating a cross-compiler with dehydra support for mingw.
... 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-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.
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.
... example filecdtool = getfolder("file:///", faod + "cdtool.dll"); err = file.
windowsregisterserver(filecdtool); ...
windowsShortcut - Archive of obsolete content
summary creates a
windows shortcut to the installed software.
... method of file object syntax int
windowsshortcut( folderobject atarget, folderobject ashortcutpath, string adescription, folderobject aworkingpath, string aparams, folderobject aicon, number aiconid); parameters the
windowsshortcut method has the following parameters: atarget a filespecobject representing the absolute path (including filename) to file that the shortcut will be created for.
... example see file.
windowsshortcut in the script examples chapter.
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.
...you may also wish to refer to the implementation of xulbrowser
window in browser/base/content/browser.js.
-moz-windows-accent-color-in-titlebar - Archive of obsolete content
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.
... media: media/visual accepts min/max prefixes: no example @media (-moz-
windows-accent-color-in-titlebar: 1) { h1 { color: -moz-win-accentcolortext; } body { background-color: -moz-win-accentcolor; } } ...
Profiling with the Gecko Profiler and Local Symbols on Windows
profiling local builds as of march 2018, profiling local builds on
windows should work out of the box, with full symbol information.
... 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.
browser.dom.window.dump.file
browser.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.
... type:string default value:none exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status: active; last updated 2012-03-18 introduction: 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.
... related browser.dom.
window.dump.enabled ...
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.
nsIDOMStorageWindow
dom/interfaces/storage/nsidomstorage
window.idlscriptable this interface provides access to a dom
window's client side storage objects.
... all dom
windows inherit from this interface.
... 1.0 66 introduced gecko 1.8.1 obsolete gecko 8.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 8.0 this interface has been merged into nsidom
window, and this interface has been removed.
nsIWindowsShellService
browser/components/shell/public/nsi
windowsshellservice.idlscriptable please add a summary to this article.
... constants valid starting keys for the
windows registry.
...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.
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.
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.
... syntax
window.back(); parameters none.
... 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.
window.cancelAnimationFrame() - Web APIs
the
window.cancelanimationframe() method cancels an animation frame request previously scheduled through a call to
window.requestanimationframe().
... syntax
window.cancelanimationframe(requestid); parameters requestid the id value returned by the call to
window.requestanimationframe() that requested the callback.
... examples var requestanimationframe =
window.requestanimationframe ||
window.mozrequestanimationframe ||
window.webkitrequestanimationframe ||
window.msrequestanimationframe; var cancelanimationframe =
window.cancelanimationframe ||
window.mozcancelanimationframe; var start =
window.mozanimationstarttime; // only supported in ff.
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.
... examples the most common example you'll see of this property being used is to get access to the customelementregistry.define() method to define and register a new custom element, e.g.: let customelementregistry =
window.customelements; customelementregistry.define('my-custom-element', mycustomelement); however, it is usually shortened to something like the following: customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
... specification specification status comment html living standardthe definition of '
window.customelements' in that specification.
Window.defaultStatus - Web APIs
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.
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.
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.
Window.getDefaultComputedStyle() - Web APIs
syntax var style =
window.getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for which to get the computed style.
...the object is of the same type as the object returned by
window.getcomputedstyle(), but only takes into account user-agent and user rules.
... example 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).
Window.isSecureContext - Web APIs
the
window.issecurecontext read-only property indicates whether a context is capable of using features that require secure contexts.
... syntax var issecure =
window.issecurecontext examples feature detection you can use feature detection to check whether they are in a secure context or not by using the issecurecontext boolean which is exposed on the global scope.
... if (
window.issecurecontext) { // page is a secure context so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...
Window.locationbar - Web APIs
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.
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.
... 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: ...
...
window.onmessage = (event) => { console.log(`received message: ${event.data}`); }; specifications specification status html living standard living standard ...
Window.mozPaintCount - Web APIs
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.
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.
... syntax
window.onappinstalled = function(event) { ...
... }; example
window.onappinstalled = function(ev) { console.log('the application was installed.'); }; ...
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).
... 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.
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).
... 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.
Window: pageshow event - Web APIs
the pageshow event is sent to a
window when the browser displays the
window's document due to navigation.
... this includes: initially loading the page navigating to the page from another page in the same
window or tab restoring a frozen page on mobile oses returning to the page using the browser's forward or back buttons during the initial page load, the pageshow event fires after the load event.
..."persisted" : "not persisted"; console.log('event:', event.type, '-', ispersisted); break; default: console.log('event:', event.type); break; } }; events.foreach(eventname =>
window.addeventlistener(eventname, eventlogger) ); html <p>open the console and watch the output as you navigate to and from this page.
Window.performance - Web APIs
the
window interface's performance property returns a performance object, which can be used to gather performance information about the current document.
... 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.
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.
...
window.requestfilesystem(type, size, successcallback[, errorcallback]); parameters type the type of storage to request.
... specify
window.temporary if it's acceptable for the browser to delete the files at its own discretion, such as if storage space runs low, or
window.persistent if you need the files to remain in place unless the user or the web site or app explicitly permit it.
Window.screen - Web APIs
the
window property screen returns a reference to the screen object associated with the
window.
... the screen object, implementing the screen interface, is a special object for inspecting properties of the screen on which the current
window is being rendered.
... syntax let screenobj =
window.screen; example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specifications specification status comment css object model (cssom) view modulethe definition of '
window.screen' in that specification.
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.
... 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.
Window.setCursor() - Web APIs
the
window.setcursor() method sets the cursor for the current
window.
... example function setbusycursor(enable) {
window.setcursor(enable ?
... this function is a part of chrome
window interface.
Window.sizeToContent() - Web APIs
the
window.sizetocontent() method sizes the
window according to its content.
... 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.
Window: unhandledrejection event - Web APIs
the unhandledrejection event is sent to the global scope of a script when a javascript promise that has no rejection handler is rejected; typically, this is the
window, but may also be a worker.
...
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 u...
...
window.addeventlistener('unhandledrejection', function (event) { // ...your code here to handle the unhandled rejection...
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.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "
window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.open
window) return clients.open
window('/'); })); }); specifications specification status comment service workersthe definition of '
windowclient: focused' in that specification.
WindowClient.navigate() - Web APIs
the navigate() method of the
windowclient interface loads a specified url into a controlled client page then returns a promise that resolves to the existing
windowclient.
... syntax
windowclient.navigate(url).then(function(
windowclient) { // do something with your
windowclient after navigation }); parameters url the location to navigate to.
... return value a promise that resolves to the existing
windowclient.
WindowClient.visibilityState - Web APIs
the visibilitystate read-only property of the
windowclient interface indicates the visibility of the current client.
... syntax var myvisstate =
windowclient.visibilitystate; value a domstring (see 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.
WindowEventHandlers.onafterprint - Web APIs
the onafterprint property of the
windoweventhandlers mixin is the eventhandler for processing afterprint events for the current
window.
... syntax
window.addeventlistener("afterprint", function(event) { ...
... });
window.onafterprint = function(event) { ...
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.
... example
window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specifications specification status comment html living standardthe definition of '
windoweventhandler.onlanguagechange' in that specification.
WindowEventHandlers.onmessage - Web APIs
the onmessage property of the
windoweventhandlers mixin is the eventhandler called whenever an object receives a message event.
... syntax
window.addeventlistener('message', function(event) { ...
... })
window.onmessage = function(event) { ...
WindowEventHandlers.onrejectionhandled - Web APIs
the onrejectionhandled property of the
windoweventhandlers mixin is the eventhandler for processing rejectionhandled events.
... 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.
WindowEventHandlers.onstorage - Web APIs
the onstorage property of the
windoweventhandlers mixin is an eventhandler for processing storage events.
... syntax
window.onstorage = functionref; value functionref is a function name or a function expression.
...
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.
WindowEventHandlers.onunhandledrejection - Web APIs
the onunhandledrejection property of the
windoweventhandlers mixin is the eventhandler for processing unhandledrejection events.
... syntax
window.onunhandledrejection = function; value function is an eventhandler or function to call when unhandledrejection events are received by the
window.
...
window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onunhandledrejection' in that specification.
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().
... 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.
WindowOrWorkerGlobalScope.fetch() - Web APIs
the fetch() method of the
windoworworkerglobalscope mixin starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.
...
windoworworkerglobalscope is implemented by both
window and workerglobalscope, which means that the fetch() method is available in pretty much any context in which you might want to fetch resources.
... living standard defined in a
windoworworkerglobalscope partial in the newest spec.
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.
... 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.
... recommendation defined in a
windoworworkerglobalscope partial in the newest spec.
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
the queuemicrotask() method, which is exposed on the
window or worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.
... queuemicrotask() is exposed on the
windoworworkerglobalscope mixin.
... 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.
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.
... var xpisrc = "misc.exe"; var vi = "1.1.1.1"; initinstall( "
windows shortcut", "test", vi, 0); f = getfolder("
windows"); g = getfolder("temporary"); addfile( "miscshortcut", "2.2.2.2", xpisrc, f, xpisrc, true); target = getfolder(f, xpisrc); shortcutpath = getfolder("program"); err = file.
windowsshortcut( target, shortcutpath, "misc shortcut", g, "", target, 0); logcomment("file.
windowsshortcut returns: " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
-moz-windows-theme - Archive of obsolete content
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.
Window: devicelight event - Archive of obsolete content
bubbles no cancelable no interface sensorcallback target defaultview (
window) other properties property type description value read only double (float) the sensor data for ambient light in lux.
... 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.
Multiprocess on Windows
as you should already know from the prerequisite reading, single threaded apartments receive remote procedure calls (rpcs) from com, via the
windows message queue.
...the
windows message queue carries a lot of baggage for the purposes of maintaining backward compatibility.
nsIMsgWindowCommands
mailnews/base/public/nsimsg
window.idlscriptable this interface defines methods used by the back end to update the user interface in a mail or news message list.
...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.
Access Thunderbird Window Areas
to access particular parts of the thunderbird
window you can use these helper methods.
... var foldertree = getfoldertree(); var searchinput = getsearchinput(); var messagepane = getmessagepane(); var messagepaneframe = getmessagepaneframe(); var mailtoolbox = getmailtoolbox(); var currentmsgfolder = getloadedmsgfolder(); see the msgmail3pane
window.js for other helper methods ...
Window: DOMContentLoaded event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... examples basic usage
window.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); specifications specification status html living standard living standard ...
Window: animationcancel event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
...
window.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener():
window.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.
Window: animationend event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window: animationiteration event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window: animationstart event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window.applicationCache - Web APIs
returns a reference to the application cache object for the
window.
... syntax cache =
window.applicationcache parameters cache is an object reference to an offlineresourcelist.
window.cancelIdleCallback() - Web APIs
summary the
window.cancelidlecallback() method cancels a callback previously scheduled with
window.requestidlecallback().
... syntax
window.cancelidlecallback(handle); parameters handle the id value returned by
window.requestidlecallback() when the callback was established.
Window.clearImmediate() - Web APIs
this method clears the action specified by
window.setimmediate.
... syntax
window.clearimmediate( immediateid ) where immediateid is a id returned by
window.setimmediate.
Window.convertPointFromNodeToPage() - Web APIs
given a point specified in a particular dom node's coordinate system, the
window method convertpointfromnodetopage() returns a point which specifies the same position in the page's coordinate system.
... syntax point =
window.convertpointfromnodetopage(node, nodepoint); parameters node the node in whose coordinate system the point specified by nodepoint is described.
Window.convertPointFromPageToNode - Web APIs
given a point specified in the page's coordinate system, the
window method convertpointfrompagetonode() returns a point object specifying the same location in the coordinate system of the specified dom node.
... syntax point =
window.convertpointfrompagetonode(node, pagepoint); parameters node the node into whose coordinate system the point is to be converted.
Window: copy event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... examples
window.addeventlistener('copy', (event) => { console.log('copy action initiated') }); specifications specification status clipboard api and events working draft ...
Window: cut event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... examples
window.addeventlistener('cut', (event) => { console.log('cut action initiated') }); specifications specification status clipboard api and events working draft ...
Window: devicemotion event - Web APIs
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.
Window.dialogArguments - Web APIs
the dialogarguments property returns the parameters that were passed into the
window.showmodaldialog() method.
... syntax value =
window.dialogarguments; ...
Window: error event - Web APIs
the error event is fired on a
window object when a resource failed to load or couldn't be used — for example if a script has an execution error.
...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.home() - Web APIs
the
window.home() method returns the
window to the home page.
... syntax
window.home(); example function gohome() {
window.home(); } specification dom level 0.
Window: load event - Web APIs
bubbles no cancelable no interface event event handler property onload examples log a message when the page is fully loaded:
window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property:
window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event...
...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.
... bubbles no cancelable no interface messageevent event handler property onmessageerror examples listen for messageerror using addeventlistener():
window.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessageerror event handler property:
window.onmessageerror = (event) => { console.error(event); }; specifications specification status html living standard living standard ...
Window.minimize() - Web APIs
the
window.minimize() method sets the
window to a minimized state.
... a way to undo this method programatically is by calling
window.moveto().
Window.mozAnimationStartTime - Web APIs
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.
... 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: 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.
Window.ondevicemotion - Web APIs
an event handler for the devicemotion events sent to the
window.
... syntax
window.ondevicemotion = funcref; where funcref is a reference to a function.
Window.ondeviceproximity - Web APIs
the ondeviceproximity property of the
window interface specifies an eventhandler to receive deviceproximity events.
... syntax
window.onuserproximity = funcref where funcref is a function to be called when the deviceproximity event occurs.
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.
... 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.
Window.onuserproximity - Web APIs
the
window.onuserproxymity property represents an eventhandler, that is a function to be called when the userproximity event occurs.
... syntax
window.onuserproximity = eventhandler ...
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.
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.
...
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 specifi...
Window: paste event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... examples
window.addeventlistener('paste', (event) => { console.log('paste action initiated') }); specifications specification status clipboard api and events working draft ...
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.
... 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.
window.requestIdleCallback() - Web APIs
the
window.requestidlecallback() method queues a function to be called during a browser's idle periods.
... 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.
Window.scrollByLines() - Web APIs
the
window.scrollbylines() method scrolls the document by the specified number of lines.
... syntax
window.scrollbylines(lines) parameters lines is the number of lines to scroll the document by.
Window: transitioncancel event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window: transitionend event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window: transitionrun event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window: transitionstart event - Web APIs
you can listen for this event on the
window interface to handle it in the capture or bubbling phases.
... 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.
Window: unload event - Web APIs
bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (
window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
... examples <!doctype html> <html> <head> <title>parent frame</title> <script>
window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); });
window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doctype html> <html> <head> <title>child frame</title> <script>
window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); });
window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> �...
Window.updateCommands() - Web APIs
summary updates the state of commands of the current chrome
window (ui).
... syntax
window.updatecommands("scommandname") parameters scommandname is a particular string which describes what kind of update event this is (e.g.
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.
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.
... syntax
window.onmessageerror = function() { ...
WindowOrWorkerGlobalScope.caches - Web APIs
the caches read-only property of the
windoworworkerglobalscope interface returns the cachestorage object associated with the current context.
... working draft defined in a
windoworworkerglobalscope partial in the newest spec.
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).
... specifications specification status comment secure contextsthe definition of '
windoworworkerglobalscope.issecurecontext' in that specification.
WindowOrWorkerGlobalScope.origin - Web APIs
the origin read-only property of the
windoworworkerglobalscope interface returns the origin of the global scope, serialized as a string.
... specifications specification status comment html living standardthe definition of '
windoworworkerglobalscope.origin' in that specification.
Window: deviceproximity event - Archive of obsolete content
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).
Window: userproximity event - Archive of obsolete content
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).
Post data to window - Archive of obsolete content
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); ...
Window icons - Archive of obsolete content
starting with firefox 1.5, thunderbird 1.5, and xulrunner 1.8, you can specify an icon for a xul
window by putting files named my
window.ico (for
windows) and my
window.xpm or my
window16.xpm (linux), where my
window is the id of the <
window> you want to attach the icon to, in the chrome/icons/default subfolder of your bundle.
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.
Window: afterprint event - Web APIs
bubbles no cancelable no interface event event handler property onafterprint examples using addeventlistener():
window.addeventlistener('afterprint', (event) => { console.log('after print'); }); using the onafterprint event handler property:
window.onafterprint = (event) => { console.log('after print'); }; specifications specification status html living standard living standard ...
Window: appinstalled event - Web APIs
bubbles no cancelable no interface event event handler onappinstalled examples you can use the appinstalled event in an addeventlistener method:
window.addeventlistener('appinstalled', function() { console.log('thank you for installing our app!'); }); or use the onappinstalled event handler property:
window.onappinstalled = function() { console.log('thank you for installing our app!'); }; ...
Window: beforeprint event - Web APIs
bubbles no cancelable no interface event event handler property onbeforeprint examples using addeventlistener():
window.addeventlistener('beforeprint', (event) => { console.log('before print'); }); using the onbeforeprint event handler property:
window.onbeforeprint = (event) => { console.log('before print'); }; specifications specification status html living standard living standard ...
Window: blur event - Web APIs
click outside the document to lose focus.'; } const log = document.getelementbyid('log');
window.addeventlistener('blur', pause);
window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
Window: clipboardchange event - Web APIs
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.
Window.console - Web APIs
the
window.console property returns a reference to the console object, which provides methods for logging information to the browser's console.
Window: deviceorientation event - Web APIs
bubbles no cancelable no interface deviceorientationevent event handler property
window.ondeviceorientation examples if (
window.deviceorientationevent) {
window.addeventlistener("deviceorientation", function(event) { // alpha: rotation around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front back motion var fronttoback = event.beta; handleorientationevent(...
Window.external - Web APIs
the external property of the
window api returns an instance of the external interface, which was intended to contain functions related to adding external search providers to the browser.
Window: focus event - Web APIs
click outside the document to lose focus.'; } const log = document.getelementbyid('log');
window.addeventlistener('blur', pause);
window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
Window: gamepadconnected event - Web APIs
bubbles no cancelable no interface gamepadevent event handler property ongamepadconnected examples
window.addeventlistener('gamepadconnected', event => { // all buttons and axes values can be accessed through event.gamepad; }); specifications specification status gamepad working draft ...
Window: gamepaddisconnected event - Web APIs
bubbles no cancelable no interface gamepadevent event handler property ongamepaddisconnected examples
window.addeventlistener('gamepaddisconnected', event => { console.log('lost connection with the gamepad.'); }); specifications specification status gamepad working draft ...
Window: hashchange event - Web APIs
bubbles yes cancelable no interface hashchangeevent event handler onhashchange examples you can use the hashchange event in an addeventlistener method:
window.addeventlistener('hashchange', function() { console.log('the hash has changed!') }, false); or use the onhashchange event handler property: function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } }
window.onhashchange = locationhashchanged; specifications specification status comment html living standardthe definition of 'hashch...
Window.history - Web APIs
the
window.history read-only property returns a reference to the history object, which provides an interface for manipulating the browser session history (pages visited in the tab or frame that the current page is loaded in).
Window: languagechange event - Web APIs
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.
Window.localStorage - Web APIs
syntax mystorage =
window.localstorage; value a storage object which can be used to access the current origin's local storage space.
Window.orientation - Web APIs
specifications specification status comment compatibility standardthe definition of '
window.orientation' in that specification.
Window: orientationchange event - Web APIs
bubbles no cancelable no interface event event handler onorientationchange example you can use the orientationchange event in an addeventlistener method:
window.addeventlistener("orientationchange", function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }); or use the onorientationchange event handler property:
window.onorientationchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }; specifications specification status compatibility standardthe definition of 'orientationchange' in that specificat...
Window.pkcs11 - Web APIs
syntax objref =
window.pkcs11 example
window.pkcs11.addmodule(smod, secpath, 0, 0); notes see nsidompkcs11 for more information about how to manipulate pkcs11 objects.
Window.print() - Web APIs
syntax
window.print() specification specification status comment html living standardthe definition of 'print()' in that specification.
Window.restore() - Web APIs
this method is currently not working, but you can use:
window.moveto(
window.screenx,
window.screeny); browser compatibility the compatibility table in this page is generated from structured data.
Window.routeEvent() - Web APIs
the
window method routeevent(), which is obsolete and no longer available, used to be called to forward an event to the next object that has asked to capture events.
Window.setImmediate() - Web APIs
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.
Index - Web APIs
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.
... 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.
... 277 beforeunloadevent api, reference the beforeunload event is fired when the
window, the document and its resources are about to be unloaded.
...And 303 more matches
Index - Archive of obsolete content
2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : htaccess files can be opened using any text editor, like
windows notepad, vin, sublime text editor or any other.
... 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!
...And 132 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.
...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.
...And 110 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.
... method overview void deletetabvalue(in nsidomnode atab, in astring akey); void delete
windowvalue(in nsidom
window a
window, in astring akey); nsidomnode duplicatetab(in nsidom
window a
window, in nsidomnode atab); nsidomnode forgetclosedtab(in nsidom
window a
window, in unsigned long aindex); nsidomnode forgetclosed
window(in unsigned long aindex); astring getbrowserstate(); unsigned long getclosedtabcount(in nsidom
window a
window); astri...
...And 60 more matches
Index
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.
...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.
... 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.
...And 56 more matches
nsIAppShellService
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 aappshell); nsiwebnav create
windowlessbrowser (in bool aischrome) void destroyhidden
window(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1
window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void enterlast
windowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlast
windowclosingsurvivalarea(); obsolete since gecko 1.8 void gethidden
windowandjscontext(out nsid...
...om
window ahiddendom
window, out jscontext ajscontext); native code only!
...And 56 more matches
ARIA Test Cases - Accessibility
tested ua/at combinations: dragon 10 with firefox 3 and ie 8 beta 2 jaws 9 & 10 with firefox 3 jaws 9 & 10 with ie beta 2 nvda 0.6p2 with firefox 3 orca with firefox 3
window-eyes 7 with ie 8 beta 2 and firefox 3 voiceover (leopard) with safari 4.0.2 zoom (leopard) with safari 4.0.2, firefox 3.x and opera 9.x zoomtext 9.1 with firefox 3 and ie 8 beta 2 test case structure test cases are organized as follows: test case links test details expected at behavior markup notes results table at firefox ie opera saf...
...fail - - voiceover (leopard) n/a n/a - fail
window-eyes - - - - nvda - - - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - table legend - no info/test yet n/a not applicable (not supported technically) pass expected behaviour met fail expected behaviour notmet 1.
... markup used: role="alert" notes: results: at firefox ie opera safari jaws 9 passed fail n/a n/a jaws 10 passed fail - - voiceover (leopard) n/a n/a - fail
window-eyes passed- not announced as "alert" fail - - nvda passed n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - ffd - an interesting thing to note is that, when focus moves to an alert, jaws loses its place on the page, so that, when the alert disappears, jaws virtual cursor...
...And 52 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
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.
... msaa is the microsoft active accessibility (msaa) api, used on
windows operating systems to support assistive technologies for users with disabilities.
... on microsoft
windows, these kinds of assistive technology acquire this necessary information via a combination of hacks, msaa and proprietary doms.
...And 52 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
true browser.dom.
window.dump.enabled (not present in firefox 3.5+) enables use of the dump method for debugging.
... 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.
...for example, in the firefox browser
window, everything other than the web page being displayed in the content area is chrome.
...And 51 more matches
Tabbed browser - Archive of obsolete content
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.
...furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser element" in a firefox xul
window.
...And 44 more matches
Index - Archive of obsolete content
296 pref
window.onload no summary!
... 297 pref
window.type 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.
...And 44 more matches
CustomizableUI.jsm
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.
...And 38 more matches
BluetoothCharacteristicProperties - Web APIs
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).
... 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
BluetoothRemoteGATTDescriptor - Web APIs
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).
... 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
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
similar approaches are found in xaml, which is used in
windows vista, and flex, which is used in adobe flash.
...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.
...And 32 more matches
Observer Notifications
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.
...And 32 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!
... nsidomelement getfocusedelementfor
window(in nsidom
window a
window, in prbool adeep, out nsidom
window afocused
window); pruint32 getlastfocusmethod(in nsidom
window window); void movecarettofocus(in nsidom
window a
window); void elementisfocusable(in nsidomelement aelement, in unsigned long aflags); nsidomelement movefocus(in nsidom
window a
window, in nsidomelement astartelement, in unsigned long atype, in unsigned long aflags); void setfocus(in nsidomelement aelement, in unsigned long aflags); void
windowhidden(in nsidom
window a
window); native code only!
... void
windowlowered(in nsidom
window a
window); native code only!
...And 32 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
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.
...choosing mozilla products allow us to use the same apps while running either
windows or linux systems (i suspect mac osx would be fine too).
...And 29 more matches
Key Values - Web APIs
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.
... keyboardevent.key value description virtual keycode
windows mac linux android "alt" [5] the alt (alternative) key.
...this is the
windows logo key, or the command or ⌘ key on mac keyboards.
...And 29 more matches
Privileged features - Web APIs
this page lists the
windowfeatures parameter of
window.open function that requires chrome-privilege in firefox.
... 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.
...And 29 more matches
ui/button/toggle - Archive of obsolete content
like action buttons, you can control their state on a per-
window or per-tab basis as well as globally.
...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.
... depending on your application, you might want a button to have different state in different browser
windows or different tabs.
...And 28 more matches
Handling Preferences - Archive of obsolete content
to open the preferences
window in firefox, select the following from the main menu: on
windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms.
...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.
...And 28 more matches
JavaScript Object Management - Archive of obsolete content
we need the namespace to be a global object that it can be used everywhere in the
window chrome.
... you usually need only one js file to control a xul
window, since the code required is normally not that much.
...you can include as many scripts in a xul
window as you need.
...And 27 more matches
Extending a Protocol
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!
...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!).
...And 27 more matches
Mozilla DOM Hacking Guide
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 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.
...And 27 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.
... 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().
...And 26 more matches
The Essentials of an Extension - Archive of obsolete content
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.
...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.
...And 24 more matches
Introduction to XUL - Archive of obsolete content
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.
...
window chrome is displayed and managed by the same layout engine that manages html content in the browser.
...And 24 more matches
nsIPromptService
embedding/components/
windowwatcher/public/nsipromptservice.idlscriptable this interface can be used to display simple dialogs.
... its methods should be used in privileged code instead of dom
window.alert,
window.confirm, and other similar functions.
...to get an instance, use: var promptservice = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); method overview void alert(in nsidom
window aparent, in wstring adialogtitle, in wstring atext); void alertcheck(in nsidom
window aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); boolean confirm(in nsidom
window aparent, in wstring adialogtitle, in wstring atext); boolean confirmcheck(in nsidom
window aparent, in wstring adialogtitle, in wstring atext, in wstring ...
...And 24 more matches
Plug-in Basics - Plugins
with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser
window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
... 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.
...when the user leaves the page or closes the
window, the plug-in instance is deleted.
...And 23 more matches
Common causes of memory leaks in extensions - Extensions
all zombie compartments in extensions are caused by a failure to release resources appropriately in certain circumstances, such as when a
window is closed, a page unloads, or an extension is disabled or removed.
... storing references to
window objects and dom nodes the most common problem is extensions holding onto references to content
windows for too long.
... for example, in xul overlay code: var content
windows = []; function inbrowserxuloverlay(content
window) { // forgetting or failing to pop the content
window thing again content
windows.push(content
window); } this will keep the content
window compartments alive until the browser
window is closed.
...And 22 more matches
Command line options
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.
... -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.
...And 22 more matches
tabs/utils - Archive of obsolete content
globals functions activatetab(tab,
window) set the specified tab as the active, or selected, tab.
...
window :
window a browser
window.
... gettabbrowser(
window) get the tabbrowser element for the given browser
window.
...And 21 more matches
Theme changes in Firefox 2 - Archive of obsolete content
search/enginemanager.xul enginemanager.css new file containing the ui for the search engine manager
window.
... browser/feeds/addfeedreader.css new file; css used for the
window to add a new feed reader.
... browser/feeds/subscribe.css new file; css used for the
window to subscribe to a news feed.
...And 21 more matches
Split object
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.
...And 21 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.
...And 20 more matches
nsIAppStartup
to use the service: var appstartup = components.classes["@mozilla.org/toolkit/app-startup;1"] .getservice(components.interfaces.nsiappstartup); method overview void createhidden
window(); boolean createstartupstate(in long a
windowwidth, in long a
windowheight); obsolete since gecko 1.9.1 void destroyhidden
window(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.9.1 void ensure1
window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void enterlast
windowclosi...
...ngsurvivalarea(); void exitlast
windowclosingsurvivalarea(); void getstartupinfo(); void hidesplashscreen(); obsolete since gecko 1.9.1 void initialize(in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.9.1 void quit(in pruint32 amode); void restartinsafemode(in pruint32 aquitmode); void run(); attributes attribute type description interrupted boolean true if the startup process was interrupted by an interactive prompt.
... constant value description econsiderquit 0x01 attempt to quit if all
windows are closed.
...And 20 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).
...And 20 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...
...:((
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(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=true; break;}}return{name:b,version:a};};browser.detect();browser.request=function(){return $try(function(){return new xmlhttprequest();},function(){return new activexobject("msxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};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.uid=native.uid++);};var wi...
...And 19 more matches
Overview of Mozilla embedding APIs
each webbrowser instance represents the "client-area" of a typical browser
window.
...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.
...conceptually, for each document being rendered, gecko creates a container called a dom
window.
...And 19 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.
... chrome_
window_borders 2 value for the chromeflags attribute.
...And 19 more matches
IME handling guide
this is a technical term from
windows but these days, this is used on other platforms as well.
...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.
...And 18 more matches
nsIMsgMessageService
inherits from: nsisupports 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 aurllist...
...ener, 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 nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsg
window amsg
window); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsg
window amsg
window); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsg
window amsg
window, in nsiurllistener aurllistener, out nsiuri aurl); void search(in nsimsgsearchsession asearchsess...
...ion, in nsimsg
window amsg
window, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsg
window amsg
window, in nsiurllistener aurllistener, in boolean aconvertdata, in string aadditionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsiurllistener aurllistener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied.
...And 18 more matches
ui/button/action - Archive of obsolete content
by default, the button has global state: that is, its properties are the same across all open
windows and tabs, and updating them updates the button's state across all open
windows and tabs.
... 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.
...And 17 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
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.
...myplugininstaller.xpi), and can be created on
windows by utilities such as winzip.
...on
windows, these are dlls, on unix these are *.so files).
...And 17 more matches
XPCOM Examples - Archive of obsolete content
window management this example contains rdf datasource that will be seen in the later section.
... creating a
window menu the list of currently open mozilla
windows can be used as an rdf datasource.
... this allows you to create a
window menu with a list of the currently open
windows in the application.
...And 17 more matches
Eclipse CDT
to update the index manually, use the context menu in the project explorer tab on the left side of the
window.
...you can change the key bindings by opening the workspace preferences (eclipse > preferences, or
window > preferences) and selecting "general > keys".
... 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".
...And 17 more matches
Gecko Roles
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.
...And 17 more matches
nsIAccessibleRole
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.
...And 17 more matches
nsIWebProgressListener
note: for document requests, a second state_stop is generated (see the description of state_is_
window for more details).
...the document corresponding to a document request is available via the dom
window attribute of onstatechange()'s awebprogress parameter.
... unlike state_is_
window, this flag is only set when activity within the nsiwebprogress instance being observed starts or stops.
...And 17 more matches
Standard OS Libraries
the alternative to standard libraries is creating your own dll (for
windows) or so (for linux) file with c functions that can be called from your add-on with js-ctypes.
...
windows
windows has many standard os libraries.
... the most common, found on all
windows os version, is "winapi".
...And 17 more matches
HTMLBodyElement - Web APIs
th="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from
windoweventhandlers.
... 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.
...And 17 more matches
ui/sidebar - Archive of obsolete content
a sidebar is a vertical strip of user interface real estate for your add-on that's attached to the left-hand side of the browser
window.
...if a new
window is opened from a
window that has a sidebar visible, the new
window gets a sidebar, too.
... called with no arguments, show() and hide() will operate on the currently active
window.
...And 16 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
XUL Events - Archive of obsolete content
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>.
... 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.
...And 16 more matches
Document Object Model - Archive of obsolete content
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 a browser context, the
window is the global object, and the same is also true for xul.
...And 16 more matches
Obsolete Build Caveats and Tips
obsolete caveats and tips from simple_firefox_build install a version of visual studio that supports c++ development: vs 2012 for
windows desktop pro or express (free), or vc++ 2010 pro or express (free), or vc++ 2008 pro or express with sp1 (free) (warning !
... 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.
... from
windows_sdk_versions visual c++ 9 (vs2008) professional/express download and install the
windows 7 sdk.
...And 16 more matches
Performance best practices for Firefox front-end engineers
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.
... 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.
... historically, there hasn't been an easy way of doing this - however, bug 1434376 has recently landed some chromeonly helpers to the
window binding to make this simpler.
...And 16 more matches
nsIMsgFolder
inherits from: nsisupports method overview void startfolderloading(); void endfolderloading(); void updatefolder(in nsimsg
window a
window); nsimsgfilterlist getfilterlist(in nsimsg
window msg
window); void setfilterlist(in nsimsgfilterlist filterlist); void forcedbclosed(); void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsg
window msg
window); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsg
window msg
window); v...
...oid recursivedelete(in boolean deletestorage, in nsimsg
window msg
window); void createsubfolder(in astring foldername, in nsimsg
window msg
window); nsimsgfolder addsubfolder(in astring foldername); void createstorageifmissing(in nsiurllistener urllistener); void compact(in nsiurllistener alistener, in nsimsg
window amsg
window); void compactall(in nsiurllistener alistener, innsimsg
window amsg
window,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflinestores(in nsimsg
window amsg
window,in nsisupportsarray aofflinefolderarray); void emptytrash(in nsimsg
window amsg
window, in nsiurllistener alistener); void rename(in astring name, in nsimsg
window msg
window); ...
... void renamesubfolders( in nsimsg
window msg
window, in nsimsgfolder oldfolder); astring generateuniquesubfoldername(in astring prefix,in nsimsgfolder otherfolder); void updatesummarytotals(in boolean force); void summarychanged(); long getnumunread(in boolean deep); long gettotalmessages(in boolean deep); void clearnewmessages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsigned long flag); void setprefflag(); nsimsgfolder getfolderswithflag(in unsigned long flags, in unsigned long resultsize, out unsig...
...And 16 more matches
Index
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.
... back 0.9.7, we hit a wall with the compose
window.
...And 16 more matches
HTMLFrameSetElement - Web APIs
properties inherits properties from its parent, htmlelement and from
windoweventhandlers.
... 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.
...And 16 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> </head> </html> the content script can see this object if it uses unsafe
window.foo instead of
window.foo: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscript: "console.log(unsafe
window.foo);" }) tabs.open(pageurl); be careful using unsafe
window: you can't rely on any of its properties or functions being, or doing, what you expect.
...And 15 more matches
WebIDL bindings
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.
... see this sample patch that migrates
window.performance.* to webidl bindings.
...for the non-worker case, the global is typically the inner
window for the dom
window the constructor function is attached to.
...And 15 more matches
All keyboard shortcuts - Firefox Developer Tools
opening and closing tools these shortcuts work in the main browser
window to open the specified tool.
...for tools like the browser console that open in a new
window, you have to close the
window to close the tool.
... command
windows macos linux open toolbox (with the most recent tool activated) ctrl + shift + i cmd + opt + i ctrl + shift + i bring toolbox to foreground (if the toolbox is in a separate
window and not in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate
window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * sh...
...And 15 more matches
Event reference
beforeunload the
window, the document and its resources are about to be unloaded.
... svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive
window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor events compassneedscalibration d...
...evicemotion 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 pointerent...
...And 15 more matches
widget - Archive of obsolete content
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.
... "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the
window.onload event fires this property is optional and defaults to "end".
...And 14 more matches
Using Spacers - Archive of obsolete content
applications that need to support multiple platforms and languages usually have their
windows laid out with lots of space to allow for this.
...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.
...And 14 more matches
Using the Editor from XUL - Archive of obsolete content
editor creation so let's trace through the process of editor creation when bringing up the composer
window.
... something, somewhere, tells mozilla to open the composer
window.
...in editor.xul, the <
window> tag has an onload handler: onload="editoronload()".
...And 14 more matches
Getting started with XULRunner - Archive of obsolete content
the xulrunner download for
windows is a zip file, not a true install.
...i am assuming that it doesn’t need to hook into my
windows system and that’s a good thing.
... step 2: install xulrunner on
windows, unzip the archive someplace reasonable.
...And 14 more matches
Anatomy of a video game - Game development
on the web,
window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops.
...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.
...calling the next requestanimationframe early ensures the browser receives it on time to plan accordingly even if your current frame misses its vsync
window.
...And 14 more matches
Strategies for carrying out testing - Learn web development
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.
... 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.
...if you are creating some kind of company intranet for delivering sales figures to managers, and all the managers have been provided with
windows phones for example, you will probably want to make mobile ie support a priority.
...And 14 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.
...obtain the bottommost nsidom
window, and its same-type parent if it exists, from the channel's notification callbacks.
...And 14 more matches
URLs - Plugins
nethelp displays a nethelp topic in a nethelp
window.
... 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.
... the target parameter represents the destination where the url will be displayed, a
window or frame.
...And 14 more matches
Viewport concepts - CSS: Cascading Style Sheets
in web browser terms, it is generally the same as the browser
window, excluding the ui, menu bar, etc.
... on larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser
window.
... 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.
...And 14 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
well, xul overlays and
windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own.
... step 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 available in the global for a
window, but in jsm you'll need to fetch it from an interface: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.re...
...And 13 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
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...
... 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.
...And 13 more matches
Element Positioning - Archive of obsolete content
width and height attributes you may need to have more control over the size of an element in a
window.
...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.
... 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.
...And 13 more matches
Popup Menus - Archive of obsolete content
plain popups the plain popup is a popup
window which appears when the user presses the left mouse button on an element.
...a good example is the drop down menu that appears when you click on the little down arrows next to the back and forward buttons in a browser
window.
... context popups the context popup is a popup
window which appears when the user presses the context menu button, which is usually the right mouse button.
...And 13 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.
... syntax microsoft
windows typedef struct _npevent { uint16 event; uint32 wparam; uint32 lparam; } npevent; mac os typedef eventrecord npevent; type eventrecord = record { what: integer; message: longint; when: longint; where: point; modifiers: integer; end; x
windows typedef xevent npevent; fields npevent on microsoft
windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemove wm_keyup wm_keydown wm_setcursor wm_setfocus wm_killfocus for information about these events, see the microsoft
windows developer documentatio...
...wparam 32 bit field for the
windows event parameter; parameter value depends upon event type.
...And 13 more matches
Mozilla accessibility architecture
mozilla supports two accessibility apis: microsoft active accessibility (msaa) on
windows and accessibility tool kit (atk) on linux and unix.
...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.
...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.
...And 13 more matches
DevTools API - Firefox Developer Tools
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 target is usually a web page (a tab), but can be other things (a chrome
window, a remote tab,…).
... api gdevtools the gdevtools api can be used to register new tools, themes and handle toolboxes for different tabs and
windows.
...And 13 more matches
WorkerGlobalScope - Web APIs
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.
... properties this interface inherits properties from the eventtarget interface and
windoworworkerglobalscope and
windoweventhandlers mixins.
... properties implemented from elsewhere
windoworworkerglobalscope.caches read only returns the cachestorage object associated with the current context.
...And 13 more matches
tabs - Archive of obsolete content
tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a list of all opened tabs across all
windows.
... } = 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.
...And 12 more matches
content/mod - Archive of obsolete 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.
...
window : nsidom
window the
window to be modified.
...And 12 more matches
Menus - Archive of obsolete content
for example, the file and edit menus along the top of an application
window (or the menubar on the top of screen).
...however, the actual top level menus do not generally change for a given
window.
..."sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the
window or screen.
...And 12 more matches
OS.File for the main thread
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.
...however, the file is not opened for appending on
windows.
... winshare (ignored under non-
windows platforms) if specified, a sharing policy, as per
windows function createfile.
...And 12 more matches
Optimizing Applications For NSPR
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.
...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.
...And 12 more matches
SubtleCrypto.wrapKey() - Web APIs
*/ function 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.
... */ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt =
window.crypto.getrandomvalues(new uint8array(16)); const wrappingkey = await getkey(keymaterial, salt); return
window.crypto.subtle.wrapkey( "raw", keytowrap, wrappingkey, "aes-kw" ); } /* generate an encrypt/decrypt secret key, then wrap it.
...And 12 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.
...And 11 more matches
Content Panels - Archive of obsolete content
sometimes, you will want to change part of the
window.
...you could create a wizard interface by opening a different
window for each screen.
...first, each
window could appear in a different location (although there are ways around this).
...And 11 more matches
Cross Package Overlays - Archive of obsolete content
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.
...for example, you could add menu items or toolbars to the mozilla browser
window.
...And 11 more matches
XUL Structure - Archive of obsolete content
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.
...for example, the messenger component has descriptions of the mail messages list
window, the composition
window and the address book dialogs.
...these are the -chrome command line argument and the chrome modifier to the
window.open() function.
...And 11 more matches
Command line crash course - Learn web development
the next images show the command prompts available in
windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name.
...
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.
...
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.
...And 11 more matches
HTTP logging
windows if firefox is already running, exit out of it.
...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".
...And 11 more matches
WebRequest.jsm
windowid number the id of the
window making the request, as an outer
windowid.
... parent
windowid number type string the resource type.
...
windowid number the id of the
window making the request, as an outer
windowid.
...And 11 more matches
Same-origin policy - Web security
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).
... 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.
...And 11 more matches
Intercepting Page Loads - Archive of obsolete content
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.
... 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.
...And 10 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
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.
... you can deal with this by having an onload handler in the new
window and then call back into the opener
window (using
window.opener).
...And 10 more matches
Plug-in Development Overview - Gecko Plugin API Reference
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.
...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.
...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.
...And 10 more matches
Drawing graphics - Learn web development
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).
...And 10 more matches
Embedding the editor
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.
...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.
...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.
...And 10 more matches
nsIMessenger
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.
... method overview void setdisplaycharset(in acstring acharset); void set
window(in nsidom
window ptr, in nsimsg
window msg
window); void openurl(in acstring aurl); void loadurl(in nsidom
window ptr, in acstring aurl); void launchexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long getundotransactiontype(); unsigned long getredotransactiontype(); void undo(in nsimsg
window msg
window); void redo(in nsimsg
window msg
window); void sendunsentmessages(in nsimsgidentity aidentity, in nsimsg
window amsg
window); void setdocumentcharset(in acstring characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aidentity, in astring amsgfil...
...essageservicefromuri(in acstring auri); nsimsgdbhdr msghdrfromuri(in acstring auri); acstring getmsguriatnavigatepos(in long apos); acstring getfolderuriatnavigatepos(in long apos); void getnavigatehistory(out unsigned long acurpos, out unsigned long acount, [array, size_is(acount)] out string ahistory); note: prior to gecko 8.0, all references to nsidom
window used in this interface were nsidom
window.
...And 10 more matches
Plug-in Development Overview - Plugins
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.
...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.
...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.
...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
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
(not implemented for the
windows platform) meterbar div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>lorem</div> firefox use meter instead.
...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 ...
... -moz-
window-button-box firefox removed in firefox 64.
...And 10 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
the topmost browsing context — the one with no parent — is usually the browser
window, represented by the
window object.
...this can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the
windowname parameter in the
window.open() method.
... allow-modals: lets the resource open modal
windows.
...And 10 more matches
page-mod - Archive of obsolete content
for example, the following add-on displays an alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: '
window.alert("page matches ruleset");' }); you can modify the document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); you can supply the content script(s) in one of two ways: as a string literal, or an array of string literals, assigned to ...
...it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden
windows.
...tabs api for the tab associated with a specific document: var pagemod = require("sdk/page-mod"); var tabs = require("sdk/tabs"); pagemod.pagemod({ include: ["*"], onattach: function onattach(worker) { console.log(worker.tab.title); } }); destroying workers workers generate a detach event when their associated document is closed: that is, when the tab is closed or when the associated
window's unload event occurs.
...And 9 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
--> </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.
... <
window id="main-
window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </
window> (note for mac o...
...And 9 more matches
Setting up an extension development environment - Archive of obsolete content
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.
... 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.
...if you are already running a firefox instance without -no-remote, and you attempt to start another instance with -p profilename (but without the -no-remote parameter), that second invocation would ignore its -p profilename parameter, instead opening a new
window for the already running instance; sharing all its profile, sessions etc.
...And 9 more matches
Venkman Introduction - Archive of obsolete content
on
windows, the javascript debugger compares favorably with visual interdev and other large web development tools.
...when the download is complete, restart your browser (some
windows users may also need to restart their computer as well).
...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").
...And 9 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.
...And 9 more matches
Using Remote XUL - Archive of obsolete content
[***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.
... <?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
window element is the root (outermost) element in a xul document and encompasses all other elements.
...And 9 more matches
Manipulating documents - Learn web development
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 document (represented by the dom in browsers) is the actual page loaded into the
window, and is represented in javascript by the document object.
...And 9 more matches
Simple SeaMonkey build
windows: install visual c++ 2013.
... you may need to install one or more
windows sdks.
... see
windows sdk versions for a quick guide.
...And 9 more matches
How to get a stacktrace with WinDbg
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.
...And 9 more matches
Localizing with Mercurial
open a terminal
window and enter hg --version.
... 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.
...And 9 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.
...(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.
...And 9 more matches
about:memory
191.89 mb (100.0%) -- explicit ├───63.15 mb (32.91%) --
window-objects │ ├──24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) --
window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb ...
...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...
... the "
window-objects" sub-tree represents all javascript
window objects, which includes the browser tabs and ui
windows.
...And 9 more matches
Rhino Debugger
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.
...the selected file will be compiled and displayed in a new
window.
...And 9 more matches
nsIAccessibleEvent
this can be used to get the dom
window, the dom document and the
window handler, among other things.
... event_foreground 0x0003 0x0017 0x0014 the foreground
window has changed.
... event_capture_start 0x001c 0x0019 a
window has received mouse capture.
...And 9 more matches
nsIDocShell
nsiprincipal principal, in nsidomstorage storage); void addstate(in nsivariant adata, in domstring atitle, in domstring aurl, in boolean areplace); void beginrestore(in nsicontentviewer viewer, in boolean top); void createaboutblankcontentviewer(in nsiprincipal aprincipal); void createloadinfo(out nsidocshellloadinfo loadinfo); void detacheditorfrom
window(); violates the xpcom interface guidelines void finishrestore(); void firepagehidenotification(in boolean isunload); native code only!
... adirection); nsidomstorage getsessionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring a
windowtarget, in string atypehint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest); native code only!
... allow
windowcontrol boolean specifies whether or not content is allowed to control the
window (that is, to resize or move the
window).
...And 9 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextinputprocessor.idlscriptable this interface is a text 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.
... 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.
...And 9 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...
...indow content
window ); parameters mimetype the desired mime type as a string uri the uri to the handler as a string.
... content
window the dom content
window from which the method has been called.
...And 9 more matches
Mozilla
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.
... chrome registration chrome is the set of user interface elements of the application
window that are outside the
window's content area.
...And 9 more matches
Using the Gamepad API - Web APIs
the gamepad api introduces new events on the
window object for reading gamepad and controller (hereby referred to as gamepad) state.
... you can use gamepadconnected like this:
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
...gamepadconnected), a second event is dispatched to the focused
window, 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.
...And 9 more matches
Localizations and character encodings - Developer guides
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 locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than
windows-1252.
...And 9 more matches
Content Scripts - Archive of obsolete content
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.
... "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.
... 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.
...And 8 more matches
Appendix D: Loading Scripts - Archive of obsolete content
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.
... 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.
...(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.
...And 8 more matches
Working with BFCache - Archive of obsolete content
q: when a user clicks a link that replaces the view in the current tab with a new page, what is the fate of the nsidom
window supporting the view they click on?
...a: the outer nsidom
window (the |
window| object in content js, aka the <browser>'s content
window object in the parent document) stays right where it is.
... it just has its inner
window and document replaced.
...And 8 more matches
Tamarin build documentation - Archive of obsolete content
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.
... - 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.
...form-tools:$android_ndk_bin - example commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux $ cd tamarin-redux $ mkdir objdir-release $ cd objdir-release $ ../configure.py --arm-arch=armv7-a --target=arm-android $ make to make a debug shell use this command: ../configure.py --enable-debug --arm-arch=armv7-a --target=arm-android using cross-platform scripts in cygwin on
windows: prerequisites: you need python 2.5 or later and gnu make 3.81 or later.
...And 8 more matches
Adding Buttons - Archive of obsolete content
« previousnext » in this section, we will look at how to add some simple buttons to a
window.
... adding buttons to a
window the
window we've created so far has had nothing in it, so it isn't very interesting yet.
...we will also learn a simple way to position them on the
window.
...And 8 more matches
Creating Dialogs - Archive of obsolete content
it displays a dialog instead of a
window, which implies that it is asking something of the user.
...these arguments are passed to the new dialog and placed in an array stored in the new
window's arguments property.
... 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.
...And 8 more matches
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.
...And 8 more matches
XUL element attributes - Archive of obsolete content
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 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.
...And 8 more matches
XUL accessibility guidelines - Archive of obsolete content
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).
... 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).
...And 8 more matches
panel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a panel is a used as a temporary floating popup
window that may contain any type of content.
... it does not have any
window decorations.
... when open, it floats above the
window and may extend outside the border of the main
window.
...And 8 more matches
wizard - Archive of obsolete content
it is used for a
window with several steps contained on several pages.
... attributes firstpage, lastpage, pagestep, title,
windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/key...
...yid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor type: color string specify background color of the
window's titlebar when it is active (foreground).
...And 8 more matches
NPN_GetValue - Archive of obsolete content
values for npnvariable: npnvxdisplay =1: unix only: returns the current display npnvxtappcontext: unix only: returns the application's xtappcontext npnvnetscape
window: ms
windows and unix/x11 only: ms
windows: gets the native
window on which plug-in drawing occurs; returns hwnd unix/x11: gets the browser toplevel
window in which the plug-in is displayed; returns
window npnvjavascriptenabledbool: tells whether javascript is enabled; true=javascript enabled, false=not enabled npnvasdenabledbool: tells whether smartupdate (former nam...
...e: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline mode is enabled; true=offline mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnv
windownpobject: returns the npobject * pointer for the dom
window object; see getting the page url in npapi plugin for a rough example npnvpluginelementnpobject: npnvsupports
windowless: tells whether the browser supports
windowless plugins.
... gecko 1.9.2 note starting with gecko 1.9.2 (firefox 3.6), the variables npnvservicemanager, npnvdomelement, and npnvdom
window are no longer supported.
...And 8 more matches
NPN_SetValue - Archive of obsolete content
variable values the function can set: nppvplugin
windowbool: sets
windowed/
windowless mode for plugin display; true=
windowed, false=
windowless nppvplugintransparentbool: sets transparent mode for display of a plugin; true=transparent, false=opaque nppvjavaclass nppvplugin
windowsize nppvplugintimerinterval nppvpluginscriptableinstance nppvpluginscriptableiid nppvjavascriptpushcallerbool: specifies whether you are pushing or popping the js...
... description a good place to set plugin operation mode such as
windowless mode is npp_new, so the browser knows right away what mode the plugin is designed to operate in.
... nppvplugin
windowbool (
windows and unix) specifies that the plugin operates in
windowed mode.
...And 8 more matches
Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in
windows with images of checked and unchecked checkboxes.
...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.
...And 8 more matches
Simple Thunderbird build
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.
...do not copy mapi.h, it is already in c:\program files (x86)\
windows kits\10\include\10.0.17134.0\um\mapi.h.
...And 8 more matches
Limitations of chrome scripts
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...
...for example: // chrome code gbrowser.content
window; // null gbrowser.contentdocument; // null gbrowser.selectedbrowser.content
window; // null
window.content; // null content; // null as a special note, docshells live in the content process, so they are also inaccessible: gbrowser.docshell; // null gbrowser.selectedbrowser.docshell; // null with the shim the shim will give you a cpow for the content object in these situations.
...in this case, the shim will return a javascript object that looks somewhat like a
window or a document for about:blank.
...And 8 more matches
nsIContentViewer
void loadcomplete(in unsigned long astatus); void loadstart(in nsisupports adoc); void move(in long ax, in long ay); void open(in nsisupports astate, in nsishentry ashentry); void pagehide(in boolean isunload); boolean permitunload([optional] in boolean 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!
...findcontainerview() finds the view to use as the container view for make
window.
...And 8 more matches
nsIScriptError
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); 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); autf8string tostring(); attributes attribute type description category string a string indicating the category of error that occurred see categories for a list.
...And 8 more matches
Using the clipboard
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.
... // import the services module for future use, if we're not in // a browser
window where it's already loaded.
...And 8 more matches
Using tab-modal prompts
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.
...And 8 more matches
Version, UI, and Status Information - Plugins
displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser
window for updates on the progress of an operation or the url of a link on the page.
... detecting
windowless support on ms
windows and mac os x in this example, the has_
windowless method finds out whether the current version of the api supports
windowless plug-ins.
... this method for detecting support is only useful on ms
windows and mac os x.
...And 8 more matches
The JavaScript input interpreter - Firefox Developer Tools
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).
... 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.
...And 8 more matches
Web Console remoting - Firefox Developer Tools
these can be: page errors,
window.console api messages, network activity, and file activity.
...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.
...listeners", "listeners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ] } the reply is: { "startedlisteners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ], "nativeconsoleapi": true, "from": "conn0.console9" } the reply tells which listeners were started and it includes a flag nativeconsoleapi which tells if the
window.console object was overridden by the scripts in the page or not.
...And 8 more matches
Using Web Workers - Web APIs
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.
...for example, you can't directly manipulate the dom from inside a worker, or use some default methods and properties of the
window object.
...And 8 more matches
Porting the Library Detector - Archive of obsolete content
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.
... finally, it listens to gbrowser's tabselect event, to update the contents of the box for that
window.
...And 7 more matches
XUL Migration Guide - Archive of obsolete content
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.
... xul
windows xul
windows are used to define completely new
windows to host user interface elements specific to the add-on.
...And 7 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, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
...And 7 more matches
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
for example: mozilla mozilla = mozilla.getinstance();
windowcreator creator = new
windowcreator(); // implements nsi
windowcreator nsiservicemanager servicemanager = mozilla.getservicemanager(); nsi
windowwatcher
windowwatcher = (nsi
windowwatcher) servicemanager .getservicebycontractid(ns_
windowwatcher_contractid, nsi
windowwatcher.ns_i
windowwatcher_iid);
windowwatcher.set
windowcreator(creator); in this example, we have a java class called win...
...dowcreator, which implements the nsi
windowcreator interface, and we want to register it with mozilla.
... to do so, we first get the service manager, through which we can get a reference to mozilla's
window watcher.
...And 7 more matches
Adding Event Handlers - Archive of obsolete content
you can embed the script code directly in the xul file in between the opening and closing script tags but it is much better to include code in a separate file as the xul
window will load slightly faster.
...add the line below just after the opening
window tag and before any elements.
... 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.
...And 7 more matches
XUL Questions and Answers - Archive of obsolete content
a workaround is to open the content in a new
window using "
window.open" and send titlebar=”no” as one of the flags in the 3rd argument.
...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 type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcel...
...="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type="checkbox" value="1" label="vghkvghk"/> <listitem type="checkbox" value="2" label="vghjkvk" checked="true"/> <listitem type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listbox> </
window> list box handlers can only check for listitems not listcells.
...And 7 more matches
dialog - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element should be used in place of the
window element for dialog boxes.
..., 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...
... preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the
window's titlebar when it is active (foreground).
...And 7 more matches
Debugging a XULRunner Application - Archive of obsolete content
/* 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.
... console to enable a console on
windows, start xulrunner with the -console argument.
...this will only work if the pref pref("browser.dom.
window.dump.enabled", true) is enabled.
...And 7 more matches
XULRunner tips - Archive of obsolete content
window url
window type extension manager chrome://mozapps/content/extensions/extensions.xul?type=extensions extension:manager-extensions theme manager chrome://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://global/content/console.xul global:console about:config chrome://global/conte...
...nt/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopen
windowbytype() needs to be defined.
...//inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/dom/keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/stylerules/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/dom/commandoverlay.xul to launch dom inspector in your application, you need to open its main
window, with a command like this:
window.open("chrome://inspector/content/inspector.xul", "", "chrome"); alternatively, the dom inspector may also be added as an extension: (if you already have inspector installed for another application you can skip to the next step) follow the instructions above through "unzip the package." create a file in the extensions directory of your application with th...
...And 7 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
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.
... 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.
... 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.
...And 7 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.
... this page describes how to capture these minidumps on
windows, to permit better debugging.
... install debugging tools for
windows microsoft distributes the debugging tools for
windows for free, those include windbg which you will need here.
...And 7 more matches
Old Thunderbird build
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 any other location, such as a new directory c:/thunderbird-src (where "c:/", with a forward slash, is intentional to clarify you are in the mozillabuild command prompt per
windows build prerequisite).
...And 7 more matches
Embedding Tips
normally it provide some functionality that is required from lots of places such as looking up preference settings, creating new
windows, locating files, displaying prompt or password dialog boxes and so on.
... how do i get popup
windows working?
... implement and register a nsi
windowcreator object with the
window watcher service.
...And 7 more matches
AT APIs Support
we provide for them the support of these products on
windows, linux/unix and os x platforms.
... 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.
...And 7 more matches
Setting up the Gecko SDK
the sdk is available for
windows, linux, and mac operating systems, and versions for other operating systems are being developed, and can be retrieved from as a single archive from the following platform-specific locations (need correction for last version (now 1.9.2.8).
... there is now separate archive with gecko-sdk, just xul-runner-sdk.): linux: http://ftp.mozilla.org/pub/mozi....8.0.4.tar.bz2
windows: http://ftp.mozilla.org/pub/mozi...vc-1.8.0.4.zip mac: http://ftp.mozilla.org/pub/mozi...ac-1.8.0.4.zip note that the version number for the archives above is 1.8.
...in this appendix, we set up the
windows gecko sdk in c:\gecko-sdk\.
...And 7 more matches
Components.utils.Sandbox
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 from the
window: var principal = gbrowser.selectedtab.linkedbrowser.contentprincipal; var sandbox = components.utils.sandbox(principal); expanded principal an expanded principal is specified as an array of the principals it subsumes.
...And 7 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...
...ess 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 stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading...
...And 7 more matches
Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on
windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on
windows and linux, or cmd + opt + i on os x.
... 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).
...And 7 more matches
EventTarget.addEventListener() - Web APIs
common targets are element, document, and
window, but the target may be any object that supports events (such as xmlhttprequest).
... 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.
...</table> the value of this within logid() is a reference to the global object
window (or undefined in the case of strict mode.
...And 7 more matches
SharedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from
windowtimers,
windowbase64, and
windoweventhandlers.
... 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.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from
windowtimers,
windowbase64, and
windoweventhandlers.
...And 7 more matches
this - JavaScript
// 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.
... 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.
... function f1() { return this; } // in a browser: f1() ===
window; // true // in node: f1() === globalthis; // true in strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example: function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true in the second example, this should be undefined, because f2 was called directly and not as a method or property of an object (e.g.
...And 7 more matches
Communicating With Other Scripts - Archive of obsolete content
the
window object).
... 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.
... you can communicate between the content script and page scripts using
window.postmessage().
...And 6 more matches
Content Processes - Archive of obsolete content
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.
...And 6 more matches
panel - Archive of obsolete content
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.
... label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('
window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a content script that updates the dom in the same document.
... var myscript = "
window.addeventlistener('click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(...
...And 6 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
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.
...main roles nsdocshell this class corresponds, basically, to a "
window" object in javascript -- each frame, iframe, content area, tab, etc has its own docshell.
... 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.
...And 6 more matches
Localization - Archive of obsolete content
inside these archives, you will find the files that hold the localized text for each
window.
...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.
...this line is typically placed just before the
window element.
...And 6 more matches
NPN_GetURL - Archive of obsolete content
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.
... _self or _current: load the link into the same
window the plug-in instance occupies.
...And 6 more matches
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.
...And 6 more matches
NPAPI plugin reference - Archive of obsolete content
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.
...on
windows you have to define supported mimetypes in the dll resource file.
... np_port contains information required by the
window field of an np
window structure.
...And 6 more matches
Theme changes in Firefox 3.5 - Archive of obsolete content
for the
windows and linux native default themes, the gripper is now drawn as a part of the background of the scrollbar thumb widget.
... 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.
...And 6 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
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).
...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.
...And 6 more matches
Accessibility Features in Firefox
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.
...fire vox can also be used on
windows or os x.
...And 6 more matches
Mozilla's Section 508 Compliance
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.
...we expose focus programmatically via msaa (
windows) and atk (linux/unix).
...we expose this information to assistive technology via microsoft active accessibility (msaa) (
windows) and accessibility toolkit (atk) (linux/unix).
...And 6 more matches
Mozilla’s UAAG evaluation report
this uaag evaluation report covers nightly builds of the mozilla web browser itself, running on
windows 2000, as of february 20, 2002.
...(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) 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.
...And 6 more matches
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.
... chrome providers a supplier of chrome for a given
window type (e.g., for the browser
window) is called a chrome provider.
...And 6 more matches
Simple Sunbird build
windows: if you're using
windows xp, you must have
windows xp service pack 2 and .net framework 2.0.
...you may need to install one or more
windows sdks.
... see
windows sdk versions for a quick guide.
...And 6 more matches
Multiple Firefox profiles
mac os x multifirefox by dave martorana profile management determining the profile while firefox is running to determine the profile of a currently-running firefox instance in
windows, macos or linux, type about:profiles into the browser url search bar.
...
windows
windows xp click the start button.
...
windows vista/7 click the start button.
...And 6 more matches
Message manager overview
communicate with frame scripts using message-passing apis there are various types of frame message managers, as depicted in this diagram: this diagram shows the setup when there are 2 browser
windows open, one with 2 tabs open and one with 1 tab open.
... 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.
... its most important functions and attributes are: childcount : contains the number of children (typically, browser
windows) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloa...
...And 6 more matches
Application Translation with Mercurial
firefox and fx-* denote branches of firefox for desktop, the browser for desktops and notebooks running,
windows, mac os or linux.
...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.
...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 (\).
...And 6 more matches
Investigating leaks using DMD heap scan mode
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.
...the second step is to figure out the address of the leaking object, usually a
window.
...if you are investigating a leak of www.example.com, then from $logdir you can do "grep nsglobal
window cc-edges* | grep example.com".
...And 6 more matches
Gecko Profiler FAQ
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.
... 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.
... 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?
...And 6 more matches
Mozilla internal string guide
specifying charset=latin1 means the same as charset=
windows-1252.
...
windows-1252 is a similar but different encoding used for interchange.
...additonally, on
windows the are some rare cases (e.g.
...And 6 more matches
Components.utils.exportFunction
the exported function does not have to be added to the less privileged code's global
window object: it can be exported to any object in the target scope.
...this 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.
... modifying the argument while cloning creates a copy of an object, an xray for an object refers to the original, so any changes to the argument that are made in the exported function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, content
window, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim"
window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for ...
...And 6 more matches
nsIMacDockSupport
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 can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var 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('i...
...And 6 more matches
nsITaskbarTabPreview
widget/public/nsitaskbartabpreview.idlscriptable this interface is used on microsoft
windows to control tab preview specific behavior.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsitaskbarpreview last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) tab preview support is disabled by default in gecko 1.9.2 creating an nsitaskbartabpreview for a
window will automatically hide that
window's nsitaskbar
windowpreview; this is done by
windows and cannot be prevented.
... when there are no more tab previews left for a
window, the
window preview is automatically made visible again.
...And 6 more matches
DedicatedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from
windowtimers,
windowbase64, and
windoweventhandlers.
... 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.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from
windowtimers,
windowbase64, and
windoweventhandlers.
...And 6 more matches
Page Visibility API - Web APIs
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.
...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.
... note: while onblur and onfocus will tell you if the user switches
windows, it doesn't necessarily mean it's hidden.
...And 6 more matches
Screen.availHeight - Web APIs
since screen is exposed on the
window interface's
window.screen property, you access availheight using
window.screen.availheight.
... 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.
...And 6 more matches
Using the Screen Capture API - Web APIs
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.
...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).
...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.
...And 6 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.
...And 6 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
target where to display the linked url, as the name for a browsing context (a tab,
window, or <iframe>).
...(default) _blank: usually a new tab, but users can configure browsers to open a new
window instead.
... note: when using target, add rel="noreferrer noopener" to avoid exploitation of the
window.opener api; note: in newer browser versions (e.g.
...And 6 more matches
context-menu - Archive of obsolete content
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.
... 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.
...And 5 more matches
Dialogs and Prompts - Archive of obsolete content
see working with
windows in chrome code for introductory information and more discussion and examples.
... describing dialog
windows dialogs in mozilla whenever you want to create a dialog in your application, use <dialog> (instead of usual <
window>) as root element in the xul file.
... using <dialogheader> you can use the dialogheader element to add "headers" to
windows.
...And 5 more matches
Miscellaneous - Archive of obsolete content
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.
...this event is mozilla-only; other browsers may support
window.onmousewheel.
... simulating mouse and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils =
window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidom
windowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focused
window.getselection().tostring(); ...
...And 5 more matches
Sidebar - Archive of obsolete content
this means that the function is available in all browser
windows.
...a web page can use
window.sidebar to create bookmark with that property.
... to access your sidebar's
window or document objects, you need to use the content
window or contentdocument properties of document.getelementbyid("sidebar") respectively.
...And 5 more matches
Setting Up a Development Environment - Archive of obsolete content
it can be installed on mac os x as part of the xcode tools package, and on
windows with cygwin.
...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.
... to make "make install" work on non-
windows systems, you need an extra step.
...And 5 more matches
Commands - Archive of obsolete content
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.
...And 5 more matches
editor - Archive of obsolete content
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.
... attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, content
window, docshell, editingsession, editortype, webbrowserfind, webnavigation methods geteditor, gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the designmode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myedit...
...the
window for the primary content can be retrieved more conveniently using
window.content.
...And 5 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.
... 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 5 more matches
Dialogs in XULRunner - Archive of obsolete content
« previous the last article in this series covered some simple xul for creating
windows, menus, and toolbars.
... custom dialogs building dialogs in xul is very similar to creating
windows.
...dialog xul files can have dtd, css, and javascript, just like
windows.
...And 5 more matches
Extentsions FAQ - Archive of obsolete content
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.
..."); 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 the right or bottom of the
window.
...the appearance with a firefox tab isn't quite the same as having a completely separate explorer
window.
...And 5 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
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=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.
...And 5 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
creating a theme header image the header image is displayed as the background of the top of the browser
window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... it will be anchored to the top-right corner of the browser
window.
... 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.
...And 5 more matches
Scratchpad - Archive of obsolete content
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.
... 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.
...And 5 more matches
CSS property compatibility table for form controls - Learn web development
on
windows 7, internet explorer 9 does not apply the border unless background:none is applied.
... on
windows 7, internet explorer 9 does not apply the border unless background:none is applied.
... on
windows 7, internet explorer 9 does not apply the border unless background:none is applied.
...And 5 more matches
The Firefox codebase: CSS Guidelines
writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations:
windows 7, 8 and 10 default theme aero basic (
windows 7, 8)
windows classic (
windows 7) high contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes dir...
...ectory containing 4 sub-directories: shared linux osx
windows the shared directories contain styles shared across all 3 platforms, while the other 3 directories contain styles respective to their platform.
... high contrast mode content area on
windows high contrast mode, in the content area, gecko does some automatic color adjustments regarding page colors.
...And 5 more matches
Eclipse CDT Manual Setup
after selecting an appropriate directory, click ok, then close the "welcome" tab when the main eclipse
window opens.
... 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.
...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.
...And 5 more matches
Limitations of 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.
...the exceptions are: content-document-global-created document-element-inserted outer-
window-destroyed inner-
window-destroyed dom-
window-destroyed these must be registered in the content process.
...And 5 more matches
Limitations of 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.
...the exceptions are: content-document-global-created document-element-inserted outer-
window-destroyed inner-
window-destroyed dom-
window-destroyed these must be registered in the content process.
...And 5 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.
...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.
...And 5 more matches
SpiderMonkey Build Documentation
before you begin, make sure you have the right build tools for your computer: linux,
windows, mac, others.
...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.
...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.
...And 5 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.
... 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 initialized by calling nsiscripterror.init() instead of initwith
windowid().
...And 5 more matches
Xray vision
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.
... so in the example above, chrome code calling the content's
window.confirm() would get the original version of confirm(), not the redefined version.
...And 5 more matches
Thunderbird Configuration Files
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.
... 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.
...And 5 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.
... 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.
...And 5 more matches
Initialization and Destruction - Plugins
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.
... 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.
...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.
...And 5 more matches
Introduction to DOM Inspector - Firefox Developer Tools
(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.
... 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.
...And 5 more matches
Browser Console - Firefox Developer Tools
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.
... 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.
...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.
...And 5 more matches
Basic animations - Web APIs
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.
... in the examples below, we'll use the
window.requestanimationframe() method to control the animation.
... var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png';
window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 ...
...And 5 more matches
Introduction to the DOM - Web APIs
this document can be either displayed in the browser
window or as the html source.
... 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.
...And 5 more matches
Element.classList - Web APIs
string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(
window){"use strict"; // prevent global namespace pollution if(!
window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=...
...implement the barebones domtokenlist livelyness polyfill if (typeof domtokenlist !== "function") (function(
window){ var document =
window.document, object =
window.object, hasownprop = object.prototype.hasownproperty; var defineproperty = object.defineproperty, allowtokenlistconstruction = 0, skippropchange = 0; function domtokenlist(){ if (!allowtokenlistconstruction) throw typeerror("illegal constructor"); // internally let it through } domtokenlist.prototype.tostring = domtokenlist.prototype.tolocalestring = function(){return this.value}; domtokenlist.p...
...remove", val); for (var i=0, len=proto.length, resstr="", is=0; i !== len; ++i) if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resstr+=this[i]+" "; }else{ is=1; } } if (!is) continue; delete this[len], proto.length -= 1, proto.value = resstr; } skippropchange = 1, ele.classname = proto.value, skippropchange = 0; };
window.domtokenlist = domtokenlist; function whenpropchanges(){ var evt =
window.event, prop = evt.propertyname; if ( !skippropchange && (prop==="classname" || (prop==="classlist" && !defineproperty)) ) { var target = evt.srcelement, protoobjproto = target[" uclp"], strval = "" + target[prop]; var tokens=strval.trim().split(wsre), restokenlist=target[prop==="c...
...And 5 more matches
Using IndexedDB - Web APIs
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some
window.idb* objects:
window.idbtransaction =
window.idbtransaction ||
window.webkitidbtransaction ||
window.msidbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older browsers
window.idbkeyrange =
window.idbkeyrange ||
window.webkitidbkeyrange ||
window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need
window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification.
...it may be preferable to not support a browser than to claim to support it and fail: if (!
window.indexeddb) { console.log("your browser doesn't support a stable version of indexeddb.
...And 5 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...
... tag example assume the following basic html: <button>notify me!</button> it's possible to handle multiple notifications this way:
window.addeventlistener('load', function () { // at first, let's check if we have permission for notification // if not, let's ask for it if (
window.notification && notification.permission !== "granted") { notification.requestpermission(function (status) { if (notification.permission !== status) { notification.permission = status; } }); } var button = document.gete...
...lementsbytagname('button')[0]; button.addeventlistener('click', function () { // if the user agreed to get notified // let's try to send ten notifications if (
window.notification && notification.permission === "granted") { var i = 0; // using an interval cause some browsers (including firefox) are blocking notifications if there are too much in a certain time.
...And 5 more matches
SubtleCrypto.exportKey() - Web APIs
*/ async 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.
...*/ async function exportcryptokey(key) { const exported = await
window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 =
window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify ke...
...And 5 more matches
Observer Notifications - Archive of obsolete content
this example code shows you what an implementation of the nsiobserver interface looks like: let testobserver = { observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") {
window.alert("data received: " + adata); } } } in order for this observer to work, you need to use the observer service that provides methods for you to add, remove, notify and enumerate observers.
...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.
...And 4 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...
...use privatebrowsingutils.getprivacycontextfrom
window(win) to obtain it from the relevant
window.
...the supporting per-
window private browsing article explains further about the equivalent notifications, which are all backwards compatible through to firefox 12 (and are sent side-by-side with the global private browsing notifications in older versions).
...And 4 more matches
Finding the file to modify - Archive of obsolete content
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.
...And 4 more matches
Scripting - Archive of obsolete content
this file will be loaded into the prism chrome
window very much like a firefox extension is loaded into the browser chrome
window.
...since the web application has not yet loaded, the
window object is still undefined.
...load after the main application
windows has finished loading.
...And 4 more matches
Focus and Selection - Archive of obsolete content
if there are three textboxes on a
window, the one that has the focus is the one that the user can currently enter text into.
... only one element per
window has the focus at a time.
...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.
...And 4 more matches
Keyboard Shortcuts - Archive of obsolete content
although shortcuts such as this might not always be valid, they will usually work any time the
window is open.
... key element xul provides an element, key, which lets you define a keyboard shortcut for a
window.
...for example,
windows uses the control key and the macintosh uses the command key.
...And 4 more matches
Modifying the Default Skin - Archive of obsolete content
this section describes how to modify the skin of a
window.
...by applying a different skin, you can change the look of a
window without changing its functionality.
... for a simple personalized look to a firefox
window, you can easily change the style sheets associated with it.
...And 4 more matches
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.
...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.
...And 4 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
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.
... 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.
...because the button is used in the navigator
window (through overlays), the fonts/colors used should not be described by messenger.
...And 4 more matches
browser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, content
window, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a grou...
...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.
...And 4 more matches
prefpane - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single preference panel in a pref
window.
...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.
... onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a
window.
...And 4 more matches
Global object - MDN Web Docs Glossary: Definitions of Web-related terms
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.
...
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.
...And 4 more matches
What text editors are available? - Learn web development
extensible atom mit/bsd free
windows, mac, linux forum online manual yes bluefish gpl 3 free
windows, mac, linux mailing list, wiki online manual yes brackets mit/bsd free
windows, mac, linux forum, irc github wiki yes coda closed source $99 mac twitter, forum, e-mail ebook yes codelobster closed source free
windows, mac, lin...
...ux forum, e-mail no end user doc yes emacs gpl 3 free
windows, mac, linux faq, mailing list, news group online manual yes espresso closed source $75 mac faq, e-mail no end user doc, but plug-in doc yes gedit gpl free
windows, mac, linux mailing list, irc online manual yes kate lgpl, gpl free
windows, mac, linux mailing list, irc online manual yes komodo edit mpl free
windows, mac, linux forum online manual yes notepad++ gpl free
windows forum wiki yes pspad closed source free
windows faq, forum online help yes sublime text closed source $70
windows, mac, linux forum officia...
...l, unofficial yes textmate closed source $50 mac twitter, irc, mailing list, e-mail online manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free
windows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free
windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or installing a text editor of your choice.
...And 4 more matches
Accessibility API cross-reference
banner a portion of quoted content which is 'too long' to appear 'inline' n/a blockquote <blockquote> entire
window border as 1 object border n/a n/a n/a specific kind of button that drops down a list of items, msaa only buttondropdown n/a n/a expressed with aria-haspopup on an element with a button role specific kind of button that drops down a grid, msaa only buttondropdowngrid n/a n/a specific kin...
...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.
... 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.
...And 4 more matches
CSUN Firefox Materials
assistive technology support on
windows "i am a full firefox convert with the release of 1.5.
..." -- 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.
... 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.
...And 4 more matches
Debugging on Mac OS X
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.
... 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).
...And 4 more matches
JavaScript OS.Constants
error values eacces permission denied eagain resource temporarily unavailable ebadf bad file descriptor eexist file exists efault bad address efbig file too large einval invalid argument eio input/output error eisdir is a directory eloop (not always available under
windows) too many levels of symbolic links.
...en files in the process enametoolong name too long enfile too many open files on the system enoent no such file or directory enomem cannot allocate memory enospc no space on device enotdir is not a directory enxio device no configured or does not support operation eopnotsupp (not always available under
windows) operation not supported.
... eoverflow (not always available under
windows) value too large to be stored in datatype.
...And 4 more matches
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).
...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 that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </pref
window> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
...And 4 more matches
Gecko events
is supported: yes event_foreground the foreground
window has changed.
... is supported: yes event_capture_start a
window has received mouse capture.
... is supported: no event_capture_end a
window has lost mouse capture.
...And 4 more matches
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).
...And 4 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); ...
... 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 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(); v...
...void configuretemporaryreturnreceiptsfilter( in nsimsgfilterlist filterlist ); parameters filterlist missing description exceptions thrown missing exception missing description displayofflinemsg() void displayofflinemsg( in nsimsg
window a
window ); parameters a
window missing description exceptions thrown missing exception missing description equals() boolean equals( in nsimsgincomingserver server ); parameters server missing description return value missing description exceptions thrown missing exception missing description forgetpassword() void forgetpassword(); parameters none.
...And 4 more matches
nsIPluginHost
obsolete since gecko 2.0 void deletepluginnative
window(in nspluginnative
windowptr apluginnative
window); native code only!
... void newpluginnative
window(out nspluginnative
windowptr apluginnative
window); native code only!
... void createtmpfiletopost( in string apostdataurl, out string atmpfilename ); parameters apostdataurl atmpfilename native code only!deletepluginnative
window deletes plugin native
window object created by newpluginnative
window().
...And 4 more matches
nsIPrintingPrompt
embedding/browser/webbrowser/nsiprintingprompt.idlscriptable this is the printing prompt interface which can be used without knowlege of a parent
window.
... inherits from: nsisupports last changed in gecko 1.7 this interface is identical to nsipintingpromptservice but without the parent nsidom
window parameter.
...
windows: the gfx layer no longer supports default toolkit behavior for displaying the native print dialog.
...And 4 more matches
nsITaskbarPreviewController
widget/public/nsitaskbarpreviewcontroller.idlscriptable this interface is used on microsoft
windows to provide the behavior of taskbar previews.
...depending on whether the controller is connected to an nsitaskbartabpreview or nsitaskbar
windowpreview, only certain methods and attributes need to be implemented.
... drawthumbnail() invoked by the taskbar preview when it needs to draw the thumbnail in the taskbar's application preview
window.
...And 4 more matches
Using js-ctypes
on
windows, for example, you might load the system user32 library like this: var lib = ctypes.open("user32.dll"); on mac os x, you can load the core foundation library from the core foundation framework like this: var corefoundation = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); the returned object is a library object that you use to declare functions and data types for use with ...
...
windows on
windows, the following locations are searched for the library, in this order: the application's directory.
... the
windows directory.
...And 4 more matches
ctypes
winlasterror number|undefined the value of the latest
windows error.
... similar to getlasterror under
windows, available only for
windows.
... stdcall_abi used for calling functions declared with stdcall on
windows.
...And 4 more matches
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).
...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 that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </pref
window> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
...And 4 more matches
LocalFileSystem - Web APIs
the methods are implemented by
window and worker objects.
... creating new storage you request access to a sandboxed file system by calling
window.requestfilesystem().
...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.
...And 4 more matches
Online and offline events - Web APIs
firefox 41 updates this property when the os reports a change in network connectivity on
windows, linux, and os x.
...additionally, the events bubble up from document.body, to document, ending at
window.
... 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
if (
window.paymentrequest).
... 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 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.
...And 4 more matches
SubtleCrypto.importKey() - Web APIs
9agegbsubbaaibigemigbagebbdau9bd0jxdff5ov380z 9vieun2w5kjdz3hbuadencxliamsoquktffaou71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k6vluqta+jvcwigxciaukoethcngzdkcrd4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb804g6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using
window.atob().
...aqadpjw 2g+syd1ui0b6kjov2cruwipwpff8hbfvwv8q9yc2yd5hcnykvl0iaiyn+sdak/rv 8dc5eilzci4efucbyg4c9o88qz7bs14dxsfapty8p/twoihvvjladf743lgm/jlq cdpubua3hlszuhkm3bbskd7q9ngkjv3+ybyo4/fl+fkyra8j9ypa2n0iw53lfb3b gqidaqab -----end public key----- just as with pkcs #8, to get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using
window.atob().
... const rawkey =
window.crypto.getrandomvalues(new uint8array(16)); /* import an aes secret key from an arraybuffer containing the raw bytes.
...And 4 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.
...//myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports
windows and mac, but it would be straightforward to add support for linux.
...And 3 more matches
File I/O - Archive of obsolete content
createinstance(components.interfaces.nsilocalfile); file.initwithpath("/home"); note: the path should be in the "native" form (for example"c:\\
windows").
... the user's desktop directory (for example ~/desktop on linux or mac os x, c:\documents and settings\username\desktop on
windows).
... profld f local settings on
windows; where the network cache and fastload files are stored.
...And 3 more matches
Adding sidebars - Archive of obsolete content
« previousnext » the sidebar in firefox is a relatively large and flexible space to add rich interfaces without requiring new
windows or complicated overlays.
... 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.
...And 3 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
some urls are listed below: url in firefox url in seamonkey overlays chrome://browser/content/browser.xul chrome://navigator/content/navigator.xul main browser
window chrome://browser/content/pageinfo/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info
window chrome://browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog urls added in 2.1 url in firefox url in seamonkey ...
...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=...
..."myext-menu"> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </
window> instead of <hbox id="urlbar-icons"> <button type="menu"> <menupopup> <menuitem label="menuitem"/> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </button> </hbox> technical note: the code that opens the url history popup just looks for any menupopup, so it goes wrong if you add your own.
...And 3 more matches
Signing an XPI - Archive of obsolete content
introduction this article describes how to sign your own firefox extensions with a code-signing certificate on a
windows platform.
...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.
...for
windows you'll want the nspr-4.6.zip package in the v4.6/winnt5.0_opt.obj/ folder.
...And 3 more matches
Adding preferences to an extension - Archive of obsolete content
register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("extensions.stockwatcher2."); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshinformation();
window.setinterval(this.refreshinformation, 10*60*1000); } }, our object has two member variables.
... 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.
... 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.
...And 3 more matches
Download Manager preferences - Archive of obsolete content
browser.download.manager.closewhendone a boolean value indicating whether or not the downloads
window should close automatically when downloads are completed.
... browser.download.manager.focuswhenstarting a boolean value that indicates whether or not to focus the download manager
window when a download begins.
...on
windows xp sp2 and
windows vista, this value also indicates whether downloaded files trigger a security warning upon launch.
...And 3 more matches
Modularization techniques - Archive of obsolete content
on
windows they expand to virtual nsresult __stdcall and virtual type __stdcall for com compatibility reasons.
...on
windows you can use the programs uuidgen and guidgen, which ship with visual c++, to generate ids.
...a simple program called regfactory.exe (on
windows) or regfactory (on unix) can be used to register self-registering dlls.
...And 3 more matches
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.
...And 3 more matches
Creating XPI Installer Modules - Archive of obsolete content
the barley package the barley package is a simple xul
window with a couple of buttons and an image element.
...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.
...the barley package ui is a single xul
window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <
window title="barley
window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/>...
...And 3 more matches
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.
... top the panel is shown in front of all other normal
windows, including those of other applications.
...And 3 more matches
OpenClose - Archive of obsolete content
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.
... 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.
...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.
...And 3 more matches
Providing Command-Line Options - Archive of obsolete content
example the below example component implements two command line parameters: firefox.exe -myapp opens a chrome
window for my application.
... firefox.exe -viewapp url opens a chrome
window for my application and passes it an nsiuri object.
...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.
...And 3 more matches
Code Samples - Archive of obsolete content
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: const url = "mailto://" open an application
window to open one of the application's
windows, use code like this.
... if the
window already exists, this code just focusses it.
...And 3 more matches
Adding HTML Elements - Archive of obsolete content
adding html elements to a
window in addition to all of the xul elements that are available, you can also add html elements directly within a xul file.
... you can actually use any html element in a xul file, meaning that java applets and tables can be placed in a
window.
...the attribute below should be added to the
window tag of the xul file, or to the outermost html element.
...And 3 more matches
The Chrome URL - Archive of obsolete content
example: chrome://messenger/content/messenger.xul the example here refers to the messenger
window.
...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.
...And 3 more matches
The Implementation of the Application Object Model - Archive of obsolete content
it is an xml-based language for describing the contents of
windows and dialogs.
...where html describes the contents of a single document, xul describes the contents of an entire
window (which could itself contain multiple html documents).
...in a similar fashion, xul's content tree for a single
window is represented as a set of objects that can be accessed and manipulated.
...And 3 more matches
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('
window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="...
...enuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </
window> in this file, the lowest-down, or "leaf" elements are the menuitems.
...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 the root
window element itself can all take advantage of this.
...And 3 more matches
iframe - Archive of obsolete content
attributes showcaret, src, type, transparent properties accessibletype, contentdocument, content
window, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshme...
...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.
...And 3 more matches
XULRunner 2.0 Release Notes - Archive of obsolete content
installing xulrunner mozilla provides xulrunner for
windows, mac os x, and linux, in english.
... 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).
...And 3 more matches
Archived Mozilla and build documentation - Archive of obsolete content
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 asserts in debug builds of mozilla for
windows.
...most of these services are available via the dom
window object as
window.crypto.
...And 3 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.
... description on mac os, the
window field of an np
window structure points to an np_port object, which is allocated by the browser.
...And 3 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
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.
... 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.
...And 3 more matches
Archive of obsolete content
.htaccess ( hypertext access ) file accessing : htaccess files can be opened using any text editor, like
windows notepad, vin, sublime text editor or any other.
... 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.
... web standards the web standards project
windows media in netscape 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.
...And 3 more matches
Dealing with files - Learn web development
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...
...for more specific information covering your version of
windows, you can search on the web.
...And 3 more matches
A bird's-eye view of the Mozilla 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 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.
... user interface (ui) widgets and services the x
window system toolkit defines the termwidget as a pre-defined object that encapsulates both the command actions and data associated with a graphical user interface (gui) control.
...And 3 more matches
Creating Custom Events That Can Pass Data
var event = document.createevent("nsdommyevent"); event.initevent("nsdommyevent", true, true);
window.dispatchevent(event); dispatching your event in c++ the following shows how to dispatch your event in c++: nscomptr<nsi
windowwatcher> wwatcher (do_getservice("@mozilla.org/embedcomp/
window-watcher;1")); // the
window watcher will be able to give me a handle to the
window nscomptr<nsidom
window> a
window; // a handle to the
window nscomptr<nsidomdocument> adoc; // a handl...
...e to the document nscomptr<nsidomeventtarget> t
window; // the target
window (really the same
window as above but you need // a different inteface :/ nscomptr<nsidomevent> event; //this will be the event we throw.
... wwatcher->getactive
window(getter_addrefs(a
window)); //get the active
window.
...And 3 more matches
Storage access policy: Block cookies from trackers
dom storage: localstorage:
window.localstorage: read and write attempts throw a securityerror exception.
... prior to firefox 70:
window.localstorage is null.
... 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.
...And 3 more matches
Browser API
browser api concepts and usage the browser api consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser
window to the embedded content.
... this means that
window.top,
window.parent,
window.frameelement, etc.
... htmliframeelement.getcontentdimensions() retrieves the x and y dimensions of the content
window.
...And 3 more matches
Encodings for localization files
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.
... toolkit/installer/
windows/install.it a
windows codepage.
...And 3 more matches
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.
... 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.
...And 3 more matches
NSPR build instructions
prerequisites on
windows, the nspr build system needs gnu make and a unix command-line utility suite such as mks toolkit, cygwin, and msys.
... --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.
...And 3 more matches
NSS_3.12_release_notes.html
ation of its 'data' buffer fails bug 327529: can't pass 0 as an unnamed null pointer argument to cert_createrdn 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 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.
...And 3 more matches
Components.utils.cloneInto
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.
...example this add-on script creates an object, clones it into the content
window and makes it a property of the content
window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; content
window.addonscriptobject = cloneinto(addonscriptobject, content
window); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(
window.addonscriptobject.greeting); // "hello from ad...
...d-on" }, false); of course, you don't have to assign the clone to the
window itself: you can assign it to some other object in the target scope: content
window.foo.addonscriptobject = cloneinto(addonscriptobject, content
window); you can also pass it into a function defined in the page script.
...And 3 more matches
IAccessible2
length_is( nrelations)] iaccessiblerelation relations, [out] long nrelations ); hresult role([out] long role ); hresult scrollto([in] enum ia2scrolltype scrolltype ); hresult scrolltopoint([in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] hresult states([out] accessiblestates states ); [propget] hresult uniqueid([out] long uniqueid ); [propget] hresult
windowhandle([out] hwnd
windowhandle ); methods attributes() returns the attributes specific to this iaccessible2 object, such as a cell's formula.
...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.
...
windowhandle() returns the
window handle for the parent
window which contains this object.
...And 3 more matches
nsIDeviceMotion
method overview void addlistener(in nsidevicemotionlistener alistener); void add
windowlistener(in nsidom
window a
window); native code only!
... void removelistener(in nsidevicemotionlistener alistener); void remove
windowlistener(in nsidom
window a
window); native code only!
... native code only!add
windowlistener sets the nsiaccelerometer as the source for mozorientation events on the specified dom
window.
...And 3 more matches
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...
... download_blocked_policy 9
windows specific: request was blocked by zone policy settings.
... void open( in nsidom
window aparent, in nsidownload adownload ); parameters aparent the parent, or opener, of the front end.
...And 3 more matches
nsIParentalControlsService
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.
...talcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview void log(in short aentrytype, in boolean aflag, in nsiuri asource, [optional] in nsifile atarget); boolean requesturioverride(in nsiuri atarget, [optional] in nsiinterfacerequestor a
windowcontext); boolean requesturioverrides(in nsiarray atargets, [optional] in nsiinterfacerequestor a
windowcontext); attributes attribute type description blockfiledownloadsenabled boolean true if the current user account's parental controls restrictions include the blocking of all file downloads.
... boolean requesturioverride( in nsiuri atarget, in nsiinterfacerequestor a
windowcontext optional ); parameters atarget the uri to be overridden.
...And 3 more matches
nsITaskbarPreview
widget/public/nsitaskbarpreview.idlscriptable this interface is used on microsoft
windows as a common interface for both
window and tab taskbar previews.
...instead, you use nsitaskbartabpreview or nsitaskbar
windowpreview as appropriate.
... 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.
...And 3 more matches
nsIWebBrowser
the interface may also be used at runtime to obtain the content dom
window and from that the rest of the dom.
...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 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.
...And 3 more matches
nsIWebProgress
the nsiwebprogress interface is used to add or remove nsiwebprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom
window).
... nsiwebprogress instances may be arranged in a parent-child configuration, corresponding to the parent-child configuration of their respective dom
windows.
... however, in some cases a nsiwebprogress instance may not have an associated dom
window.
...And 3 more matches
XPCOM Interface Reference
verteroutputstreamnsicookiensicookie2nsicookieacceptdialognsicookieconsentnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchrome
windownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositi...
...onerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjs
windownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstorage
windownsidomuserdatahandlernsidom
windownsidom
window2nsidom
windowinternalnsidom
windowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomx...
...sgcustomcolumnhandlernsimsgdbhdrnsimsgdbviewnsimsgdbviewcommandupdaternsimsgdatabasensimsgfilternsimsgfiltercustomactionnsimsgfilterlistnsimsgfoldernsimsgheaderparsernsimsgidentitynsimsgincomingservernsimsgmessageservicensimsgprotocolinfonsimsgruleactionnsimsgsearchcustomtermnsimsgsearchnotifynsimsgsearchscopetermnsimsgsearchsessionnsimsgsearchtermnsimsgsearchvaluensimsgsendlaternsimsgthreadnsimsg
windownsimsg
windowcommandsnsimutablearraynsinavbookmarkobservernsinavbookmarksservicensinavhistorybatchcallbacknsinavhistorycontainerresultnodensinavhistoryfullvisitresultnodensinavhistoryobservernsinavhistoryquerynsinavhistoryqueryoptionsnsinavhistoryqueryresultnodensinavhistoryresultnsinavhistoryresultnodensinavhistoryresultobservernsinavhistoryresulttreeviewernsinavhistoryresultviewobservernsinavhist...
...And 3 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
components.utils.import('resource://gre/modules/jsdebugger.jsm'); adddebuggertoglobal(
window); (function () { // the debugger we'll use to observe a tab's allocation.
... var dbg; // start measuring the selected tab's main
window's memory // consumption.
...
window.demotrackallocations = function() { dbg = new debugger; // this makes hacking on the demo *much* more // pleasant.
...And 3 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.
... command
windows macos linux delete the selected node delete delete delete undo delete of a node ctrl + z cmd + z ctrl + z redo delete of a node ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y move to next node (expanded nodes only) down arrow down arrow down arrow move to previous node up arrow up arrow up arrow move to first node in the tree.
...And 3 more matches
Background Tasks API - Web APIs
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 your callback needs to change the dom, it should use
window.requestanimationframe() to schedule that.
...
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.
...And 3 more matches
characteristic - Web APIs
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).
... 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
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).
... 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
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).
... 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
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).
... 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
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).
... 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
Advanced animations - Web APIs
again,
window.requestanimationframe() helps us to control the animation.
... var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf =
window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf =
window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) {
window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly.
...epath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf =
window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf =
window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) {
window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertic...
...And 3 more matches
GlobalEventHandlers.onerror - Web APIs
error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at
window and
window.onerror() is invoked (as well as handlers attached by
window.addeventlistener (not only capturing)).
...these error events do not bubble up to
window, but (at least in firefox) can be handled with a
window.addeventlistener configured with usecapture set to true.
... syntax for historical reasons, different arguments are passed to
window.onerror and element.onerror handlers (as well as on error-type
window.addeventlistener handlers).
...And 3 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
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 ????).
... 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.
...And 3 more matches
Working with the History API - Web APIs
the referrer will be the url of the document whose
window is this at the time of creation of the xmlhttprequest object.
... 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.
...in contrast, setting
window.location keeps you at the same document only if you modify only the hash.
...And 3 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.
... 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.
...And 3 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ 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.
... 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.
...unwrap the key return
window.crypto.subtle.unwrapkey( "raw", // import format wrappedkeybuffer, // arraybuffer representing key to unwrap unwrappingkey, // cryptokey representing key encryption key "aes-kw", // algorithm identifier for key encryption key "aes-gcm", // algorithm identifier for key to unwrap true, // extractability of key to unwrap ["e...
...And 3 more matches
Visual Viewport API - Web APIs
the visual viewport api provides an explicit mechanism for querying and modifying the properties of the
window's visual viewport.
... to access a
window's visual viewport, you can obtain a visualviewport object from the
window.visualviewport property.
... accessing the api
window.visualviewport read only a read-only reference to the
window's visualviewport object.
...And 3 more matches
WebGL best practices - Web APIs
2) compute the number of pixels covered by a maximized browser
window.
...(
window.innerwidth * devicepixelratio) * (
window.innerheight *
window.devicepixelratio) 3) the per-pixel vram budget is (1) divided by (2), and is a constant.
... 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.
...And 3 more matches
Web Workers API - Web APIs
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.
...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.
...And 3 more matches
XRSession.requestAnimationFrame() - Web APIs
the xrsession method requestanimationframe(), much like the
window method of the same name, schedules a callback to be executed the next time the browser is ready to paint the session's virtual environment to the xr display.
... 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.
...this example demonstrates a design pattern that ensures seamless transition between non-immersive animations created via
window.requestanimationframe and immersive xr animations.
...And 3 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
z-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(
windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-
window-dragging -moz-
window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-
window-button-box -moz-
window-button-box-maximized -moz-
window-button-close -moz-
window-button-maximize -moz-
window-button-minimize -moz-
window-button-restore -moz-
window-titlebar -moz-
window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scroll...
...-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview
window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
...And 3 more matches
Browser detection using the user agent - HTTP
var hastouchscreen = 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.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use
window.innerwidth and
window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }).
...internet explorer (on
windows) and webkit (on ios) are two perfect examples.
...And 3 more matches
Large-Allocation - HTTP
a large-allocation header was ignored due to the presence of
windows which have a reference to this browsing context through the frame hierarchy or
window.opener.
... this error means that the document was not loaded at the top level of an user-opened or noopener-opened tab or
window.
... the document with the large-allocation header was loaded in a
window which was opened by
window.open(), <a target="_blank"> or other similar methods without rel="noopener" or the "noopener" feature being set.
...And 3 more matches
Image file type and format guide - Web media technologies
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.
... mime type image/bmp file extension(s) .bmp specification no specification; however, microsoft provides general documentation of the format at docs.microsoft.com/en-us/
windows/desktop/gdi/bitmap-storage browser compatibility all versions of chrome, edge, firefox, internet explorer, opera, and safari maximum dimensions either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version supported color modes color mode bits per component (d) description ...
...bmp is included under the
windows metafile format (.wmf).
...And 3 more matches
dev/panel - Archive of obsolete content
this is closely modeled on
window.postmessage.
...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
stylesheet/utils - Archive of obsolete content
globals functions loadsheet(
window, uri, type) synchronously loads a style sheet from uri and adds it to the list of additional style sheets of the document.
... the sheets added takes effect immediately, and only on the document of the
window given.
... parameters
window : nsidom
window uri : string, nsiuri} type : string the type of the sheet.
...And 2 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...
...if you use mylistener for more than one tab/
window, // use aprogress.dom
window to obtain the tab/
window which triggered the change.
...schange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <browser> or a <tabbrowser> element using addprogresslistener, for example for firefox put the following code in a load listener of a main
window: gbrowser.addprogresslistener(mylistener); when used with a browser, the second argument is a mask which determines the type of events that will be received.
...And 2 more matches
Code snippets - Archive of obsolete content
window code opening and manipulating
windows toolbar toolbar related code sidebar sidebar related code forms forms related code xml code used to parse, write, manipulate, etc.
... 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.
... 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.
...And 2 more matches
Appendix A: Add-on Performance - Archive of obsolete content
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.
...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.
...init : function() { let that = this; // run this later and let the
window load.
...And 2 more matches
Custom XUL Elements with XBL - Archive of obsolete content
you should see a new item in the hello world menu, that opens a binding test
window where you can add "persons" to a list.
...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.
...this is very powerful: it allows you to change almost any aspect of the interface of any xul
window.
...And 2 more matches
XUL user interfaces - Archive of obsolete content
for example, xul provides specialized
windows like dialogs and wizards, as well as status bars, menus, tool bars, and even browsers.
...copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype
window> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> ...
...day" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c" oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </
window> make a new css file, style7.css.
...And 2 more matches
Creating a dynamic status bar extension - Archive of obsolete content
we use the
window.addeventlistener() dom function to tell firefox to call the stockwatcher.startup() function when a new browser
window is opened:
window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); our new extension has two primary functions: startup() and refreshinformation().
...startup() the startup() function is called when a new browser
window is opened.
... we end up reloading data from each of the
windows once in 10 minutes - fixing this by creating a js component responsible for communication with the server is a good idea for one of the future articles startup: function() { this.refreshinformation();
window.setinterval(this.refreshinformation, 10*60*1000); }, this starts by calling our refreshinformation() function, which is responsible for fetching and displaying stock ticker information in the status bar panel.
...And 2 more matches
Getting the page URL in NPAPI plugin - Archive of obsolete content
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.
...npvariant variantvalue; // get the location property from the
window object (which is another object).
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
font management tool firecast digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from global stats fossamail email client for
windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner foxkeh clock clock frizione javascript development, testing and deployment environment uses mozilla rhino geckofx embeddable gecko ...
... 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...
...�a free software computer, easy and preinstalled” open mashups development tool openoffice.org office suite uses nss openswan implementation of ipsec for linux uses nss orca browser web browser gecko-based version of avant browser pale moon web browser optimized browser developed by moonchild productions for gnu/linux &
windows platforms, originally forked from firefox palo suite excel extension uses prism partygaming online gaming product uses gecko pencil tool for making diagrams and gui prototyping available as a firefox extension or a standalone app pentaho bi suite commercial open source business intelligence uses xul and mozilla rhino persevere ...
...And 2 more matches
Creating a Microsummary - Archive of obsolete content
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').
...to do so, we need to put it up on the web and then create a javascript link on some web page that calls firefox's
window.sidebar.addmicrosummarygenerator() method to download and install the generator.
...And 2 more matches
Drag and Drop Example - Archive of obsolete content
next, a palette will be added to the right side of the
window.
...the values of the pagex and pagey properties store the mouse pointer coordinates on the
window where the drop occured.
...it works here because the board is at the top-left corner of the
window.
...And 2 more matches
JavaScript crypto - Archive of obsolete content
most of these services are available via the dom
window object as
window.crypto.
...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.
...<script> function onsmartcardchange() {
window.location.reload(); } function register() {
window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsma...
...And 2 more matches
Monitoring downloads - Archive of obsolete content
the result is a
window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension.
... 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.
...And 2 more matches
PyDOM - Archive of obsolete content
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.
...for example, when a top-level
window has something like: <
window ...
...id("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are the
window itself.
...And 2 more matches
close - Archive of obsolete content
the close event is executed when a request has been made to close the
window when the user presses the close button.
... if an event handler is placed on the
window element, it can be prevented to close (see example below).
...the unload event should be used to capture all attempts to unload the
window.
...And 2 more matches
ContextMenus - Archive of obsolete content
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.
...when using the keyboard, the context is the element in the
window that is currently focused.
...this might be called while initializing a
window during a load event for example.
...And 2 more matches
The Joy of XUL - Archive of obsolete content
for this reason, xul is oriented toward application artifacts such as
windows, labels, and buttons instead of pages, heading levels, and hypertext links.
...the calendar was initially developed exclusively for linux but was successfully ported to both macintosh and
windows within a week.
...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.
...And 2 more matches
Things I've tried to do with XUL - Archive of obsolete content
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.
...vlad: the boxobject width/height are the actual width and height of the box, regardless of the actual visible portion of the box (clipped by the
window borders, for example).
...And 2 more matches
Custom toolbar button - Archive of obsolete content
it adds a stylesheet to the toolbar customization
window.
...ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager
window.
...press done to close the toolbar palette
window.
...And 2 more matches
Box Model Details - Archive of obsolete content
here the
window should appear just over 200 pixels wide.
...a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max...
...-height: 30px;"/> <button label="find"/> </vbox> </
window> here, two vertical boxes are created, one for the textbox and the other for the check box and button.
...And 2 more matches
Creating a Skin - Archive of obsolete content
window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } the inner box of the
window (which actually surrounds all of the
window content) has been changed to hav...
... you can see this blue behind the tab strip and along the bottom of the
window.
... the first rule above (for '
window > box') specifies that the child box of the
window has a different color.
...And 2 more matches
More Event Handlers - Archive of obsolete content
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.
...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.
...And 2 more matches
Templates - Archive of obsolete content
try adding a bookmark in the browser while you have the example
window open.
...(you may have to focus the
window for it to change.) container and datasources the template itself is placed inside a vertical box.
... rule example the following example demonstrates the earlier example with two rules: example 4 : source <
window id="example-
window" title="bookmarks list" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf...
...And 2 more matches
XUL FAQ - Archive of obsolete content
troubleshooting pref
window-based options
windows this ought to be on a separate page, preferences system troubleshooting.
...some things to check when you have issues with your pref
window-based options
window: does each prefpane have a unique id?
... are there any elements inside the <pref
window>, before the <prefpane>s?
...And 2 more matches
preference - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the
window object event object example <?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"> <script type="text/javascript"> function myfunct...
...ion(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </
window> readonly type: boolean if set to true, then the user cannot change the value of the element.
...this is true if either the element has an instantapply attribute set to true, or the <pref
window>'s instantapply property is true.
...And 2 more matches
tabbrowser - Archive of obsolete content
note: starting in firefox 3 (xulrunner/gecko 1.9), this is only used in the main firefox
window and cannot be used in other xul
windows by third-party applications or extensions.
... attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, content
window, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, ...
... content
window type: todo use the content
window.wrappedjsobject to obtain a dom(html)
window object currenturi type: nsiuri this read-only property contains the currently loaded url.
...And 2 more matches
Building XULRunner with Python - Archive of obsolete content
this page describes how to build and use xulrunner with the python extension on
windows and while generally useful it is written based on experiences with accessibility projects.
...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.
... 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.
...And 2 more matches
MacFAQ - Archive of obsolete content
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 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.chromeurl" that points to your new "hidden
window" as such: "chrome://myxul/content/hidden
window.xul" next take the code below and drop it in, to create the hidden
window.xul (note: the debug function and nsicommandline try/catch can be removed, all you need is the
window.arguments[0]) <?xml version="1.0"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden"
windowtype="myxul:hidden
window" title="" width="0" height="0" persist="screenx screeny width height s...
...And 2 more matches
2006-11-03 - Archive of obsolete content
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.
... 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.
...And 2 more matches
NPN_PostURL - Archive of obsolete content
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 you specify _current, _self, or _top, the response data is written to the same plug-in
window and the plug-in is unloaded.
...And 2 more matches
Building a Theme - Archive of obsolete content
the file preview.png is shown as a preview of the theme in the themes panel of the add-ons
window.
...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.
... the browser
window is: chrome://browser/content/browser.xul.
...And 2 more matches
HTML: A good basis for accessibility - Learn web development
these values cause unexpected behavior when copying or dragging links, opening links in a new tab or
window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
... external links and linking to non-html resources links that open in a new tab or
window via the target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
... 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.
...And 2 more matches
HTML: A good basis for accessibility - Learn web development
these values cause unexpected behavior when copying or dragging links, opening links in a new tab or
window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
... external links and linking to non-html resources links that open in a new tab or
window via the target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
... 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.
...And 2 more matches
Responsive design - Learn web development
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.
...when viewing the example, drag your browser
window in and out to see how this looks at different sizes.
...again, observe the result as you change the browser
window size.
...And 2 more matches
How do you upload your files to a web server? - Learn web development
our demo covers filezilla, since it's free and available for
windows, macos and linux.
... in the site manager
window, press the new site button, then fill in the site name as demozilla in the provided space.
... your
window should look something like this: now press connect to connect to the sftp server.
...And 2 more matches
How do you set up a local testing server? - Learn web development
remote files throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the html file, dragging and dropping it into the browser
window, or choosing file > open...
...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.
...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
Client-side storage - Learn web development
next, add the following to the bottom of your code:
window.onload = function() { }; we will write all of our subsequent code inside this
window.onload event handler function, called when the
window's load event fires, to make sure we don't try to use indexeddb functionality before the app has completely finished loading (it could fail if we don't).
... inside the
window.onload handler, add the following: // open our database; it is created if it doesn't already exist // (see onupgradeneeded below) let request =
window.indexeddb.open('notes_db', 1); this line creates a request to open version 1 of a database called notes_db.
... now add the following event handlers just below your previous addition — again inside the
window.onload handler: // onerror handler signifies that the database didn't open successfully request.onerror = function() { console.log('database failed to open'); }; // onsuccess handler signifies that the database opened successfully request.onsuccess = function() { console.log('database opened successfully'); // store the opened database object in the db variable.
...And 2 more matches
Handling common JavaScript problems - Learn web development
on
windows/linux) and choose the install option in the left-hand menu.
...we only have three — showheroes, block, and
window (the global scope).
...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.
...And 2 more matches
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.
... 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.
...And 2 more matches
Creating reftest-based unit tests
if the bitmaps resulting from displaying the two files in an 800x1000
window are identical, the test passes.
... step 2 open a terminal
window.
...keep in mind new tests should fit a 600x600
window so we can test on mobile platforms easier.
...And 2 more matches
Simple Instantbird build
windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you get the source, you can opt to add the progressextension to your mercurial.ini (for
windows) or .hgrc (for *nix / mac) file.
... get the source note: on
windows, you won't be able to build the instantbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
...having the source deep in a filesystem hierarchy can also cause problems with pymake builds on
windows.
...And 2 more matches
Frame script loading and lifetime
the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a
window message manager, loadframescript() may load the script multiple times, once in each applicable frame.
... 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.
...And 2 more matches
Performance
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?
... function helper(
window, action) { // ...
...And 2 more matches
Message manager overview
there are three different subtypes of frame message manager: the global message manager, the
window message manager, and the browser message manager.
... loadframescript() loads the given script into every <browser> in every browser
window.
... broadcastasyncmessage() sends the message to every <browser> in every browser
window.
...And 2 more matches
mozbrowsershowmodalprompt
the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the
window.alert(),
window.confirm(), or
window.prompt() methods.
... 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.
...And 2 more matches
Script security
normal content
windows are globals, of course, but so are chrome
windows, sandboxes, workers, the contentframemessagemanager in a frame script, and so on.
...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.
... 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.
...And 2 more matches
IPDL Tutorial
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.
... 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.
... 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 { ...
...And 2 more matches
JavaScript-DOM Prototypes in Mozilla
the prototype object that xpconnect creates for the classes that have class info are shared within a scope (
window).
... 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.
...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.
...And 2 more matches
JNI.jsm
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.
...); // 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;', ...
...And 2 more matches
OS.File.Info
(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.
...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.
...the creationdate can be obtained on
windows by winbirthdate and on mac os x by macbirthdate.
...And 2 more matches
Build instructions
use_debug_rtl: if set to 1, on
windows, causes build with debug version of the c run-time library.
...on
windows, in both debug and optimized builds, when using msvc, tells nss to put symbols in a .pdb file.
... for
windows, install the mozillabuild environment and microsoft visual studio 2010.
...And 2 more matches
Building the WebLock UI
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 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.
...And 2 more matches
Components.utils.createObjectIn
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/.
... example to create a new object in the scope of a specified dom
window, you can simply do: function genpropdesc(value) { return { enumerable: true, configurable: true, writable: true, 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, pr...
...And 2 more matches
amIWebInstallListener
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, [opt...
...ional] in pruint32 acount); note: prior to gecko 8.0, all references to nsidom
window used in this interface were nsidom
windowinternal.
...boolean onwebinstallblocked( 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.
...And 2 more matches
nsIAlertsService
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.
... 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.
...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.
...And 2 more matches
nsIClipboardDragDropHooks
hould implement nsiclipboarddragdrophooks and use the command manager to send the appropriate commands with these parameters/settings: command: cmd_clipboarddragdrophook params value type possible values "addhook" isupports nsiclipboarddragdrophooks as nsisupports "removehook" isupports nsiclipboarddragdrophooks as nsisupports note: overrides/hooks need to be added to each
window (as appropriate).
... adding them to the first
window does not enable them for every
window.
... if more than one implementation is set for a
window, the hooks will be called in the order they are added.
...And 2 more matches
nsICommandLineRunner
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.
...on
windows the character set is utf-8, not the native codepage.
... set
windowcontext() sets the
windowcontext parameter.
...And 2 more matches
nsIFilePicker
to create an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidom
window parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if ...
... void init( in nsidom
window parent, in astring title, in short mode ); parameters parent the nsidom
window parent.
... 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.
...And 2 more matches
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); ...
... void init(in nsimessenger amessengerinstance, in nsimsg
window amsg
window, in nsimsgdbviewcommandupdater acommandupdater); parameters amessengerinstance amsg
window acommandupdater sort() sorts the currently loaded messages.
...And 2 more matches
XPCOM Interface Reference by grouping
(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.
...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
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.
... 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.
..._iid_old, getter_addrefs(refp)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessibledocument> accdocnode; rv = accnode->queryinterface(iad_iid_old, getter_addrefs(accdocnode)); if(ns_failed(rv)){ return self; } rv = accdocnode->get
windowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } there is good news and bad news.
...And 2 more matches
Zombie compartments
that more fine-graned representation may look like this │ ├───28.45 mb (05.71%) -- top(https://www.google.de/, id=141) │ │ ├──13.66 mb (02.74%) -- active/
window(https://www.google.de/) │ │ │ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ │ ...
...��─0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.78%) -- cached/
window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ │ │ │ ├──0.05 mb (00.01%) ── rule-nodes │ │ │ │ ├──0.04 mb (00.01%) ── style-contexts │ │ │ │ ├──0.03 mb (00.
...oc-heap │ │ ├──1.24 mb (00.25%) ── type-pool │ │ ├──1.07 mb (00.21%) -- type-objects │ │ │ ├──1.04 mb (00.21%) ── gc-heap │ │ │ └──0.03 mb (00.01%) ── malloc-heap │ │ ├──0.23 mb (00.05%) ++ strings │ │ └──0.18 mb (00.04%) ── gc-heap-arena-admin the first line says that the
window from www.google.de is taking up 28.45 mb and futher breaks it down into zones, compartments, dom etc.
...And 2 more matches
Browser Side Plug-in API - Plugins
npn_forceredraw forces a paint message for a
windowless plug-in.
... 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.
...And 2 more matches
Using channel messaging - Web APIs
); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.content
window.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // 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.
...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.
...And 2 more matches
Examples of web and XML development using the DOM - Web APIs
<!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.
...on halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.addeventlistener("click", stopevent, false); } </script> </head> <body onload="load();"> <table id="t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the
window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with javascript (e.g., elt.style.backgroundcolor="rgb(173, 216, 230)").
... <form action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="text" value="1" /> max-width<input id="t2" type="text" value="2" /> bg-color<input id="t3" type="text" value="3" /> </p> </form> </body> </html> example 7: displaying event object properties this example uses dom methods to display all the properties of the
window.onload event object and their values in a table.
...And 2 more matches
Element: mousewheel event - Web APIs
internet explorer the value is the same as the delta value of
windows' wm_mousewheel or wm_mousehwheel.
... 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 is page scroll, i.e., the value is the same as ie on
windows.
...And 2 more matches
Fullscreen API - Web APIs
methods on the document interface document.exitfullscreen() requests that the user agent switch from full-screen mode back to
windowed mode.
... 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.
... 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.
...And 2 more matches
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.
... 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.
...And 2 more matches
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.
...closing the
window via
window manager?
...And 2 more matches
HashChangeEvent - Web APIs
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.
... 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.
...And 2 more matches
KeyboardEvent - Web APIs
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.
...they can be delivered to any object which implements globaleventhandlers, including element, document, and
window.
...on
windows and linux, these keys dispatch only the keydown and keyup events.
...And 2 more matches
Navigator.onLine - Web APIs
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.
...And 2 more matches
SubtleCrypto.encrypt() - Web APIs
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.
... function getmessageencoding() { const messagebox = document.queryselector(".aes-ctr #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // counter will be needed for decryption counter =
window.crypto.getrandomvalues(new uint8array(16)); return
window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(12345); //crypto functions are wrapped in promises so we have to use await and make sure the function that //contains this code is an async function //encrypt function wants a cr...
...yptokey object const key_encoded = await crypto.subtle.importkey( "raw", key.buffer, 'aes-ctr' , false, ["encrypt", "decrypt"]); const encrypted_content = await
window.crypto.subtle.encrypt( { name: "aes-ctr", counter: iv, length: 128 }, key_encoded, data ); //uint8array console.log(encrypted_content); aes-cbc this code fetches the contents of a text box, encodes it for encryption, and encrypts it using aes in cbc mode.
...And 2 more matches
WebGL model view projection - Web APIs
webglbox constructor the constructor looks like this: function webglbox() { // setup the canvas and webgl context this.canvas = document.getelementbyid('canvas'); this.canvas.width =
window.innerwidth; this.canvas.height =
window.innerheight; this.gl = mdn.createcontext(canvas); var gl = this.gl; // setup a webgl program, anything part of the mdn object is defined outside of this article this.webglprogram = mdn.createwebglprogramfromids(gl, 'vertex-shader', 'fragment-shader'); gl.useprogram(this.webglprogram); // save the attribute and uniform locations this.posit...
... resize the
window and watch as the box skews out of shape.
...for one, it gets skewed whenever we resize our
window.
...And 2 more matches
Using the Web Storage API - Web APIs
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.
... browsers that support localstorage have a property on the
window object named localstorage.
... here is a function that detects whether localstorage is both supported and available: function storageavailable(type) { var storage; try { storage =
window[type]; var x = '__storage_test__'; storage.setitem(x, x); storage.removeitem(x); return true; } catch(e) { return e instanceof domexception && ( // everything except firefox e.code === 22 || // firefox e.code === 1014 || // test name field too, because code might not be present ...
...And 2 more matches
Functions and classes available to Web Workers - Web APIs
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, 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 wind...
...And 2 more matches
Obsolete features - Web APIs
this page lists the obsolete
windowfeatures parameter of
window.open function.
...the
windows taskbar, as well as the titlebar and the status bar of the
window are not visible, nor accessible when fullscreen is enabled in msie 5.x.
... personalbar obsolete since gecko 76 if this feature is on, then the new secondary
window renders the personal toolbar in netscape 6.x, netscape 7.x and mozilla browser.
...And 2 more matches
DOM onevent handlers - Developer guides
non-element objects event handlers can also be set with properties on non-element objects that generate events, like
window, document, xmlhttprequest, and others.
...etattribute method </strong> '); el.setattribute("onclick", 'anchoronclick(event)'); log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`now even the html attribute has changed: <code> ${el.getattribute("onclick")} </code><br>`); result for historical reasons, some attributes/properties on the <body> and <frameset> elements instead set event handlers on their parent
window object.
... 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() { … }.
...And 2 more matches
Printing - Developer guides
note: you can also use
window.onbeforeprint and
window.onafterprint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred.
... open and automatically close a popup
window when finished if you want to be able to automatically close a popup
window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript
window close example </title> <script type="text/javascript"> function popuponclick() { my_
window =
window.open('', 'my
window', 'status=1,width=350,height=150'); my_
window.document.write('<html><head><title>print me</title></head>'); my_
window.document.write('<body onafterprint="self.close()">'); my_
window.document.write('<p>when you print this
window, it will close ...
...afterward.</p>'); my_
window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the
window to print.
...And 2 more matches
<input type="button"> - HTML: Hypertext Markup Language
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.
...den code 2 <fieldset> <legend>button group</legend> <input type="button" value="button 1"> <input type="button" value="button 2"> <input type="button" value="button 3"> </fieldset> const button = document.queryselector('input'); const fieldset = document.queryselector('fieldset'); button.addeventlistener('click', disablebutton); function disablebutton() { fieldset.disabled = true;
window.settimeout(function() { fieldset.disabled = false; }, 2000); } note: firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button> across page loads.
... 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
Using the application cache - HTML: Hypertext Markup Language
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.
... 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).
...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.
...And 2 more matches
Firefox user agent string reference - HTTP
windows, mac, linux or android), and whether or not it's a mobile phone.
...
windows
windows user agents have the following variations, where x.y is the
windows nt version (for instance,
windows nt 6.1).
...
windows version gecko user agent string
windows nt on x86 cpu mozilla/5.0 (
windows nt x.y; rv:10.0) gecko/20100101 firefox/10.0
windows nt on x64 cpu mozilla/5.0 (
windows nt x.y; win64; x64; rv:10.0) gecko/20100101 firefox/10.0 macintosh here, x.y is the version of mac os x (for instance, mac os x 10.6).
...And 2 more matches
Web audio codec guide - Web media technologies
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.
...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.
...binaries are available for macos, linux, and
windows.
...And 2 more matches
io/file - Archive of obsolete content
this means that on
windows paths are specified 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.
... note that if you do decide to hardcode
windows-style paths, be sure to escape backslashes in strings.
ui/toolbar - Archive of obsolete content
icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content
window: to destroy a toolbar call its destroy() method.
... 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.
...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.
Storing annotations - Archive of obsolete content
the user will be able to click links in the panel, but we want to open them in the main browser
window rather than the panel.
...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.
... 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.
Canvas code snippets - Archive of obsolete content
this method gets a reference to the iframe's
window and draws this
window to a canvas object.
... 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.remotepageloaded, true); //append to the end of the page
window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the
window object you need for the canvas // draw
window method var remote
window = ldrframe.content
window; //draw canvas var canvas = document.createelement('canvas'); canvas.style.width = remotecanvas.canvas_width + 'px'; canvas.style.height = remotecanvas.canvas_height + 'px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var
windowwi...
...dth =
window.innerwidth - 25; var
windowheight =
window.innerheight; var ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, remotecanvas.canvas_width, remotecanvas.canvas_height); ctx.save(); ctx.scale(remotecanvas.canvas_width /
windowwidth, remotecanvas.canvas_height /
windowheight); ctx.draw
window(remote
window, 0, 0,
windowwidth,
windowheight, 'rgb(255, 255, 255)'); ctx.restore(); }; usage: var remotecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base64 strings the following code gets a remote image and converts its content to data uri scheme.
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); } ...
... 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
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.
JavaScript Daemons Management - Archive of obsolete content
|*| |*| https://developer.mozilla.org/docs/dom/
window.setinterval |*| |*| syntax: |*| var timeoutid =
window.settimeout(func, delay, [param1, param2, ...]); |*| var timeoutid =
window.settimeout(code, delay); |*| var intervalid =
window.setinterval(func, delay[, param1, param2, ...]); |*| var intervalid =
window.setinterval(code, delay); |*| \*/ /* if (document.all && !
window.settimeout.ispolyfill) { var __nativest__ =
window.settimeout; ...
...
window.settimeout = function (vcallback, ndelay) { var aargs = array.prototype.slice.call(arguments, 2); return __nativest__(vcallback instanceof function ?
... function () { vcallback.apply(null, aargs); } : vcallback, ndelay); };
window.settimeout.ispolyfill = true; } if (document.all && !
window.setinterval.ispolyfill) { var __nativesi__ =
window.setinterval;
window.setinterval = function (vcallback, ndelay) { var aargs = array.prototype.slice.call(arguments, 2); return __nativesi__(vcallback instanceof function ?
... function () { vcallback.apply(null, aargs); } : vcallback, ndelay); };
window.setinterval.ispolyfill = true; } */ daemon-safe.js what follows is the module which extends the daemon constructor with a daemon.safe sub-system.
Extension Packaging - Archive of obsolete content
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.
...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.
... 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.
Extension Theming Guidelines - Archive of obsolete content
branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new
window that your extension adds and for every
window that your extension overlays content into be sure to add a stylesheet from your chrome skin package.
... 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 run a risk of conflicting with content that other extensions add to the
window.
Extension Etiquette - Archive of obsolete content
global variables, such as top-level declarations on scripts loaded into shared
windows or web pages.
... ids and class names in html and xul documents, when extensions add elements to web pages or browser
windows.
...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.
...for a large number of options for your extension, break the options
window into multiple pages (tabs) that are well labeled.
Install Manifests - Archive of obsolete content
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.
...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> ...
... 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.
...currently, the ($appdir)/extensions folder and the registry install location under hkey_local_machine (see adding extensions using the
windows registry for details) are restricted.
Offering a context menu for form controls - Archive of obsolete content
this article describes how an extension can override this change in a particular
window, enabling context menus to work on form controls.
... 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.
...
window.addeventlistener("load", 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 i...
... 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
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.
...first, select the menu item tools:mozlab:open mozunit runner to bring up the mozunit
window.
...fixme: not sure we should talk about this tool installation
windows users can take advantage of a self-contained version created by soutaro matsumoto called “gonzui for win32” http://soutaro.com/gonzui-win32/ run it as follows: download gonzui-win32-1.2.2.zip and expand it into a suitable directory.
Adding Events and Commands - Archive of obsolete content
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.
... custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between
window xul and web page content.
...commands and broadcasters also facilitate working with complex form
windows and dialogs.
Connecting to Remote Content - Archive of obsolete content
let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) {
window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) {
window.alert("error status: " + aevent.target.status); }; request.open("get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
... 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.
... 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.
...this can be a lot of work because there is a lot of web activity in a normal firefox
window, so use it sparingly.
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", ...
... 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 giving them a 'key' attribute; for example: " + capturednodes.mytestbutton123); another example this here is another example of using jsontodom but in the html ...
...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("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.
Performance best practices in extensions - Archive of obsolete content
improving startup performance extensions are loaded and run whenever a new browser
window opens.
... that means every time a
window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view.
...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.
Session store API - Archive of obsolete content
firefox 3.6 knows how to save session store data when the last browser
window closes, even if there are still other
windows open.
... new
windows are opened as required (one for each
window that was saved in the session store), and cookies and the list of recently closed tabs are restored.
... 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.
... 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.
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(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) { nsresult rv; // this is not the real component.
...#include <mach-o/loader.h> #include <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.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
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.
...resizing the browser
window often resulted in one column getting pushed to the bottom of another.
...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.
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
if you're wondering how microsoft used to support the np api, look for a file called plugin.ocx in your
windows system directory.
...it is advisable to rename the control and not to install somewhere like the
windows directory where it is likely to be overridden.
... 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.
... still to do only hosts
windowed plug-ins.
Structure of an installable bundle - Archive of obsolete content
(>=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) ...
... 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.
...for example, if a plugin vendor wanted to make a plugin available for consumer computers running linux(of the form: /platform/linux*/), macintosh(of the form: /platform/darwin*/), and
windows(of the form: /platform/win*/), it would provide 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 platf...
...orm-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.manifest platform/winnt/chrome/mytheme-win.jar the app/extension loader processes the base directory first, followed by the applicable platform directories (first /{os_target}/, then /{os_target}_{target_xpcom_abi}/).
Getting Started - Archive of obsolete content
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.
...skin\classic\communicator communicator contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences
window.
...skin\classic\help help contains all the files for theming the help dialog
window.
...you can also just open the themes
window in mozilla and drag and drop your .jar file onto it.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
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.
... skin\classic\browser browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences
window.
... skin\classic\help help contains all the files for theming the help dialog
window.
... you can also just open the themes
window in mozilla and drag and drop your .jar file onto it.
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.
...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.
...nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(editingsession)); if (editingsession) editingsession->make
windoweditable(dom
window, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no type is specified; it allows for all html tags to be inserted) "htmlmail" (this is much like "html" except there are a few editing rules/behaviors that differ such as splitting of mail quotes)...
Repackaging Firefox - Archive of obsolete content
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 pristine firefox 2 installer files (
windows .exe, mac .dmg, or linux .tar.gz) for each of the locales you need.
...you can use any zip program (winzip on
windows, zip on mac or linux, etc) to extract it.
...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.
Configuration - Archive of obsolete content
the parameters also control some of the features of the prism host
window.
...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.
...trayicon indicates that a system tray (notification area) icon should be displayed for the application on
windows: yes or no.
...currently support only on
windows in conjunction with the trayicon, causes the application to open minimized to the system tray: yes or no.
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
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.
... osdefault-jitinterpretedaggressive jit mac (os/x 10.4 intel, 2ghz dual core)tc-703 vs tc-700: 0.0%tc-703 vs flash10: 1.1% slowertc-703 vs tc-700: 17.4% fastertc-703 vs flash10: 165.3% fastertc-703 vs tc-700: 0.1% fastertc-703 vs flash10: 0.8% slower
windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 0.6% fastertc-703 vs flash10: 0.8% fastertc-703 vs tc-700: 16.4% fastertc-703 vs flash10: 148.7% fastertc-703 vs tc-700: 0.1% slowertc-703 vs flash10: 5.2% faster linux (ubuntu linux, 2.13 ghz dual core)tc-703 vs tc-700: 6.0% fastertc-703 vs flash10: 1.7% fastertc-703 vs tc-700: 89.5% fastertc-703 vs flash10: 182.0% fastertc-703 vs tc-700: 6.
... osdefault-jitinterpretedaggressive jit mac (os/x 10.4 intel, 2ghz dual core)tc-703 vs tc-700: 2.0% smallertc-703 vs tc-663: 7.8% smallertc-703 vs tc-700: 7.1% largertc-703 vs tc-663: 14.6% largertc-703 vs tc-700: 16.4% largertc-703 vs tc-663: 2.1% larger
windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 3.2% largertc-703 vs tc-663: 7.6% largertc-703 vs tc-700: 3.9% largertc-703 vs tc-663: 12.4% largertc-703 vs tc-700: 3.3% largertc-703 vs tc-663: 21.4% larger linux (ubuntu linux, 2.13 ghz dual core)n/an/an/a vm code size the following is a comparison of the current tamarin-central compiled size (tc-703) versus ...
... 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.
Venkman Internals - Archive of obsolete content
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-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.
WinReg Object - Archive of obsolete content
winreg (
windows only)
windows developers use this object to manipulate the content of the
windows registry.
...this discussion assumes you are already familiar with the
windows registry.
... for information on it, see api documentation for
windows nt or
windows 95.
...typically values in the
windows registry are strings.
browser.type - Archive of obsolete content
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.
...this boundary has a number of special effects, such as making
window.top ==
window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document.
...the
window for the primary content can be retrieved more conveniently using
window.content.
Building accessible custom components in XUL - Archive of obsolete content
<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> var gfocuscell = null; function install_handlers() { var spreadsheet =
window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else ...
...<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#" xmlns:waistate="http://www.w3.org/2005/01/wai-rdf/guistatetaxonomy#" onload="install_handlers()" > <script src="accjax.js"/> </code> by adding this javascript code and these css rules, we can tab to the spreadsheet see which cell, row header, or column header has focus click ...
...<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.
appendNotification - Archive of obsolete content
this indicates that the notification box has been removed from its
window.
... if (typeof
window === "undefined") { //if there is no
window defined, get the most recent.
... var
window=components.classes["@mozilla.org/appshell/
window-mediator;1"] .getservice(components.interfaces.nsi
windowmediator) .getmostrecent
window("navigator:browser"); } if (typeof gbrowser === "undefined") { //if there is no gbrowser defined, get it var gbrowser =
window.gbrowser; } function testnotificationbutton1callback(thenotification, buttoninfo, eventtarget) {
window.alert("button 1 pressed"); //prevent notification from closing: return true; }; function testnotificationbutton2callback(thenotification, buttoninfo, eventtarget) {
window.alert("button 2 pressed"); //do not prevent notification from closing: }; function testnotificatio...
...ncallback(reason) {
window.alert("reason is: " + reason); }; let notifybox = gbrowser.getnotificationbox(); let buttons = []; let button1 = { isdefault: false, accesskey: "1", label: "button 1", callback: testnotificationbutton1callback, type: "", // if a popup, then must be: "menu-button" or "menu".
Panels - Archive of obsolete content
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 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.
...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.
Special per-platform menu considerations - Archive of obsolete content
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.
... menu_mac_show_all selecting this item will show the
windows for all applications.
... 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.
... to change these items in firefox, overlay hidden
window.xul instead.
PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the
window that will handle keypresses for the menu.
...other keys are ignored by the menu key listener, however, the event does not propagate to the main
window.
...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.
Popup Guide - Archive of obsolete content
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.
...a popup is not created as a separate
window or file, instead it is included inside another
window or dialog.
... 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.
Adding Labels and Images - Archive of obsolete content
« previousnext » this section describes a way to add labels and images to a
window.
...label element the most basic way to include text in a
window is to use the label element.
...images xul has an element to display images within a
window.
...in the next section, we will learn how to add some input controls to a
window.
Adding Methods to XBL-defined Elements - Archive of obsolete content
methods are the functions of objects, such as
window interface's open() method loads the specified resource into the browsing context (
window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new
window is opened and the specified resource is loaded into its browsing context.">
window.open().
...the first occurs when a
window is displayed.
...the
window's onload handler is not called until after all the bindings have been attached and their constructors finished.
Creating a Wizard - Archive of obsolete content
when creating a wizard, use the wizard tag instead of the
window tag.
... the title across the top is created using the title attribute, much like one would use for regular
windows.
... an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-
window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you ...
...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.
Install Scripts - Archive of obsolete content
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.
...the component registry works somewhat like the
windows registry does.
Manifest Files - Archive of obsolete content
for example, on a
windows machine, you might use c:\testfiles create a new ascii1 file called test.manifest in the chrome directory.
... 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.
... on
windows, file urls are of the form file:///c:/files/app/, where c is the drive letter.
...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.
Progress Meters - Archive of obsolete content
<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.
...do this by adding the below line to your opening
window tag in the findfile.xul.
...source view in the next section, we will learn how to add additional elements to the
window using html.
Skinning XUL Files by Hand - Archive of obsolete content
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.
... 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.
... on to the actual global.css file: after some comments, the css file contains basic style information for the <
window> and <dialog> elements.
...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.
Splitters - Archive of obsolete content
« previousnext » we'll now look at how to add splitters to a
window.
... splitting a box there may be times when you want to have two sections of a
window where the user can resize the sections.
... an example is the mozilla browser
window, where you can change the size of the sidebar panel by dragging the bar in-between the two frames.
...it should be noted that the
window does not resize itself automatically.
Tree View Details - Archive of obsolete content
<
window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </
window> we use a simple tree here with no data in the treechildren.
... the 'init' function is called when the
window is loaded to initialize the tree.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["helium", "nitro...
...on() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(idx, column, prop) {}, getcolumnproperties: function(column, element, prop) {}, }; function init() { document.getelementbyid("elementlist").view = treeview; } ]]></script> </
window> next, we'll look in more detail at the tree box object.
XUL Accesskey FAQ and Policies - Archive of obsolete content
on
windows and unix, pressing alt+a is a convenient way to push that button.
... 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.
...there are standard accesskeys used in
windows as well, like properties.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
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.
...using context="popupid" allows access via shift+f10 on
windows and linux.
...the manage bookmarks
window in firefox 2 or the places
window in firefox 3).
... 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...
colorpicker - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the
window object event object example <?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"> <script type="text/javascript"> function myfunct...
...ion(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </
window> preference type: id connects the element to a corresponding preference.
... this attribute only has any effect when used inside a pref
window.
... type type: string if this attribute is not present, the colorpicker is displayed inside the
window.
key - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the key element defines a
window-global keyboard shortcut and must be placed inside a keyset element.
... os:
windows logo key on
windows, super or hyper key on linux.
... accel: the key used for keyboard shortcuts on the user's platform, which is control on
windows and linux, and command on mac.
...on
windows, this is the alt key, used in conjuction with an element's accesskey.
titlebar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] boxes created with the titlebar element behave just like a normal
window titlebar: when the element is clicked and dragged, the
window moves with it.
... this element can't be used to change the platform-native titlebar of normal
windows; instead, it's used to create custom titlebars for chromeless
windows.
... examples this xul file will create a hud-style
window that can be moved with the mouse.
... <?xml version="1.0"?> <
window title="movable hud
window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </
window> it can be opened from the error console like this: open("file:///users/markus/sites/hud
window.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, con...
toolbar - Archive of obsolete content
the chromeclass-toolbar class may be used to create a toolbar where its visibility depends on the toolbar flag when opening the
window with the
window interface's open() method loads the specified resource into the browsing context (
window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new
window is opened and the specified resource is loaded into its browsing context.">
window.open() method.
...this only has an effect on
windows and needs to be combined with type="menubar" and a menubar element.
...ookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes chromeclass-toolbar when this class is used, the toolbar will be hidden when a
window is opened by setting the toolbar option to no in the
window.open method.
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
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).
... 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.
...
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulru...
... on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar.
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
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).
...
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.
...
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework...
... on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar.
XULRunner 1.9.1 Release Notes - Archive of obsolete content
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).
...
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.
...
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunn...
... on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar.
XULRunner 1.9.2 Release Notes - Archive of obsolete content
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).
...
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.
...
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.2\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunn...
...on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar.
XULRunner 1.9 Release Notes - Archive of obsolete content
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).
...
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.
...
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xul...
... on microsoft
windows xp, all xul applications may wind up being grouped together in the taskbar.
CommandLine - Archive of obsolete content
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.
...var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(
window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application
window to the observer: chrome/content/
window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&wind...
...ow.title;"
windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...
... </
window> original document information author: georges-etienne legendre last updated date: august 21st, 2007 ...
nsIContentPolicy - Archive of obsolete content
type_fetch 20 indicates a load initiated by the globalfetch.fetch() method, which is available as a global in both
window and worker contexts.
... 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).
...the nsidomnode or nsidom
window that initiated the request, or something that can query interface to one of those; can be null if inapplicable.
2006-12-01 - Archive of obsolete content
discussions firefox 2.0 should re-implement modal
window.open to support web 2.0 a plea to re-implement the option to show modal
windows, using
window.open(), from inside an untrusted script.
... discussion of support for modal
windows within firefox 2.0 a lengthy post regarding the re-implementation of modal
windows into firefox.
...
windows dde shell integration removal a call for responses or concerns regarding the removal of the dde shell integration.
... question regarding how to access the functionality that arises when
window.blur() is called.
Sunbird Theme Tutorial - Archive of obsolete content
in the themes
window, check that your new theme has appeared.
...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.
... 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.
Theme changes in Firefox 4 - Archive of obsolete content
the iconsize attribute of the toolbox element in the main browser
window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette.
... 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.
... examples the default
windows theme wants to force small icons on the navigation bar regardless of the user preference.
... improving your appearance on
windows the new -moz-
windows-theme media query lets you determine which
windows theme is currently in use; this lets you make your theme adapt to work well with the
windows environment as it's configured.
-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.
... 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.
...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).
-moz-os-version - Archive of obsolete content
the -moz-os-version gecko-only css media feature can be used to apply styles based on the user's version of microsoft
windows.
... syntax values
windows-win7 the user is on the
windows 7 operating system.
...
windows-win8 the user is on the
windows 8 operating system.
...
windows-win10 the user is on the
windows 10 operating system.
Debug - Archive of obsolete content
the debug object only works in internet explorer and
windows 8 and
windows phone 8.1 store apps.
... there are different ways to debug internet explorer and
windows 8.x store apps.
... in
windows 8.x store apps, the write and writeln functions of the debug object display strings in the visual studio output
window at run time.
...also supported in store apps (
windows 8 and
windows phone 8.1).
JSObject - Archive of obsolete content
the netscape.javascript.jsobject class has the following static method: get
window gets a jsobject for the
window containing the given applet.
... declaration public object getslot(int index) get
window static method.
... returns a jsobject for the
window containing the given applet.
... declaration public static jsobject get
window(applet applet) removemember method.
Game distribution - Game development
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.
...to do the desktop thing properly you should support all three operating systems:
windows, mac os and linux.
... 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.
... manifold.js — this tool from the microsoft team can create native distributions of html5 games from ios, android, and
windows.
Building up a basic demo with Three.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; 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.
...there are two helper variables already included, which store the
window's width and height.
... the aspect ratio is set to the current width and height of the
window so it will be dynamically adjusted.
...you should now see a gray
window.
Gecko FAQ - Gecko Redirect 1
it paints the browser's content area, which is the blank area inside the browser
window's chrome.
...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).
... 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.
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
microsoft edge is currently the default
windows browser.
... microsoft first bundled ie with
windows in 1995 as part of the package called "microsoft plus!".
... learn more general knowledge internet explorer on wikipedia history of internet explorer on wikipedia internet explorer versions on wikipedia learning about internet explorer http://
windows.microsoft.com/en-us/internet-explorer/download-ie http://
windows.microsoft.com/en-us/
windows7/getting-started-with-internet-explorer-9 http://
windows.microsoft.com/en-us/internet-explorer/internet-explorer-help http://
windows.microsoft.com/en-us/internet-explorer/make-ie-default-browser#ie=ie-11 technical reference http://
windows.microsoft.com/en-us/internet-explorer/products/ie-8/system...
...-requirements http://
windows.microsoft.com/en-us/internet-explorer/products/ie-9/system-requirements http://support.microsoft.com/kb/969393 ...
What is accessibility? - Learn web development
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).
... 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.
How much does it cost to do something on the Web? - Learn web development
software text editors you likely have a text editor: such as, notepad on
windows, gedit on linux, textedit on mac.
... image editors your system likely includes a simple image editor, or viewer: paint on
windows, eye of gnome on ubuntu, preview on mac.
...
windows explorer, nautilus (a common linux file manager), and the mac finder all include this functionality.
... if you want to install an (s)ftp client, there are several reliable and free options: for example, filezilla for all platforms, winscp for
windows, cyberduck for mac or
windows, and more.
Basic native form controls - Learn web development
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.
... 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.
..." name="meal" value="curry"> </li> <li> <label for="pizza">pizza</label> <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> </fieldset> the following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on firefox 71 and safari 13 on macos and chrome 79 and edge 18 on
windows 10.
... 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.
How to build custom form controls - Learn web development
this is achieved with alt + down on
windows.
...
window.addeventlistener("load", function () { document.body.classlist.remove("no-widget"); document.body.classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the <select> elements, an...
...
window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); // each custom control needs to be initialized selectlist.foreach(function (select) { // as well as all its `option` elements var optionlist = select.queryselectorall('.option'); // each time a user hovers their mouse over an option, we highlight the given option optionlist.forea...
...
window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); // each custom control needs to be initialized selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); // we make our custom control focusable select.tabindex = 0; // we make the native control no longe...
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...
...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).
...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 ...
... 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 12firefox full support yesie full support 10opera 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 ...
... 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 12firefox full support yesie full support 10opera full support ...
Introduction to events - Learn web development
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.
... the user resizes or closes the browser
window.
...
window.onkeypress,
window.onkeydown,
window.onkeyup — the color changes when a key is pressed on the keyboard.
...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
window object, which represents the entire browser
window.
Setting up your own test automation environment - Learn web development
to set your path variable on
windows, follow the instructions at how can i add a new folder to my system path?
...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 + '...
...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).
... give it the following contents: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until, username = "your-user-name", accesskey = "your-access-key"; let driver = new webdriver.builder() .withcapabilities({ 'browsername': 'chrome', 'platform': '
windows xp', 'version': '43.0', 'username': username, 'accesskey': accesskey }) .usingserver("https://" + username + ":" + accesskey + "@ondemand.saucelabs.com:443/wd/hub") .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdri...
Embedding API for 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.
...for double-sized text, use nsidom
window::settextzoom(2.0); using accessibility preferences there are a number of prefs related to accessibility.
...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: ...
... 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_during_load", true); moz 0.8 client side redirects setboolpref("browser.accept.redirects", acceptredirects); no content refreshes setboolpref("browser.accept.refreshes", acceptrefreshes); no ...
Lightweight themes
creating a theme header image the header image is displayed as the background of the top of the browser
window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... it will be anchored to the top-right corner of the browser
window.
... 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.
pymake
prerequisites if running
windows, you need to have a
windows build environment installed for using pymake to build mozilla.
... 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.
... 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.
mach
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).
...however - mach does offer some additional features over manual invocation of client.mk: if on
windows, mach will automatically use pymake instead of gnu make, as that is preferred on
windows.
... mach will colorize terminal output (on terminals that support it - typically most terminals except on
windows) mach will scan build output for compiler warnings and will automatically record them to a database which can be queried with mach warnings-list and mach warnings-summary.
Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom
window of the content loaded in the browser.
... 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.
... 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.
Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom
window of the content loaded in the browser may be null (see below) docshell the nsidocshell associated with the browser.
... 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.
... 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.
Gecko Keypress Event
ctrl is the accel key on
windows and linux, while meta (i.e.
...
windows the charcode is replaced only when ctrl is down but alt is 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).
... problem 4 the shift key must be down (with default preferences) to use accesskeys in web contents on
windows and linux.
How to get a stacktrace for a bug report
the mozilla crash reporter
window should automatically come up after firefox crashes.
... 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.
... 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.
How to Report a Hung Firefox
the steps to induce a crash are slightly different on each platform:
windows on
windows, the stability team has written a utility which will inject a crash into firefox which will trigger the crash reporter: download crashfirefox.exe here (source code).
... 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"].
... getservice(ci.nsi
windowmediator); let win = wm.getmostrecent
window("navigator:browser"); let browser = win.gbrowser.selectedbrowser; if (browser.isremotebrowser) { browser.messagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.process_type_default) {components.utils.import("resource://gre/modules/ctypes.jsm");var zero = new ctypes.intptr_t(8);var badptr = ctypes.cast(zero, ctypes.pointertype(ctypes.int32_t));var crash = badptr.contents;}', true); } other techniques on os x if you use a nightly build (>= firefox 16), you can use activity monitor's "sample process" feature to generate a sample.
...this is only useful if you have firefox debug symbols, which are available on
windows from the mozilla symbol server.
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.
... isprivate: optional indicates whether the download originated from a private
window.
...you may pass an object with a subset of the following fields: isprivate: optional indicates whether the download originated from a private
window.
Following the Android Toasts Tutorial from a JNI Perspective
toasts do not have to be created with jni; they are exposed by the native
window feature on firefox for android, see toast documentation.
... 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.
... 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.
... 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.
Fonts for Mozilla's MathML engine
installation instructions
windows install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip.
... note:cambria math is installed by default on
windows 7 and later versions and should ensure relatively good mathml rendering.
... double-click the latinmodern-math font file click the "install the font" button from the
window that opens.
... open the stixmath-regular font file and click the "install the font" button from the
window that opens.
Profile Manager
system requirements: mac: an intel processor, i386 or x86_64 linux: any version capable of running firefox 4.0
windows: xp or later source code you can download the source as well: hg clone http://hg.mozilla.org/automation/profilemanager/ instructions for building can be found in build.txt.
... starting profile manager to start profile manager, just launch profilemanager.exe (on
windows) or profilemanager-bin (on linux and mac).
... 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.
... locked profiles some profiles may be shown as locked in the main
window.
Building NSS
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.
... if you don't have a domain suffix you can add an entry to /etc/hosts (on
windows, c:\
windows\system32\drivers\etc\hosts) as follows: 127.0.0.1 localhost.localdomain validate this opening a command shell and typing: ping localhost.localdomain.
JSS FAQ
my ssl connection is hanging on
windows?
... my ssl connection is hanging on
windows?
...
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.
PKCS11 FAQ
once you've installed the module, the module's certificates simply appear in the list of certificates displayed in the certificate
window.
... yes, the token is call softokn3 (softokn3.dll on
windows, libsoftokn3.so on most unix platforms).
...key generation in mozilla clients is triggered either by the standard <keygen> tag, or by the keygen functions off the
window.crypto object.
...first open the tools/options/advanced/security
window in mozilla and click security devices.
NSS environment variables
before 3.0 moz_debug_symbols boolean (1 to enable) 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.
... on
windows, copies of files are always published.
... 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.
NSS_3.12.3_release_notes.html
bug 426413: audit messages need distinct types bug 438870: free freebl hashing code of dependencies on nspr and libutil bug 439115: db merge allows nickname conflicts in merged db bug 439199: sse2 instructions for bignum are not implemented on
windows 32-bit bug 441321: tolerate incorrect encoding of dsa signatures in ssl 3.0 handshakes bug 444404: libpkix reports unknown issuer for nearly all certificate errors bug 452391: certutil -k incorrectly reports ec private key as an orphan bug 453234: support for seed cipher suites to tls rfc4010 bug 453364: improve pk11_cipherop error reporting (was: pk11_createcontextbysymkey returns nul...
... bug 466736: incorrect use of nss_use_64 in lib/libpkix/pkix_pl_nss/system/pkix_pl_object.c bug 466745: random number generator 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...
... 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.
NSS Tools modutil
availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and
windows nt 4.0.
...
windows nt has no default directory, so -dbdir must be used to specify a directory.
...for example, a
windows installation might consist of a setup.exe installation program, a help file, and a .cab file containing compressed information.
...the root directory should be the
windows root directory (for example, c:\\
windows, or c:\\winnt).
NSS Tools ssltap
availability this tool is known to build on solaris 2.5.1 (sunos 5.5.1) and
windows nt 4.0.
...the tool also displays the data to the shell
window from which it was called.
...in your browser
window, enter the url http://intercept:1924.
...this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window.
How to embed the JavaScript engine
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.
...on
windows, do not install the spidermonkey source code under the msys root directory (which is usually c:\mozilla-build\msys).
...then click the view source button, and copy the code from the
window that appears.
JIT Optimization Strategies
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.
...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.
JSAPI User Guide
the word javascript may bring to mind features such as event handlers (like onclick), dom objects,
window.open, and xmlhttprequest.
...whenever javascript code does something like
window.open("http://www.mozilla.org/"), it is accessing a global property, in this case
window.
...then it adds whatever custom classes, functions, and variables (like
window) the application wants to provide; see custom objects below.
...for example, the firefox browser uses its own global object,
window.
Setting up an update server
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.
... if you are running
windows and want the mozilla maintenance service to be used, there are a few additional steps to be taken here.
... 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.
...
windows/linux: <install dir>/distribution/policies.json macos: <install dir>/contents/resources/distribution/policies.json create the distribution directory, if necessary, and put this in policies.json: { "policies": { "appupdateurl": "http://127.0.0.1:8000/update.xml" } } now you are ready to update!
How to build an XPCOM component in JavaScript
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.
... {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.
Components.utils.importGlobalProperties
system scopes such as jsms and frame scripts don't have certain objects, such as indexeddb and xmlhttprequest, that are available to dom
window globals.
...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.
... var domfile = services.appshell.hiddendom
window.file('/path/to/file'); xpcom components some objects have an xpcom alternative, which typically allows more flexibility then the dom version here is an example of how to use the dom xmlhttprequest through xpcom interface of nsixmlhttprequest: var oreq = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); ...
amIWebInstaller
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 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 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.
...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 anames, [array, size_is(ainstallcount)] in wstring aicons, in amiinstallcallback acallback, optional in pruint32 ainstallcount optional ); parameters amimetype the mimetype for the add-ons.
... a
window the
window installing the add-ons.
nsIAccessNode
accessible/public/nsiaccessnode.idlscriptable an interface used by in-process accessibility clients to get style,
window, markup and other information about a dom node.
...the nsiaccessnode tree for a given dom
window has a one to one relationship to the dom tree.
...obsolete since gecko 2.0 owner
window voidptr the os
window handle for the
window this node is being displayed in.
... remarks the main application of access node tree is it's used by isimpledom* interfaces on
windows.
nsIAccessibleRelation
relation_sub
window_of 0x09 this object is a sub
window of 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.
... relation_parent_
window_of 0x0d this object is a parent
window of the target object.
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...
... 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.
...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.
nsIAccessibleText
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.
...coordtype specifies if the coordinates are relative to the screen or to the parent
window (see constants declared in nsiaccessiblecoordinatetype.constants).
...coordtype screen coordinates or
window coordinates (see constants declared in nsiaccessiblecoordinatetype).
...coordtype specifies if the coordinates are relative to the screen or to the parent
window (see constants declared in nsiaccessiblecoordinatetype.constants.
nsIContentFrameMessageManager
attributes content nsidom
window: the current top level
window in the frame or null.
... 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.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.
... var acfmm =
window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidocshell) .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsicontentframemessagemanager); ...
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.
...method overview jsval init(in nsidom
window window); methods init() jsval init( in nsidom
window window ); parameters
window the
window to which the global property is being attached.
nsIDragService
this is used on mac and
windows to update the position of a popup being used as a drag image during the drag operation.
... void enddragsession( in prbool adonedrag ); parameters adonedrag if adonedrag is true, the drag has finished, otherwise the drag has just left the
window.
... aregion a region containing rectangles for cursor feedback, in
window coordinates.
... aregion a region containing rectangles for cursor feedback, in
window coordinates.
nsIExternalProtocolService
ocolhandlerexists(in string aprotocolscheme); astring getapplicationdescription(in autf8string ascheme); nsihandlerinfo getprotocolhandlerinfo(in acstring aprotocolscheme); nsihandlerinfo getprotocolhandlerinfofromos(in acstring aprotocolscheme, out boolean afound); boolean isexposedprotocol(in string aprotocolscheme); void loaduri(in nsiuri auri, [optional] in nsiinterfacerequestor a
windowcontext); void loadurl(in nsiuri aurl); void setprotocolhandlerdefaults(in nsihandlerinfo ahandlerinfo, in boolean aoshandlerexists); methods externalprotocolhandlerexists() check whether a handler for a specific protocol exists.
...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.
nsIJumpListBuilder
jumplist_category_recent 1 recent lists are based on
window's recent document lists.
... the lists are generated automatically by
windows.
... jumplist_category_frequent 2 frequent lists are based on
window's recent document lists.
... the lists are generated automatically by
windows.
nsIPrompt
netwerk/base/public/nsiprompt.idlscriptable this is the prompt interface which can be used without knowledge of a parent
window.
... 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.
...if you are using this interface, you must remove the nsidom
window arguments from those methods.
...to get an instance, call the nsi
windowwatcher.getnewprompter().
nsIPropertyBag
the
window scope is not always accessible so the
window.navigator cannot be accessed.
... goodies obtained from
window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"5.0 (
windows)" battery:batterymanager buildid:"20140529161749" cookieenabled:true donottrack:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"
windows nt 5.1" platform:"win32" plugins:pluginarray product:"gecko" productsub:"20100101" useragent:"mozilla/5.0 (
windows nt 5.1; rv:30.0) gecko/20100101 firefox/30.0" vendor:"" vendorsub:"" __proto__:navigatorprototype f...
...services.appinfo.os simply tells us winnt only, this is not helpful to differentiate between
windows xp, vista, 7, etc.
... to do this use nsipropertybag: services.sysinfo.getproperty("version"); //output 5.1 services.sysinfo.getproperty("name"); //output
windows_nt services.sysinfo.getproperty("arch"); //output x86 services.sysinfo.getproperty("has
windowstouchinterface"); //outputs false or true if
windows touch is there consult the uxp repo (//github.com/realityripple/uxp/blob/master/xpcom/base/nssysteminfo.cpp) for the properties supported.
nsITaskbarPreviewButton
widget/public/nsitaskbarpreviewbutton.idlscriptable this interface is used on microsoft
windows to get access to a
window preview's toolbar button properties.
... these buttons are displayed below the
window preview.
...instead, you use the nsitaskbar
windowpreview.getbutton() to get the objects representing the buttons.
... see also nsitaskbarpreview nsitaskbarpreviewcontroller nsitaskbartabpreview nsitaskbar
windowpreview nsiwintaskbar ...
nsIWebBrowserPersist
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.
... example function downloadfile(httploc, source
window) { try { //new obj_uri object var obj_uri = components.classes["@mozilla.org/network/io-service;1"].getservice(components.interfaces.nsiioservice).newuri(httploc, null, null); //new file object var obj_targetfile = components.classes["@mozilla.org/file/local;1"].createinstance(components.interfaces.nsilocalfile); //set file with path obj_targetfile.initwithpath("c:\\te...
...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
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!
...
windows-specific hints use dependency walker to check that your dependent libraries are loaded correctly.
... 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.
... 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.
Address Book examples
new contact dialog
window.opendialog("chrome://messenger/content/addressbook/abnewcarddialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {selectedab:selectedab}); edit contact dialog
window.opendialog("chrome://messenger/content/addressbook/abeditcarddialog.xul", "", "chrome,resizable=no,modal,titlebar,centerscree...
...n", {aburi:aburi, card:card}); new list dialog
window.opendialog("chrome://messenger/content/addressbook/abmaillistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {selectedab:selectedab}); edit list dialog
window.opendialog("chrome://messenger/content/addressbook/abeditlistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {abcard:abcard, listuri:listuri}); new address book dialog unlike the edit address book dialog, the new address book dialog does not currently have the facility to get the chrome uri based on the address book type.
... for local (mork) address books:
window.opendialog( "chrome://messenger/content/addressbook/abaddressbooknamedialog.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); for ldap address books:
window.opendialog("chrome://messenger/content/addressbook/pref-directory-add.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); note: there is no new address book dialog for the os x address book.
...
window.opendialog(addressbook.propertieschromeuri, "editdirectory", "chrome,modal=yes,resizable=no", {selecteddirectory: addressbook}); how do i set up my own address book?
Building a Thunderbird extension 6: Adding JavaScript
the statusbar is usually displayed at the bottom of the thunderbird
window.
...
window.addeventlistener("load", function(e) { startup(); }, false);
window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the first part registers a new event listener that will be executed automatically when thunderbird loads.
... we use the function
window.setinterval to update the date in case thunderbird is left running for more than one day.
... further documentation more functions for the dom objects are listed on: dom/
window (api reference for the
window object) dom/document (api reference for the document object) gecko dom reference (overview of all dom objects in gecko) you may also find the javascript cheat sheet very useful.
ABI
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.
... ctypes.stdcall_abi used for calling functions declared with stdcall on
windows.
... 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.
Streams - Plugins
streams produced by a plug-in have a specific mime type and can be sent to a particular browser
window or frame for display.
... the target parameter specifies the
window or frame.
...the target should not be the same
window.
... 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.
Structures - Plugins
npevent represents an event passed by npp_handleevent to a
windowless plug-in.
... np_port contains information required by the
window field of an np
window structure.
... npset
windowcallbackstruct contains information about the plug-in's unix
window environment.
... np
window contains information about the target into which the plug-in instance can draw.
DOM Inspector FAQ - Firefox Developer Tools
how do i inspect a web site/
window?
... inspect chrome document inspect application chrome, including open xul
windows, e.g., the browser
window.
...instead, get the xul document to load as you normally would (e.g., by invoking commands or opening
windows via standard application use), then locate it in the inspect chrome document menu.
...menu item from the edit menu in an inspector
window that is inspecting the document you wish to search, and enter your search criteria there.
Browser Toolbox - Firefox Developer Tools
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.
...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.
Tutorial: Set a breakpoint - Firefox Developer Tools
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`.
... 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.
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.
... command
windows macos linux scroll to start of console output (only if the command line is empty) home home home scroll to end of console output (only if the command line is empty) end end end page up through console output page up page up page up page down through console output page down page down page down go backward through command history up arrow up arrow up arrow go forward through command history down arrow down arrow down arrow initiate reverse search through command history/step backwards through matching commands f9 ctrl + r f9 step forward through matching command history (after initiating reverse search) shift + f9 ctrl + s...
...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...
... 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 ...
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.
...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.
Clients - Web APIs
clients.open
window() opens a new browser
window for a given url and returns a promise for the new
windowclient.
... 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 clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat
window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
... client.focus(); chatclient = client; break; } } // if we didn't find an existing chat
window, // open a new one: if (!chatclient) { chatclient = await clients.open
window('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe definition of 'clients' in that specification.
DOMHighResTimeStamp - Web APIs
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 determines the time origin, then the time origin is the time at which the navigation responsible for creating the
window's current document took place.
...this method is available in both
window and worker contexts.
Document.ononline - Web APIs
additionally, the events bubble up from document.body, to document, ending at
window.
...
window.navigator.online returns boolean true if the browser is online and false if it is definitely offline (disconnected from the network).
... 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.
Document - Web APIs
document.defaultviewread only returns a reference to the
window object.
... document.captureevents() see
window.captureevents.
... document.releaseevents() see
window.releaseevents().
... document.routeevent() obsolete since gecko 24 see
window.routeevent().
Element.currentStyle - Web APIs
element.currentstyle is a proprietary property which is similar to the standardized
window.getcomputedstyle() method.
...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.
... * 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.
GlobalEventHandlers.oncontextmenu - Web APIs
the contextmenu event typically fires when the right mouse button is clicked on the
window.
... examples disabling context menus this snippet prevents context menus from opening in the
window.
...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.
... 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note');
window.oncontextmenu = pause;
window.onpointerdown = play; result specifications specification status comment html living standardthe definition of 'oncontextmenu' in that specification.
Intersection Observer API - Web APIs
it should operate as quickly as possible; if anything time-consuming needs to be done, use
window.requestidlecallback().
...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...
... 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.
... 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.
LocalFileSystemSync - Web APIs
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.
... 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.
...you access a sandboxed file system by requesting a localfilesystemsync object from within a web worker using this global method,
window.requestfilesystemsync().
MediaTrackSettings.displaySurface - Web APIs
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.
...
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.
Navigation Timing API - Web APIs
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.
... the navigation timing api can be used to 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).
Navigator.msLaunchUri() - Web APIs
to help protect a user's privacy,
windows displays a prompt for the user to allow the service or app to be launched.
... if the user's system does not have a program registered to handle a specific protocol, and a nohandlercallback is provided,
windows internet explorer will invoke the nohandlercallback.
...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.
PopStateEvent - Web APIs
popstateevent is an event handler for the popstate event on the
window.
... a popstate event is dispatched to the
window every time the active history entry changes between two history entries for the same document.
... syntax
window.onpopstate = funcref; funcref is a handler function.
... the popstate event as an example, a page at http://example.com/example.html running the following code will generate alerts as indicated:
window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state ...
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.
... 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
window.
Screen Capture API - Web APIs
the screen capture api introduces additions to the existing media capture and streams api to let the user select a screen or portion of a screen (such as a
window) to capture as a media stream.
...the value is one of application, browser, monitor, or
window.
...the value is one of application, browser, monitor, or
window.
...this type is used for the displaysurface property in the constraints and settings objects, and has the possible values application, browser, monitor, and
window.
ScrollToOptions - Web APIs
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.
... when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the
window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
... 'smooth' : 'auto' }
window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'scrolltooptions' in that specification.
SubtleCrypto.decrypt() - Web APIs
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.
... 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.
... 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.
... 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.
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await
window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretva...
...lue.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]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-but...
...*/ function 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"] ); } /* derive some bits from a password supplied by the user.
... */ async function getderivedbits() { const keymaterial = await getkeymaterial(); salt =
window.crypto.getrandomvalues(new uint8array(16)); const derivedbits = await
window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"...
SubtleCrypto.deriveKey() - Web APIs
/* derive an aes key, given: - our ecdh private key - their ecdh public key */ function derivesecretkey(privatekey, publickey) { return
window.crypto.subtle.derivekey( { name: "ecdh", public: publickey }, privatekey, { name: "aes-gcm", length: 256 }, false, ["encrypt", "decrypt"] ); } async function agreesharedsecretkey() { // 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 let aliceskeypair = await
window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivekey"] ); let bobskeypair = await
window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivekey"] ); // alice then generates a secret key using her private key and bob's public key.
...*/ function getkeymaterial() { let password =
window.prompt("enter your password"); let enc = new textencoder(); return
window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await getkeymaterial(); let key = await
window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, ...
..."iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "encrypt", "decrypt" ] ); return
window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } specifications specification status comment web cryptography apithe definition of 'subtlecrypto.derivekey()' in that specification.
SubtleCrypto.generateKey() - Web APIs
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.
... let keypair =
window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ); hmac key generation this code generates an hmac signing key.
... 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.
... 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.
SubtleCrypto.sign() - Web APIs
*/ 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.
...*/ 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.
...*/ 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.
...*/ 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.
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await
window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await
window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ 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 ?
...*/ 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 ?
Touch() - Web APIs
"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.
... "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.
Controlling multiple parameters with ConstantSourceNode - Web APIs
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.
... function setup() { context = new (
window.audiocontext ||
window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantnode = context.createconstantsource(); constantnode.connect(gainnode2.gain); constantnode.connect(gainnode3.gain); constantnode.start(); gainnode1.connect(context.destination);...
... gainnode2.connect(context.destination); gainnode3.connect(context.destination); }
window.addeventlistener("load", setup, false); first, we get access to the
window's audiocontext, stashing the reference in context.
... after setting the
window's load event handler to be the setup() function, the stage is set.
Using the Web Speech API - Web APIs
think about dictation on macos, siri on ios, cortana on
windows 10, android speech, etc.
... 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.
... 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.
... var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('.txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = document.queryselector('#rate'); var ratevalue = document.queryselector('.rate-value'); var voices = []; populating the select element to populate the <select> element with the different voice options the device has available, we've written a populatevoicelist() function.
Accessibility: What users can do to browse more safely - Accessibility
examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in
windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce mot...
...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.
... turn off animations in the operating system in the
windows10 operating system, the user has an ability to turn off animations.
...in the screenshot below, you can see an example of
windows 10 accessibility settings allowing for color filters to be selected.
Coordinate systems - CSS: Cascading Style Sheets
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.
...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 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.
Using URL values for the cursor property - CSS: Cascading Style Sheets
gecko 1.8 supports url values for the css cursor property on
windows and linux.
... (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.
... url values as cursors are supported in
windows, os/2, and linux (when using gtk+ 2.4 or better) releases of mozilla.
Consistent list indentation - CSS: Cascading Style Sheets
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.
...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.
...the second option was taken by internet explorer for
windows and macintosh, and opera.
...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.
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...
...erty: width height background-color font-size left top color; transition-duration:2s; transition-delay:4s; 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); specifications specification status comment css transitionsthe definition of 'transition-delay' in that specification.
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 ...
...y: width height background-color font-size left top transform -webkit-transform color; transition-duration:4s; 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); specifications specification status comment css transitionsthe definition of 'transition-duration' in that specification.
Rich-Text Editing in Mozilla - Developer guides
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.
... figure 3 : setting up rich-text editing html: <body onload="load()"> javascript: function load(){ getiframedocument("editor
window").designmode = "on"; } function getiframedocument(aid){ // if contentdocument exists, w3c compliant (mozilla) if (document.getelementbyid(aid).contentdocument){ return document.getelementbyid(aid).contentdocument; } else { // ie return document.frames[aid].document; } } the example contains a doricheditcommand function that makes it easier to execute commands on the iframe's document and keeps the html code clean.
... figure 4 : executing rich editing commands html: <button onclick="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){ getiframedocument('editor
window').execcommand(aname,false, aarg); document.getelementbyid('editor
window').content
window.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.chec...
...(ocontent); odoc.appendchild(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin =
window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { bo...
<input type="image"> - HTML: Hypertext Markup Language
the string must be the name of a browsing context (that is, a tab,
window, or <iframe>.
... 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 is typically a new tab in the same
window as the current document, but may differ depending on the configuration of the user agent.
...this is a name of, or keyword for, a browsing context (for example, tab,
window, or inline frame).
<input type="submit"> - HTML: Hypertext Markup Language
the string must be the name of a browsing context (that is, a tab,
window, or <iframe>.
... 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 is typically a new tab in the same
window as the current document, but may differ depending on the configuration of the user agent.
... 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.
CSP: sandbox - HTTP
allow-modals allows the page to open modal
windows.
... allow-popups allows popups (like from
window.open, target="_blank", showmodaldialog).
... allow-popups-to-escape-sandbox allows a sandboxed document to open new
windows without forcing the sandboxing flags upon them.
... allow-scripts allows the page to run scripts (but not create pop-up
windows).
Cross-Origin-Opener-Policy - HTTP
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.
... 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.
... 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.
User-Agent - HTTP
platform describes the native platform the browser is running on (
windows, mac, linux, android, etc.), and if it's a mobile phone.
... 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.
... examples mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.2704.106 safari/537.36 opr/38.0.2220.41 older, presto-based opera releases used: opera/9.80 (macintosh; intel mac os x; u; en) presto/2.2.15 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.
... examples mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.1.1 mobile/15e148 safari/604.1 internet explorer ua string examples mozilla/5.0 (compatible; msie 9.0;
windows phone os 7.5; trident/5.0; iemobile/9.0) crawler and bot ua strings examples googlebot/2.1 (+http://www.google.com/bot.html) specifications specification title rfc 7231, section 5.5.3: user-agent hypertext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.43: user-agent hypertext transfer protocol -- http/1.1 ...
WeakSet.prototype.delete() - JavaScript
examples using the delete method var ws = new weakset(); var obj = {}; ws.add(
window); ws.delete(obj); // returns false.
...ws.delete(
window); // returns true.
... ws.has(
window); // returns false.
... the
window is no longer present in the weakset.
globalThis - JavaScript
on the web you can use
window, self, or frames - but in web workers only self will work.
...unlike similar properties such as
window and self, it's guaranteed to work in
window and non-
window contexts.
... html and the
windowproxy in many engines globalthis will be a reference to the actual global object, but in web browsers, due to iframe and cross-
window security considerations, it references a proxy around the actual global object (which you can't directly access).
...however, this causes csp violations in some settings, so es6-shim uses a check like this, for example: var getglobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof
window !== 'undefined') { return
window; } if (typeof global !== 'undefined') { return global; } throw new error('unable to locate global object'); }; var globals = getglobal(); if (typeof globals.settimeout !== 'function') { // no settimeout in this environment!
Media container formats (file types) - Web media technologies
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.
...bm media mime types audio video audio/webm video/webm video codecs supported by webm codec browser support chrome edge firefox safari av1 yes yes yes1 yes vp8 yes yes yes yes vp9 yes yes yes yes [1] firefox support for av1 was added to macos in firefox 66; for
windows in firefox 67; and firefox 68 on linux.
Add to Home screen - Progressive web apps (PWAs)
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.
... 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.
...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.
...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.
The building blocks of responsive design - Progressive web apps (PWAs)
this way they end up side-by-side, and their proportions remain the same as the browser
window size varies.
...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!
...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.
Secure contexts - Web security
a secure context is a
window or worker for which certain minimum standards of authentication and confidentiality are met.
...a particular document is considered to 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.
... 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.
... if (
window.issecurecontext) { // page is a secure context so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...
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...
...ument.getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstperiods.period[0].paragraph[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 "postMessage" - Archive of obsolete content
to simplify this most content modules provide an onmessage property as an argument to the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "
window.addeventlistener('mouseover', function(event) {" + " self.postmessage(event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { console.log('mouseover: ' + message); }); } }); the reas...
...now we have to embed the event type in the message payload, 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({" + ...
...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...
Working with Events - Archive of obsolete content
objects emit events on state changes that might be of interest to add-on code, such as browser
windows opening, pages loading, network requests completing, and mouse clicks.
...many event emitters may emit more than one type of event: for example, a browser
window might emit both open and close events.
... = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or
windows modules.
ui - Archive of obsolete content
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.
...icons/previous.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({ url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content
window: sidebar a sidebar gives you a vertical strip of space for presenting complex user interfaces.
... 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: ...
loader/sandbox - Archive of obsolete content
the argument may be: a url string, in which case the sandbox will get the same privileges as a script loaded from that url a dom
window object, to inherit privileges from the
window being passed.
... 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.
remote/child - Archive of obsolete content
each frame then has a content property that's the top-level dom
window for the frame, and addeventlistener/removeeventlistener functions that enable you to listen to dom events dispatched by the frame.
... getframefor
window finds the frame for a top level dom
window.
... content the top level dom
window currently displaying in this frame.
Low-Level APIs - Archive of obsolete content
privileged modules that expose powerful low-level capabilities such as
window/utils and net/xhr.
...in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example,
windows or request).
...
window/utils functions for working with browser
windows.
Release notes - Archive of obsolete content
removed isprivatebrowsing from browser
window.
... added a browser
window parameter to sidebar.show() and sidebar.hide(), to control the
window for which the sidebar will be shown or hidden.
... 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.
Add a Context Menu Item - Archive of obsolete content
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.
...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.
...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.
Creating Reusable Modules - Archive of obsolete content
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.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var
window = require("sdk/
window/utils").getmostrecentbrowser
window(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(
window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicke...
... so "filepicker.js" should look like this: var {cc, ci} = require("chrome"); function promptforfile() { var
window = require("sdk/
window/utils").getmostrecentbrowser
window(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(
window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifi...
Bootstrapped extensions - Archive of obsolete content
when the extension becomes enabled using the add-ons manager
window.
... 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.
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="your
window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kkk"/> <label value="lll"/> <la...
...bel value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </
window> images if you put image in the contents, you should probably add align="start" attribute to the box.
... this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="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> ...
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...
...un", "jul", "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000;
window.addeventlistener ?
... addeventlistener("load", buildcalendars, false) :
window.attachevent ?
HTML to DOM - Archive of obsolete content
see using a hidden iframe element to parse html to a
window's dom below.
... will represent the dom into which we'll insert our newly-retrieved html: var doc = document.implementation.createhtmldocument("example"); doc.documentelement.innerhtml = request.responsetext; after this any manipulation that we might want to do will be something as simple as the following: doc.body.textcontent = "this is inside the body!"; using a hidden iframe element to parse html to a
window's dom sample code may need more work.
... 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"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-
window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for ...
Preferences - Archive of obsolete content
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.
...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...
...pears inline in the add-on manager
window starting in firefox 7 .
Scrollbar - Archive of obsolete content
tested on
windows xp.
...cture 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.
... example xul
window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="sample
window" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </
window> ...
JavaScript timers - Archive of obsolete content
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.
... 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.
... 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
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul
window themselves: <script type="application/javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the
window that imports that script.
...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.
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.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.
... var targetdoc = null; function onload() { var iframe = document.getelementbyid("contentiframe"); targetdoc = iframe.contentdocument; iframe.content
window.addeventlistener("newstuff", receivestufffrompage, false); } function receivestufffrompage(event) { var uc = geteventdata(event); // uc = unchecked data in form of e4x xml var stuff = {}; stuff.id = sanitize.integer(uc.@id); stuff.name = sanitize.label(uc.@name); } function sendsomethingtopage (something) { var somethingxml = <something/>; // |something| object as e4x xml somethingx...
Notes on HTML Reflow - Archive of obsolete content
some reflows are immediate in response to user or script actions; for example, resizing the
window or changing the document's default font.
...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.
... a resize reflow is performed when the presentation shell's dimensions change; e.g., because the user resized the shell's
window.
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...
...in test scripts, <code>sleep 5 after the above command should ensure the profile is created before the next command in the test script is run how to enable dump in a new profile add user_pref("browser.dom.
window.dump.enabled", true); to profiledir/user.js how to execute test 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 e...
...vent from chrome use the domcontentloaded event chrome
window.addeventlistener('domcontentloaded',callbackfunction,false); ...
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.
... this can be performed automatically by including the following command into the
windows logon script: regedit /s \\server\netlogon\reg\quicklaunch.reg ...
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 .
Finding the code to modify - Archive of obsolete content
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.
...notice the flashing red border around the horizontal status bar at the bottom of the browser
window.
In-Depth - Archive of obsolete content
load mozilla and one browser
window.
...click file->inspect and select the browser
window.
... click on the inspect icon and then click on the back button in the browser
window.
Layout System Overview - Archive of obsolete content
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.
...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.
...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.
Code snippets - Archive of obsolete content
components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox
window.
... let 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); // obtain a reference to sync's tabs "engine." let tabsengine = weave.service.enginemanager.get("tabs"); // iterate over each client having data.
... main
window.gbrowser.addtab(url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); corrupt a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); compo...
Creating a Help Content Pack - Archive of obsolete content
nc:title is where you specify the title (e.g., "mozilla firefox help") for the help
window.
...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.
...one common use of this is to inherit the small using the help
window article provided with the viewer.
Helper Apps (and a bit of Save As) - Archive of obsolete content
ask the os: registry on
windows.
... launching a helper application this is delegated to the nspiexternalapplauncher (also implemented by the nsexternalhelperapphandler):
windows: launch either directly via nsiprocess or via the ::shellexecute() method depending on where the mimeinfo came from.
... security considerations multiple checks for whether a file is executable (on
windows) to keep from launching such files via ::shellexecute().
Supporting private browsing mode - Archive of obsolete content
this interface is deprecated since firefox 20, and will probably be completely removed in firefox 21.see supporting per-
window private browsing for details.
...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.
...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.
Running Tamarin acceptance tests - Archive of obsolete content
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 ...
Methods - Archive of obsolete content
windowsshortcut creates a
windows shortcut for a file.
...
windowsgetshortname returns the
windows shortname of the path.
...
windowsregisterserver registers dlls with the registry.
confirm - Archive of obsolete content
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).
...after the user presses a button (or closes the
window), the value property is updated according to the checkbox.
...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.
getWinProfile - Archive of obsolete content
getwinprofile (
windows only) constructs an object for working with a
windows .ini file.
...description the getwinprofile method creates an object for manipulating the contents of a
windows .ini file.
...example to edit the win.ini file, you would create a winprofile object with this call: var mywinprofileobj = getwinprofile (getfolder("
windows"), "win.ini"); ...
WinRegValue - Archive of obsolete content
winregvalue constructor (
windows only) creates a winregvalue object.
...description advanced
windows developers can use this object to manipulate non-string values for the
windows registry.
...for information on the possible data types for a registry value, see your
windows api documentation.
Learn XPI Installer Scripting by Example - Archive of obsolete content
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.
...these two objects provide programmatic access to the
windows user profile and the
windows registry, respectively.
...since i am using ns6 right now on a
windows machine, that target directory is "c:\program files\netscape\netscape 6\".
XPJS Components Proposal - Archive of obsolete content
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.
...these components will be independent of web content and browser
windows.
... xjs components are not run in browser
windows.
A XUL Bestiary - Archive of obsolete content
in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one
window brings up a new chrome: <menuitem value="mozilla help" oncommand="
window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application.
...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.
chromemargin - Archive of obsolete content
« xul reference home chromemargin type: margin string controls the amount of chrome that should be visible on each side of the
window.
... the specified string should contain four numbers, separated by commas, indicating the margin in pixels for the top, right, bottom, and left edges of the
window, respectively.
... this value may be -1 to use the default margin for that side on the current platform, 0 to have no system border (that is, to extend the client area to the edge of the
window), or a value greater than zero to indicate how much less than the default default width you wish the margin on that side to be.
drawintitlebar - Archive of obsolete content
« xul reference home drawintitlebar type: boolean if this attribute is true, the top of the
window's content area will begin at the top edge of the title bar, instead of below the title bar.
... this allows the
window to draw in the title bar.
... this is supported only from
window elements, and is ignored on platforms that don't support drawing into the title bar.
fullscreenbutton - Archive of obsolete content
« xul reference home fullscreenbutton type: boolean set this attribute to true to display a button in the
window chrome to allow the user to switch the
window into full screen mode.
... supported on mac os x 10.7 lion and later and on
windows.
... the
window receives a "fullscreen" event once the change has been made.
modifiers - Archive of obsolete content
os:
windows logo key on
windows, super or hyper key on linux.
... accel: the key used for keyboard shortcuts on the user's platform, which is control on
windows and linux, and command on mac.
...on
windows, this is the alt key, used in conjuction with an element's accesskey.
persist - Archive of obsolete content
« xul reference home 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.
...persistence will not remember the absence of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the
window closes (bug 15232).
List of commands - Archive of obsolete content
list of commands (grouped by type) nsdom
windowcontroller commands (generally legal when there is a selection): cmd_copy - copy a selection to the clipboard cmd_cut - cut a selection into the clipboard cmd_paste - paste a selection from the clipboard cmd_selectall cmd_selectnone cmd_copylink cmd_copyimagelocation cmd_copyimagecontents cmd_scrolltop cmd_scrollbottom cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_scrollleft cmd_scrollright cmd_selectcharprevious cmd_selectcharnext cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevi...
...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...
...andleshiftbackspace 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 cmd_undo cmd_viewcomponentbar cmd_viewlinktoolbar cmd_viewlinktoolbar_false cmd_viewlinktoolbar_maybe cmd_viewlinktoolbar_true cmd_viewnavbar cmd_viewpersonaltoolbar cmd_viewtaskbar cmd_zoom
window thanks for help of joe.user0 in compiling: http://readlist.com/lists/mozilla.or...l/3/15261.html .
openSubDialog - Archive of obsolete content
« xul reference home opensubdialog( url, features, params ) return type:
window opens a child modal dialog.
...the arguments are similar to the
window's opendialog method except that the
window name does not need to be supplied.
...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.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
open the file in seamonkey (for example, by dragging it and dropping it in the navigator
window, or by choosing file – open file...
...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.
... <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...
Toolbar customization events - Archive of obsolete content
when toolbars are customized, events are sent to their parent
window.
... you can use
window.addeventlistener() to listen for these events in order to keep abreast of changes to toolbars.
...
window.addeventlistener("beforecustomization", customizestart, false);
window.addeventlistener("aftercustomization", customizeend, false);
window.addeventlistener("customizationchange", customizechange, false); function customizestart(e) { let thetoolbox = e.target; /* now we know the user has started customizing */ } function customizeend(e) { let thetoolbox = e.target; /* the user has finish...
Adding more elements - Archive of obsolete content
you will notice that if the
window is resized, the textbox grows but the other components do not.
...if you resize the
window vertically, the elements do not change size.
...in might be more appropriate if the find and cancel buttons always stayed along the bottom of the
window.
Box Objects - Archive of obsolete content
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.
...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.
...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.
Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window title="tree example" id="tree-
window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontain...
...tion(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> </
window> in the image, you can see two columns, each with data taken from the getcelltext() function.
... the setview() function has been called in the onload() handler for the
window, but you could also set the view later if you wish.
List Controls - Archive of obsolete content
you can resize the
window to see that the column stretches as the
window does.
...the other choices will appear in a pop-up
window.
...the second, menupopup, creates the popup
window which appears when the button is clicked.
RDF Datasources - Archive of obsolete content
for example, you might use file:///
windows or files:///usr/local.
...example 3 : source view <
window id="example-
window" title="history list" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="click here to see the mammals the zoo has" type="menu" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> <template> <rule animals:specimens="0"></rule> <rule> ...
... <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> </menupopup> </rule> </template> </button> </
window> in this case only the mammals are desired, so we select the uri of the mammals list.
Scrolling Menus - Archive of obsolete content
example - scrolling list of buttons the following example shows how to create a scrolling list of buttons (you will need to resize the
window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button l...
...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.
Tabboxes - Archive of obsolete content
tabboxes tabboxes are typically used in an application in the preferences
window.
... a series of tabs appears across the top of a
window.
...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.
The Box Model - Archive of obsolete content
this model allows you to divide a
window into a series of boxes.
...by combining a series of boxes, spacers and elements with flex and pack attributes, you can control the layout of a
window.
...the elements will not wrap at all so the more elements you add, the wider the
window will be.
Trees - Archive of obsolete content
some examples of trees include the list of messages in a mail application, or the bookmarks
window in mozilla.
...you may have to resize the
window to see anything since there isn't any data to display.
... 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.
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...
...x (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 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 toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker ...
XUL accessibility tool - Archive of obsolete content
once the tool
window has loaded, select either a local file, web url, or currently open
window from the file menu to generate a xul report for that document.
... new features: (aaronlev) automatically test any new
windows as they are opened.
... (aaronandy) enable tabs, context menu, and other browser extras in report
window.
XUL Coding Style Guidelines - Archive of obsolete content
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.
...most of the
windows and dialogs in mozilla will be described using xul.
... references xul is discussed in depth in xul language spec and xul
window language.
menupopup - Archive of obsolete content
when a menupopup is open, it floats above the
window and may extend outside the
window border.
... 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.
...there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the
window.
tooltip - Archive of obsolete content
for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the
window.
... 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.
...there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the
window.
tree - Archive of obsolete content
treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the
window.
... xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" editable="true" /> <treecol label="name" flex="1" id="name"/> </treecols> <treechildren> <treeitem> <treerow> <treecell val...
...ue="false"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> </
window> css: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.
XULRunner Hall of Fame - Archive of obsolete content
echofon for
windows a twitter client.
... font managing tool for
windows and linux, that helps you find the font you're looking for.
...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.
Using LDAP XPCOM with XULRunner - Archive of obsolete content
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.
...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...
...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).
toolkit.defaultChromeURI - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.defaultchromeuri", "chrome://myapp/content/"); the toolkit.defaultchromeuri preference allows simple xulrunner-based applications to open a new
window when the application is launched.
... the preference specifies the uri of a chrome
window to be opened.
... see also: xulrunner:specifying startup chrome
window, toolkit.defaultchromefeatures, toolkit.singleton
windowtype.
XUL Explorer - Archive of obsolete content
it’s a simple editor that can preview xul inline or in a separate popup
window.
...previewing in a popup
window is still available.
... installs latest version: install (
windows): xulexplorer-1.0a1pre.en-us.win32.exe 6.6mb install (mac): xulexplorer-1.0a1pre.en-us.mac.dmg 9.3mb install (linux): xulexplorer-1.0a1pre.en-us.linux-i686.tar.bz2 8.4mb contributing source code in svn bugzilla (for bugs and suggestions) open bugs, enter new bug blog posts xul explorer - updated (1.0a1pre) xul explorer 0.4 xul explorer 0.3 xul explorer 0.2 exploring xul ...
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - october 6, 2006 - october 13, 2006 announcements firefox vista compatible and versioning heads up robert strong describes the compatibility between
windows vista and firefox, also about the versioning change.
... 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.
... 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.
2006-11-03 - Archive of obsolete content
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.
... source code for the nsinstall contained in moztools a user asks for advice about building nsinstall on
windows.
2006-11-04 - Archive of obsolete content
firefox provide any classes/objects or events to
windows wmi ?
... a user asks if firefox provides any classes/objects or events to
windows wmi.
... code for the nsinstall contained in moztools a user asks for advice about building nsinstall on
windows.
External resources for plugin creation - Archive of obsolete content
platforms supported include
windows, linux, and mac os x (intel).
...supported development environments are visual studio on
windows, xcode on mac, and gcc on linux.
... 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).
NPAPI plugin developer guide - Archive of obsolete content
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 a plug-in instance handling memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the
windows registry initialization and destruction 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
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 stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and disp...
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.
... 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().
...the browser redraws invalid areas of the document and
windowless plug-ins at regularly timed intervals.
NPP_Print - Archive of obsolete content
ms
windows on ms
windows printinfo->print.embedprint.platformprint is the device context (dc) handle.
... 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.
NPRegion - Archive of obsolete content
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.
...see also npn_forceredraw() npn_invalidaterect() npn_invalidateregion() np
window nprect ...
The First Install Problem - Archive of obsolete content
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.
...on
windows xp and
windows 2000, in order to write to the registry, sometimes the software may need administrator privileges.
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
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.
...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.
Using SSH to connect to CVS - Archive of obsolete content
cygwin makes ssh available on
windows if you install the openssh package from the net category.
... posix shell eval `ssh-agent -s` ssh-add ~/.ssh/id_dsa $shell ssh-agent -k exit x
windows in "~/.xinitrc" add "ssh-add".
...first of all they will only work in versions of
windows based on nt (nt/2000/xp).
:-moz-system-metric() - Archive of obsolete content
syntax values -moz-
windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(s...
...s user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(
windows-default-theme)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.
ActiveXObject - Archive of obsolete content
warning: this object is a microsoft extension and is supported in internet explorer only, not in
windows 8.x store apps.
...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.
Debug.write - Archive of obsolete content
remarks the debug.write function sends strings to the immediate
window of a script debugger at run time.
... example this example uses the debug.write function to display the value of the variable in the immediate
window of the script debugger.
...also supported in store apps (
windows 8 and
windows phone 8.1).
Debug.writeln - Archive of obsolete content
remarks the debug.writeln function sends strings, followed by a newline character, to the immediate
window of the microsoft script debugger at run time.
... example this example uses the debug.writeln function to display the value of the variable in the immediate
window of the microsoft script debugger.
...also supported in store apps (
windows 8 and
windows phone 8.1).
Object.prototype.watch() - Archive of obsolete content
in addition, using watchpoints has a serious negative impact on performance, which is especially true when used on global objects, such as
window.
...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.
RDF in Mozilla FAQ - Archive of obsolete content
<
window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> ...
...</
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.
...both of these programs are built by default on
windows, and on linux when the configure --enable-tests is specified.
Building up a basic demo with the PlayCanvas engine - Game development
next, we'll set the canvas to fill the
window, and automatically change its resolution to be the same as the canvas size.
... 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.
...you should now see a gray
window.
Unconventional controls - Game development
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.
...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; } // ...
... 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.
Visual-js game engine - Game development
full name : visual-js gui for
windows multiplatform 2d game engine creator : nikola lukic 2017 2018 open source visual-js project parts : -2d part : this is javascript game engine (server part node.js / client part js) js framework with
windows gui editor and game instance creator.
...anathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast747/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for
windows (canvas2d part only) :
windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.5.2 minimum also redistribution pack for c++ how to start 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 application ( any path in www) 5) new app name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use
windows bat-s file (in server root folder with prefix install_ ) second way - open cmd terminal and enter next command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 very easy installation and project files generator .
Flexbox - Learn web development
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.
... 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.
...this has a very interesting effect, which you'll see if you try resizing your browser
window width.
Fundamental text and font styling - Learn web development
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).
... 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.
...lem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput);
window.addeventlistener("load", drawoutput); test your skills!
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.
... 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.
What are browser developer tools? - Learn web development
how to open the devtools in your browser the devtools live inside your browser in a sub
window that looks roughly like this, depending on what browser you are using: how do you pull it up?
... 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.
... this will give you a
window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wor...
What software do I need to build a website? - Learn web development
here is a short list of editors: operating system built-in editor third-party editor
windows notepad notepad++ visual studio code web storm brackets shiftedit sublime text mac os textedit textwrangler visual studio code brackets shiftedit sublime text linux vi (all unix) gedit (gnome) kate (kde) leafpad (x...
...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.
...apple safari runs on ios and mac os, while internet explorer runs only on
windows.
Sending forms through JavaScript - Learn web development
gaining control of the global interface standard html form submission, as described in the previous article, loads the url where the data was sent, which means the browser
window navigates with a full page load.
... the html is typical: <form id="myform"> <label for="myname">send me your name:</label> <input id="myname" name="name" value="john"> <input type="submit" value="send me!"> </form> but javascript takes over the form:
window.addeventlistener( "load", function () { function senddata() { const xhr = new xmlhttprequest(); // bind the formdata object and the form element const fd = new formdata( form ); // define what happens on successful data submission xhr.addeventlistener( "load", function(event) { alert( event.target.responsetext ); } ); // define what happens in case of error ...
...
window.addeventlistener( 'load', function () { // these variables are used to store the form data const text = document.getelementbyid( "thetext" ); const file = { dom : document.getelementbyid( "thefile" ), binary : null }; // use the filereader api to access file content const reader = new filereader(); // because filereader is asynchronous, store its // resul...
Installing basic software - Learn web development
for serious web development, it's better to invest in a desktop or laptop computer running
windows, macos or linux.
...by default
windows includes notepad and macos comes with textedit.
...
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).
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
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.
...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.
...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.
Index - Learn web development
beginner, express, flask, learn, node, php, python, django, lamp, server-side, servers throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the html file, dragging and dropping it into the browser
window, or choosing file > open...
... 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?
... 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.
Looping code - Learn web development
width and height are the width and height of the inner browser
window.
...'.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...
Introduction to web APIs - Learn web development
every time you see a popup
window appear on a page or some new content displayed, for example, that's the dom in action.
...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.
... we start by creating an audiocontext instance inside which to manipulate our track: const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); next, we create constants that store references to our <audio>, <button>, and <input> elements, and use the audiocontext.createmediaelementsource() method to create a mediaelementaudiosourcenode representing the source of our audio — the <audio> element will be played from: const audioelement = document.queryselec...
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...
Handling common accessibility problems - Learn web development
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).
... nvda nvda is
windows-only, and you'll need to install it.
Implementing feature detection - Learn web development
matchmedia we also wanted to mention the
window.matchmedia javascript feature at this point too.
...it looks like this: if (
window.matchmedia("(max-width: 480px)").matches) { // run javascript in here.
... 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.
Introduction to cross browser testing - Learn web development
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.
...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).
...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.
omni.ja (formerly omni.jar)
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.
...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.
Software accessibility: Where are we today?
up until this point, the largest driving force behind desktop computing environments has been microsoft, first with ms dos, followed by variants of microsoft
windows.
...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.
...microsoft
windows is still far more accesible.
Accessibility and Mozilla
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.
... 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.
...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.
What to do and what not to do in Bugzilla
bug appears on linux and you can't reproduce it on
windows).
...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.
Debugging a hang on OS X (Archived)
after about 3-4 seconds, select the hanging application in the “detected hangs”
window and click the “interrupt sampling” button.
... when it's done parsing the data, click the "show text report" button; a new
window will open with a couple of rows with stacktraces for all the threads in the sampled application.
... for a more detailed view of the sample data, make sure the sample you just recorded is selected in the “detected hangs”
window and click on the “open…” button.
Adding APIs to the navigator object
starting with gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), you can easily add new apis to the
window.navigator object by using the category manager.
... programmatically adding an object to navigator var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); categorymanager.addcategoryentry("javascript-navigator-property", "myapi", my_contract_id, false, true); this adds a new object, myapi, to the
window.navigator object.
... 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.
Experimental features in Firefox
it is available in both the
window and worker contexts.
... nightly 56 no developer edition 56 no beta 56 no release 56 no preference name dom.payments.request.enabled and dom.payments.request.supportedregions visual viewport api the visual viewport api provides access to information describing the position of the visual viewport relative to the document as well as to the
window's content area.
... 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
the chrome script can get and set the wrapped object's properties and call its functions: // chrome script
windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.clicked; 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 compatib...
...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.
...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.
Communicating with frame scripts
> { target: <div#searchcontainer> } if your code requires access to a
window (for example to run
window.opendialog), and your message listener is run from somewhere without access to a
window (e.g.
... an xpcom component), you can access the
window of the browser that sent the message with message.target.ownerdocument.defaultview.
...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.
Process scripts
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.
... this can be achieved by traversing the docshell tree up to the top
window and then retrieving its content message manager, as follows: function contentmmfromcontent
window(
window) { let tree =
window.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidocshelltreeitem); let top = tree.sametyperoottreeitem; let iface = queryinterface(ci.nsidocshell).queryinterface(ci.nsiinterfacerequestor); return iface.getinterface(ci.nsicontentframemessagemanager); } this is intended for unprivileged pages running in a content process.
... if the above doesn't work try this: function contentmmfromcontent
window_method2(acontent
window) { return acontent
window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidocshell) .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsicontentframemessagemanager); } ...
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...
...mance displays memory and performance information about firefox subprocesses/add-ons/tabs about:plugins displays information about installed plugins about:policies lists out the firefox for enterprise policies about:preferences firefox settings (also available through firefox menu > options) about:privatebrowsing start page when opening a private
window about:profiles display and manage firefox profiles about:protections privacy protections report consisting of enhanced tracking protection, firefox monitor and firefox lockwise data about:restartrequired a page users are sent to when firefox requires a restart due to an update about:reader indicates a web page has firefox reader view turned on.
...attempts to navigate through
window.location will throw — error: access to 'about:addons' from script denied.
Roll your own browser: An embedding how-to
if you build mozilla/embedding/base/, a static library (on
windows) called baseembed_s.lib is built.
...
windows external projects k-meleon browser: the
windows answer to galeon.
...versions for
windows and mac with linux to follow.
Getting Started with Chat
the following are some other options available to you:
windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available.
... 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.
...this information displays in the server
window.
Integrated Authentication
instead, it leverages system libraries that provide spnego; sspi on microsoft
windows, and gss-api on linux, mac osx, and other unix-like systems.
...moreover, with
windows clients ntlm may be negotiated as the authentication protocol.
...on older versions of
windows this hash is computed using a relatively weak algorithm (see hertel for more info on ntlm authentication).
Widget Wrappers
there are 'group' wrappers which provide information about the widget across all
windows, and 'single' wrappers which provide information about a specific instance in a specific
window.
... group wrapper methods for
window() a method to obtain a single
window wrapper for a widget, in the
window a
window passed as the only argument.
...for xul-provided widgets, this is always 'custom' provider the provider type of the widget, id est one of provider_api or provider_xul instances an array of all instances (single
window wrappers) of the widget.
PopupNotifications.jsm
note: this code module is imported by firefox chrome
windows, so you don't have to do it yourself in most extensions.
... note: you shouldn't need to call this when using the popupnotifications object in firefox
windows; firefox code takes care of this automatically.
...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).
Localizing with Koala
requirements mercurial, linux,
windows or mac os x.
...c:\mozilla\l10n on
windows, /home/user/mozilla/l10n on linux or /users/user/mozilla/l10n on mac os x).
... on
windows, if koala doesn't clone the repositories, you'll need to do it manually.
Localization prerequisites
on mac and linux, you should be just fine, and on
windows, mozillabuild should get you everything you need.
...you can try one of these: notepad++ or notepad2 on
windows, vim, gedit or kate on gnu/linux, bbedit on mac os x.
...on
windows, mozillabuild offers a start-shell-l10n.bat in c:\mozilla-build.
Fonts for Mozilla 2.0's MathML engine
on
windows: use this mathml fonts installer.
...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.
... cambria math is preinstalled on microsoft
windows vista, and also comes with miscrosoft office 2007 or microsoft powerpoint viewer 2007.
DMD
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.
...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...
...node::sizeofincludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/go64dmd/parser/html/../../../dom/base/nsinode.h:307) #06: mozilla::dom::nodeinfo::nodetype() const (/home/njn/moz/mi5/go64dmd/dom/base/../../dist/include/mozilla/dom/nodeinfo.h:127) #07: nshtmldocument::docaddsizeofexcludingthis(ns
windowsizes*) const (/home/njn/moz/mi5/dom/html/nshtmldocument.cpp:3710) #08: nsidocument::docaddsizeofincludingthis(ns
windowsizes*) const (/home/njn/moz/mi5/dom/base/nsdocument.cpp:12820) } } the choice of whether to record an allocation stack trace for all blocks is controlled by an option (see below).
Intel Power Gadget
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.
... (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.
Leak-hunting strategies and tips
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.
... tool finds platforms requires leak tools for large object graphs leak gauge
windows, documents, and docshells only all platforms any build gc and cc logs js objects, dom objects, many other kinds of objects all platforms any build leak tools for medium-size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports or use moz_count_{ctor,dtor} all tier 1 platforms debug build (or build opt with -...
... 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.
Profiling with the Firefox Profiler
there are os-specific waiting functions like ntwaitformultipleobjects seen in the example above taken on
windows or mach_msg_trap on macos.
... 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.
... 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.
Scroll-linked effects
<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.
... <body style="height: 5000px"> <script> function snap(destination) { if (math.abs(destination -
window.scrolly) < 3) { scrollto(
window.scrollx, destination); } else if (math.abs(destination -
window.scrolly) < 200) { scrollto(
window.scrollx,
window.scrolly + ((destination -
window.scrolly) / 2)); settimeout(snap, 20, destination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(tim...
...as this animation is driven by javascript on the browser's main thread, it can be interrupted by other javascript running in other tabs or other
windows.
powermetrics
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.
... 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...
...as well as the browser processes, the
windowserver and kernel tasks are shown because browsers often trigger significant load in them.
McCoy
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.
...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!
... 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.
Creating a Cookie Log
enabling cookie logging
windows open a command prompt (this is under programs or programs/accessories in normal installations of
windows).
... run firefox by typing "./firefox-bin" and pressing return (note that firefox will launch behind
windows for other applications).
...it should be in c:\temp on
windows, your home directory on linux, or the desktop on mac os x.
Named Shared Memory
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.
...on
windows, the name is significant, but there is no file associated with the name.
... on
windows platforms, no special security measures are provided.
Index
on
windows nt the default is the current directory.
...in your browser
window, enter the url http://intercept:1924.
...this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window.
Build instructions for JSS 4.3.x
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.
...(see jss faq) the "win95" configuration supports all versions of
windows.
Using JSS
for example, the nspr library is called nspr4.dll or libnspr4.dll on
windows and libnspr4.so on solaris.
...nspr 4.2.2 nss 3.6.1 or 3.7 jss 3.2 nspr 4.2 or 4.1.2 nss 3.4.2 jss 3.1.1 nspr 4.1.2 nss 3.3.1 jss 3.1 nspr 4.1.2 nss 3.3 jss 3.0 nspr 3.5.1 jss shared library the jss shared library is jss4.dll (
windows) or libjss4.so (unix).
...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.
PKCS11 Implement
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.
Gecko states
isn't used state_default this state represents the default button in a
window.
...for example, a user could change the size of a
window by clicking the border with a mouse and dragging the mouse.
... ext_state_supports_autocompletion for editable areas that have any kind of autocompletion ext_state_defunct object no longer exists ext_state_selectable_text for text which is selectable, object must implement nsiaccessibletext ext_state_editable implements nsiaccessibleeditabletext ext_state_active this
window is currently the active
window ext_state_modal must do something with control before leaving it ext_state_multi_line edit control that can take multiple lines ext_state_horizontal uses horizontal layout ext_state_opaque indicates this object paints every pixel within its rectangular region ext_state_single_line this text object can only contain 1 line of text ext_state_transient ex...
Implementation Details
supported features interfaces refer to specific pages to get information of supported interfaces for interested at api: core: gecko interfaces
windows: msaa, ia2, ienumvariant and isimpledom* interfaces linux: at-spi roles refer to specific pages to get information of supported roles for interested at api: gecko msaa ia2 at-spi states refer to specific pages to get information of supported states for interested at api: gecko msaa ia2 at-spi relations refer to specific pages to get information of supported relations for interested at api: gecko msaa ia2 at-spi attributes object attributes refer to specific pages to get information of supported object attributes for interested at api: gecko msaa ia2 at-spi text attri...
... 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.
... 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.
XPCOM glue
use this when you have a custom application where you want to embed gecko to show webpages in your own
window.
... linking strategy: dependent glue standalone glue compiler flags: cross-platform #include "xpcom-config.h" #include "xpcom-config.h" #define xpcom_glue
windows /fi "xpcom-config.h" linux -include "xpcom-config.h" linker flags:
windows for older versions of the firefox sdk: -libpath:c:/path/to/sdk/lib xpcomglue_s.lib xpcom.lib nspr4.lib for recent versions of the firefox sdk (at least version 42, but possibly earlier versions as well): -libpath:c/path/to/sdk/lib xpcomglue_s.lib xul.lib nss3.lib moz...
... on
windows, add "mozalloc.lib" after "nspr4.lib".
Avoiding leaks in JavaScript XPCOM components
consider the example of bug 170022 (which also demonstrates a leak via a global variable, fixed later in bug 231266): const observer = { observe: function(subject, topic, data) { if (topic != "open-new-tab-request" || subject !=
window) return; delayedopentab(data); } }; const service = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); service.addobserver(observer, "open-new-tab-request", false); in this example, there is a similar cycle between observe and service.
...this means that without some workaround, all of the browsers will remain in memory until the parent
window is closed.
...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).
XPCOM changes in Gecko 2.0
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.
...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.
...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.
NS_NewNativeLocalFile
on
windows, passing true causes shortcuts to be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved.
...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.
nsIAccessibleDocument
window nsidom
window the nsidom
window that the document resides in.
...
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.
nsIAccessibleStates
state_default 0x00000100 this state represents the default button in a
window.
...for example, a user could change the size of a
window by clicking the border with a mouse and dragging the mouse.
... ext_state_active 0x00000010 this
window is currently the active
window.
nsICommandLine
preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser
window, for example).
...
windowcontext nsidom
window a
window to be targeted by this command line.
...on
windows, flags of the form /flag are normalized to -flag.
nsICompositionStringSynthesizer
every instance is associated with a dom
window at created by nsidom
windowutils.createcompositionstringsynthesizer().
... to create an instance for this: var dom
windowutils =
window.
windowutils; var compositionstringsynthesizer = dom
windowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: dom
windowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause information and caret information (optional): // set new composition string with .setstring().
...ret("foo-bar".length, 0); compositionstringsynthesizer.dispatchevent(); finally, when you commits composition with the last composition string "foo-bar-buzz": // deprecated in 36, first, dispatch commit string without clause information compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.dispatchevent(); // then, dispatch compositionend with the commit string dom
windowutils.sendcompositionevent("compositionend", "foo-bar-buzz", ""); starting gecko 36, you can do it simpler: dom
windowutils.sendcompositionevent("compositioncommitasis", "", ""); if you need to commit composition with different commit string gecko 36 or later, you can use "compositioncommit": dom
windowutils.sendcompositionevent("compositioncommit", "foo-bar-buzz", ""); method overview ...
nsIDOMParser
creating a domparser to create a domparser object from a web page or a chrome script running in a
window, simply use new domparser().
... 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.
...examples within the context of a
window: var parser = new domparser(); var doc = parser.parsefromstring(astr, "application/xml"); outside of a
window (e.g., a js xpcom component, a js module, or an xpcshell test): var parser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); var doc = parser.parsefromstring(astr, "application/xml"); using components.constructor...
nsIDownloadManagerUI
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.
... 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.
nsIExternalHelperAppService
mponents.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor a
windowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not data whose filename has the specified extension should be decoded from the specified encoding type before being saved or delivered to helper applications.
...nsistreamlistener docontent( in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor a
windowcontext, in boolean aforcesave ); parameters amimecontenttype the content type of 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.
nsIFile
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.
...on mac and
windows, they have an attribute bit set.
nsIFileView
it's not included in
windows or mac builds.
... example <?xml version="1.0" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <
window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex="1" primary="...
...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
see nsidom
windowutils.sendkeyevent() for details; this method is its equivalent for cross-process event handling.
...see nsidom
windowutils.sendmouseevent() for details; this method is its equivalent for cross-process event handling.
... see also content process event handling nsiframeloaderowner nsiframemessagelistener nsichromeframemessagemanager nsidom
windowutils ...
nsIFrameScriptLoader
if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a
window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given
window for the
window message manager, or every frame in every
window for the global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call.
... for example: let
windowmm =
window.messagemanager;
windowmm.loadframescript('data:,dump("foo\n");', true); this will load a separate instance of the frame script into every tab open in the
window associated with this
window message manager.
... as the user opens new tabs in this
window, copies of the script will be loaded into these new tabs, as well.
nsILoginManagerPrompter
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.
... 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).
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...
... 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.
nsITaskbarProgress
widget/public/nsitaskbarprogress.idlscriptable starting in
windows 7, applications can display a progress notification in the taskbar.
... methods setprogressstate() sets the taskbar progress state and value for this
window.
... see also nsiwintaskbar
windows 7 taskbar apis ...
nsPIPromptService
embedding/components/
windowwatcher/public/nspipromptservice.idlscriptable this interface is for the dialog implementers, not for other developers.
... 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.
XPCOM
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.
...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 pa...
...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.
Mail client architecture overview
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.
...this includes the mail compose
window, creation of rfc822 messages from the data a user has entered, and sending the messages via smtp.
Adding items to the Folder Pane
the following code snippet listens for that event: let gnumbersext = { load: function gne_load() {
window.removeeventlistener("load", gnumbersext.load, false); let tree = document.getelementbyid("foldertree"); tree.addeventlistener("maprebuild", gnumbersext._insert, false); }, _insert: function gne__insert() { // this function is called when a rebuild occurs } };
window.addeventlistener("load", gnumbersext.load, true); the structure of folder-tree-items the folder pane stores its...
... } 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...
...rties: function gne_kid_getprops() {}, // no-op command: function gne_kid_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(
window, null, this.text); } }; putting it all together all that is left at this point is to actually add these newly defined folder-tree-items to the folder pane's _rowmap at the appropriate time.
Using the Mozilla source server
now, when you click on a frame in the "calls"
window, windbg will prompt you about running cvs to download the associated source code.
...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.
Scripting plugins - Plugins
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.
...the extensions are two additions to the npnvariables enumeration; the new enumerations are npnv
windownpobject and npnvpluginelementnpobject.
... the new npnvariable enumerations are defined in npapi.h as: npnv
windownpobject = 15, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: nps...
DOM Inspector internals - Firefox Developer Tools
these overlays are: browseroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul venkmanoverlay.xul prefs/prefsoverlay.xul further examination of the chrome manifest will reveal that dom inspector also uses conditional overlays on its primary
window: overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://inspector/content/inspector.xul chrome://browser/content/basemenuoverlay.xul appli...
...inspector.xul itself is only a skeleton describing the basic structure and layout of the primary dom inspector
window, leaving most of its contents to be added by the overlays.
...additionally, it defines the content in the main body of the dom inspector
window, namely, the panelset, document and object viewer panels, and the document browser pane.
Set a breakpoint - Firefox Developer Tools
highlighting the line you want to break at in the source pane and pressing ctrl + b (
windows/linux) or cmd + b (macos).
...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).
... highlight the line of code the breakpoint is set on and pressing ctrl + b (
windows/linux) or cmd + b (macos).
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...
... note: before firefox 66, the combination ctrl + shift + s on
windows and linux or cmd + opt + s on macos would open/close the debugger.
... 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 ...
Index - Firefox Developer Tools
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.
... 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.
Dominators view - Firefox Developer Tools
the first two are call and
window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively.
... 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.
... the
window gc root holds a reference to an htmldivelement object, and that holds a reference to an object, and so on.
Migrating from Firebug - Firefox Developer Tools
the devtools do not have a side panel like the command editor (which is requested in bug 1133849), but therefore has a separate tool called scratchpad, which can be added as panel to the toolbox or opened in a separate
window via firefox menu > developer > scratchpad or shift + f4.
... examine variables the watch side panel in firebug displays the
window object (the global scope) by default.
...it doesn't display the
window object.
Console messages - Firefox Developer Tools
many events can trigger reflows, including: resizing the browser
window, activating pseudoclasses like :hover, or manipulating the dom in javascript.
... 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.
...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, ...
about:debugging (before Firefox 68) - Firefox Developer Tools
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.
... service workers can be unavailable for several reasons: if you are using a private browsing
window.
AnalyserNode.fftSize - Web APIs
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.
... syntax var curvalue = analysernode.fftsize; analysernode.fftsize = newvalue; value an unsigned integer, representing the
window size of the fft, given in number of samples.
... var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
AudioContext.createMediaElementSource() - Web APIs
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.
... var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create variables to store mouse pointer y coordinate // and height of screen var cury; var height =
window.innerheight; // get new mouse pointer coordinates when mouse i...
...s moved // then set new gain value document.onmousemove = updatepage; function updatepage(e) { cury = (
window.event) ?
BeforeUnloadEvent - Web APIs
the beforeunload event is fired when the
window, the document and its resources are about to be unloaded.
..."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.
...
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
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).
...n the left */ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } } and here's the result portrait landscape note: the orientation media query actually applies based on the orientation of the browser
window (or iframe) not the orientation of the device.
... locking the screen orientation warning: this api is experimental and currently available on firefox os and firefox for android with a moz prefix, and for internet explorer on
windows 8.1 and above with a ms prefix.
CacheStorage - Web APIs
the interface: provides a master directory of all the named caches that can be accessed by a serviceworker or other type of worker or
window scope (you’re not limited to only using it with service workers, even though the service workers spec defines it).
... note: chrome and safari only expose `cachestorage` to the
windowed context over https.
...
window.caches will be undefined unless an ssl certificate is configured.
Client - Web APIs
window clients are represented by the more-specific
windowclient.
... you can get client/
windowclient objects from methods such as clients.matchall() and clients.get().
...it can be "
window", "worker", or "sharedworker".
Detecting device orientation - Web APIs
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.
.../ we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of the ball // it center the positioning point to the center of the ball ball.style.top = (maxy*y/180 - 10) + "px"; ball.style.left = (maxx*x/180 - 10) + "px"; }
window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new
window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers.
... processing motion events motion events are handled the same way as the orientation events except that they have their own event's name: devicemotion
window.addeventlistener("devicemotion", handlemotion, true); what's really changed are the information provided within the devicemotionevent object passed as a parameter of the handlemotion function.
DisplayMediaStreamConstraints.video - Web APIs
this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the
windows of the application chosen by the user rendered into the one video track.
...
window the stream contains a single
window selected by the user for sharing.
...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.
Document.hasFocus() - Web APIs
for example, an active element within a popup
window that is not the foreground doesn't have focus.
...to test the functionality of hasfocus(), click on the button to open a new
window, and try switching between the two pages.
... html <p id="log">awaiting focus check.</p> <button onclick="open
window()">open a new
window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function open
window() {
window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment html living standardthe definition of 'document.
Document.open() - Web APIs
for example: all event listeners currently registered on the document, nodes inside the document, or the document's
window are removed.
... 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.
DocumentOrShadowRoot.getSelection() - Web APIs
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.
... in the above example, selobj.tostring() is automatically called when it is passed to
window.alert().
... related objects you can call
window.getselection(), which works identically to document.getselection().
Event.eventPhase - Web APIs
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.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.
... 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") { ...
Fetch API - Web APIs
for making a request and fetching a resource, use the
windoworworkerglobalscope.fetch() method.
... it is implemented in multiple interfaces, specifically
window and workerglobalscope.
... fetch interfaces
windoworworkerglobalscope.fetch() the fetch() method used to fetch a resource.
Guide to the Fullscreen API - Web APIs
in addition, certain kinds of content, such as
windowed plug-ins, cannot be presented in fullscreen mode.
...pressing the return or enter key lets the user toggle between
windowed and fullscreen presentation of the video.
...if it's null, the document is currently in
windowed mode, so we need to switch to fullscreen mode.
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.
... 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.
GlobalEventHandlers.onresize - Web APIs
the resize event fires after the
window has been resized.
... syntax
window.onresize = functionref; value functionref is a function name or a function expression.
... examples
window size logger <p>resize the browser
window to fire the <code>resize</code> event.</p> <p>
window height: <span id="height"></span></p> <p>
window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function resize() { heightoutput.textcontent =
window.innerheight; widthoutput.textcontent =
window.innerwidth; }
window.onresize = resize; specification specification status comment html living standardthe definition of 'onresize' in that specification.
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 structure and functionality required by the elements used to create and manage forms, including the <form> and <input> elements.
... 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.
History.pushState() - Web APIs
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.
...in contrast, setting
window.location keeps you at the same document only if you modify only the hash.
...in contrast, setting
window.location = "#foo"; only creates a new history entry if the current hash isn't #foo.
IDBEnvironment - Web APIs
important: the indexeddb property that was previously defined in this mixin is instead now
windoworworkerglobalscope.indexeddb (that is, defined as a member of the
windoworworkerglobalscope mixin).
...it is the top level indexeddb interface implemented by the
window and worker objects.
... 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.
IDBFactory.open() - Web APIs
example example of calling open with the current specification's version parameter: 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.
...
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some
window.idb* objects:
window.idbtransaction =
window.idbtransaction ||
window.webkitidbtransaction ||
window.msidbtransaction;
window.idbkeyrange =
window.idbkeyrange ||
window.webkitidbkeyrange ||
window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need
window.mozidb*) // let us open version 4 of our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // varia...
IDBFactory - Web APIs
the object that implements the interface is
window.indexeddb.
...
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some
window.idb* objects:
window.idbtransaction =
window.idbtransaction ||
window.webkitidbtransaction ||
window.msidbtransaction;
window.idbkeyrange =
window.idbkeyrange ||
window.webkitidbkeyrange ||
window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need
window.mozidb*) // let us open version 4 of our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
Timing element visibility with the Intersection Observer API - Web APIs
setting up to set things up, we run the startup() function below when the page loads:
window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); build...
...contents(); refreshintervalid =
window.setinterval(handlerefreshinterval, 1000); } first, a reference to the content wrapping <main> element is obtained, so we can insert our content into it.
... function handlerefreshinterval() { let redrawlist = []; visibleads.foreach(function(adbox) { let previoustime = adbox.dataset.totalviewtime; updateadtimer(adbox); if (previoustime != adbox.dataset.totalviewtime) { redrawlist.push(adbox); } }); if (redrawlist.length) {
window.requestanimationframe(function(time) { redrawlist.foreach(function(adbox) { drawadtimer(adbox); }); }); } } the array redrawlist will be used to keep a list of all the ads which need to be redrawn during this refresh cycle, since it may not be exactly the same as the elapsed time due to system activity or because you've set the interval to something other than every 100...
KeyboardEvent.code - Web APIs
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.
...
window.addeventlistener("keydown", function(event) { if (event.defaultprevented) { return; // do nothing if event already handled } switch(event.code) { case "keys": case "arrowdown": // handle "back" updateposition(-moverate); break; case "keyw": case "arrowup": // handle "forward" updateposition(moverate); break; case "keya": case ...
KeyboardEvent.getModifierState() - Web APIs
windows linux (gtk) mac android 2.3 android 3.0 or latter "alt" either alt key or altgr key pressed alt key pressed ⌥ option key pressed alt key or option key pressed "altgraph" both alt and ctrl keys are pressed, or altgr key is pressed level 3 shift key (or level 5 shift key ) pressed ⌥ option key pressed not supported "ca...
... "fnlock" not supported "hyper" not supported "meta" not supported meta key pressed ⌘ command key pressed not supported ⊞
windows logo key or command key pressed "numlock" during led for num lock turned on a key on numpad pressed not supported while numlock is locked "os" ⊞
windows logo key pressed super key or hyper key pressed (typically, mapped to ⊞
windows logo key) not supported "scrolllock" during led for scroll lock turned on during led for scroll lock turne...
...for example, on
windows, pressing ctrl key may make it return true.
KeyboardEvent.key - Web APIs
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.
...
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.
KeyboardEvent.metaKey - Web APIs
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.
Location - Web APIs
both the document and
window interface have such a linked location, accessible via document.location and
window.location respectively.
...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...
... examples // create anchor element and use href property for the purpose of this example // a more correct alternative is to browse to the url and use document.location or
window.location var url = document.createelement('a'); url.href = 'https://developer.mozilla.org:8080/search?q=url#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org:8080/search?q=url#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org...
MediaDevices.getDisplayMedia() - Web APIs
the mediadevices interface's getdisplaymedia() method prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a
window) as a mediastream.
... 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.
... 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.
MediaDevices - Web APIs
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.
...var video = document.queryselector('video'); var constraints =
window.constraints = { audio: 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.lo...
...g('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('permissions have not been granted to use your camera and ' + 'microphone, you need to allow the page access to your devices in ' + 'order for the demo to work.'); } errormsg('getusermedia error: ' + error.name, error); }); function errormsg(msg, error) { errorelement.innerhtml += '<p>' + msg + '</p>'; if (typeof error !== 'undefined') { console.error(...
MediaElementAudioSourceNode - Web APIs
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.
... var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create variables to store mouse pointer y coordinate // and height of screen var cury; var height =
window.innerheight; // get new mouse pointer coordinates when mouse i...
...s moved // then set new gain value document.onmousemove = updatepage; function updatepage(e) { cury = (
window.event) ?
MediaTrackConstraints - Web APIs
this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the
windows of the application chosen by the user rendered into the one video track.
...
window the stream contains a single
window selected by the user for sharing.
...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.
MediaTrackSettings.logicalSurface - Web APIs
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.
... 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.
MediaTrackSettings - Web APIs
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.
... 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.
...
window the stream contains a single
window selected by the user for sharing.
MessageEvent - Web APIs
cross-document messaging (see
window.postmessage() and
window.onmessage).
... messageevent.source read only a messageeventsource (which can be a
windowproxy, messageport, or serviceworker object) representing the message emitter.
...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.
MessagePort: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe =
window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and ...
...start listening for messages on it using code like this:
window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly:
window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; }); specifications specification status html living standard living standard ...
MessagePort: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe =
window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and ...
...start listening for messages and message errors on it using code like this:
window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly:
window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; myport.onmessageerror = (event) => { console.error(event.data); }; }); specifications specification status html living standard living standard ...
msFirstPaint - Web APIs
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.
... var otiming =
window.performance.timing; var itimems = otiming.msfirstpaint - otiming.navigationstart; ...
Using Navigation Timing - Web APIs
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.
... for example, to measure the perceived loading time for a page:
window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting it into an element.
...the new code looks like this:
window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: ...
NavigatorID.appVersion - Web APIs
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.
... the
window.navigator.appversion,
window.navigator.appname and
window.navigator.useragent properties have been used in "browser sniffing" code: scripts that attempt to find out what kind of browser you are using and adjust pages accordingly.
Resize Observer API - Web APIs
for example, 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?
...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.
SVGSVGElement - Web APIs
6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and
windoweventhandlers.
... methods this interface also inherits methods from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and
windoweventhandlers.
... 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.
Screen.height - Web APIs
syntax var height =
window.screen.height example if (
window.screen.availheight !==
window.screen.height) { // something is occupying some screen real estate!
... } notes note that not all of the height given by this property may be available to the
window itself.
... widgets such as taskbars or other special application
windows that integrate with the os (e.g., the spinner player minimized to act like an additional toolbar on
windows) may reduce the amount of space available to browser
windows and other applications.
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.
... when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the
window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
... 'smooth' : 'auto' }
window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'left' in that specification.
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.
... when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the
window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
... 'smooth' : 'auto' }
window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'top' in that specification.
Selection - Web APIs
to obtain a selection object for examination or manipulation, call
window.getselection().
... notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g.: var selobj =
window.getselection();
window.alert(selobj); note that using a selection object as the argument to
window.alert will call the object's tostring method.
...typically, it holds only one range, accessed as follows: var selobj =
window.getselection(); var range = selobj.getrangeat(0); selobj is a selection object range is a range object as the selection api specification notes, the selection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>).
Selection API - Web APIs
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.
... 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().
SourceBuffer - Web APIs
r" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.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 example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasou...
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...
...52' "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-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' ...
... 'iso-2022-jp' "csshiftjis", "ms_kanji", "shift-jis", "shift_jis", "sjis", "
windows-31j", "x-sjis" 'shift-jis' "cseuckr", "csksc56011987", "euc-kr", "iso-ir-149", "korean", "ks_c_5601-1987", "ks_c_5601-1989", "ksc5601", "ksc_5601", "
windows-949" 'euc-kr' "csiso2022kr", "iso-2022-kr" 'iso-2022-kr' "utf-16be" 'utf-16be' "utf-16", "utf-16le" 'utf-16le' "x-user-defined" 'x-user-defined' ...
UIEvent.view - Web APIs
the uievent.view read-only property returns the
windowproxy object from which the event was generated.
... in browsers, this is the
window object the event happened in.
... obsolete from document object model (dom) level 2 events specification, changed the type of view from abstractview to
windowproxy.
WebGLRenderingContext.depthRange() - Web APIs
the webglrenderingcontext.depthrange() method of the webgl api specifies the depth range mapping from normalized device coordinates to
window or viewport coordinates.
... syntax void gl.depthrange(znear, zfar); parameters znear a glclampf specifying the mapping of the near clipping plane to
window or viewport coordinates.
... zfar a glclampf specifying the mapping of the far clipping plane to
window or viewport coordinates.
WebGLRenderingContext - Web APIs
webglrenderingcontext.depthrange() specifies the depth range mapping from normalized device coordinates to
window or viewport coordinates.
...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.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; }
window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext...
Canvas size and WebGL - Web APIs
« previousnext » this webgl 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.
...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.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; }
window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext...
Clearing with colors - Web APIs
--> <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.
...
window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
...
window.removeeventlistener(evt.type, setupwebgl, false); // references to the document elements.
Detect WebGL - Web APIs
<p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; 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.
...the canvas is not added to the // document itself, so it is never displayed in the // browser
window.
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") ...
... 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.
Advanced techniques: Creating and sequencing audio - Web APIs
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.
... 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.
... this.dataset.playing = 'true'; } else {
window.cleartimeout(timerid); this.dataset.playing = 'false'; } }) }); summary we've now got an instrument inside our browser!
Web Storage API - Web APIs
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.
... 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.
HTML in XMLHttpRequest - Web APIs
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 f...
...this test file is small and is not well-formed xml: <title>&&<</title> if the file is named detect.html, the following function can be used for detecting html parsing support: function detecthtmlinxhr(callback) { if (!
window.xmlhttprequest) {
window.settimeout(function() { callback(false); }, 0); return; } var done = false; var xhr = new
window.xmlhttprequest(); xhr.onreadystatechange = function() { if (this.readystate == 4 && !done) { done = true; callback(!!(this.responsexml && this.responsexml.title && this.responsexml.title == "&&<")); } } xhr.onabort = xhr.onerror = functi...
...on() { if (!done) { done = true; callback(false); } } try { xhr.open("get", "detect.html"); xhr.responsetype = "document"; xhr.send(); } catch (e) {
window.settimeout(function() { if (!done) { done = true; callback(false); } }, 0); } } the argument callback is a function that will be called asynchronously with true as the only argument if html parsing is supported and false as the only argument if html parsing is not supported.
Using XMLHttpRequest - Web APIs
*/, "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.o...
...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.
init() - Web APIs
often, this is the outer
window, but it may also be a sandbox or backstage pass.
...prior to firefox 23, this was always a
window.
...if this is specified, it is used even if the global has a
window with a load group already established.
msWriteProfilerMark - Web APIs
syntax
window.mswriteprofilermark("start-render"); parameters bstrprofilermarkname[in] an event name.
... 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.
Web applications and ARIA FAQ - Accessibility
(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 ?
... several inspecting and debugging tools exist to help you test aria in action: object inspector on
windows accessibility inspector on os x accprobe on linux firebug's dom inspector the accessibility inspector for firebug the audits tab in chrome devtools there are several free or open source screen readers that can be used to do hands-on testing with aria.
... they include: orca for linux nvda for
windows voiceover is built into os x when you're testing with a screen reader, keep two key points in mind: casual testing with a screen reader user can never replace feedback, testing, and help from real users.
Web Accessibility: Understanding Colors and Luminance - Accessibility
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.
-ms-high-contrast - CSS: Cascading Style Sheets
the available color keywords are:
windowtext: controls the color of text content.
...
window: controls the color of the background.
... the -ms-high-contrast media feature was introduced in
windows 8.
Using CSS animations - CSS: Cascading Style Sheets
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.
...this causes the first frame of the animation to have the header drawn off the right edge of the browser
window.
Testing media queries programmatically - CSS: Cascading Style Sheets
to do this, use the
window.matchmedia method.
... for example, to set up a query list that determines if the device is in landscape or portrait orientation: const mediaquerylist =
window.matchmedia("(orientation: portrait)"); checking the result of a query once you've created your media query list, you can check the result of the query by looking at the value of its matches property: if (mediaquerylist.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is not currently in portrait orientation, therefore landscape */ } receiving query notifications if you need to be 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.
...const mediaquerylist =
window.matchmedia("(orientation: portrait)"); // define a callback function for the event listener.
font - CSS: Cascading Style Sheets
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.
...*/ 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.
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.
... 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.
Audio and Video Delivery - Developer guides
onsuccess(stream) { var recorder = new mediarecorder(stream); var data = []; recorder.ondataavailable = function(e) { data.push(e.data); }; recorder.start(); recorder.onerror = function(e) { throw e.error || new error(e.name); // e.name is ff non-spec } recorder.onstop = function(e) { var audio = document.createelement('audio'); audio.src =
window.url.createobjecturl(new blob(data)); } settimeout(function() { rec.stop(); }, 5000); }) .catch(function onerror(error) { console.log(error.message); }); see mediarecorder api for more details.
... a quick example — first set up your audio and custom controls in html: <audio id="my-audio" src="http://jplayer.org/audio/mp3/miaow-01-tempered-song.mp3"></audio> <button id="my-control">play</button> add a bit of javascript to detect events to play and pause the audio:
window.onload = function() { var myaudio = document.getelementbyid('my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spaceba...
...r switchstate(); } } mycontrol.addeventlistener('click', function() { switchstate(); }, false);
window.addeventlistener( "keypress", checkkey, false ); } you can try this example out here.
Writing forward-compatible websites - Developer guides
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).
... 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.
...will have a
window.event object available in event handlers.
<button>: The Button element - HTML: Hypertext Markup Language
this is the name of, or keyword for, a browsing context (a tab,
window, or <iframe>).
... _blank: load the response into a new unnamed browsing context — usually a new tab or
window, depending on the user’s browser settings.
... desktop browsers
windows 8.1 os x 10.x firefox yes - firefox 30.0 no (even with a tabindex) firefox 63 chrome yes - chrome 35 yes - chrome 65 safari n/a no (even with a tabindex) safari 12 (bug 22261) internet explorer yes - internet explorer 11 n/a presto yes - opera 12 yes - opera 12 does tapping on a <button> give it focus?
HTML documentation index - HTML: Hypertext Markup Language
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.
... 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.
... 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).
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.
Link types - HTML: Hypertext Markup Language
<a>, <area>, <form> <link> noopener instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the
window.opener property on the opened
window (it returns null).
... this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the
window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
... note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new
window/tab.
JavaScript technologies overview - JavaScript
in a browser, this global object is the
window object, but ecmascript only defines the apis not specific to browsers, e.g.
... looking for the document object,
window object, and the other dom elements?
... other notable apis the settimeout and setinterval functions were first specified on the
window interface in html standard.
Arrow function expressions - JavaScript
var f = () => { 'use strict'; return this; }; f() ===
window; // or the global object all other strict mode rules apply normally.
...let's see what happens when we try to use them as methods: 'use strict'; var obj = { // does not create a new scope i: 10, b: () => console.log(this.i, this), c: function() { 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.
Function.prototype.bind() - JavaScript
creating a bound function from the function, using the original object, neatly solves this problem: this.x = 9; // 'this' refers to global '
window' object here in a browser const module = { x: 81, getx: function() { return this.x; } }; module.getx(); // returns 81 const retrievex = module.getx; retrievex(); // returns 9; the function gets invoked at the global scope // create a new function with 'this' bound to module // new programmers might confuse the // global variable 'x' with module's property 'x' const boundgetx = retriev...
...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.
... function latebloomer() { this.petalcount = math.floor(math.random() * 12) + 1; } // declare bloom after a delay of 1 second latebloomer.prototype.bloom = function() {
window.settimeout(this.declare.bind(this), 1000); }; latebloomer.prototype.declare = function() { console.log(`i am a beautiful flower with ${this.petalcount} petals!`); }; const flower = new latebloomer(); flower.bloom(); // after 1 second, calls 'flower.declare()' bound functions used as constructors warning: this section demonstrates javascript capabilities and documents some edge cases of the bind() method.
Promise - JavaScript
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.
...// we make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) let p1 = new promise((resolve, reject) => { // the executor function is called with the ability to resolve or reject the promise log.insertadjacenthtml('beforeend', thispromisecount + ') promise started (async code started)'); // this is only an example to create asynchronism
window.settimeout(function() { // we fulfill the promise !
...(function(val) { // log the fulfillment value log.insertadjacenthtml('beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in
window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.
Planned changes to shared memory - JavaScript
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.
...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.
WeakMap.prototype.delete() - JavaScript
examples using the delete method var wm = new weakmap(); wm.set(
window, 'foo'); wm.delete(
window); // returns true.
... wm.has(
window); // returns false.
... the
window object is no longer in the weakmap.
instanceof - JavaScript
frames or
windows) different scopes have different execution environments.
...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.
display - Web app manifests
the display mode changes how much of browser ui is shown to the user and can range from browser (when the full browser
window is shown) to fullscreen (when the app is full-screened).
...this can include the application having a different
window, its own icon in the application launcher, etc.
... browser browser the application opens in a conventional browser tab or new
window, depending on the browser and platform.
Authoring MathML - MathML
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.
...
windows users can watch this video tutorial.
...other tools can do handwriting recognition such as the
windows math input panel or the online converter web equation.
Performance fundamentals - Web Performance
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.
... use requestanimationframe() instead of setinterval() calls to
window.setinterval() run code at a presumed frame rate that may or may not be possible under current circumstances.
... instead, you should try to use
window.requestanimationframe().
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...
... _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.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
to open the download actions
window.
...select the svg entry, click the remove action button and then click close to close the download actions
window.
... microsoft
windows one way to fix this in microsoft
windows is to start regedit (start > run > regedit) and search for "svg".
Compiling a New C/C++ Module to WebAssembly - WebAssembly
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.
... 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.
...from inside your latest directory (and while inside your emscripten compiler environment terminal
window), compile your c code with the following command.
Reddit Example - Archive of obsolete content
when the user clicks on the title of a story in the panel, the add-on opens the linked story in a new tab in the main browser
window.
... 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.
Communicating using "port" - Archive of obsolete content
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.
... var pagemodscript = "
window.addeventlistener('click', function(event) {" + " self.port.emit('click', event.target.tostring());" + " event.stoppropagation();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "
window.alert(message);" + "});"...
Two Types of Scripts - Archive of obsolete content
this enables you to call functions like:
window.alert("hello there"); in an add-on's main scripts you can't do that, because the add-on code does not execute in the context of a page, and the dom is therefore not available.
... ✔ ✔ globals defined by the html5 specification, such as
window, document, and localstorage.
indexed-db - Archive of obsolete content
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.
page-worker - Archive of obsolete content
"start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires this property is optional and defaults to "end".
...ng values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
selection - Archive of obsolete content
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.
content/symbiont - Archive of obsolete content
"start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires this property is optional and defaults to "end".
...ng values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
content/worker - Archive of obsolete content
parameters options : object required options: name type
window object the content
window to create javascript sandbox for communication with.
...the script may not be initialized yet, or may already have been unloaded you can handle the detach event in the content script itself though: // in content script self.port.on("detach", function() {
window.close(); }); ...
frame/utils - Archive of obsolete content
usage module exports create function that takes the nsidomdocument of a privileged document and creates a browser element in its documentelement: let { open } = require('sdk/
window/utils'); let { create } = require('sdk/frame/utils'); let
window = open('data:text/html,foo'); let frame = create(
window.document); optionally create can be passed set of options to configure created frame even further.
... execution of scripts may easily be enabled: let { open } = require('sdk/
window/utils'); let { create } = require('sdk/frame/utils'); let
window = open('data:text/html,top'); let frame = create(
window.document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); } globals functions create(document, options) creates a xul browser element in a privileged document.
Adding a Button to the Toolbar - Archive of obsolete content
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.
...you can change the icon, and the other state attributes, either globally, for a specific
window, or for a specific tab.
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
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.
... 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.
Alerts and Notifications - Archive of obsolete content
this works on
windows, linux and (if growl is installed) mac os x: function popup(title, text) { try { components.classes['@mozilla.org/alerts-service;1'] .getservice(components.interfaces.nsialertsservice) .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 users is using of xul elements notificationbox and notification (implicitly).
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...
...ns: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
function importmodule (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]);} } or for one-time-only usage of a module: (function (thatobj) { thatobj = thatobj ||
window; var exported_symbols = [ // put the symbols here ]; // your code here...
Deploying a Plugin as an Extension - Archive of obsolete content
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.
...if your plugin is for
windows, don't forget add to version resources to your plugin's dll.
Extension Versioning, Update and Compatibility - Archive of obsolete content
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...
Hiding browser chrome - Archive of obsolete content
this can be accomplished by augmenting the behavior of the xulbrowser
window object's hidechromeforlocation() method.
...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.
Inline options - Archive of obsolete content
the root <vbox> just acts as a container, it isn't merged into the main
window.
...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.
Listening to events in Firefox extensions - Archive of obsolete content
xulbrowser
window xulbrowser
window is an nsiwebprogresslistener used to get progress events for the currently visible browser.
...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.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
its structure is similar to that of the dynamic html used on some web pages, or the html applications used on
windows.
...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.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
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.
...keep in mind that the user could have set multiple firefox
windows to open at startup, so there's a race condition on which
window will run the first run code.
Appendix F: Monitoring DOM changes - Archive of obsolete content
*/ if ('mozcsskeyframerule' in
window || 'csskeyframerule' in
window) { var watchnodes = function watchnodes(selector, callback, doc) { const event = watchnodes.prefix + (watchnodes._i++); const xhtml = 'http://www.w3.org/1999/xhtml'; doc = doc || document; let style = doc.createelementns(xhtml, 'style'); style.setattribute('type', 'text/css'); let preamble = ' @-moz-keyframes...
... style = components.utils.getweakreference(style); return function unwatch() { if (style.get()) { style.get().ownerdocument.removeeventlistener('animationstart', listener, false); style.get().parentnode.removechild(style.get()); } }; } watchnodes.namespace = 'mozcsskeyframerule' in
window ?
Getting Started with Firefox Extensions - Archive of obsolete content
after installing, look at the main firefox
window and see if you notice anything different.
...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.
The Box Model - Archive of obsolete content
the label element should be used mainly for text in xul forms, such as the ones you see in the firefox options / preferences
window.
...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.
Signing an extension - Archive of obsolete content
in the options
window, open the advanced panel, then select the encryption tab.
... 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.
Using the Stylesheet Service - Archive of obsolete content
the stylesheets registered with this api apply to all documents; firefox 18 extended nsidom
windowutils with loadadditionalstylesheet() and removeadditionalstylesheet() to manage stylesheets for a specific document (bug 737003).
...if you don't check, you will wind up adding your sheet once per
window load.
Underscores in class and ID Names - Archive of obsolete content
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.
... internet explorer 6 for
windows, published after the errata, permits underscores and escaped underscores.
MozBeforeResize - Archive of obsolete content
the mozbeforeresize event is executed before a browser
window is resized.
... general info specification mozilla specific interface event bubbles no cancelable no target
window default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
MozOrientation - Archive of obsolete content
an event that is repeatedly fired on the
window as accelerator data is provided to the browser.
... 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.
Localizing an extension - Archive of obsolete content
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.
...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.
MMgc - Archive of obsolete content
on
windows, this uses the virtualalloc api to obtain memory.
...we currently use virtualalloc for
windows (supported on all flavors of
windows back to 95), mmap on mach-o and linux.
Same-origin policy for file: URIs - Archive of obsolete content
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.
Source Navigator - Archive of obsolete content
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.
...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 ...
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
when loaded from local disk on
windows.
... 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.
Creating a Firefox sidebar extension - Archive of obsolete content
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.
...click on the file and the extension installation
window pops up.
Making a Mozilla installation modifiable - Archive of obsolete content
make sure you start the modified copy and not the default installation on your machine, and shut down "quick launch" if you are on
windows and that feature is enabled.
... if mozilla starts up and displays a normal-looking web browser
window, then you have successfully made your copy of mozilla modifiable!
GRE - Archive of obsolete content
it was installed with the
windows installer of mozilla 1.4 through 1.7.x.
...xulrunner supports or is planned to support embedding on all three major platforms (
windows, mac, and linux).
Hidden prefs - Archive of obsolete content
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.
...| mail & newsgroups | addressing" "other compose header" pref from mailnews.js: // you can specify a comma delimited list of optional headers // this will show up in the address picker in the compose
window // examples: "x-face" or "approved" pref("mail.compose.other.header", "approved,x-no-archive"); ...
Java in Firefox Extensions - Archive of obsolete content
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".
Menu - Archive of obsolete content
window the content
window in which the menu is shown.
...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 ...
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.
...for information on setting your local build as the default, visit the
windows 8 integration wiki page.
Mozilla Application Framework in Detail - Archive of obsolete content
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 xpinstall api makes the following functionality available as high-level javascript objects: an install trigger that initiates installations
windows registry access mozilla registration interfaces for registering new mozilla software facilities for detecting and maintaining application versions high-level objects for manipulating local directories and files complete reference documentation, including useful example installations the following snippet from an xpinstall installation gives you some idea about how easy it is to write cross-...
FAQ - Archive of obsolete content
it lets users start web applications from their desktop, start menu, and dock, and it opens those applications in their own
window separate from a web browser and without the browser interface (back and forward buttons, location bar, etc.).
... microsoft
windows 2000 xp vista mac os x 10.3.9+ (panther) 10.4 (tiger) 10.5 (leopard) linux kernel 2.2.14+ with glibc 2.3.2, xfree86-3.3.6, gtk+2.0, fontconfig/xft, and libstdc++5 ...
Prism - Archive of obsolete content
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.
RDF Datasource How-To - Archive of obsolete content
the following xul fragment illustrates how to instantiate a tree control whose body is "rooted" to a resource (http://foo.bar.com/) that your datasource describes: <
window xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <tree datasources="rdf:my-datasource" ref="http://foo.bar.com/"> <template> <treechildren> <treeitem uri="..."> <treerow> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#n...
... </treecell> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#url" /> </treecell> </treerow> </treeitem> </treechildren> </template> <treehead> <treeitem> <treecell>name</treecell> <treecell>url</treecell> </treeitem> </treehead> <!-- treechildren built _here_ --> </tree> </
window> the important "magic attributes" have been called out in bold, above: datasources="rdf:my-datasource".
Safely loading URIs - Archive of obsolete content
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.
... 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.
Table Layout Regression Tests - Archive of obsolete content
++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.
...++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.
Install Wizards (aka: Stub Installers) - Archive of obsolete content
t reads in the configuration file (config.ini) and dynamically installs from the net or from local xpi modules found next to the installer binary the code that processes user selections the code that calls the xpinstall engine through 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?
getWinRegistry - Archive of obsolete content
getwinregistry (
windows only) constructs an object for working with the
windows registry.
...description use the getwinregistry method to create an object for manipulating the contents of the
windows registry.
Methods - Archive of obsolete content
getwinprofile constructs an object for working with a
windows .ini file.
... getwinregistry constructs an object for working with the
windows registry.
getString - Archive of obsolete content
description the getstring method is similar to the
windows api function getprivateprofilestring.
...example to get the name of the wallpaper file from the desktop section of the win.ini file, use this call: ini = getwinprofile (getfolder("
windows"), "win.ini"); var wallpapervalue = ini.getstring ("desktop", "wallpaper"); ...
writeString - Archive of obsolete content
description the writestring method is similar to the
windows api function writeprivateprofilestring.
... example to set the name of the wallpaper file from the desktop section of the win.ini file, use this call: ini = getwinprofile (getfolder("
windows"), "win.ini"); ini.writestring ("desktop", "wallpaper", "newpathname"); ...
WinProfile Object - Archive of obsolete content
winprofile (
windows only)
windows developers use this object to manipulate the content of a
windows .ini file.
...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.
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...
...able 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 ...
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.
buttons - Archive of obsolete content
the cancel button might be shown as an additional possibility to close the dialog in this situation (
windows and linux) or might be hidden, too (mac os).
... the default setting of browser.preferences.instantapply currently is true on linux and mac os and false on
windows (which however might or might not change soon, see bug 738797 and bug 1037225).
inactivetitlebarcolor - Archive of obsolete content
« xul reference home inactivetitlebarcolor type: color string specify background color of the
window's titlebar when it is inactive (background).
... moreover this hides separator between titlebar and
window contents.
insertafter - Archive of obsolete content
« xul reference home 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 value may be a comma-separated list of ids, which are scanned and the first one found in the
window is used.
insertbefore - Archive of obsolete content
« xul reference home 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 may be a comma-separated list of ids, which are scanned and the first one found in the
window is used.
onchange - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the
window object event object example <?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"> <script type="text/javascript"> function myfunct...
...ion(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </
window> ...
resizer.type - Archive of obsolete content
« xul reference hometypetype: stringset this to the value "
window" for a resizing grip that appears in the bottom corner of the
window, used for resizing the
window.
... as some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the
window does not get an extra resizer.
wait-cursor - Archive of obsolete content
usually, you would only use this on the
window element or other top-level elements.
... see also https://developer.mozilla.org/docs/talk:xul/attribute/wait-cursor this seems to work instead of trying to set a wait-cursor attribute:
window.setcursor('wait') and
window.setcursor('auto') ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
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.
...(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.
How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?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"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> <row uri="?"> <label value="?n...
...ame"/> <label value="?age"/> <label value="?hair"/> <label value="?eye"/> </row> </template> </rows> </grid> </
window> a few things to note.
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.
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...
Namespaces - Archive of obsolete content
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"> ...
MenuItems - Archive of obsolete content
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.
MoveResize - Archive of obsolete content
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.
...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.
controllers - Archive of obsolete content
example <
window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") 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> ...
Notes - Archive of obsolete content
implementing an nsicommandlinehandler on
windows may trigger a bug that causes an error message ("
windows cannot find the file specified") to be displayed when opening external links (like from a shortcut or from an external application).
... deleting the "(default)" values in the following registry keys will fix this: hkey_classes_root\http\shell\open\ddeexec hkey_classes_root\https\shell\open\ddeexec you can also do this from within your xpcom component using
windows registry interface.
Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype
window> <
window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="cle...
...class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </
window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position.
textbox (Toolkit autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the
window object event object example <?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"> <script type="text/javascript"> function myfunct...
...ion(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </
window> oninput type: script code this event is sent when a user enters text in a textbox.
Textbox (XPFE autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the
window object event object example <?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"> <script type="text/javascript"> function myfunct...
...ion(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </
window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
Complete - Archive of obsolete content
it provides all five custom toolbar buttons on all the toolbars, and it provides corresponding menu choices in seamonkey's chatzilla
window.
...display a description of the extension in the extensions
window.
Adding Style Sheets - Archive of obsolete content
mozilla applies a default style sheet to each xul
window.
...an example is shown below: <?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?> this might be the first lines of a bookmarks
window.
Introduction - Archive of obsolete content
this tutorial will demonstrate creating a simple find file user interface, much like that provided by the macintosh's sherlock or the find file dialog in
windows.
... 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.
Introduction to XBL - Archive of obsolete content
xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <
window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </
window> css (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"...
...> <binding id="okcancel"> <content> <xul:button label="ok"/> <xul:button label="cancel"/> </content> </binding> </bindings> this example creates a
window with a single box.
Open and Save Dialogs - Archive of obsolete content
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'.
...this function takes three arguments, the
window that is opening the dialog, the title of the dialog and the mode.
XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a
window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event hand...
...stent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xbl example specialized
window types features of a
window creating dialogs open and save dialogs creating a wizard more wizards overlays cross package overlays installation creating an installer install scripts additional install features this xul tutorial was originally created by neil deakin.
Using Visual Studio as your XUL IDE - Archive of obsolete content
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.
...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").
Using multiple DTDs - Archive of obsolete content
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.
... assuming you have an entity called somebutton.label defined in main
window.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doctype
window [ <!entity % commondtd system "chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % main
windowdtd system "chrome://myextension/locale/main
window.dtd"> %main
windowdtd; ]> you can now access the entities declared in the dtds as shown above.
Using the standard theme - Archive of obsolete content
by default, no style is associated with xul extension
windows or dialogs.
... 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.
XUL Changes for Firefox 1.5 - Archive of obsolete content
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.
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <
window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" object="?friends"/...
...s" object="?addr"/> <binding subject="?addr" predicate="http://home.netscape.com/nc-rdf#street" object="?street"/> </bindings> <action> <hbox uri="?friend"> <label value="?name"/> <label value="?street"/> </hbox> </action> </rule> </template> </vbox> </
window> the xul template primer covers the <conditions> and <action> elements, so we won't discuss those here.
dialogheader - Archive of obsolete content
title type: string the text to appear in the title bar of the
window.
...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...
...olbargrippy 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
this element is used, for example, to implement the yellow information bar in various firefox
windows.
... 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.
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <
window id="your
window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="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> <textb...
...ox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </
window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.
treecol - Archive of obsolete content
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.
...this is used in mozilla's download manager
window.
Deploying XULRunner - Archive of obsolete content
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.
toolkit.defaultChromeFeatures - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: "chrome,dialog=no,all" example: pref("toolkit.defaultchromefeatures", "chrome,resizable=no,dialog=no"); the toolkit.defaultchromefeatures preference allows simple xulrunner-based applications to specify what features are passed to
window.open() when the main application
window is opened.
... see also: xulrunner:specifying startup chrome
window, dom:
window.open, toolkit.defaultchromeuri, toolkit.singleton
windowtype.
mozilla.dev.platform FAQ - Archive of obsolete content
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.
Gecko Compatibility Handbook - Archive of obsolete content
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.
Mozilla release FAQ - Archive of obsolete content
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.
...when i try to use cvs on
windows, i get an error about no home directory you need to set the home environment variable to a valid directory, as cvs was designed with unix in mind, and wants to put a file in your home directory (the password file) i'm on a unix system, and still am having problems building here's a brief guide to common build problems: cc1: invalid option 'foo' cc: no such file or directory 'foo' these are almo...
2006-10-20 - Archive of obsolete content
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.
... adding support for new uri scheme question regarding creating a new uri scheme for firefox on
windows.
2006-11-17 - Archive of obsolete content
firefox 2.0 -
window.focus() user questions where the change in behaviour in
window.focus() is a bug or was intented.
... 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.
2006-10-20 - Archive of obsolete content
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.
... 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.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.builds - november 17th to november 24th 2006 trouble building xulrunner 1.8.4 on winxp using mingw32 november 20th: joe is trying to build xulrunner using the ming compiler on
windowsxp.
... firefox 1.5 build on
windows with gtk2 november 23rd: vin is trying to build firefox 1.5.0.3 on
windows xp.
2006-12-01 - Archive of obsolete content
windows dde shell integration removal robert strong announces that a long standing bug in firefox's use of the
windows dde shell integration code has been uncovered during vist os integration testing.
... firefox's use of this code has been removed but the
windows dde shell integration code has been kept so that 3rd party apps depending on this code can stay working.
NPEmbedPrint - Archive of obsolete content
syntax typedef struct _npembedprint { np
window window; void* platformprint; /* platform-specific */ } npembedprint; fields the data structure has the following fields:
window the np
window the plug-in should use for printing.
... unix the plug-in location and size in the np
window are in page coordinates (720/ inch), but the printer requires point coordinates (72/inch).
NPN_Evaluate - Archive of obsolete content
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.
...description the script is evaluated in the context of the
window that the calling plugin instance (the <tt>npp</tt> argument) is loaded in.
NPN_InvalidateRect - Archive of obsolete content
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().
...the browser redraws invalid areas of the document and any
windowless plug-ins at regularly timed intervals.
NPN NewStream - Archive of obsolete content
target name of the target
window or frame, or one of several special target names.
...the target parameter is the name of the target
window or frame, or one of several special target names.
NPP_Destroy - Archive of obsolete content
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.
... note: you should not perform any graphics operations in npp_destroy as the instance's
window is no longer guaranteed to be valid.
NPP_New - Archive of obsolete content
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.
NPRect - Archive of obsolete content
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 ...
Tamarin Tracing Build Documentation - Archive of obsolete content
for instructions on tamarin central, please see tamarin build documentation supported platforms operating system processor status
windows xp x86 supported, acceptance and performance tests automated in buildbot mac os x 10.4 x86 supported, acceptance and performance tests automated in buildbot linux - ubuntu 8.0.4 x86 supported, acceptance and performance tests automated in buildbot
windows mobile (pocket pc 5.0) armv4t supported, acceptance and performance tests automated in buildbot raw image (no os) armv5 supported, acceptance and performance tests not done linux (nokia n810) armv5 supported, acceptance and performance tests not done current build status...
... $ 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.
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
for firefox, we overlaid onto browser.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.
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.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.
-ms-filter - Archive of obsolete content
important: as of
windows internet explorer 9 this feature was deprecated.
...ble lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in
windows internet explorer 8, the -ms-filter attribute is an extension to css, and can be used as a synonym for filter in ie8 standards mode.
-ms-scroll-translation - Archive of obsolete content
remarks this property requires
windows 8 or later.
... 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
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.
...s css property is a microsoft extension specifying the maximum number of consecutive lines in an element that may be ended with a hyphenated word.-ms-hyphenate-limit-zonethe -ms-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone.-ms-ime-alignthe -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.
ScriptEngine() - Archive of obsolete content
example the following example illustrates the use of the scriptengine function: if (
window.scriptengine) { console.log(
window.scriptengine()); } // output: jscript 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).
ScriptEngineBuildVersion - Archive of obsolete content
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 apps (
windows 8 and
windows phone 8.1).
ScriptEngineMajorVersion - Archive of obsolete content
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
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 apps (
windows 8 and
windows phone 8.1).
@cc_on - Archive of obsolete content
warning: conditional compilation is not supported in internet explorer 11 standards mode and
windows 8.x store apps.
... /*@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
warning: conditional compilation is not supported in internet explorer 11 standards mode and
windows 8.x store apps.
... /*@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
warning: conditional compilation is not supported in internet explorer 11 standards mode and
windows 8.x store apps.
... requirements supported in all versions of internet explorer, but not in
windows 8.x store apps.
LiveConnect Overview - Archive of obsolete content
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.
... 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.
Writing JavaScript for XHTML - Archive of obsolete content
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.
... 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 &.
Archived open Web documentation - Archive of obsolete content
you can opt in in html as follows:
window.importdialog() because opening
windows on mobile isn't necessarily appropriate, the firefox mobile team designed the importdialog() method to replace
window.opendialog().
... instead of opening a new
window, it merges the specified xul dialog into the main
window.
The Business Benefits of Web Standards - Archive of obsolete content
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.
... 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.
XQuery - Archive of obsolete content
xquseme is a working proof-of-concept (so far tested on
windows and linux with java installed; mac does not work) extension which allows one to perform xqueries on external urls, the currently loaded webpage (even if originally from poorly formed html), and/or xml (including well-formed xhtml) documents stored locally.
... 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.
Index - Game development
we touch on css transitions and css animations, and javascript loops involving
window.requestanimationframe.
... 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.
Desktop gamepad controls - Game development
first, we need an event listener to listen for the connection of the new device:
window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows u...
...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.
Implementing controls using the Gamepad API - Game development
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.
...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.
Efficient animation for web games - Game development
we touch on css transitions and css animations, and javascript loops involving
window.requestanimationframe.
... 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.
2D maze game with device orientation - Game development
here’s the code from the create() function responsible for this:
window.addeventlistener("deviceorientation", this.handleorientation, true); we’re adding an event listener to the "deviceorientation" event and binding the handleorientation function which looks like this: handleorientation: function(e) { var x = e.gamma; var y = e.beta; ball._player.body.velocity.x += x; ball._player.body.velocity.y += y; }, the more you tilt the device, the more f...
... 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.
Visual JS GE - Game development
visual-js gameengine is a small but comprehensive canvas/websocket-based game engine with gui source editor only for
windows.
... visual js.exe
windows gui freeware only for
windows users.
WAI-ARIA basics - Learn web development
once that is done, we start up a setinterval() loop that loads a new random quote into the quote box every 10 seconds: let intervalid =
window.setinterval(showquote, 10000); this works ok, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on.
...l> </ul> </div> role="alert" automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like alert() calls have a number of accessibility problems; see popup
windows by webaim).
Sizing items in CSS - Learn web development
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.
How CSS is structured - Learn web development
change the width of your browser
window to see the result.
...on large screen or
window, we increase the font size for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* handle specific elements nested in the dom */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { pad...
Advanced form styling - Learn web development
for example, consider this simple test case: <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>...
...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...
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...
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...
... 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.
Responsive images - Learn web development
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.
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
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.
...add the following code to your example, again inside
window.onload: l.marker([53.480759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object contai...
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
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.
...tn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine') { btn.textcontent = 'stop machine'; txt.textcontent = 'the machine has started!'; } else { btn.textcontent = 'start machine'; txt.textcontent = 'the machine is stopped.'; } } open in new
window you can see the equality operator being used just inside the updatebtn() function.
Handling text — strings in JavaScript - Learn web development
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.
Adding features to our bouncing balls demo - Learn web development
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.
Object building practice - Learn web development
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.
... 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).
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...
... post https://developer.mozilla.org/profiles/hamishwillee/edit http/1.1 host: developer.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org 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 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/profiles/hamishwillee/edit accept-encoding: gzip, deflate, br accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1...
Getting started with Ember - Learn web development
(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.
... 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.
Getting started with React - Learn web development
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.
Getting started with Svelte - Learn web development
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.
Handling common HTML and CSS problems - Learn web development
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.
...on
windows/linux) and choose the install option in the left hand menu.
Information for Assistive Technology Vendors
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.
Links and Resources
its accessibility report is viewable in the view source
window.
... open source assistive technology projects nonvisual desktop access open source screen reader for
windows, written in python.
Creating a Firefox sidebar
the
window.sidebar api obsolete since gecko 23 (firefox 23 / thunderbird 23 / seamonkey 2.20)this feature is obsolete.
... as of firefox 23, the addpanel and addpersistentpanel functions have been removed from the deprecated, netscape-derived
window.sidebar object.
Creating a Language Pack
windows: replace make with mozmake in the commands below!
... $ 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.
Debugging JavaScript
to see anything, you need to set the pref browser.dom.
window.dump.enabled to true, e.g.
... 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().
Debugging
debugging the mozilla platform using debuggers with mozilla debugging mozilla on
windows faq questions (and answers) about debugging mozilla on
windows.
... debugging a minidump
windows crash reports include a minidump, which contains a lot of information about the application when it crashed.
Gmake vs. Pymake
path issues on
windows on
windows, you must take special care to be able to switch back and forth between gmake and pymake on the same object dir.
... gmake uses msys paths ("/c/dev/foo"), while pymake uses native
windows paths ("c:\dev\foo").
ESLint
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.
... 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.
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 ~...
... ~/.mozilla/firefox/xxxxxxxx.default/ n/d thunderbird os application 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 an...
Tracking Protection
in private browsing
windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites.
...llback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (
window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
Using the Browser API
it consists of two major parts: custom <iframe> attributes: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser
window to the embedded content.
... this means that
window.top,
window.parent,
window.frameelement, etc.
mozbrowserclose
the mozbrowserclose event is fired when the content of a browser <iframe> calls the
window.close() method.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser
window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
HTMLIFrameElement.setVisible()
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.
How to investigate Disconnect failures
check if firefox crashed:
windows: [user]/appdata\roaming\mozilla\firefox\crash reports ubuntu: [user/home]/.mozilla/firefox/crash reports and there we can check by timestamp if firefox crashed when we had the disconnect.
... the event viewer can be found on
windows: computer management > event viewer >
windows logs > application and here we look for errors that overlapped with the test run; we cannot see the freezes (the main thread is blocked).
AddonManager
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?
... 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.
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).
... to use timer.jsm, first import it: components.utils.import("resource://gre/modules/timer.jsm"); then call settimeout and cleartimeout just as you would in a dom
window, for example: let timeoutid = settimeout(function() { console.log("hello!"); }, 500); cleartimeout(timeoutid); similarly, you can use setinterval and clearinterval like so: let intervalid = setinterval(function() { console.log("happening every 500ms!"); }, 500); clearinterval(intervalid); ...
JavaScript code modules
customizableui.jsm allows you to interact with customizable buttons and items in firefox's main
window ui.
... timer.jsm a pure js implementation of
window.settimeout.
L10n Checks
once python is installed, the easiest way to install l10n checks (on mac or linux) is to just run: $ sudo easy_install -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.
L10n testing with xcode
a
window will then appear showing the diff between the imported xliff file and the existing resources in the project folder.
... 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.
MathML Accessibility in Mozilla
this table below provides a list of mathml constructions and how they are read in mozilla applications for various platforms:
windows: mathml support is provided by nvda, which actually delegates math reading to the proprietary mathplayer plugin.
... 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.
Using the viewport meta tag to control layout on mobile browsers
background the browser's viewport is the area of the
window in which web content can be seen.
...mobiles) render pages in a virtual
window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once.
Mozilla Web Developer FAQ
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’.
...
windows ie also shows the title attribute in a tooltip.
GC and CC logs
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).
...most big leaks include an nsglobal
window, so that's a good class to try if you don't have any better idea.
Power profiling overview
intel power gadget: pkg and pp0 planes;
windows, mac and linux.
...via tools/power/rapl, or mach power on mac, or intel power gadget on
windows) for the comparisons.
TraceMalloc
also, your javascript can call the following dom
window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log events for all log files.
...<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.
Performance
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.
... intel power gadget (
windows, mac, linux) intel power gadget provides real-time graphs for package and processor rapl estimates.
accessibility.tabfocus
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.
...the value 7 (give focus to all elements) is the default on
windows and linux.
nglayout.debug.disable_xul_cache
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.
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.
NSPR LOG FILE
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.
Introduction to Network Security Services
(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 library nss3.dll -
windows shared library nss3.lib -
windows import library binding to nss3.dll nss.lib -
windows static library nss, ssl, and s/mime have all of the above forms.
NSS 3.12.4 release notes
bug 470500: firefox 3.1b2 crash report [[@ nssutil3.dll@0x34c0 ] bug 482742: enable building util independently of the rest of nss bug 483653: unable to build certutil.exe for fennec/wince bug 485145: miscellaneous crashes in signtool on
windows bug 485155: nss_enable_pkix_verify=1 causes sec_error_unknown_issuer errors bug 485527: rename the _x86_ macro in lib/freebl bug 485658: vfychain -p reports revoked cert bug 485745: modify fipstest.c to support cavs 7.1 drbg testing bug 486304: cert7.db/cert8.db corruption when importing a large certificate (>64k) bug 486405: allocator mismatches in pk12util.c bug 486537: disable execstack in fr...
...eebl x86_64 builds on linux bug 486698: facilitate the building of major components independently and in a chain manner by downstream distributions bug 486999: calling ssl_setsockpeerid a second time leaks the previous value bug 487007: make lib/jar conform to nss coding style bug 487162: ckfw/capi build failure on
windows bug 487239: nssutil.rc doesn't compile on wince bug 487254: sftkmod.c uses posix file io functions on wince bug 487255: sdb.c uses posix file io functions on wince bug 487487: cert_nametoascii reports !invalid ava!
NSS 3.46 release notes
hangs on
windows x64 when building nss since changeset 9162c654d06915f0f15948fbf67d4103a229226f bug 1564875 - improve rebuilding with build.sh bug 1565243 - support tc_owner without email address in nss taskgraph bug 1563778 - increase maxruntime on mac taskcluster tools, ssl tests bug 1561591 - remove -wmaybe-uninitialized warning in tstclnt.c bug 1561587 - remove -wmaybe-uninitialized warning in lgattr.c ...
...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 note2
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.
nss tech note6
the new checksum file is called libsoftokn3.chk on unix/linux and softokn3.chk on
windows.
... 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 .
NSS tools : ssltab
in your browser
window, enter the url http://intercept:1924.
...this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window.
NSS tools : ssltap
in your browser
window, enter the url http://intercept:1924.
...this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window.
gtstd.html
on
windows nt, use the nmake utility that comes with visual c++.
...in addition, you must use the following compiler flags: solaris flags: -c -o -kpic -dsvr4 -dsysv -d__svr4 -d__svr4__ -dsolaris -d_reentrant -dsolaris2_5 -d_svid_gettod -dxp_unix -udebug -dndebug
windows nt flags: -c -o2 -md -w3 -nologo -d_x86_ -gt -dwinnt -dxp_pc -udebug -u_debug -dndebug -dwin32 -d_
windows ...
NSS tools : ssltap
in your browser
window, enter the url http://intercept:1924.
...this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell
window.
Index
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).
...that will open a small
window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
JS_SetGCZeal
3 collect on
window paints.
... 5 verify pre write barriers between
window paints.
WebReplayRoadmap
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.
Using RAII classes in Mozilla
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.
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...
... sensitive files shouldn’t be world readable file i/o: file descriptors and handles could be a race if instances of fh are shared between threads fh inheritence: default in unix, needs to be set in
windows int main(int argc, char **argv, char **envp) { int fd = open("/etc/shadow", o_rdwr); setreuid(getuid(), getuid()); excve("/bin/sh", argv, envp); } suid root applications file i/o: file descriptors and handles potential overflows when using select fd_set struct, static length, holds a bitmask of fds manipulated with fd_set, fd_isset, fd_clr and fd_zero macros fd_set’s size depends on the operating system if the os allows opening more fds, then fd_set can hold could overflow fd_set file i/o: file descriptors and handles good solution: dynamically allo...
XForms Accessibility
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.
Feed content access API
that code looks like this: feedtestresultlistener.prototype = { handleresult: function(result) { var feed = result.doc; feed.queryinterface(components.interfaces.nsifeed); // open a new
window var win =
window.open("", "feedtest_
window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.lengt...
...this opens a new
window containing the feed contents, with each item's title a clickable link that takes you to the article itself.
extIApplication
windows readonly attribute nsivariant an array of browser
windows within the application.
... active
window readonly attribute fueli
window the currently active browser
window.
XPCOM Glue without mozalloc
starting with xulrunner 2.0, the frozen linkage dependent glue (xpcomglue_s.lib on
windows, libxpcomglue_s.a on linux and mac) is dependent on the new infallible memory allocation routines (mozalloc).
...the solution is to link against xpcomglue_s_nomozalloc instead (xpcomglue_s_nomozalloc.lib on
windows, libxpcomglue_s_nomozalloc.a on linux and mac).
Finishing the Component
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.
... here is the complete implementation of the shouldload() method: ns_imethodimp weblock::shouldload(print32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidom
window *
window, prbool *_retval) { if (!contentlocation) return ns_error_failure; nsembedcstring scheme; contentlocation->getscheme(scheme); if (strcmp("http", scheme.get()) != 0 && strcmp("https", scheme.get()) != 0 && strcmp("ftp", scheme.get()) != 0) { // this isn't a type of uri that we deal with *_retval = pr_true; return ns_ok; } ...
Packaging WebLock
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.
... 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.
Components.utils.getWeakReference
example in this example here, a weak reference to a
window is held.
... var arr = []; arr.push(cu.getweakreference(
window)); //now lets say this code runs in another block: for (var i=0; i<arr.length; i++) { if (arr[i].get() ==
window) { //found the
window break; } } ...
Components.utils.unwaiveXrays
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.
... the chrome code can then use unwaivexrays to restore xray protection: // chrome code // content
window is an xray var isxray = components.utils.isxraywrapper(gbrowser.content
window); // true // expandos are not visible in xrays var foo = gbrowser.content
window.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.content
window); isxray = components.utils.isxraywrapper(waived); // false foo = waived.foo; // "i'm an expando" // waiving is transitive isxray = components.utils.isxraywrapper(waived.document); // false // use unwaivexrays to undo the waiver var unwaived = components.utils.unwaivexrays(waived); isxray = compo...
Components.utils.waiveXrays
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: // chrome code // content
window is an xray var isxray = components.utils.isxraywrapper(gbrowser.content
window); // true // expandos are not visible in xrays var foo = gbrowser.content
window.foo; ...
... // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.content
window); isxray = components.utils.isxraywrapper(waived); // false foo = waived.foo; // "i'm an expando" // waiving is transitive isxray = components.utils.isxraywrapper(waived.document); // false ...
XPConnect wrappers
this includes all dom objects (including
window) and chrome elements that are reflected into javascript.
...this means that when you say
window.focus(), you're calling into xpcwrappednative code.
xpcshell
(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.
IAccessibleText
coordtype specifies if the coordinates are relative to the screen or to the parent
window.
...coordtype screen coordinates or
window coordinates.
amIWebInstallInfo
originating
window nsidom
window the
window that started the installs.
... note: prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5), this was an nsidom
windowinternal.
amIWebInstallPrompt
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.
...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.
nsIBidiKeyboard
currently, this is only implemented on
windows.
... remarks implementation
windows this implementation uses win32 api to get the language of the keyboard layout, and the direction of those languages.
nsIBrowserHistory
lastpagevisited obsolete since gecko 10.0 autf8string the last page that was visited in a top-level
window.
... 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).
nsIControllers
windows and text inputs have default controllers that allow commands such as cmd_copy to act on the focused element or
window.
...you should not normally need to create an instance, as you normally need to alter the
window or element's existing list of controllers.
nsICookiePromptService
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.
... 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.
nsICrashReporter
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.
nsIDebug
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.
...however, on
windows a dialog is first presented giving the user the option of aborting, breaking, or ignoring the request.
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" user start menu programs directory!
nsIINIParserWriter
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.
nsIMsgIdentity
if this is set, the return receipt menu item on the compose
window will be checked.
...if this is set, the dsn menu item on the compose
window will be checked.
nsIObserver
serverservice.addobserver(this, "mytopicid", false); }, unregister: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "mytopicid"); } } instantiation - this should be fired once you're ready to start observing (for example a
window's load event).
... observer = new myobserver(); destruction - this should be fired once you're done observing (for example a
window's unload event).
nsISHEntry
(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.
...if either contentviewer or
windowstate are null, then all of the following members are cleared/reset: contentviewer, sticky,
windowstate, viewerbounds, childshells, refreshurilist.
nsIScreenManager
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.
...this pointer's definition is specific to the platform's native widget implementation, and is typically of the same type as ns_native_
window.
nsITransferable
note: currently, this can only be used on
windows (in order to support network principal information in drag operations).
...for example, we try to delete data that you copy to the clipboard when you close a private browsing
window.
nsIUpdatePrompt
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) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidom
window parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
...void showupdatehistory( in nsidom
window parent ); parameters parent an nsidom
window indicating the parent
window to which to anchor the update list
window.
nsIWebBrowserFindInFrames
attributes attribute type description currentsearchframe nsidom
window frame at which to start the search.
... rootsearchframe nsidom
window frame within which to confine the search (normally the content area frame).
nsIWinAppHelper
toolkit/xre/nsiwinapphelper.idlscriptable used on
windows only to do some work from a special process that gets created with elevated privileges.
... 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.
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 ...
NS_ASSERTION
in a debug build the failure text is written to console (stderr), into the nspr debug log, and on
windows a dialog box is opened.
...syntax ns_assertion(expressiontotest, "error text"); see also ns_abort_if_false ns_precondition ns_postcondition disabling assertion dialog box on
windows ...
Storage
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 includes "my.db" and "../dir/my.db" or, on
windows (case-insensitive) "my.db" and "my.db".
XPCOM ABI
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.
... a binary xpcom component consists of an .xpt file which fits all platforms and a dll (.dll on
windows, .so on unix) which is platform-specific and has a certain abi.
XPIDL
normally, declarations are made in the stdcall abi on
windows to be abi-compatible with com interfaces.
... 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.
LDAP Support
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.
...in thunderbird, the type down
window can be customized to show arbitrary ldap fields.
Mail and RDF
this allows each template-based widget to maintain view/
window-specific data with each datasource.
...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.
Thunderbird Binaries
trunk builds contain the very latest bleeding-edge changes and updates, as well as 64-bit builds for
windows.
...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.
Building a Thunderbird extension 5: XUL
we add widgets by inserting new xul dom elements into the application
window and modify them using scripts and attaching event handlers.
...ample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- a reference to your javascript file --> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="date"/> </statusbar> </overlay> the <statusbar> widget named status-bar specifies the merge point within the application
window that we want to attach to.
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.
...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.
Using the Mozilla symbol server
the mozilla project runs a symbol server for trunk firefox nightly and release builds on
windows.
...t that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for
windows.
Virtualenv
a python binary, as well as easy_install and pip are available in the bin/ subdirectory (or scripts on
windows).
...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.
Plug-in Side Plug-in API - Plugins
npp_handleevent delivers a platform-specific
window event to the instance.
... npp_set
window tells the plug-in when a
window is created, moved, sized, or destroyed.
Plugin Roadmap for Firefox - Plugins
in addition, the 64-bit firefox for
windows only supports the flash plugin.
...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 ...
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.
DOM Inspector - Firefox Developer 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.
DOM Property Viewer - Firefox Developer Tools
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.
... the toolbox will appear at the bottom of the browser
window, with the dom property viewer activated.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):
window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
...
window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Debugger.Object - Firefox Developer Tools
for example, a web browser might provide host annotations for global objects to distinguish top-level
windows, iframes, and internal javascript scopes.
... if the referent is an inner object (say, an html5
window object), return the corresponding outer object (say, the html5
windowproxy object).
Performance Analysis - Firefox Developer Tools
(alternatively, if you have only just opened the network monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main
window.) the network monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache.
...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.
Use the Inspector API - Firefox Developer Tools
firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:
window.inspector defined in inspector-panel.js.
... .node - returns the actual element from the page .
window - the
window object of the frame the selection is in.
Settings - Firefox 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.
...you can also choose to open the tools in a separate
window.
Shader Editor - Firefox Developer Tools
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.
... 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.
Style Editor - Firefox Developer Tools
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.
... command
windows macos linux go to line ctrl + j, ctrl + g cmd + j, cmd + g ctrl + j, ctrl + g find in file ctrl + f cmd + f ctrl + f select all ctrl + a cmd + a ctrl + a cut ctrl + x cmd + x ctrl + x copy ctrl + c cmd + c ctrl + c paste ctrl + v cmd + v ctrl + v undo ctrl + z cmd + z ...
View Source - Firefox Developer Tools
to activate view source: context-click in the page and select view page source press ctrl + u on
windows and linux, or cmd + u on macos the command opens a new tab with the source for the current page.
... to access go to line from the keyboard, press control + option + l on macos, or alt + shift + l on
windows or linux.
Web Console Helpers - Firefox Developer Tools
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.
...with this parameter, even the parts of the webpage which are outside the current bounds of the
window will be included in the screenshot.
Rich output - Firefox Developer Tools
for certain types enables detailed examination of the object's properties provides richer information for dom elements, and enables you to select them in the inspector type-specific rich output the web console provides rich output for many object types, including the following: object array date promise regexp
window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
... 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.
AddressErrors - Web APIs
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.
Ambient Light Events - Web APIs
this event can be captured at the
window object level by using the addeventlistener method (using the devicelight event name) or by attaching an event handler to the
window.ondevicelight property.
... example if ('ondevicelight' in
window) {
window.addeventlistener('devicelight', function(event) { var body = document.queryselector('body'); if (event.value < 50) { body.classlist.add('darklight'); body.classlist.remove('brightlight'); } else { body.classlist.add('brightlight'); body.classlist.remove('darklight'); } }); } else { console.log('devicelight event not supported'); } specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
AnalyserNode.smoothingTimeConstant - Web APIs
in technical terms, we apply a blackman
window and smooth the values over time.
... var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.85; ...
AudioNode.connect() - Web APIs
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.
... var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // create an normal oscillator to make sound var oscillator = audioctx.createoscillator(); // create a second oscillator that will be used as an lfo (low-frequency // oscillator), and will control a parameter var lfo = audioctx.createoscillator(); // set the frequency of the second oscillator to a low number lfo.frequency.value = 2.0; // 2hz: two oscillations par second // create a gain whose gain audioparam will be controlled by the lfo var gain = audioctx.creategain(); // connect the lfo to the gain audioparam.
BaseAudioContext.decodeAudioData() - Web APIs
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.
... 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.
Using the Beacon API - Web APIs
window.onload =
window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; st...
...
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.
BeforeInstallPromptEvent - Web APIs
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.
... example
window.addeventlistener("beforeinstallprompt", function(e) { // log the platforms provided as options in an install prompt console.log(e.platforms); // e.g., ["web", "android", "
windows"] e.userchoice.then(function(choiceresult) { console.log(choiceresult.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
Using the CSS properties and values API - Web APIs
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.
...se-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; }
window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is the difference between a <custom-ident> and a number when trying to animate height.
Cache - Web APIs
note that the cache interface is exposed to
windowed scopes as well as workers.
...this is an implementation of the
windoworworkerglobalscope mixin.
CanvasRenderingContext2D - Web APIs
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.
A basic ray-caster - Web APIs
open in new
window why?
...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.
Optimizing canvas - Web APIs
var scalex =
window.innerwidth / canvas.width; var scaley =
window.innerheight / canvas.height; var scaletofit = math.min(scalex, scaley); var scaletocover = math.max(scalex, scaley); stage.style.transformorigin = '0 0'; //scale from top left stage.style.transform = 'scale(' + scaletofit + ')'; turn off transparency if your application uses canvas and doesn’t need a transparent backdrop, set the alpha option ...
... with animations, use
window.requestanimationframe() instead of
window.setinterval() .
Client.type - Web APIs
the value can be one of "
window" "worker" "sharedworker" example // service worker client (e.g.
... a document) function sendmessage(message) { return new promise(function(resolve, reject) { // note that this is the serviceworker.postmessage version navigator.serviceworker.controller.postmessage(message);
window.serviceworker.onmessage = function(e) { resolve(e.data); }; }); } // controlling service worker self.addeventlistener("message", function(e) { // e.source is a client object e.source.postmessage("hello!
Clients.matchAll() - Web APIs
available values are "
window", "worker", "sharedworker", and "all".
... 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.
console - Web APIs
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.
Crypto - Web APIs
the web crypto api is accessed through the
window.crypto property, which is a crypto object.
... 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.
CustomElementRegistry - Web APIs
to get an instance of it, use the
window.customelements property.
... // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); note: the customelementregistry is available through the
window.customelements property.
DOMPoint.DOMPoint() - Web APIs
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.
DOMPointInit - Web APIs
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.
... 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.
DOMPointReadOnly.toJSON() - Web APIs
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.
Using light sensors - Web APIs
10 ~ 50 lux : dim environment 100 ~ 1000 lux : normal > 10000 lux : bright it uses the addeventlistener method of the
window object.
...
window.addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value; alert(luminosity); }); example:
window.addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { alert('hey, you!
Document.createTouch() - Web APIs
view the
window in which the touch occurred.
... 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.
Document.domain - Web APIs
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.
Document.title - Web APIs
in the titlebar of the
window or tab), and it also affects the dom of the document (e.g.
...for xul it's the value of the title attribute of the <xul:
window> or other top-level xul element.
Document.visibilityState - Web APIs
in practice this means that the page is the foreground tab of a non-minimized
window.
...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.
Document Object Model (DOM) - Web APIs
ment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url
window worker xmldocument obsolete dom interfaces the document object model has been highly simplified.
... the html dom api provides access to various browser features such as tabs and
windows, css styles and stylesheets, browser history, and so forth.
Element.getBoundingClientRect() - Web APIs
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.
Element.scrollIntoViewIfNeeded() - Web APIs
the element.scrollintoviewifneeded() method scrolls the current element into the visible area of the browser
window if it's not already within the visible area of the browser
window.
... if the element is already within the visible area of the browser
window, then no scrolling takes place.
ElementCSSInlineStyle.style - Web APIs
to get the values of all css properties for an element you should use
window.getcomputedstyle() instead.
...pet 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 = ""; var elementstyle = element.style; var computedstyle =
window.getcomputedstyle(element, null); for (prop in elementstyle) { if (elementstyle.hasownproperty(prop)) { out += " " + prop + " = '" + elementstyle[prop] + "' > '" + computedstyle[prop] + "'\n"; } } console.log(out) the output would be something like: ...
EventTarget - Web APIs
element, document, and
window are the most common event targets, but other objects can be event targets, too.
... many event targets (including elements, documents, and
windows) also support setting event handlers via onevent properties and attributes.
FetchEvent.respondWith() - Web APIs
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.
Cross-global fetch usage - Web APIs
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.
...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.
Using Fetch - Web APIs
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?
Using files from web applications - Web APIs
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.
... } }; fd.append('myfile', file); // initiate a multipart/form-data upload xhr.send(fd); }
window.onload = function() { const dropzone = document.getelementbyid("dropzone"); dropzone.ondragover = dropzone.ondragenter = function(event) { event.stoppropagation(); event.preventdefault(); } dropzone.ondrop = function(event) { event.stoppropagation(); event.preventdefault(); ...
FileSystemDirectoryEntry - Web APIs
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' //directoryentry.fullpath === '/documents' }, onerror); } // opening a file system with temporary storage
window.requestfilesystem(temporary, 1024*1024 /*1mb*/, onfs, onerror); properties this interface has no properties of its own, but inherits properties from its parent interface, filesystementry.
FileSystemEntry - Web APIs
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.
GamepadEvent.gamepad - Web APIs
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.
Gamepad API - Web APIs
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).
GlobalEventHandlers.onpointerdown - Web APIs
this event can be sent to
window, document, and element objects.
... syntax target.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element, document, or
window.
GlobalEventHandlers.ontransitioncancel - Web APIs
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).
... 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.
GlobalEventHandlers - Web APIs
the globaleventhandlers mixin describes the event handlers common to several interfaces like htmlelement, document, or
window.
... 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.
HTMLCanvasElement.toBlob() - Web APIs
windows xp doesn't support converting from png to ico, so it uses bmp instead.
...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(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href =
window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on web sites.
HTMLIFrameElement - Web APIs
htmliframeelement.content
window read only returns a
windowproxy, the
window proxy for the nested browsing context.
... the following properties have been added: srcdoc, sandbox, and content
window.
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the
window's visual viewport.
...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.
HTMLImageElement.naturalHeight - Web APIs
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 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.
HTMLImageElement.naturalWidth - Web APIs
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 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.
HTMLImageElement.sizes - Web APIs
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.
... image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own
window here.
HTMLImageElement.srcset - Web APIs
.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.
...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.
HTMLImageElement.width - Web APIs
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.
HTMLObjectElement - Web APIs
htmlobjectelement.content
window read only returns a
windowproxy representing the
window proxy of the object element's nested browsing context, if any; otherwise null.
... the following properties have been added: typemustmatch, content
window, willvalidate, validity, and validationmessage.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
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.
... 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.
HashChangeEvent.newURL - Web APIs
the newurl read-only property of the hashchangeevent interface returns the new url to which the
window is navigating.
... 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.
HashChangeEvent.oldURL - Web APIs
the oldurl read-only property of the hashchangeevent interface returns the previous url from which the
window was navigated.
... 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.
Ajax navigation example - Web APIs
aukgcbtgenbmjaejsxgmlwzpeaach5bakkaaaalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); };
window.addeventlistener ?
... addeventlistener("load", init, false) :
window.attachevent ?
IDBDatabase: abort event - Web APIs
// 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', '...
...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
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', '...
...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
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', '...
...${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
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another
window/tab on the same computer).
...store.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser
window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specification.
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest =
window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', '...
...: 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
for a complete working 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 idbdatabase object, // when the database is 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...
...this is used a lot later on db = dbopenrequest.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 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 using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data it...
IDBObjectStore.createIndex() - Web APIs
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.
... 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().
IDBObjectStore.deleteIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = this.result; // run the displaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the //
window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain ob...
IDBObjectStore - Web APIs
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 via the
window.indexeddb.open line above 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 data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: fa...
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); object...
...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.onupgradeneeded - Web APIs
var request =
window.indexeddb.open("library", 3); // this event handles the event whereby a new version of the // database needs to be created.
... either one has not been created // before, or a new version number has been submitted via the //
window.indexeddb.open line above.
IDBOpenDBRequest: upgradeneeded event - Web APIs
// open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'h...
... // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique:...
IDBOpenDBRequest - Web APIs
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.
...this is used a lot below db = dbopenrequest.result; // run the displaydata() function to populate the task // listwith all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the
window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items th...
IDBRequest: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.cre...
...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
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest =
window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minut...
...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
// 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'...
...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
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore...
...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
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest =
window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', '...
...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
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.
...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.
IDBVersionChangeEvent.newVersion - Web APIs
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some
window.idb* objects:
window.idbtransaction =
window.idbtransaction ||
window.webkitidbtransaction ||
window.msidbtransaction;
window.idbkeyrange =
window.idbkeyrange ||
window.webkitidbkeyrange ||
window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need
window.mozidb*) // let us open version 4 of our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBVersionChangeEvent - Web APIs
window.indexeddb =
window.indexeddb ||
window.mozindexeddb ||
window.webkitindexeddb ||
window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some
window.idb* objects:
window.idbtransaction =
window.idbtransaction ||
window.webkitidbtransaction ||
window.msidbtransaction;
window.idbkeyrange =
window.idbkeyrange ||
window.webkitidbkeyrange ||
window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need
window.mozidb*) // let us open version 4 of our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IndexedDB API - Web APIs
interfaces to get access to a database, call open() on the indexeddb attribute of a
window object.
...it is implemented by the
window and worker objects.
KeyboardEvent: code values - Web APIs
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.keyCode - Web APIs
this is usually the decimal ascii (rfc 20) or
windows 1252 code corresponding to the key.
... 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.
Location: assign() - Web APIs
the location.assign() method causes the
window to load and display the document at the url specified.
... 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.
MSSiteModeEvent - Web APIs
*this property is not supported for
windows store apps using javascript.
...*this property is not supported for
windows store apps using javascript.
MediaDevices.getUserMedia() - Web APIs
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.
... 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.
MediaQueryList - Web APIs
you can create a mediaquerylist by calling matchmedia() on the
window object.
... var para = document.queryselector('p'); var mql =
window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; ...
MediaRecorder: dataavailable event - Web APIs
var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
Using the MediaStream Recording API - Web APIs
classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; deletebutton.onclick = function(e) { let evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } let's go through the above code and look at what's happening.
... <article class="clip"> <audio controls></audio> <p>your clip name</p> <button>delete</button> </article> after that, we create a combined blob out of the recorded audio chunks, and create an object url pointing to it, using
window.url.createobjecturl(blob).
MessageChannel - Web APIs
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.
... 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).
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.
MessagePort.postMessage() - Web APIs
when the iframe has loaded, we pass messagechannel.port2 to the iframe using
window.postmessage along with a message.
... 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).
MessagePort - Web APIs
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.
... 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).
MouseEvent() - Web APIs
"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.
MouseEvent.initMouseEvent() - Web APIs
you should pass the
window object here.
...="background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true,
window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchevent(evt); } simulateclick(); result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.initmouseevent()' in that specification.
MouseEvent.metaKey - Web APIs
on
windows, for example, this key may open the start menu.
...on
windows keyboards, this key is the
windows key (⊞).
msPlayToSource - Web APIs
for more information, see the
windows.media.playto apis.
... var ptm =
windows.media.playto.playtomanager.getforcurrentview(); // step 2: register for the sourcerequested event (user swipes devices charm).
Navigator.oscpu - Web APIs
operating system oscpuinfo string format os/2 os/2 warp x (either 3, 4 or 4.5)
windows ce
windowsce x.y1
windows 64-bit (64-bit build)
windows nt x.y; win64; x64
windows 64-bit (32-bit build)
windows nt x.y; wow64
windows 32-bit
windows nt x.y mac os x (ppc build) powerpc mac os x version x.y mac os x (i386/x64 build) intel mac os x or macos version x.y linux 64-bit (32-bit build) output of uname -s plus "i686 on x86_64" linux output of una...
...me -sm x.y refers to the version of the operating system example function osinfo() { alert(
window.navigator.oscpu); } osinfo(); // alerts "
windows nt 6.0" for example usage notes unless your code is privileged (chrome or at least has the universalbrowserread privilege), it may get the value of the general.oscpu.override preference instead of the true platform.
Navigator.productSub - Web APIs
syntax prodsub =
window.navigator.productsub prodsub is a string.
... example <script> function prodsub() { var dt = document.getelementbyid("d").childnodes[0]; dt.data =
window.navigator.productsub; } </script> <button onclick="prodsub();">productsub</button> // returns: 20010725 notes on ie, this property returns undefined.
Navigator.sendBeacon() - Web APIs
window.addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces.
...
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.
Navigator.vibrate() - Web APIs
syntax var successbool =
window.navigator.vibrate(pattern); pattern provides a pattern of vibration and pause intervals.
... 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.
Navigator.xr - Web APIs
usage notes each
window has its own instance of navigator, which can be accessed as
window.navigator or simply as navigator.
... to determine if webxr is available, you can do something like this: if ("xr" in
window.navigator) { /* webxr can be used!
navigator.hardwareConcurrency - Web APIs
syntax logicalprocessors =
window.navigator.hardwareconcurrency value a number indicating the number of logical processor cores.
... 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.
NavigatorID.userAgent - Web APIs
microsoft internet explorer uses the
windows registry.
...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.
PaymentRequest: merchantvalidation event - Web APIs
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.
... 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.
PaymentRequestEvent - Web APIs
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.
performance.now() - Web APIs
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.
... 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.
PerformanceTiming - Web APIs
you get a performancetiming object describing your page using the
window.performance.timing property.
... 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.
Performance API - Web APIs
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.
... high resolution time level 2 recommendation adds performance attribute on
window and workerglobalscope.
Pointer Lock API - Web APIs
the concept of the mouse cursor does not exist and the cursor cannot move off the
window or be clamped by a screen edge.
... when the mouse is unlocked, the system cursor can exit and re-enter the browser
window.
Proximity Events - Web APIs
this event can be captured at the
window object level by using the addeventlistener method (using the deviceproximity or userproximity event name) or by attaching an event handler to the
window.ondeviceproximity or
window.onuserproximity properties.
... example
window.addeventlistener('userproximity', function(event) { if (event.near) { // let's power off the screen navigator.mozpower.screenenabled = false; } else { // otherwise, let's power on the screen navigator.mozpower.screenenabled = true; } }); specifications specification status comment proximity sensorthe definition of 'proximity events' in that spec...
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
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).
...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.
Range() - Web APIs
we then select the range using
window.getselection() 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.
Range.selectNodeContents() - Web APIs
window.getselection() and selection.removeallranges() are used to deselect it.
....</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...
... 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); // ...
SVGElement - Web APIs
handler property defined on globaleventhandlers or
windoweventhandlers.
... unload fired when the dom implementation removes an svg document from a
window or frame.
Screen.availLeft - Web APIs
syntax let availleft =
window.screen.availleft; example let setx =
window.screen.width -
window.screen.availleft; let sety =
window.screen.height -
window.screen.availtop;
window.moveto(setx, sety); notes in most cases, this property returns 0.
... on
windows, this property depends on which screen is set as your primary, returning the x coordinate of the leftmost available pixel relative to the primary screen.
Screen.availWidth - Web APIs
the screen.availwidth property returns the amount of horizontal space (in pixels) available to the
window.
... syntax var width =
window.screen.availwidth example var screenavailwidth =
window.screen.availwidth; console.log(screenavailwidth); specifications specification status comment css object model (cssom) view modulethe definition of 'screen.availwidth' in that specification.
Screen.width - Web APIs
syntax lwidth =
window.screen.width example // crude way to check that the screen is at least 1024x768 if (
window.screen.width >= 1024 &&
window.screen.height >= 768) { // resolution is 1024x768 or above } notes note that not all of the width given by this property may be available to the
window itself.
... when other widgets occupy space that cannot be used by the
window object, there is a difference in
window.screen.width and
window.screen.availwidth.
ScrollToOptions.behavior - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the
window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
... 'smooth' : 'auto' }
window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'behavior' in that specification.
Selection.containsNode() - Web APIs
console.log(
window.getselection().containsnode(document.body, true)); find the hidden word in this example, a message appears when you select the secret word.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection =
window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
Selection.deleteFromDocument() - Web APIs
upon clicking the button, the
window.getselection() method gets the selected text, and the deletefromdocument() method removes it.
...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.
Sensor APIs - Web APIs
} if ("proximitysensor" in
window) { // watch out!
... } if (
window.ambientlightsensor) { // go dark...
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(...
...'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' in that specification.
ServiceWorkerGlobalScope - Web APIs
this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from
windowtimers,
windowbase64, and
windoweventhandlers.
... serviceworkerglobalscope implements workerglobalscope — which implements
windoworworkerglobalscope.
SharedWorker - Web APIs
the sharedworker interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several
windows, iframes or even workers.
...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.
SpeechSynthesis - Web APIs
in our speech synthesiser demo, we first grab a reference to the speechsynthesis controller using
window.speechsynthesis.
... var synth =
window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('.txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = document.queryselector('#rate'); var ratevalue = document.queryselector('.rate-value'); var voices = []; function pop...
SpeechSynthesisUtterance - Web APIs
examples in our basic speech synthesiser demo (source), we first grab a reference to the speechsynthesis controller using
window.speechsynthesis.
... var synth =
window.speechsynthesis; var voices = synth.getvoices(); var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendc...
TextDecoder - Web APIs
32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(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)); // Привет, мир!
TextEncoder.prototype.encodeInto() - Web APIs
(function(
window){ "use strict"; var log = math.log; var ln2 = math.ln2; var clz32 = math.clz32 || function(x) {return 31 - log(x >>> 0) / ln2 | 0}; var fromcharcode = string.fromcharcode; var patchedu8array =
window.uint8array || array; var textencoderprototype = textencoder["prototype"]; var globaltextencoder =
window["textencoder"]; var globaltextencoderprototype; var gl...
...inputlength : read}; }; textencoderprototype["encodeinto"] = polyfill_encodeinto; if (!globaltextencoder) {
window["textencoder"] = textencoder; } else if (!(globaltextencoderprototype = globaltextencoder["prototype"])["encodeinto"]) { globaltextencoderinstance = new globaltextencoder; globaltextencoderprototype["encodeinto"] = function(string, u8arr) { // unfortunately, there's no way i can think of to quickly extract the number of bits written and the number of bytes read and...
TextRange - Web APIs
according to the standard, a
window / document may have multiple non adjacent selection, but only firefox can select multiple ranges through ctrl; generally, only one selected textrange is allowed in ie.
... however, in other browsers, document does not have a so-called selection attribute - they operate on the selection through the standard selection api, that is, they get the selection object through the
window.getselection() method, and use the standard range object to process the text fragment.
UIEvent.initUIEvent() - Web APIs
view is the
windowproxy associated with the event.
... 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.
UIEvent - Web APIs
uievent.viewread only returns a
windowproxy that contains the view that generated the event.
... obsolete added the uievent() constructor, deprecated the inituievent() method and changed the type of view from abstractview to
windowproxy.
URL - Web APIs
if a browser doesn't yet support the url() constructor, you can access a url object using the
window interface's
window.url property.
... 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.
URLSearchParams.set() - Web APIs
line #44: tries to automatically open a new
window/tab with the generated url (when uncommented).
...nused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) //
window.open( url, 'regex_site' ) specifications specification status comment urlthe definition of 'set()' in that specification.
Vibration API - Web APIs
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.
...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.
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup():
window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.wid...
...r, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); gl.bindbuffer(gl.array_buffer, vertexbuffer); avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount);
window.requestanimationframe(function(currenttime) { let deltaangle = ((currenttime - previoustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; previoustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the background to the desired color.
Clearing by clicking - Web APIs
r browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; 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.
...
window.removeeventlistener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button.
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...
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], color[2], 1.0); // unlike the browser
window, vertical position in webgl is // measured from bottom to top.
WebXR Device API - Web APIs
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.
... webxr interfaces xr the navigator.xr property returns the
window's instance of xrsystem, which is the mechanism by which your code accesses the webxr api.
Using the Web Animations API - Web APIs
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().
...like
windowtimers.settimeout() and
window.requestanimationframe(), the web animations api only takes milliseconds.
Web audio spatialization basics - Web APIs
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...
...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...
Web Authentication API - Web APIs
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.
... examples for security reasons, web authentication calls (create() and get()) are cancelled if the browser
window loses focus while the call is pending.
WorkerGlobalScope.dump() - Web APIs
this is the same as firefox's
window.dump, but for workers.
...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.
XDomainRequest - Web APIs
example if(
window.xdomainrequest){ var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.onprogress = function () { //progress }; xdr.ontimeout = function () { //timeout }; xdr.onerror = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the...
... xdr.send() call is wrapped in a timeout (see
window.settimeout() to prevent an issue with the interface where some requests are lost if multiple xdomainrequests are being sent at the same time.
Synchronous and asynchronous requests - Web APIs
window.addeventlistener('unload', logdata, false); function logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr.
...
window.addeventlistener('unload', logdata, false); function logdata() { navigator.sendbeacon("/log", analyticsdata); } ...
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.
msthumbnailclick - Web APIs
example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your 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.mssitemodeaddthumbba...
...rbutton(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 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
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.
...e.target : e.srcelement; if (ref) {
window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
WAI-ARIA Roles - Accessibility
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.
...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
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.
...(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.
Accessibility Information for Web Authors - Accessibility
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.
Web accessibility for seizures and physical reactions - Accessibility
@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".
-moz-image-rect - CSS: Cascading Style Sheets
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).s...
...tyle.backgroundimage = prevstyle; prevstyle = curstyle; } } this uses
window.getcomputedstyle() to fetch the style of each element, shifting it to the following element.
display-mode - CSS: Cascading Style Sheets
this can include the application having a different
window, its own icon in the application launcher, etc.
... browser browser the application opens in a conventional browser tab or new
window, depending on the browser and platform.
prefers-reduced-motion - CSS: Cascading Style Sheets
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).
CSS Animations tips and tricks - CSS: Cascading Style Sheets
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?
... to be sure that the styles are recalculated, we use
window.requestanimationframe(), specifying a callback.
Privacy and the :visited selector - CSS: Cascading Style Sheets
this was done through
window.getcomputedstyle and other techniques.
... 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.
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...
...adient="function" updatecssgradient();="" updatecssgradient,="" updateoutputcsscode="function" updateoutputcsscode(gradient)="" updateoutputcsscode:="" updateoutputelem="function" updateoutputelem(0,="" updateoutputelem(index,="" updatepointcolor="function" updatepointcolor(color)="" updatepointcolor);="" updatepointposition="function" updatepointposition(color)="" updatepointposition);="" var=""
window.addeventlistener('resize',=""
window.cleartimeout(update_output);="" {="" }="" })();="" });="" },="" };=""></len;></len;> this tool can be used to create custom css3 linear-gradient() backgrounds.
Visual formatting model - CSS: Cascading Style Sheets
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.
calc() - CSS: Cascading Style Sheets
in this example, the css creates a banner that stretches across the
window, with a 40-pixel gap between both sides of the banner and the edges of the
window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their co...
... 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.
text-rendering - CSS: Cascading Style Sheets
however, gecko and webkit browsers let you apply this property to html and xml content on
windows, macos, and linux.
...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.
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...
Getting Started - Developer guides
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.
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
'code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate);
window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...nt.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter);
window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
Mouse gesture events - Developer guides
note: some operating systems, including mac os x and
windows 7, provide default actions when gesture events occur.
...firefox uses this gesture to move backward and forward through the tabs in the current
window.
Overview of events and handlers - Developer guides
in general, we can distinguish events of different kinds based on the object emitting the event including: the
window object, such as due to resizing the browser, the
window.screen object, such as due to changes in device orientation, the document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects ...
... the global object
window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object
window emits an event called 'resize' when the height or the width of the browser
window is changed by a user, the dom object document representing the html document emits an event called ...
Using device orientation with 3D transforms - Developer guides
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 is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d");
window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matrix ...
Constraint validation - Developer guides
the constraint, we use the constraintapi to tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>:
window.onload = function () { document.getelementbyid("country").onchange = checkzip; document.getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation.
...mentbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event:
window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation.
HTML5 - Developer guides
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.
... 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.
HTML attribute reference - HTML: Hypertext Markup Language
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.
... sandbox <iframe> stops a document loaded in an iframe from using certain features (such as submitting forms or opening new
windows).
<input type="color"> - HTML: Hypertext Markup Language
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.
... var colorwell; var defaultcolor = "#0000ff";
window.addeventlistener("load", startup, false); initialization once the page is loaded, our load event handler, startup(), is called: function startup() { colorwell = document.queryselector("#colorwell"); colorwell.value = defaultcolor; colorwell.addeventlistener("input", updatefirst, false); colorwell.addeventlistener("change", updateall, false); colorwell.select(); } this gets a refer...
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() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
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...
...we use
window.matchmedia / mediaquerylist to do this (see testing media queries for more).
MIME types (IANA media types) - HTTP
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).
... 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.
Expressions and operators - JavaScript
x = 42; // implicitly creates
window.x var y = 43; var myobj = {h: 4}; // create object with property h delete x; // returns true (can delete if created implicitly) delete y; // returns false (cannot delete if declared with var) delete math.pi; // returns false (cannot delete non-configurable properties) delete myobj.h; // returns true (can delete user-defined properties) deleting array elements since arrays are just...
... 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...
Grammar and types - JavaScript
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.
Introduction - JavaScript
to open the web console (ctrl+shift+i on
windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "developer ▶ web console".
... the web console appears at the bottom of the browser
window.
Using Promises - JavaScript
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).
...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.
TypeError: can't access dead object - JavaScript
if (components.utils.isdeadwrapper(
window)) { // dead } unprivileged code has no access to component.utils and might just be able catch the exception.
... try { string(
window); } catch (e) { console.log("
window is likely dead"); } ...
Functions - JavaScript
in the following example, a test is performed to determine if the
window object has a property called nofunc that is a function.
... 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.
eval() - JavaScript
fortunately, there's a very good alternative to eval(): simply using
window.function().
...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.
Strict mode - JavaScript
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.
... object, and if unspecified, this will be undefined: 'use strict'; function fun() { return this; } console.assert(fun() === undefined); console.assert(fun.call(2) === 2); console.assert(fun.apply(null) === null); console.assert(fun.call(undefined) === undefined); console.assert(fun.bind(true)() === true); that means, among other things, that in browsers it's no longer possible to reference the
window object through this inside a strict mode function.
Navigation and resource timings - Web Performance
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.
... unloadeventstart when the unload> event has been thrown, indicating the time at which the previous document in the
window began to unload.
xlink:show - SVG: Scalable Vector Graphics
only one element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace animatable no new this value specifies that the referenced resource is opened in a new
window or tab.
... replace this value specifies that the referenced resource is opened in the same
window or tab.
Scripting - SVG: Scalable Vector Graphics
this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a
window property called svgdocument that points to the svg document.
... this is not the case for mozilla's native svg implementation; therefore, using
window.svgdocument does not work in mozilla.
Web security
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.
... 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.
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.
... closing the
window calls this eventhandler on the pref
window.
simple-storage - Archive of obsolete content
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.
system - Archive of obsolete content
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).
content/loader - Archive of obsolete content
ng values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the
window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.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.
Logging - Archive of obsolete content
the console.log() method prints an informational message: console.log("hello world"); try it out: create a new directory, and navigate to it execute jpm init, accepting all the defaults open "index.js" and add the line above execute jpm run firefox will start, and the following line will appear in the command
window you used to execute jpm run: info: hello world!
Unit Testing - Archive of obsolete content
unfortunately these functions are attached to the
window object: since this object is not available in your main add-on code, atob() and btoa() aren't available either.
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
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.
HTML in XUL for rich tooltips - Archive of obsolete content
hild) div.removechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } }
window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.
QuerySelector - Archive of obsolete content
// if you'd like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add 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(selec...
Rosetta - Archive of obsolete content
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...
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(...
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
- #include "nsastring.h"- #include "nsstring.h"- #include "nsreadableutils.h"- #include "nsescape.h" + #include "nsstringapi.h" on
windows, if you see the following error, you are including a header you shouldn't be: nsstringfwd.h(60) : fatal error c1001: internal compiler error to debug this error, make in the failing directory, adding the /showincludes directive to figure out what is being included incorrectly: make -c directory/that/failed os_cppflags=-showincludes the frozen string api is similar but not identical to the nonf...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
// 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.
XUL School Tutorial - Archive of obsolete content
introduction introduction getting started with firefox extensions the essentials of an extension setting up a development environment javascript object management basic functionality adding menus and submenus adding toolbars and toolbar buttons adding events and commands adding
windows and dialogs adding sidebars user notifications and alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozilla community sites appendices appe...
Firefox addons developer guide - Archive of obsolete content
todo: all fixme notes inside the documents; add abbreviation definition to acronyms; add some link to the internal mdc documentation when it makes sense; indent source code; make sure documentation is relevant for all platforms: gnu/linux, macos,
windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); a...
Introduction - Archive of obsolete content
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:).
Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null);
window.settimeout(loadtinderboxstatus, 60000); }
window.settimeout(loadtinderboxstatus, 1000);
window.settimeout schedules functions to run at some future time.
Making it into a static overlay - Archive of obsolete content
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.
FAQ - Archive of obsolete content
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.
Documentation for BiDi Mozilla - Archive of obsolete content
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).
GRE Registration - Archive of obsolete content
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.
JavaScript OS.Shared - Archive of obsolete content
global object os.shared.type properties void_t voidptr_t char jschar int unsigned_int int32_t uint32_t int64_t uint64_t long bool off_t size_t ssize_t fd (unix only) negativeone_or_fd (unix only) negativeone_or_nothing (unix only) string (unix only) null_or_string (unix only) handle (
windows only) maybe_handle (
windows only) dword (
windows only) negative_or_dword (
windows only) zero_or_dword (
windows only) zero_or_nothing (
windows only) declareffi() intn_t() uintn_t()instances of os.shared.type convert_from_c() releasewith() attributes global object os.shared.hollowstructure in_ptr out_ptr inout_ptr ...
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.
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...
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 ...
Microsummary topics - Archive of obsolete content
note: when web sites install generators via
window.sidebar.addmicrosummarygenerator(), firefox sets their uri attribute to urn:source:sourceurl, where sourceurl is the url from which the generator was downloaded.
Mozilla Application Framework - Archive of obsolete content
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.
Plugin Architecture - Archive of obsolete content
(the event is necessary because by the time hasnewframe is called, the frame isn'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 ...
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
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.
Extensions - Archive of obsolete content
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.
Styling - Archive of obsolete content
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.
Priority Content - Archive of obsolete content
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.
New Skin Notes - Archive of obsolete content
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).
Standalone XPCOM - Archive of obsolete content
building standalone xpcom here are the instructions for building the standalone xpcom on unix or
windows: step 1 : pull the sources cvs -z 3 co mozilla/client.mk cd mozilla gmake -f client.mk pull_all build_modules=xpcom step 2 : build xpcom standalone ./configure --enable-standalone-modules=xpcom --enable-application=standalone gmake testing standalone xpcom xpcom/sample contains a sample application and a component.
Stress testing - Archive of obsolete content
tools for microsoft
windows consume.exe from the
windows server 2003 resource kit tools can consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool.
Tamarin mercurial commit hook - Archive of obsolete content
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.
Tuning Pageload - Archive of obsolete content
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.
URIScheme - Archive of obsolete content
list of mozilla supported uri schemes list of uri schemes http:// by default, port 80 https:// by default, port 443 (ssl) ftp:// by default, port 21 file:// : file:///etc/hosts on unix/linux, file:///c:/some/file.txt on
windows.
Elements - Archive of obsolete content
(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).
Example Sticky Notes - Archive of obsolete content
--> <handler event="click"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.priority);
window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear:...
Examples - Archive of obsolete content
the following samples demonstrate some of the principal installation functions in the xpinstall api: file.macalias file.
windowsshortcut [install.]adddirectory [install.]addfile installtrigger.installchrome installtrigger.startsoftwareupdate
windows install example ...
addFile - Archive of obsolete content
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.
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...
What XULRunner Provides - Archive of obsolete content
extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (
windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with application-specifi...
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 $@...
symsrv_convert - Archive of obsolete content
for me this was c:/
windows/syswow64/ ./symsrv_convert.exe http://msdl.microsoft.com/download/symbols /c/symcachet d3d10_1.pdb 64bce4f6b72340f19c453569a3f4a13b1 to build symsrv_convert you'll need to use google-breakpad/src/tools/
windows/converter ...
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...
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
firefox 2 on
windows vista discussion about the "state of affairs" of firefox 2 on
windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-09-29 - Archive of obsolete content
firefox 2 on
windows vista discussion about the "state of affairs" of firefox 2 on
windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-10-20 - Archive of obsolete content
traffic october 14, 2006, 6:53pm - ed notes that, on
windows, composer 0.1's reccomended install directory needs to be different than those noted in the release notes.
2006-11-03 - Archive of obsolete content
chat with the creator of javascript and mozilla cto brendan eich this tuesday, november 7th at 10am pst (utc-8) traffic xepra wants to know how to open multiple tabs in a new
window.
XForms Message Element - Archive of obsolete content
representations it may be represented in the following ways: modal
window - if level attribute value is modal modeless
window - if level attribute value is modeless tooltip
window - if level attribute value is ephemeral note: message element doesn't define a default presentation.
XUL Parser in Python - Archive of obsolete content
i will make these adjustments and change it into a real module when i get a second, so that someone can instantiate the parser from their own scripts and use it more flexibly: >>> import xultool >>> myxp = xulparser() >>> chrome_dir = 'd:\src\mozilla\xpfe' >>> res = myxp.parsexul(chrome_dir, '
window', 'id') where something like the above would write out all the xul
window ids in the build.
GLSL Shaders - Game development
/js/three.min.js"></script> <script id="vertexshader" type="x-shader/x-vertex"> void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); } </script> javascript var width =
window.innerwidth; var height =
window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); ...
Audio for Web games - Game development
let's create our audio context: // for cross browser compatibility const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); now let's select all the <li> elements; later we can harness these elements to give us access to the track file path and each individual play button.
Tiles and tilemaps overview - Game development
en(x, y) { return {x: x - camera.x, y: y - camera.y}; } function screentoworld(x,y) { return {x: x + camera.x, y: y + camera.y}; } rendering a trivial method for rendering would just be to iterate over all the tiles (like in static tilemaps) and draw them, substracting the camera coordinates (like in the worldtoscreen() example shown above) and letting the parts that fall outside the view
window sit there, hidden.
Visual typescript game engine - Game development
- a command for killing all node.js process for
window users : taskkill /im node.exe /f networking multimedia communication: websocketserver running on node.js text-based protocol sip (session initiation protocol) used for signalling and controlling multimedia sessions.
Expando - MDN Web Docs Glossary: Definitions of Web-related terms
expando properties are properties added to dom nodes with javascript, where those properties are not part of the object's dom specification:
window.document.foo = 5; // foo is an expando the term may also be applied to properties added to objects without respecting the object's original intent, such as non-numeric named properties added to an array.
Introduction to CSS layout - Learn web development
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.
Positioning - Learn web development
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?
Styling links - Learn web development
1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput);
window.addeventlistener("load", drawoutput); including icons on links a common practice is to include icons on links to provide more of an indicator as to what kind of content the link points to.
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); ...
Client-side form validation - Learn web development
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.
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
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.
JavaScript basics - Learn web development
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.
Use JavaScript within a webpage - Learn web development
<script>
window.addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is ...
Document and website structure - Learn web development
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.
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...
Silly story generator - Learn web development
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.
Measuring performance - Learn web development
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.
Web performance resources - Learn web development
apis gather user metrics using https://github.com/akamai/boomerang or directly gather with
window.performance.timing things not to do (bad practices) download everything use uncompressed media files ...
TypeScript support in Svelte - Learn web development
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.
Git and GitHub - Learn web development
depending on how you like to work, you could use a git gui client (we'd recommend github desktop, sourcetree or git kraken) or just stick to using a terminal
window.
Information for users
features include assistive technology support on
windows (like
window-eyes, jaws, etc.), firefox keyboard support, available accessibility extensions like fire vox and other extensions.
Benchmarking
some example tools include instruments on osx (part of xcode), rotateright zoom on linux (uses perf underneath), and intel vtune on
windows or linux.
Testopia
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.
Building Mozilla
build instructions building on
windows with msys building on
windows using the msvc toolkit building on fedora core 5 compiling mozilla with mingw compiling mozilla with clang on
windows seamonkey building a seamonkey package ...
Creating JavaScript callbacks in components
he nsidomeventtarget interface and is defined as such: void addeventlistener(in domstring type, in nsidomeventlistener listener, in boolean usecapture); however, it is extremely common to see developers pass a normal javascript function for the listener instead of an nsidomeventlistener implementation: function doload(event) { // do something here }
window.addeventlistener("load", doload, false); revealing the magic how is this possible?
Debugging OpenGL
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).
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" ...
Makefile - variables
moz_help_viewer moz_native_nspr moz_metro moz_pkg_mainfest moz_preflight_all moz_rdf moz_toolkit_search moz_url_classifier moz_widget_toolkit android, beos, cocoa, gtk2, os2, qt,
windows moz_xpctools moz_xul moz_x11 test variable description enable_tests boolean value that should wrapper all unit tests to allow disabling on demand[1].
Makefiles - Best practices and suggestions
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.
Gecko Logging
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.
Reviewer Checklist
[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.
Developer guide
adding apis to the navigator object how to augment the
window.navigator object with additional apis.
Index
in private browsing
windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites.
Firefox
firefox is mozilla's popular web browser, available for multiple platforms including
windows, macos, and linux on the desktop and all android and ios mobile devices.
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 ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
ontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfindchange
rame"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsericonchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
ad.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadstart
nt.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermetachange
its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropensearch
ple var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new
window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserselectionstatechanged
ionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
r = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropen
window mozbrowsersecuritychange mozbrowsertitlechange ...
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 ...
::-moz-tree-image
associated elements <xul:treeitem> <xul:treecell> style properties margin list-style position examples bookmark icons in the places
window - mozillazine forum ...
Chrome-only CSS reference
-moz-
window-draggingthe -moz-
window-dragging css property specifies whether a
window is draggable or not.
MozScrolledAreaChanged
viewread only
windowproxy document.defaultview (
window of the document) detailread only long (float) 0.
Chrome-only Events reference
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.
Gecko SDK
download link latest gecko (latest firefox) gecko 1.9.2 (firefox 3.6) gecko 1.9.1 (firefox 3.5) gecko 1.9 (firefox 3.0) gecko 1.8 (firefox 1.5 and 2.0)
windows download download download download download mac x86_64 download n/a n/a n/a n/a mac i386 download download download download n/a mac ppc n/a download download download download linux x86_64 download n/a n/a n/a n/a linux i686 download download download download ...
Creating a New Protocol
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.
Introduction to Layout in Mozilla
rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame view clipping, z-order, transparency [0..1] per frame, owned by frame widget native
window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets presentation has media type, dimensions, etc.
JavaScript Tips
for instance,
windowmanager.getenumerator(atype).hasmoreelements() may be replaced with
windowmanager.getmostrecent
window(atype) != null for a single
window.
Addon
this is passed to
window.opendialog() when presenting the about dialog.
Add-on Manager
t addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function browseropenaddonsmgr which is available on chrome
window of "navigator:browser" type.
DownloadSource
isprivate read only boolean indicates whether the download originated from a private
window.
OS.File.Error
winlasterror (defined under
windows only) the system error number (getlasterror) for the error.
PerfMeasurement.jsm
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.
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
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.
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
you can choose to use: notepad++ or notepad2 on
windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x.
Index
on mac and linux, you should be just fine, and on
windows, mozillabuild should get you everything you need.
Localizing with Mozilla Translator
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''.
Initial setup
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.
SVN for Localizers
windows users can install the svn client directly from the cygwin setup file.
Creating localizable web applications
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.
What every Mozilla translator should know
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.
Basics
notice how the mathematics appear in the main flow of text and respond as you resize the
window.
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
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.
MathML In Action
addeventlistener("click", zoomtoggle, false); }
window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex markups like these ell ^ y ( z ; z , τ ) := ∫ y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ′ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) ...
Mozilla Development Strategies
-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.
Activity Monitor, Battery Status Menu and top
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.
BloatView
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.
NSPR
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.
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
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.
NSS 3.12.5 release_notes
bug 510435: remove unused make variable dso_ldflags bug 510436: add macros for build numbers (4th component of version number) to nssutil.h bug 511227: firefox 3.0.13 fails to compile on freebsd/powerpc bug 511312: nss fails to load softoken, looking for sqlite3.dll bug 511781: add new tls 1.2 cipher suites implemented in
windows 7 to ssltap bug 516101: if pk11_importcert fails, it leaves the certificate undiscoverable by cert_pkixverifycert bug 518443: pk11_importandreturnprivatekey leaks an arena bug 518446: pk11_derencodepublickey leaks a certsubjectpublickeyinfo bug 518457: seckey_encodedersubjectpublickeyinfo and pk11_derencodepublickey are duplicate bug 522510: add deprecated comments to key.h and pk11func.h ...
NSS 3.12.9 release notes
9068: implement j-pake in freebl bug 607058: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 batch of nss root ca changes bug 610843: need way to recover softoken in child after fork() bug 617492: add pk11_keygenwithtemplate function to pk11wrap (for firefox sync) bug 610162: sha-512 and sha-384 hashes are incorrect for inputs of 512mb or larger when running under
windows and other 32-bit platforms (fx 3.6.12 and 4.0b6) bug 518551: vfychain crashes in pkits tests.
NSS 3.14.1 release notes
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.
NSS 3.15.1 release notes
bug 882829 - on
windows, nss initialization fails if nss cannot call the rtlgenrandom function.
NSS 3.16.2 release notes
new intel aes assembly code for 32-bit and 64-bit
windows, contributed by shay gueron and vlad krasnov of intel.
NSS 3.17 release notes
on
windows, the new build variable use_static_rtl can be used to specify the static c runtime library should be used.
NSS 3.45 release notes
bug 1550579 - replace arm32 curve25519 implementation with one from fiat-crypto bug 1551129 - support static linking on
windows bug 1552262 - expose a function pk11_findrawcertswithsubject for finding certificates with a given subject on a given slot bug 1546229 - add ipsec ike support to softoken bug 1554616 - add support for the elbrus lcc compiler (<=1.23) bug 1543874 - expose an external clock for ssl this adds new experimental functions: ssl_settimefunc, ssl_createantireplaycontext, ssl_setantireplaycontex...
NSS 3.50 release notes
upgrade hacl* verified implementations of chacha20, poly1305, and 64-bit curve25519 bug 1608327 - two problems with neon-specific code in freebl bug 1575843 - detect aarch64 cpu features on freebsd bug 1607099 - remove the buildbot configuration bug 1585429 - add more hkdf test vectors bug 1573911 - add more rsa test vectors bug 1605314 - compare all 8 bytes of an mp_digit when clamping in
windows assembly/mp_comba bug 1604596 - update wycheproof vectors and add support for cbc, p256-ecdh, and cmac tests bug 1608493 - use aes-ni for non-gcm aes ciphers on platforms with no assembly-optimized implementation, such as macos.
NSS API Guidelines
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.
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 PKCS11 Functions
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.
FC_Initialize
nss_nodb_init(""), which initializes nss with no databases: "configdir='' certprefix='' keyprefix='' secmod='' flags=readonly,nocertdb,nomod db,forceopen,optimizespace " mozilla firefox initializes nss with this string (on
windows): "configdir='c:\\documents and settings\\wtc\\application data\\mozilla\\firefox\\profiles\\default.7tt' certprefix='' keyprefix='' secmod='secmod.db' flags=optimizespace manufacturerid='mozilla.org' librarydescription='psm internal crypto services' cryptotokendescription='generic crypto services' dbtokendescription='software security device' cryptoslotdescription='psm internal cryptographic ...
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...
troubleshoot.html
building jss
windows only: the shell invoked by gmake, shmsdos.exe, is likely to crash when invoking some java tools on
windows.
pkfnc.html
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.
sslfnc.html
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.
Network Security Services
additional information using the
window.crypto object from javascript delegation of http download for ocsp tls cipher suite discovery nss certificate download specification fips mode - an explanation format of key log files view all nss-related articles on mdn planning information on nss planning can be found at wiki.mozilla.org, including: fips validation nss roadmap page ...
Multithreading in Necko
for example, on xp_win an invisible
window is created with a message pump on a background thread for processing wsa asynchronous dns events.
The JavaScript Runtime
for example, in a browser environment, the
window and document objects are host objects.
Scripting Java
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()...
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
note: if your applet runs at an abnormal speed, try toggling "turbo" at the bottom of the inspector
window.
Rebranding SpiderMonkey (1.8.5)
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.
SpiderMonkey compartments
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.
Getting SpiderMonkey source code
://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including
windows, as long as on
windows you are using the mozillabuild bash shell.
Hacking Tips
break 'mozilla::dom::canvasrenderingcontext2d::draw
window(nsglobal
window&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescon...
JS::CompileOptions
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.
JSErrorReport
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.
JSObjectPrincipalsFinder
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).
JS_GetGlobalObject
spidermonkey supports applications that have multiple global objects, such as the various
window objects in a web browser.
JS_ObjectIsDate
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).
Resources
weblock resources weblock installer and information the sdk download linux: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz
windows: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide the gecko networking library ("necko") the netscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scriptable...
Starting WebLock
on
windows or linux, for example, it is possible to multiply a print64 by a long like this: print64 x = 1, y = 2; y = x * 2; however, this same snippet will not compile on a platform like macintosh os 9, where you need to use macros to perform the calculation: print64 x, y, two; ll_i2l(x, 1); ll_i2l(y, 2); ll_i2l(two, 2); ll_mul(y, x, two); a full listing of nspr's long long support can be found at h...
Using 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.
Using XPCOM Utilities to Make Things Easier
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).
Creating XPCOM components
k.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project creating a new project adding the gecko sdk to the project settings building a
windows project a makefile for unix appendix b - resources weblock resources gecko resources xpcom resources general development resources next » copyright (c) 2003 by doug turner and ian oeschger.
XPCOM hashtable guide
a few examples: a hashtable that maps utf-8 origin names to a dom
window - nsinterfacehashtable<nscstringhashkey, nsidom
window> a hashtable that maps 32 bit integers to floats - nsdatahashtable<nsuint32hashkey, float> a hashtable that maps nsisupports pointers to reference counted cacheentrys - nsrefptrhashtable<nsisupportshashkey, cacheentry> a hashtable that maps jscontext pointers to a contextinfo struct - nsclasshashtable<nsptrhashkey<jscontext>, contextinfo> ...
Components.utils.forceGC
note: nsidom
windowutils.garbagecollect() offers similar functionality but will trigger the cycle collector in addition to the garbage collector in the javascript engine.
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.isXrayWrapper
example var isxray = components.utils.isxraywrapper(gbrowser.content
window); // true var waived = components.utils.waivexrays(gbrowser.content
window); isxray = components.utils.isxraywrapper(waived); // false ...
XPCshell Test Manifest Expressions
os - the operating system on which the test is being run one of: 'win', 'mac', 'linux', 'android' os_version - the version of the operating system on which the test is being run toolkit - the graphics toolkit used by this build one of: '
windows', 'cocoa', 'gtk2', 'android' processor - the cpu which the code is compiled for one of: 'x86', 'x86_64', 'arm' bits - the pointer size of the cpu architecture, in bits one of 32, 64, possibly unknown debug - set to true if this build is a debug build, false otherwise crashreporter - set to true if this build has crash reporting code enabled, false otherwise.
nsIFaviconService
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.
nsIFileProtocolHandler
readurlfile() takes a local file and tries to interpret it as an internet shortcut (for example .url files on
windows).
nsIIFrameBoxObject
the general.xml binding uses this property to gain access to the webnavigation, contentdocument and content
window properties.
nsIIdleService
currently nsiidleservice implementations exist for
windows, mac os x, and linux (via xscreensaver).
nsIJumpListItem
widget/public/nsijumplistitem.idlscriptable implements
windows 7 taskbar jump list item interfaces.
nsILocalFile
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.
nsIMessageBroadcaster
for example, broadcasting a message through a
window message manager will broadcast the message to all frame message managers within its
window.
nsIMsgDBViewCommandUpdater
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.
nsIMsgFilterCustomAction
*/ /** * 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?
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...
nsIMsgSendLater
components.interfaces.nsimsgsendlater); method overview void sendunsentmessages(in nsimsgidentity identity); void removelistener(in nsimsgsendlaterlistener listener); void addlistener(in nsimsgsendlaterlistener listener); nsimsgfolder getunsentmessagesfolder](in nsimsgidentity identity); attributes attribute type description msg
window nsimsg
window methods sendunsentmessages() sends all unsent messages for an identity.
nsINavHistoryService
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.
Using IndexedDB in chrome
eddb"] } var principal = cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); var sandbox = components.utils.sandbox(principal, options); // the sandbox will have access to indexeddb var sandboxscript = 'var req = indexeddb.open("my-database");'; components.utils.evalinsandbox(sandboxscript, sandbox); before firefox 33, you would access indexeddb from chrome code using the init
windowless method of the nsiindexeddatabasemanager service.
XUL Overlays
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.
Events
compose-send-message a message gets sent compose-
window-close a compose
window gets closed compose-
window-init a compose
window has been opened compose-
window-reopen a cached compose
window has been reopened.
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.
Filelink Providers
note: the setup dialog
window should resize itself automatically in order to fit the content of the iframe without scrollbars.
Thunderbird API documentation
activity manager address book sync client design buddy icons in mail composition composition back end in mail cached compose
window faq filelink providers new!
Creating a Custom Column
window.addeventlistener("load", doonceloaded, false); function doonceloaded() { var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { ...
Activity Manager examples
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.
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
to do this you need to capture the select event of the folder [[xul:tree|tree]] whose id is (conveniently) foldertree like so:
window.document.getelementbyid('foldertree').addeventlistener("select", testcolumns, false); ...
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
this document describes only how themes are packaged in order to be shown in firefox's themes
window.
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...
customDBHeaders Preference
er = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { dump("here here!"); addcustomcolumnhandler(); } } function doonceloaded(){ var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false);
window.document.getelementbyid('foldertree').addeventlistener("select",addcustomcolumnhandler,false); }
window.addeventlistener("load",doonceloaded,false); dump(" ~ ~ ~ ~ end superfluous ~ ~ ~ ~ \n"); important be aware that only messages that are added to the .msf database after the customdbheaders pref is set will have the corresponding string property set on the msghdr.
Thunderbird extensions
read about the main
windows to learn about « thread pane », « preview pane », and « folder pane ».
Examples
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.
Declaring types
for example, on
windows, you may wish to be able to use the
windows-standard dword type name for unsigned 32-bit integers.
Working with ArrayBuffers
var lib; switch (os.constants.sys.name.tolowercase()) { case 'winnt': case 'winmo': case 'winnt': //
windows lib = ctypes.open('msvcrt'); break; case 'darwin': // mac lib = ctypes.open('libc.dylib'); break; case 'freebsd': lib = ctypes.open('libc.so.7'); break; case 'openbsd': lib = ctypes.open('libc.so.61.0'); break; case 'android': case 'sunos': case 'netbsd': case 'dragonfly': lib = ctypes.open('libc.
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
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.
js-ctypes reference
other features error-handling js-ctypes supports both errno (on all platforms) and getlasterror (on
windows platforms).
js-ctypes
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.
The Web Developer Menu - Firefox Developer Tools
on os x and 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 ...
Open the debugger - Firefox Developer Tools
there are three ways to open the debugger: select "debugger" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press ctrl + shift + z on
windows and linux, or cmd + opt + z on macos (starting in firefox 71; prior to firefox 66, the letter in this shortcut was s).
Step through code - Firefox Developer Tools
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.
Set a logpoint - Firefox Developer Tools
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.
UI Tour - Firefox Developer Tools
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.
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 - Firefox Developer Tools
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.
Eyedropper - Firefox Developer Tools
keyboard shortcuts command
windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys move by 10 pixels shift + arrow keys shift + arrow keys shift + arrow keys ...
Aggregate view - Firefox Developer Tools
type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or
window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape".
Tree map view - Firefox Developer Tools
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.
Network request details - Firefox Developer Tools
rt_jervis:41.38:-74.67:v4" }, { "name": "dnt", "value": "1" }, { "name": "host", "value": "en.wikipedia.org" }, { "name": "referer", "value": "https://www.wikipedia.org/" }, { "name": "te", "value": "trailers" }, { "name": "user-agent", "value": "mozilla/5.0 (
windows nt 10.0; win64; x64; rv:68.0) gecko/20100101 firefox/68.0" } ] } } request headers the request headers section shows details about the request headers.
Open the Inspector - Firefox Developer Tools
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.
Intensive JavaScript - Firefox Developer Tools
mber var candidate = index * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } // schedule the next var testfunction = testcandidate.bind(this, index + 1);
window.requestanimationframe(testfunction); } var primes = []; var testfunction = testcandidate.bind(this, 0);
window.requestanimationframe(testfunction); } let's test this version out: select the radio button labeled "use requestanimationframe" and capture another profile.
Debugging Firefox Desktop - Firefox Developer Tools
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.
Responsive Design Mode - Firefox Developer Tools
on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser
window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support.
Web Console - Firefox Developer Tools
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
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.
ANGLE_instanced_arrays - Web APIs
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.
AmbientLightSensor.illuminance - Web APIs
example if ( 'ambientlightsensor' in
window ) { const sensor = new ambientlightsensor(); sensor.onreading = () => { console.log('current light level:', sensor.illuminance); }; sensor.onerror = (event) => { console.log(event.error.name, event.error.message); }; sensor.start(); } specifications specification status comment generic sensor api candidate recommendation defines sensors in gener...
AmbientLightSensor - Web APIs
example if ( 'ambientlightsensor' in
window ) { const sensor = new ambientlightsensor(); sensor.onreading = () => { console.log('current light level:', sensor.illuminance); }; sensor.onerror = (event) => { console.log(event.error.name, event.error.message); }; sensor.start(); } specifications specification status comment generic sensor api candidate recommendation defines sensors in gener...
AnalyserNode.frequencyBinCount - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ...
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.maxDecibels - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ...
AnalyserNode.minDecibels - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ...
AnalyserNode - Web APIs
var audioctx = new(
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); // ...
AudioBuffer.getChannelData() - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var button = document.queryselector('button'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer =...
AudioBuffer - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives u...
AudioBufferSourceNode - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; //just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us...
AudioContext() - Web APIs
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.
AudioContext.getOutputTimestamp() - Web APIs
play.addeventlistener('click', () => { if(!audioctx) { audioctx = new
window.audiocontext(); } getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log(...
AudioContext - Web APIs
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.
AudioListener.dopplerFactor - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.forwardX - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.forwardY - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.forwardZ - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.positionX - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.positionY - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.positionZ - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.setOrientation() - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.setPosition() - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.speedOfSound - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.upX - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.upY - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener.upZ - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioListener - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
AudioNode.channelCount - Web APIs
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...
AudioNode.channelCountMode - Web APIs
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' ...
AudioNode.channelInterpretation - Web APIs
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.channelinterpretation = 'discrete'; specifications specification status comment web audio apithe definition of 'channelinterp...
AudioNode.context - Web APIs
example const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audioctx = new audiocontext(); const oscillator = audioctx.createoscillator(); const gainnode = audioctx.creategain(); oscillator.connect(gainnode).connect(audioctx.destination); console.log(oscillator.context); // audiocontext console.log(oscillator.context === audioctx); // true specifications specification status comment web audio apithe definition of 'contex...
AudioNode.disconnect() - Web APIs
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.exponentialRampToValueAtTime() - Web APIs
this is pretty useful for fade in/fade out effects: // create audio context var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var exprampplus = document.queryselector('.exp-ramp-plus'); var exprampminus = document.queryselector('.exp-ra...
AudioParam.linearRampToValueAtTime() - Web APIs
// create audio context var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var linearrampplus = document.queryselector('.linear-ramp-plus'); var linearrampminus = document.queryselector...
AudioParam.setTargetAtTime() - Web APIs
// create audio context var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var attimeplus = document.queryselector('.at-time-plus'); var attimeminus = document.queryselector('.at-time-m...
AudioParam.setValueAtTime() - Web APIs
when the buttons are pressed, the currgain variable is incremented/decremented by 0.25, then the setvalueattime() method is used to set the gain value equal to currgain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus = document.queryselector('.set-target-at-time-plus'); var targetattimeminus = document.qu...
AudioParam.setValueCurveAtTime() - Web APIs
examples in this example, we have a media source with a single button (see the webaudio-examples repo for the source code, or view the example live.) when this button is pressed, setvaluecurveattime() is used to change the gain value between the values contained in the wavearray array: // create audio context var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var valuecurve = document.queryselector('.value-curve'); // create a mediaelementaudiosourcenode // feed the ...
AudioParam - Web APIs
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.
AuthenticatorResponse.clientDataJSON - Web APIs
is a publickeycredential that is the result of a create() or get() promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "webauthn.create" or "webauthn.get" console.log(clientdataobj.challenge); // base64 encoded string containing the original challenge console.log(clientdataobj.origin); // the
window.origin specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'clientdatajson' in that specification.
BaseAudioContext.createBiquadFilter() - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BaseAudioContext.createBuffer() - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives u...
BaseAudioContext.createBufferSource() - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var button = document.queryselector('button'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer =...
BaseAudioContext.createGain() - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stre...
BaseAudioContext.createOscillator() - Web APIs
// 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.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'crea...
BaseAudioContext.createPanner() - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
BaseAudioContext.createStereoPanner() - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a st...
BaseAudioContext.currentTime - Web APIs
syntax var curtime = baseaudiocontext.currenttime; example var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ...
BaseAudioContext.destination - Web APIs
var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillatornode.connect(gainnode); gainnode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'destin...
BaseAudioContext.listener - Web APIs
var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ...
BaseAudioContext.sampleRate - Web APIs
var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ...
BaseAudioContext - Web APIs
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.
Battery Status API - Web APIs
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.
BeforeInstallPromptEvent.prompt() - Web APIs
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 // ...
BiquadFilterNode.Q - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BiquadFilterNode.detune - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BiquadFilterNode.frequency - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BiquadFilterNode.gain - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BiquadFilterNode.type - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BiquadFilterNode - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource...
BroadcastChannel - Web APIs
it allows communication between different documents (in different
windows, tabs, frames or iframes) of the same origin.
Broadcast Channel API - Web APIs
the broadcast channel api allows basic communication between browsing contexts (that is,
windows, tabs, frames, or iframes) and workers on the same origin.
CSS.registerProperty() - Web APIs
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> .
CSSPrimitiveValue.getFloatValue() - Web APIs
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.
CSSPrimitiveValue.getRGBColorValue() - Web APIs
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.
CSSPrimitiveValue.getRectValue() - Web APIs
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.
CSSPrimitiveValue.getStringValue() - Web APIs
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.
CSSPrimitiveValue.primitiveType - Web APIs
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.
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
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.
CSS Object Model (CSSOM) - Web APIs
lesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document,
window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
CSS Properties and Values API - Web APIs
examples the following uses css.registerproperty in javascript to type a css custom properties, --my-color, as a color, give it a default value, and not allow it to inherit its value:
window.css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); the same registration can take place in css using the following @property: @property --my-color { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } specifications specification status comment css properties and values api level 1 wo...
CanvasPattern.setTransform() - Web APIs
value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas);
window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasRenderingContext2D.addHitRegion() - Web APIs
ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas);
window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.miterLimit - Web APIs
entbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas);
window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
entbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas);
window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
Basic usage of canvas - Web APIs
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.
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
entbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas);
window.addeventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it.
Channel Messaging API - Web APIs
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.
Client.postMessage() - Web APIs
the postmessage() method of the client interface allows a service worker to send a message to a client (a
window, worker, or sharedworker).
Client.url - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: '
window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.open
window) return clients.open
window('/'); })); }); specifications specification status comment service workersthe definition of 'url' in that ...
Clients.get() - Web APIs
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.
Console API - Web APIs
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.
ConvolverNode.buffer - Web APIs
example var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var convolver = audioctx.createconvolver(); ...
ConvolverNode - Web APIs
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; } ...
Crypto.getRandomValues() - Web APIs
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 ...
DOMTokenList.forEach() - Web APIs
html <span class="a b c"></span> javascript let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es5: if (
window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg ||
window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iterable<node>)' in that specific...
DataTransfer.clearData() - Web APIs
</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript
window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); dragg...
DelayNode.delayTime - Web APIs
var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ...
DelayNode - Web APIs
var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ...
DeviceLightEvent - Web APIs
example
window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications no specification.
DeviceMotionEvent - Web APIs
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.
DeviceOrientationEvent - Web APIs
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.
DeviceProximityEvent - Web APIs
examples
window.addeventlistener('deviceproximity', function(event) { console.log("value: " + event.value, "max: " + event.max, "min: " + event.min); }); ...
Device Memory API - Web APIs
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.
DirectoryReaderSync - Web APIs
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...
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.createTouchList() - Web APIs
var target = document.getelementbyid("target"); // create some touch points var touch1 = document.createtouch(
window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(
window, target, 2, 25, 30, 45, 50); // create an empty touchlist objects var list0 = document.createtouchlist(); // create a touchlist with only one touch object var list1 = document.createtouchlist(touch1); // create a list with two touch objects var list2 = document.createtouchlist(touch1, touch2); specifications spec...
Document.execCommand() - Web APIs
(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.
Document.fullscreenEnabled - Web APIs
full-screen mode is available only for a page that has no
windowed plug-ins in any of its documents, and if all <iframe> elements which contain the document have their allowfullscreen attribute set.
Document.importNode() - Web APIs
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().
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
inside an <iframe>, the document.referrer will initially be set to the same value as the href of the parent
window's
window.location.
Document: scroll event - Web APIs
// 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.
Document.width - Web APIs
syntax pixels = document.width; example function init() { alert("the width of the document is " + document.width + " pixels."); } alternatives document.body.clientwidth /* width of <body> */ document.documentelement.clientwidth /* width of <html> */
window.innerwidth /*
window's width */ specification html5 ...
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
t; } else if (document.caretrangefrompoint) { range = document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } }
window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
Events and the DOM - Web APIs
accessing event interfaces event handlers may be attached to various objects (including dom elements, document, the
window object, etc.).
Element.closest() - Web APIs
if (
window.element && !element.prototype.closest) { element.prototype.closest = function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i, el = this; do { i = matches.length; while (--i >= 0 && matches.item(i) !== el) {}; } while ((i < 0) && (el = el.parentelement)); return el; }; } specifications specification sta...
Element: mousedown event - Web APIs
// add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } });
window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result ...
Element: mousemove event - Web APIs
// add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } });
window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result ...
Element: mouseup event - Web APIs
// add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } });
window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result ...
Element.onfullscreenchange - Web APIs
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.
Element.outerHTML - Web APIs
examples getting the value of an element's outerhtml property: html <div id="d"> <p>content</p> <p>further elaborated</p> </div> javascript var d = document.getelementbyid("d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console
window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div> javascript var container = document.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.firstchild.nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.firstchild.nodename);...
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
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).
Element: scroll event - Web APIs
// 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.
Event.composed - Web APIs
the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/,
window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/,
window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
Event.composedPath() - Web APIs
the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/,
window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/,
window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
Event.msConvertURL() - Web APIs
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.
Event.preventDefault() - Web APIs
it's not an elegant function but does the job for the purposes of this example: var warningtimeout; var warningbox = document.createelement("div"); warningbox.classname = "warning"; function displaywarning(msg) { warningbox.innerhtml = msg; if (document.body.contains(warningbox)) {
window.cleartimeout(warningtimeout); } else { // insert warningbox after mytextbox mytextbox.parentnode.insertbefore(warningbox, mytextbox.nextsibling); } warningtimeout =
window.settimeout(function() { warningbox.parentnode.removechild(warningbox); warningtimeout = -1; }, 2000); } result notes calling preventdefault() during any stage of event flow cancels the event,...
File.type - Web APIs
client configuration (for instance, the
windows registry) may result in unexpected values even for common types.
FileSystem - Web APIs
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().
FileSystemFileEntry - Web APIs
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.
FileHandle API - Web APIs
var idbreq =
window.indexeddb.open('myfilestoragedatabase'); // if necessary, let's create a datastore for the files idbreq.onupgradeneeded = function () { this.result.createobjectstore('files'); } idbreq.onsuccess = function () { var db = this.result; // let's create a new file var handlereq = db.mozcreatefilehandle("test.txt", "plain/text"); handlereq.onsuccess = function () { var myfilehandle = ...
File and Directory Entries API support in Firefox - Web APIs
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.
Using the Frame Timing API - Web APIs
function create_frame_observer() { if (
window.performanceobserver === undefined) return; // register the performance observer var observe_frame = new performanceobserver(function(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #1: [" + i + "] = " + perfentries[i].name); } }); // only observe 'frame' events observe...
GainNode.gain - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stre...
GainNode - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stre...
Gamepad.id - Web APIs
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.
Gamepad.index - Web APIs
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.
Gamepad - Web APIs
example
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
GlobalEventHandlers.onanimationcancel - Web APIs
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).
GlobalEventHandlers.onanimationend - Web APIs
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).
GlobalEventHandlers.onanimationiteration - Web APIs
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).
GlobalEventHandlers.onanimationstart - Web APIs
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).
GlobalEventHandlers.onkeypress - Web APIs
*/ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt ||
window.event, nchr = oevent.charcode, snodetype = oevent.target.nodename.touppercase(); if (nchr === 0 || oevent.target.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "input" && oevent.target.type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr ==...
GlobalEventHandlers.onpointerleave - Web APIs
the global event handler for the pointerleave event, which is delivered to a node when the pointer (mouse cursor, fingertip, etc.) exits its hit test area (for example, if the cursor exits an element or
window's content area).
GlobalEventHandlers.ontransitionend - Web APIs
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).
HTMLButtonElement.labels - Web APIs
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.
HTMLCanvasElement.mozGetAsFile() - Web APIs
ent.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } }
window.addeventlistener('load', draw); specifications not part of any specification.
HTMLCanvasElement.toDataURL() - Web APIs
color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript
window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document...
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.
HTMLElement.lang - Web APIs
example // this snippet compares the base language and // redirects to another url based on language if (document.documentelement.lang === "en") {
window.location.href = "some_document.html.en"; } else if (document.documentelement.lang === "ru") {
window.location.href = "some_document.html.ru"; } specification specification status comment document object model (dom) level 2 html specificationthe definition of 'lang' in that specification.
HTMLFormElement - Web APIs
f.action = "a-different-url.cgi"; f.name = "a-different-name"; } </script> submit a <form> into a new
window: <!doctype html> <html> <head> <meta charset="utf-8"> <title>example new-
window form submission</title> </head> <body> <form action="test.php" target="_blank"> <p><label>first name: <input type="text" name="firstname"></label></p> <p><label>last name: <input type="text" name="lastname"></label></p> <p><label><input type="password" name="pwd"></label></p> <fieldset> <legend>pet prefe...
HTMLHyperlinkElementUtils.origin - Web APIs
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.
HTMLImageElement.height - Web APIs
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.
HTMLInputElement.labels - Web APIs
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.
HTMLMeterElement.labels - Web APIs
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.
HTMLOutputElement.labels - Web APIs
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.
HTMLProgressElement.labels - Web APIs
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.
HTMLSelectElement.labels - Web APIs
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.
HTMLSelectElement.options - Web APIs
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.
HTMLTextAreaElement.labels - Web APIs
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.
HTMLTextAreaElement - Web APIs
function checkrows(ofield, okeyevent) { var nkey = (okeyevent || /* old ie */
window.event || /* check is not supported!
HTMLVideoElement.msInsertVideoEffect() - Web APIs
example var ovideo1 = document.getelementbyid("video1"); ovideo1.msinsertvideoeffect("
windows.media.videoeffects.videostabilization", true, null); see also htmlvideoelement microsoft api extensions ...
HTML Drag and Drop API - Web APIs
identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); }
window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute reference drag operations guide define t...
History.forward() - Web APIs
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.
IDBCursor.delete() - Web APIs
even power
windows is better.'); }; } else { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment ...
IDBDatabase.close() - Web APIs
syntax idbdatabase.close(); example // let us open our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // opening a database.
IDBDatabase.createObjectStore() - Web APIs
example // let us open our database var request =
window.indexeddb.open("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling //
window.indexeddb.open().
IDBDatabase.name - Web APIs
// 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.
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabase.transaction() - Web APIs
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.
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest =
window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBFactory.cmp() - Web APIs
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.
IDBFactory.deleteDatabase() - Web APIs
example var dbdeleterequest =
window.indexeddb.deletedatabase("todolist"); dbdeleterequest.onerror = function(event) { console.log("error deleting database."); }; dbdeleterequest.onsuccess = function(event) { console.log("database deleted successfully"); console.log(event.result); // should be undefined }; specifications specification status comment indexed database api draftthe definition of...
IDBObjectStore.add() - Web APIs
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.
IDBObjectStore.autoIncrement - Web APIs
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.
IDBObjectStore.clear() - Web APIs
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.
IDBObjectStore.delete() - Web APIs
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.
IDBObjectStore.get() - Web APIs
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.
IDBObjectStore.indexNames - Web APIs
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.
IDBObjectStore.keyPath - Web APIs
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.
IDBObjectStore.name - Web APIs
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.
IDBObjectStore.transaction - Web APIs
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.
IDBOpenDBRequest.onblocked - Web APIs
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" }); ...
IDBRequest - Web APIs
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.
IDBTransaction.abort() - Web APIs
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.
IDBTransaction.db - Web APIs
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.
IDBTransaction.error - Web APIs
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.
IDBTransaction.mode - Web APIs
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.
IDBTransaction.objectStore() - Web APIs
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.
IDBTransaction.onabort - Web APIs
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.
IDBTransaction.oncomplete - Web APIs
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.
IDBTransaction.onerror - Web APIs
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.
IIRFilterNode() - Web APIs
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.
IdleDeadline.didTimeout - Web APIs
the read-only didtimeout property on the idledeadline interface is a boolean value which indicates whether or not the idle callback is being invoked because the timeout interval specified when
window.requestidlecallback() was called has expired.
IdleDeadline - Web APIs
the idledeadline interface is used as the data type of the input parameter to idle callbacks established by calling
window.requestidlecallback().
Keyboard.getLayoutMap() - Web APIs
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.
Keyboard - Web APIs
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.
KeyboardLayoutMap.get() - Web APIs
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.
KeyboardLayoutMap - Web APIs
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.
Keyboard API - Web APIs
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.
Location: origin - Web APIs
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.
Location: replace() - Web APIs
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.
MSManipulationEvent.initMSManipulationEvent() - Web APIs
example interface msmanipulationevent extends uievent { readonly currentstate: number; readonly inertiadestinationx: number; readonly inertiadestinationy: number; readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg:
window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ...
MSManipulationEvent - Web APIs
example interface msmanipulationevent extends uievent { readonly currentstate: number; readonly inertiadestinationx: number; readonly inertiadestinationy: number; readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg:
window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ...
MediaDevices.ondevicechange - Web APIs
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.
MediaElementAudioSourceNode.mediaElement - Web APIs
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.
expiration - Web APIs
this value may change during a session lifetime, such as when an action triggers the start of a
window.
MediaKeySession - Web APIs
this value may change during a session lifetime, such as when an action triggers the start of a
window.
MediaPositionState.position - Web APIs
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 ...
MediaQueryList.addListener() - Web APIs
examples var para = document.queryselector('p'); var mql =
window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; ...
MediaQueryList.matches - Web APIs
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.
MediaQueryList.media - Web APIs
javascript let mql =
window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.media; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the result's media property.
MediaQueryList.onchange - Web APIs
}; example var mql =
window.matchmedia('(max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification...
MediaQueryList.removeListener() - Web APIs
examples var mql =
window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; ...
MediaQueryListEvent.matches - Web APIs
examples var mql =
window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } }...
MediaQueryListEvent.media - Web APIs
examples var mql =
window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification ...
MediaQueryListEvent - Web APIs
examples var mql =
window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; ...
MediaRecorder.ondataavailable - Web APIs
var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaRecorder.onstop - Web APIs
mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl =
window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
MediaSession.setPositionState() - Web APIs
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...
MediaSource.MediaSource() - Web APIs
snippet is taken from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...
MediaSource.addSourceBuffer() - Web APIs
example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasourc...
MediaSource.endOfStream() - Web APIs
ing property is true.) example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasourc...
MediaSource.isTypeSupported() - Web APIs
example the following snippet is from an example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasourc...
MediaSource.readyState - Web APIs
example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasourc...
MediaSource - Web APIs
this example was written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in
window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasou...
MediaStreamAudioSourceNode() - Web APIs
// define variables var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints: audio and video for this app { audio: true, video: false }).then(function(stream) { var options = { mediastream : stre...
MediaStreamAudioSourceNode.mediaStream - Web APIs
examples const audioctx = new
window.audiocontext(); let options = { mediastream : stream } let source = new mediastreamaudiosourcenode(audioctx, options); console.log(source.mediastream); specifications specification status comment web audio apithe definition of 'mediastreamaudiosourcenode.mediastream' in that specification.
MediaStreamTrackAudioSourceNode() - Web APIs
let audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.dest...
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
let audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.dest...
Recording a media element - Web APIs
it works by using an arrow function which calls
window.settimeout(), specifying the promise's resolution handler as the timeout handler function.
MediaStream Recording API - Web APIs
} } 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.
MediaTrackConstraints.logicalSurface - Web APIs
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.
MessageChannel() - Web APIs
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).
MessageChannel.port1 - Web APIs
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'...
MessageChannel.port2 - Web APIs
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).
MessagePort.onmessage - Web APIs
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).
MouseEvent.altKey - Web APIs
on some linux variants, for example, a left mouse click combined with the alt key is used to move or resize
windows.
MouseEvent.pageX - Web APIs
since this example is presented in an <iframe>, that top-left corner is the top-left corner of the frame, not the browser
window.
MouseEvent.screenX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result routing an event when you trap events on the
window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) doredbutton(); } specifications specification status comment css o...
MouseEvent - Web APIs
html <p><label><input type="checkbox" id="checkbox"> checked</label> <p><button id="button">click me</button> javascript function simulateclick() { var evt = new mouseevent("click", { bubbles: true, cancelable: true, view:
window }); var cb = document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications ...
msPlayToPreferredSourceUri - Web APIs
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.
msSetMediaProtectionManager - Web APIs
syntax htmlmediaelement.mssetmediaprotectionmanager(mediaprotectionmanager); parameters the
windows.media.protection namespace provides classes to manage digital rights management (drm) media contents.
Navigator.getGamepads() - Web APIs
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.
msSaveBlob - Web APIs
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
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
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
syntax venstring =
window.navigator.vendor value either "google inc.", "apple computer, inc.", or (in firefox) the empty string.
Navigator.vendorSub - Web APIs
syntax vensub =
window.navigator.vendorsub value the empty string specifications specification status comment html living standardthe definition of 'navigatorid: vendorsub' in that specification.
Navigator - Web APIs
a navigator object can be retrieved using the read-only
window.navigator property.
NavigatorID.platform - Web APIs
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.
NavigatorID.taintEnabled() - Web APIs
syntax result =
window.navigator.taintenabled() specifications specification status comment html living standardthe definition of 'navigatorid.taintenabled' in that specification.
NavigatorLanguage.language - Web APIs
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.
NavigatorPlugins.javaEnabled() - Web APIs
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.
NavigatorStorage - Web APIs
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.
Node.baseURI - Web APIs
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.
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.Notification() - Web APIs
syntax var mynotification = new notification(title, options); parameters title defines a title for the notification, which is shown at the top of the notification
window.
Notification.onclick - Web APIs
examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.preventdefault(); // prevent the browser from focusing the notification's tab
window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'onclick' in that specification.
Notification.permission - Web APIs
function notifyme() { // let's check if the browser supports notifications if (!("notification" in
window)) { console.log("this browser does not support desktop notification"); } // let's check whether notification permissions have alredy been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permis...
Notification.requestPermission() - Web APIs
function notifyme() { // let's check if the browser supports notifications if (!("notification" in
window)) { alert("this browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission ...
Notification - Web APIs
function notifyme() { // let's check if the browser supports notifications if (!("notification" in
window)) { alert("this browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission ...
NotificationAction - Web APIs
self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.open
window('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...
NotificationEvent.action - Web APIs
example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.open
window("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification.
NotificationEvent.notification - Web APIs
console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "
window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.open
window) return clients.open
window('/'); })); }); specifications specification status comment notifications apithe definition of 'notifi...
NotificationEvent - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "
window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.open
window) return clients.open
window('/'); })); }); specifications specification status comment notifications apithe definition of 'notifi...
OVR_multiview2 - Web APIs
availability: support depends on the system's graphics driver (
windows+angle and android are supported;
windows+gl, mac, linux are not supported).
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...
OscillatorNode.detune - Web APIs
// 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.detune.setvalueattime(100, audioctx.currenttime); // value in cents oscillator.start(); specifications specification status comment ...
OscillatorNode.frequency - Web APIs
// 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.
OscillatorNode.onended - Web APIs
// 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.
OscillatorNode.start() - Web APIs
// 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.
OscillatorNode.stop() - Web APIs
// 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
// 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.
OscillatorNode - Web APIs
// 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.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'oscil...
PageTransitionEvent - Web APIs
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.
PannerNode.distanceModel - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
PannerNode.maxDistance - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
PannerNode.panningModel - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
PannerNode.setOrientation() - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
PannerNode.setPosition() - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
PannerNode.setVelocity() - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
PannerNode - Web APIs
// set up listener and panner position information var width =
window.innerwidth; var height =
window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext =
window.audiocontext ||
window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdis...
ParentNode.childElementCount - Web APIs
if (constructor && constructor.prototype && constructor.prototype.childelementcount == null) { object.defineproperty(constructor.prototype, 'childelementcount', { get: function() { var i = 0, count = 0, node, nodes = this.childnodes; while (node = nodes[i++]) { if (node.nodetype === 1) count++; } return count; } }); } })(
window.node ||
window.element); specification specification status comment domthe definition of 'parentnode.childelementcount' in that specification.
ParentNode.children - Web APIs
constructor.prototype && constructor.prototype.children == null) { object.defineproperty(constructor.prototype, 'children', { get: function() { let i = 0, node, nodes = this.childnodes, children = []; while (node = nodes[i++]) { if (node.nodetype === 1) { children.push(node); } } return children; } }); } })(
window.node ||
window.element); specification specification status comment domthe definition of 'parentnode.children' in that specification.
ParentNode.firstElementChild - Web APIs
) { object.defineproperty(constructor.prototype, 'firstelementchild', { get: function() { var node, nodes = this.childnodes, i = 0; while (node = nodes[i++]) { if (node.nodetype === 1) { return node; } } return null; } }); } })(
window.node ||
window.element); specification specification status comment domthe definition of 'parentnode.firstelementchild' in that specification.
ParentNode.lastElementChild - Web APIs
onstructor.prototype && constructor.prototype.lastelementchild == null) { object.defineproperty(constructor.prototype, 'lastelementchild', { get: function() { var node, nodes = this.childnodes, i = nodes.length - 1; while(node = nodes[i--]) { if(node.nodetype === 1) { return node; } } return null; } }); } })(
window.node ||
window.element); specification specification status comment domthe definition of 'parentnode.lastelementchild' in that specification.
PaymentRequest.abort() - Web APIs
var request = new paymentrequest(supportedinstruments, details, options); var paymenttimeout =
window.settimeout(() => {
window.cleartimeout(paymenttimeout); request.abort().then(() => { print('payment timed out after 20 minutes.'); }).catch(() => { print('unable to abort, because the user is currently in the process ' + 'of paying.'); }); }, 20 * 60 * 1000); /* 20 minutes */ specifications specification status comment payment request apithe d...
PaymentRequest.onmerchantvalidation - Web APIs
examples an example merchant validation handler for the paymentrequest object request looks like this: request.onmerchantvalidation = ev => { ev.complete(async () => { const 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.
PublicKeyCredential - Web APIs
with the current state of implementation, this method only resolves to true when
windows hello is available on the system.
PublicKeyCredentialCreationOptions.user - Web APIs
examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { // to be changed for each user id: new uint8array.from(
window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to...
PushEvent.data - Web APIs
ata.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.open
window) { clients.open
window('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
PushEvent - Web APIs
son(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.open
window) { clients.open
window('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
PushManager.getSubscription() - Web APIs
return; } // keep your server in sync with the latest subscriptionid sendsubscriptiontoserver(subscription); showcurlcommand(subscription); // set your ui to show they have subscribed for // push messages pushbutton.textcontent = 'disable push messages'; ispushenabled = true; }) .catch(function(err) {
window.demo.debug.log('error during getsubscription()', err); }); }); specifications specification status comment push apithe definition of 'getsubscription()' in that specification.
PushManager.subscribe() - Web APIs
example this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open //
windows, display a notification, etc.
PushManager - Web APIs
example this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open //
windows, display a notification, etc.
RTCDataChannel: open event - Web APIs
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.
RTCIceCandidateStats.deleted - Web APIs
window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && !stats.deleted) { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.tim...
RTCIceCandidateStats.networkType - Web APIs
window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && stats.networktype === "cellular") { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</st...
RTCInboundRtpStreamStats.fecPacketsDiscarded - Web APIs
this can happen if all the packets covered by the fec packet have already been received or recovered using another fec packet, or if the fec packet arrived outside the recovery
window and the lost rtp packets have already been skipped during playback as a result.
RTCPeerConnection.getStats() - Web APIs
window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sort...
RTCRtpSender.replaceTrack() - Web APIs
examples switching video cameras // example to change video camera, suppose selected value saved into
window.selectedcamera navigator.mediadevices .getusermedia({ video: { deviceid: { exact:
window.selectedcamera } } }) .then(function(stream) { let videotrack = stream.getvideotracks()[0]; pcs.foreach(function(pc) { var sender = pc.getsenders().find(function(s) { return s.track.kind == videotrack.kind; }); console.log('found sender:', s...
Range.commonAncestorContainer - Web APIs
.highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addeventlistener('pointerup', e => { const selection =
window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight'); settimeout(() => { el.classlist.add('high...
Selection.addRange() - Web APIs
html <p>i <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', function () { let selection =
window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } }); result specifications specification status comment selection apith...
Selection.collapse() - Web APIs
*/ var body = document.getelementsbytagname("body")[0];
window.getselection().collapse(body,0); specifications specification status comment selection apithe definition of 'selection.collapse()' in that specification.
Selection.getRangeAt() - Web APIs
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.
Selection.modify() - Web APIs
y">sentence boundary</option> <option value="paragraphboundary">paragraph boundary</option> <option value="documentboundary">document boundary</option> </select> <br><br> <button>extend selection</button> javascript let select = document.queryselector('select'); let button = document.queryselector('button'); button.addeventlistener('click', modify); function modify() { let selection =
window.getselection(); selection.modify('extend', 'forward', select.value); } result specifications this method is not part of any specification.
Selection.rangeCount - Web APIs
html <table> <tr><td>a.1<td>a.2 <tr><td>b.1<td>b.2 <tr><td>c.1<td>c.2 javascript
window.setinterval(function () { console.log(
window.getselection().rangecount); }, 1000); result open your console to see how many ranges are in the selection.
Selection.removeRange() - Web APIs
*/ 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.
Selection.selectAllChildren() - Web APIs
example html <main> <button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => {
window.getselection().selectallchildren(footer); }); result specifications specification status comment selection apithe definition of 'selection.selectallchildren()' in that specification.
Selection.toString() - Web APIs
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.
ServiceWorkerGlobalScope.onfetch - Web APIs
the onfetch property of the serviceworkerglobalscope interface is an event handler fired whenever a fetch event occurs (usually when the
windoworworkerglobalscope.fetch() method is called.) syntax serviceworkerglobalscope.onfetch = function(fetchevent) { ...
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "
window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.open
window) return clients.open
window('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificat...
ServiceWorkerGlobalScope.onpush - Web APIs
ata.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.open
window) { clients.open
window('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.
Using Service Workers - Web APIs
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.
Service Worker API - Web APIs
windowclient represents the scope of a service worker client that is a document in a browser context, controlled by an active worker.
Streams API - Web APIs
this request could then be passed to a
windoworworkerglobalscope.fetch() to commence fetching the stream.
Stylesheet.href - Web APIs
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.
SubtleCrypto - Web APIs
access to the features of subtlecrypto is obtained through the subtle property of the crypto object you get from
window.crypto.
TextDecoder.prototype.encoding - Web APIs
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'.
TextTrack.mode - Web APIs
window.addeventlistener("load", event => { let trackelem = document.queryselector("track"); let track = trackelem.track; track.mode = "showing"; for (let index=0; index < track.cues.length; index++) { let cue = track.cues[index]; cue.pauseonexit = true; }; }); specifications specification status comment html living standardthe definition of 'mode' in tha...
TimeEvent - Web APIs
timeevent.view read only is a
windowproxy that identifies the
window from which the event was generated.
Touch.target - Web APIs
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.
TouchEvent - Web APIs
the touch point has left the document
window and moved into the browser's ui area, a plug-in, or other external content.
Multi-touch interaction - Web APIs
ev.targettouches.length) { case 1: // single tap` ev.target.style.background = "yellow"; break; case 2: // two simultaneous touches ev.target.style.background = "pink"; break; default: // more than two simultaneous touches ev.target.style.background = "lightblue"; } } event logging the functions are used to log event activity to the application
window, to support debugging and learning about the event flow.
UIEvent() - Web APIs
view: optional and defaulting to null, of type
windowproxy, that is the
window associated with the event .
sourceCapabilities - Web APIs
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.
URLUtilsReadOnly.hash - Web APIs
syntax string = object.hash; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.hash#example var result =
window.self.hash; // returns:'#hash' specifications specification status comment urlthe definition of 'urlutilsreadonly.hash' in that specification.
URLUtilsReadOnly.host - Web APIs
syntax string = object.host; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.host var result =
window.self.host; // returns:'developer.mozilla.org:80' specifications specification status comment urlthe definition of 'urlutilsreadonly.host' in that specification.
URLUtilsReadOnly.hostname - Web APIs
syntax string = object.hostname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.hostname var result =
window.self.hostname; // returns:'developer.mozilla.org' specifications specification status comment urlthe definition of 'urlutilsreadonly.hostname' in that specification.
URLUtilsReadOnly.href - Web APIs
syntax string = object.href; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result =
window.self.href; // returns:'https://developer.mozilla.org/urlutilsreadonly.href' specifications specification status comment urlthe definition of 'urlutilsreadonly.href' in that specification.
URLUtilsReadOnly.pathname - Web APIs
syntax string = object.pathname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.pathname var result =
window.self.pathname; // returns:'/urlutilsreadonly.pathname' specifications specification status comment urlthe definition of 'urlutilsreadonly.pathname' in that specification.
URLUtilsReadOnly.port - Web APIs
syntax string = object.port; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.port var result =
window.self.port; // returns:'80' specifications specification status comment urlthe definition of 'urlutilsreadonly.port' in that specification.
URLUtilsReadOnly.protocol - Web APIs
syntax string = object.protocol; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result =
window.self.protocol; // returns:'https:' specifications specification status comment urlthe definition of 'urlutilsreadonly.protocol' in that specification.
URLUtilsReadOnly.search - Web APIs
syntax string = object.search; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.href?t=67 var result =
window.self.search; // returns:'?t=67' specifications specification status comment urlthe definition of 'urlutilsreadonly.search' in that specification.
URLUtilsReadOnly.toString() - Web APIs
syntax string = object.tostring(); examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result =
window.self.tostring(); // returns:'https://developer.mozilla.org/urlutilsreadonly.href' browser compatibility the compatibility table in this page is generated from structured data.
WaveShaperNode - Web APIs
var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ...
WebGLRenderingContext.makeXRCompatible() - Web APIs
javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton;
window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected,...
WebGLRenderingContext.viewport() - Web APIs
the webglrenderingcontext.viewport() method of the webgl api sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to
window coordinates.
Basic scissoring - Web APIs
<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.
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); ...
Simple color animation - Web APIs
l5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; }
window.addeventlistener("load", function setupanimation (evt) { "use strict"
window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
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
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.
Getting started with WebGL - Web APIs
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.
Using DTMF with WebRTC - Web APIs
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.
WebRTC Statistics API - Web APIs
try { mypeerconnection = new rtcpeerconnection(pcoptions); statsinterval =
window.setinterval(getconnectionstats, 1000); /* add event handlers, etc */ } catch(err) { console.error("error creating rtcpeerconnection: " + err); } function getconnectionstats() { mypeerconnection.getstats(null).then(stats => { var statsoutput = ""; stats.foreach(report => { if (report.type === "inbound-rtp" && report.kind === "video") { object.keys(report).foreach(stat...
Writing WebSocket client applications - Web APIs
me has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.getelementbyid("userlistbox").innerhtml = ul; break; } if (text.length) { f.write(text); document.getelementbyid("chatbox").content
window.scrollbypages(1); } }; here we use json.parse() to convert the json object back into the original object, then examine and act upon its contents.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
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).
Movement, orientation, and motion: A WebXR example - Web APIs
window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.q...
Rendering and the WebXR frame animation callback - Web APIs
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.
Web Animations API Concepts - Web APIs
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.
Example and tutorial: Simple synth keyboard - Web APIs
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).
Using IIR filters - Web APIs
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.
Using the Web Audio API - Web APIs
// for legacy browsers const audiocontext =
window.audiocontext ||
window.webkitaudiocontext; const audiocontext = new audiocontext(); so what's going on when we do this?
Visualizations with Web Audio API - Web APIs
basic concepts to extract data from your audio source, you need an analysernode, which is created using the audiocontext.createanalyser() method, for example: var audioctx = new (
window.audiocontext ||
window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); this node is then connected to your audio source at some point between your source and your destination, for example: source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the ana...
Web Speech API - Web APIs
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.
WorkerGlobalScope.console - Web APIs
if you are calling console.log() from a dedicatedworkerglobalscope or other worker scope that acts on a single loaded
window, that tab's web console will receive the logs.
WorkerNavigator - Web APIs
such an object is initialized for each worker and is available via the workerglobalscope.navigator property obtained by calling
window.self.navigator.
Using XMLHttpRequest in IE6 - Web APIs
in all modern browsers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (
window.xmlhttprequest) { //firefox, opera, ie7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...
mssitemodejumplistitemremoved - Web APIs
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.
ARIA live regions - Accessibility
in
windows eyes supports live regions since version 8.0 "for use outside of browse mode for microsoft internet explorer and mozilla firefox".
Using the aria-describedby attribute - Accessibility
<div id="descriptionclose">closing this
window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
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
aria annotation roles and objects are currently exposed in: firefox from version 75 onwards, on
windows and linux (on macos, we are first waiting for apple to define what safari will expose as apple-dialect attributes to voiceover, and will then follow suit.) chrome from version 81 onwards, currently behind the #enable-accessibility-expose-aria-annotations flag (go to chrome://flags to enable this.) unfortunately, you won’t be able to use any of these yet, as screenreader support is currently...
How to file ARIA-related bugs - Accessibility
tbd: add proper accessibility markup to table genre software where to file notes screen readers freedom scientific jaws jaws technical support form gw micro
window eyes
window-eyes comments, questions, and feedback (email) non visual desktop access (nvda) file nvda bugs discuss nvda issues browsers apple safari file webkit.org bugs google chrome file chromium bugs microsoft internet explorer file ie bugs microsoft edge file ms edge bugs view existin...
ARIA: application role - Accessibility
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.
ARIA: tab role - Accessibility
window.addeventlistener("domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydo...
ARIA: dialog role - Accessibility
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.
Accessibility FAQ - Accessibility
assistive technology compatibility - documents assistive technologies for
windows, linux, unix, mac os x and the degree of compatibility with firefox what can i do to make sure my mozilla extensions are accessible?
Accessibility documentation index - Accessibility
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.
Operable - Accessibility
for example, if you press enter/return on a focused button to open an options
window, you should be able to close that
window again and return to the main content using the keyboard.
-moz-context-properties - CSS: Cascading Style Sheets
/svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the svg is loaded standalone in a top-level
window (where it will have no context element to provide context values).
:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
(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.
:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
(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.
::placeholder - CSS: Cascading Style Sheets
<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.
:first - CSS: Cascading Style Sheets
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.
:visited - CSS: Cascading Style Sheets
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.
CSSOM View - CSS: Cascading Style Sheets
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.
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...
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]; ...
font-feature-settings - CSS: Cascading Style Sheets
fault */ .noligs { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: gabriola; /* available on
windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status comment css fonts module level 3the definition of 'font-feature-settings' in that specification.
font-size-adjust - CSS: Cascading Style Sheets
full support 1notes notes before firefox 3, font-size-adjust was supported on
windows only.ie no support noopera full support 30disabled full support 30disabled disabled from version 30: this feature is behind the enable experimental web platform features preference.safari no support nowebview android ...
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...
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
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.
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
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.
Mobile Web Development - Developer guides
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.
User input and controls - Developer guides
for example if you want to add controls when any key gets pressed, you need to add an event listener on the
window object:
window.addeventlistener("keydown", handlekeydown, true);
window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
manifest - HTML: Hypertext Markup Language
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.
<isindex> - HTML: Hypertext Markup Language
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.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
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.
accesskey - HTML: Hypertext Markup Language
the way to activate the accesskey depends on the browser and its platform:
windows linux mac firefox alt + shift + key on firefox 57 or newer: control + option + key or control + alt + key on firefox 14 or newer: control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key google chrom...
Data URLs - HTTP
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.
Evolution of HTTP - HTTP
at this point, a typical request and response looked like 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/...
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
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.
CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigations by any means including <form> (if form-action is not specified), <a>,
window.location,
window.open, etc.
CSP: script-src - HTTP
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
navigate-to restricts the urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>,
window.location,
window.open, etc.
Cross-Origin-Embedder-Policy - HTTP
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.
Sec-Fetch-Site - HTTP
directly entering a url in the address bar, opening a bookmark, or draging-and-dropping a file into the browser
window.
HTTP headers - HTTP
cross-origin-opener-policy (coop) prevents other domains from opening/controlling a
window.
HTTP Index - HTTP
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.
Redirections in HTTP - HTTP
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.
A re-introduction to JavaScript (JS tutorial) - JavaScript
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.
Indexed collections - JavaScript
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.
Memory Management - JavaScript
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.
Method definitions - JavaScript
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.
Array.isArray() - JavaScript
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
const bigint =
window.bigint, bigthirtytwo = bigint(32), bigzero = bigint(0); function getuint64bigint(dataview, byteoffset, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = bigint(dataview.getuint32(byteoffset|0, !!littleendian)>>>0); const right = bigint(dataview.getuint32((byteoffset|0) + 4|0, !!littleendian)>>>0); // combine the two 32-bit values and return return littl...
Error.prototype.stack - JavaScript
<!doctype html> <meta charset="utf-8"> <title>stack trace example</title> <body> <script> function trace() { try { throw new error('myerror'); } catch(e) { alert(e.stack); } } function b() { trace(); } function a() { b(3, 4, '\n\n', undefined, {}); } a('first call, firstarg'); </script> assuming the above markup is saved as c:\example.html on a
windows file system it produces an alert message box with the following text: starting with firefox 30 and later containing the column number: trace@file:///c:/example.html:9:17 b@file:///c:/example.html:16:13 a@file:///c:/example.html:19:13 @file:///c:/example.html:21:9 firefox 14 to firefox 29: trace@file:///c:/example.html:9 b@file:///c:/example.html:16 a@file:///c:/example.html:19 @file:///c:/ex...
Error.prototype.lineNumber - JavaScript
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.
Math.clz32() - JavaScript
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.
Number.parseInt() - JavaScript
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).
Object.is() - JavaScript
polyfill if (!object.is) { object.is = function(x, y) { // samevalue algorithm if (x === y) { // steps 1-5, 7-10 // steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / x === 1 / y; } else { // step 6.a: nan == nan return x !== x && y !== y; } }; } examples using object.is object.is('foo', 'foo'); // true object.is(
window,
window); // true object.is('foo', 'bar'); // false object.is([], []); // false var foo = { a: 1 }; var bar = { a: 1 }; object.is(foo, foo); // true object.is(foo, bar); // false object.is(null, null); // true // special cases object.is(0, -0); // false object.is(-0, -0); // true object.is(nan, 0/0); // true specifications...
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.
Promise.prototype.then() - JavaScript
log('resolved', v); // "resolved", 10 }, function(e) { // not called console.error('rejected', e); }); var p3 = p1.then(function() { // return promise 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.
RegExp - JavaScript
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.).
SharedArrayBuffer - JavaScript
e: cross-origin-opener-policy with same-origin as value (protects your origin from attackers) cross-origin-embedder-policy with require-corp as value (protects victims from your origin) cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to
window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to browsers (firefox 79, for example.) always use the new operator to create a sharedarraybuffer sharedarraybuffer constructors are required to be constructed with a new operator.
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
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.
WeakMap.prototype.clear() - JavaScript
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.has() - JavaScript
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
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
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.
WeakSet.prototype.add() - JavaScript
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.clear() - JavaScript
syntax ws.clear(); examples using the clear method var ws = new weakset(); ws.add(
window); ws.has(
window); // true ws.clear(); ws.has(
window); // false specifications not part of any standard.
WeakSet.prototype.has() - JavaScript
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
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.
WebAssembly.instantiateStreaming() - JavaScript
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.
WebAssembly - JavaScript
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.
undefined - JavaScript
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.
delete operator - JavaScript
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.
const - JavaScript
global constants do not become properties of the
window object, unlike var variables.
let - JavaScript
just like const the let does not create properties of the
window object when declared globally (in the top-most scope).
scope - Web app manifests
if the user navigates outside the scope, it reverts to a normal web page inside a browser tab or
window.
Progressive loading - Progressive web apps (PWAs)
here's what the relevant code looks like: if('intersectionobserver' in
window) { const observer = new intersectionobserver((items, observer) => { items.foreach((item) => { if(item.isintersecting) { loadimages(item.target); observer.unobserve(item.target); } }); }); imagestoload.foreach((img) => { observer.observe(img); }); } else { imagestoload.foreach((img) => { loadimages(img); }); } if the intersectionobserver obj...
Mobile first - Progressive web apps (PWAs)
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.
Web API reference - Web technology reference
these can be accessed using javascript code, and let you do anything from making minor adjustments to any
window or element, to generating intricate graphical and audio effects using apis such as webgl and web audio.
media - SVG: Scalable Vector Graphics
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.
pointer-events - SVG: Scalable Vector Graphics
the rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg>
window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it ca...
<script> - SVG: Scalable Vector Graphics
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[
window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click...
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.
Tutorials
fluid grids design layouts that fluidly resize with the browser
window, while still using a typographic grid.
Web Components
window.customelements returns a reference to the customelementregistry object.
Loading and running WebAssembly code - WebAssembly
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.
Understanding WebAssembly text format - WebAssembly
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.