Search completed in 1.30 seconds.
2832 results for "Window":
Your results are loading. Please wait...
Window.window - Web APIs
WebAPIWindowwindow
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
WebAPIWindow
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
WebAPIWindowopen
the window interface's open() method loads the specified resource into the new or existing browsing context (window, <iframe> or tab) with the specified name.
... if the name doesn't exist, then a new browsing context is opened in a new tab or a new window, and the specified resource is loaded into it.
... syntax var window = window.open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded.
...And 125 more matches
nsIWindowMediator
xpfe/appshell/public/nsiwindowmediator.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 nsiwindowmediator 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.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
...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/nsidomwindowutils.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 domwindowutils = 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/nsiwindowwatcher.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 activewindow 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/somewindow.xul", "xulschoolhello-some-window", "chrome,centerscreen"); the first argument is the url to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window.
... 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, nsibasewindow.nativehandle provides the handle (hwnd [widows], gdkwindow* [linux], nswindow* [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/nsidomwindow.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/nspidomwindow.h for those.
...And 29 more matches
nsIXULWindow
xpfe/appshell/nsixulwindow.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 nsixulwindow 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 targetwindow = window.opener), and then dispatch a messageevent on it with targetwindow.postmessage().
...And 27 more matches
nsIDOMWindowInternal
dom/interfaces/base/nsidomwindowinternal.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: nsidomwindow 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 nsidomwindow interface.
...add-ons should be updated to use nsidomwindow 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, nsiwindowsregkey, 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/nsidomchromewindow.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 beginwindowmove(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 browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script.
... it will be null for domwindows not corresponding to browsers.
...And 19 more matches
Window.openDialog() - Web APIs
WebAPIWindowopenDialog
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.drawwindow() 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 _npwindow { 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 */ npwindowtype type; /* window or drawable target */ } npwindow; 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_setwindow(npp instance, npwindow *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 nsiwindowmediator.
...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/nsimsgwindow.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/msgwindow;1.
... to create an instance, use: msgwindow = components.classes["@mozilla.org/messenger/msgwindow;1"] .createinstance(components.interfaces.nsimsgwindow); in thunderbird the default message window is stored in the global variable msgwindow.
...And 9 more matches
nsIWindowsRegKey
xpcom/ds/nsiwindowsregkey.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); nsiwindowsregkey createchild(in astring relpath, in unsigned long mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); void open(in unsigned ...
...long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey openchild(in astring relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in 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; } npsetwindowcallbackstruct; fields the data structure has the following fields: type always contains np_setwindow.
...x visual for the plug-in window or drawable.
...And 8 more matches
Window.resizeBy() - Web APIs
WebAPIWindowresizeBy
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
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
note: some people overlay chrome://messenger/content/mailwindowoverlay.xul.
... that should cause the button to appear on all windows that mailwindowoverlay.xul is applied to (i.e.
... main window and view message window).
...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/nsitaskbarwindowpreview.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.gettaskbarwindowpreview() 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.iswindowprivate(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/nsidomwindow2.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: nsidomwindow last changed in gecko 1.9 (firefox 3) because nsidomwindow 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 openwindow() method of the clients interface creates a new top level browsing context and loads a given url.
... if the calling script doesn't have permission to show popups, openwindow() will throw an invalidaccesserror.
...as of recently, this also works on chrome for windows.
...And 6 more matches
Window.close() - Web APIs
WebAPIWindowclose
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
WebAPIWindowclosed
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
WebAPIWindowscrollY
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
WebAPIWindowself
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/nsiwindowcreator.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 createchromewindow(in nsiwebbrowserchrome parent, in pruint32 chromeflags); methods createchromewindow() create a new window.
...And 5 more matches
MSCandidateWindowShow - Web APIs
mscandidatewindowshow 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
WebAPIWindowinnerWidth
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
WebAPIWindowprompt
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: mailwindowoverlay.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
WebAPIWindowcontent
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
WebAPIWindowmoveBy
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
WebAPIWindowname
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
WebAPIWindowscreenLeft
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 leftwindowpos = 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
WebAPIWindowscreenTop
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 topwindowpos = 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
WebAPIWindowscrollX
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
WebAPIWindowframes
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
WebAPIWindowfullScreen
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
WebAPIWindowlocation
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
WebAPIWindowmatchMedia
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
WebAPIWindowmoveTo
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
WebAPIWindowondragdrop
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
WebAPIWindowopener
the window interface's opener property returns a reference to the window that opened the window using open().
... in other words, if window a opens window b, b.opener returns a.
... syntax const openerwindow = window.opener value a window referring to the window that opened the current window (using window.open(), or by a link with target attribute set).
...And 3 more matches
Window.outerWidth - Web APIs
WebAPIWindowouterWidth
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
WebAPIWindowscreenX
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 leftwindowpos = 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
WebAPIWindowscreenY
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 topwindowpos = 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
WebAPIWindowstatusbar
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
WebAPIWindowtoolbar
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.singletonwindowtype", "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.singletonwindowtype 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 mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target.
... 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.evalinwindow(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 evalinwindow(): // add-on-script.js var result = components.utils.evalinwindow("somelocalvariable", contentwindow); console.log(result); // {"name":"selection1","node":{}} the add-on code can modify the variable as well, of course: // add-on-script.js components.utils.evalinwindow("somelocalvariable.newprop = 42", contentwindow); // page-script.js console.log(window.somelocalvariable.newprop); // 42 but n...
...And 2 more matches
nsIXULBrowserWindow
xpfe/appshell/public/nsixulbrowserwindow.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 xulbrowserwindow attribute exists on the nsixulwindow interface although both firefox and seamonkey also store their nsixulbrowserwindow reference in the global xulbrowserwindow object accessible from javascript code.
... note: the xulbrowserwindow 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 contentwindow 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
mscandidatewindowhide 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
mscandidatewindowupdate 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 openwindow property of the paymentrequestevent interface opens the specified url in a new window, if and only if the given url is on the same origin as the calling page.
... it returns a promise that resolves with a reference to a windowclient.
... syntax var apromise = paymentrequestevent.openwindow(url) parameters url the url to open in the new window.
...And 2 more matches
SourceBuffer.appendWindowEnd - Web APIs
the appendwindowend property of the sourcebuffer interface controls the timestamp for the end of the append window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.
... the default value of appendwindowend is positive infinity.
... syntax var myappendwindowend = sourcebuffer.appendwindowend; sourcebuffer.appendwindowend = 120.0; value a double, indicating the end time of the append window, in seconds.
...And 2 more matches
SourceBuffer.appendWindowStart - Web APIs
the appendwindowstart property of the sourcebuffer interface controls the timestamp for the start of the append window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.
... the default value of appendwindowstart is the presentation start time, which is the beginning time of the playable media.
... syntax var myappendwindowstart = sourcebuffer.appendwindowstart; sourcebuffer.appendwindowstart = 2.0; value a double, indicating the start time of the append window, in seconds.
...And 2 more matches
Window.alert() - Web APIs
WebAPIWindowalert
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
WebAPIWindowcrypto
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
WebAPIWindowdump
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
WebAPIWindowevent
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
WebAPIWindowscroll
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
WebAPIWindowscrollBy
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
WebAPIWindowscrollTo
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
WebAPIWindowtop
returns a reference to the topmost window in the window hierarchy.
... syntax var topwindow = 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 openwindow( 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.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/debug.xul", "debug history", "chrome,centerscreen,resizable", myobject); note in this example that myobject is passed to the openwindow() method; you can pass any xpcom object (or any other value, for that matter) in this way.
... 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
WebAPIWindowconfirm
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
WebAPIWindowfind
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
WebAPIWindowforward
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
WebAPIWindowlength
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
WebAPIWindowmenubar
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 nsidomwindowutils.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 nsidomwindowutils.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
WebAPIWindownavigator
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
WebAPIWindowonpaint
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
WebAPIWindowparent
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 parentwindow = 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
WebAPIWindowresizeTo
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
WebAPIWindowscrollMaxX
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
WebAPIWindowscrollMaxY
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
WebAPIWindowscrollbars
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
WebAPIWindowstop
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.openwindow) return clients.openwindow('/'); })); }); 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 xulbrowserwindow 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 nsixulbrowserwindow nsiwebprogresslistener nsiwebprogresslistener2 nsisupportsweakreference note: this page is not complete at this time.
...you may also wish to refer to the implementation of xulbrowserwindow 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/nsidomjswindow.idl.
nsIDOMStorageWindow
dom/interfaces/storage/nsidomstoragewindow.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 nsidomwindow, and this interface has been removed.
nsIWindowsShellService
browser/components/shell/public/nsiwindowsshellservice.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 contentwindow 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.contentwindow; value a windowproxy.
... specifications specification status comment html living standardthe definition of 'contentwindow' in that specification.
Window.back() - Web APIs
WebAPIWindowback
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
WebAPIWindowblur
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
WebAPIWindowdocument
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
WebAPIWindowfocus
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
WebAPIWindowscreen
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
WebAPIWindowsetCursor
the window.setcursor() method sets the cursor for the current window.
... example function setbusycursor(enable) { window.setcursor(enable ?
... this function is a part of chromewindow 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
WebAPIWindowstatus
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.openwindow) return clients.openwindow('/'); })); }); 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.openwindow) { return clients.openwindow('/'); } })); }); 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.
Running Windows Debug Builds Downloaded From Tinderbox - Archive of obsolete content
if you run the windows debug builds you will often get "this application has failed to start because the application configuration is incorrect..." this is because the debug builds need the msvc80 crt debug dlls.
... to get these dlls you only have to install the visual c++ compilers from the windows vista sdk.
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-glass - Archive of obsolete content
syntax <integer> if the user is using windows glass theme, this is 1; otherwise it's 0.
... note that this only exists for windows 7 and earlier.
-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/nsimsgwindow.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 msgmail3panewindow.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
WebAPIWindowcopy event
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
WebAPIWindowcut event
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
WebAPIWindowhome
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
WebAPIWindowload event
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
WebAPIWindowminimize
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.ondeviceorientation - Web APIs
syntax window.ondeviceorientation = function(event) { ...
... }; window.addeventlistener('deviceorientation', function(event) { ...
Window.ondeviceorientationabsolute - Web APIs
syntax window.ondeviceorientationabsolute = function(event) { ...
... }; window.addeventlistener('deviceorientationabsolute', function(event) { ...
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); ...
prefwindow.onload - Archive of obsolete content
« xul reference home prefwindow.onload type: script code when a window finishes loading, it calls this event handler on the prefwindow element.
prefwindow.type - Archive of obsolete content
« xul reference home type type: string set this attribute to child for preference dialogs that are child dialogs of a main preferences window.
centerWindowOnScreen - Archive of obsolete content
« xul reference home centerwindowonscreen() return type: no return value centers the dialog on the screen.
contentWindow - Archive of obsolete content
« xul reference contentwindow type: todo use the contentwindow.wrappedjsobject to obtain a dom(html) window object ...
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 mywindow.ico (for windows) and mywindow.xpm or mywindow16.xpm (linux), where mywindow is the id of the <window> you want to attach the icon to, in the chrome/icons/default subfolder of your bundle.
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
a xulrunner application has no installer by default; however, these instructions can help you to easily create a windows installer with inno setup.
-moz-windows-compositor - Archive of obsolete content
syntax <integer> if the user is using windows with the dwm compositor, this is 1.
-moz-windows-classic - Archive of obsolete content
syntax <integer> if the user is using windows unthemed (in classic mode instead of using uxtheme), this is 1.
-moz-windows-default-theme - Archive of obsolete content
syntax <integer> if the user is using one of the default windows themes—luna, royale, zune, or aero (including vista basic, vista advanced, and aero glass)—this is 1.
Building Firefox for Windows
documentation moved in-tree: https://firefox-source-docs.mozilla.org/setup/windows_build.html ...
browser.dom.window.dump.enabled
related browser.dom.window.dump.file window.dump ...
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.
Using MAPI with Thunderbird's Windows 7 developer builds
mapi (messaging application programming interface) is a windows feature that allows applications to send files via a system's default mail application.
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
WebAPIWindowblur event
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
WebAPIWindowconsole
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
WebAPIWindowexternal
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
WebAPIWindowhistory
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.ondevicelight - Web APIs
syntax window.ondevicelight = funcref where funcref is a function to be called when the devicelight event occurs.
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
WebAPIWindowpkcs11
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
WebAPIWindowprint
syntax window.print() specification specification status comment html living standardthe definition of 'print()' in that specification.
Window.restore() - Web APIs
WebAPIWindowrestore
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
WebAPIWindowrouteEvent
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.
WindowOrWorkerGlobalScope.crossOriginIsolated - Web APIs
the crossoriginisolated read-only property of the windoworworkerglobalscope interface returns a boolean value that indicates whether a sharedarraybuffer can be sent via a window.postmessage() call.
Index - Web APIs
WebAPIIndex
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 deletewindowvalue(in nsidomwindow awindow, in astring akey); nsidomnode duplicatetab(in nsidomwindow awindow, in nsidomnode atab); nsidomnode forgetclosedtab(in nsidomwindow awindow, in unsigned long aindex); nsidomnode forgetclosedwindow(in unsigned long aindex); astring getbrowserstate(); unsigned long getclosedtabcount(in nsidomwindow awindow); astri...
...And 60 more matches
Index
MozillaTechXPCOMIndex
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.evalinwindow 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 closetoplevelwindow(in nsixulwindow awindow); obsolete since gecko 1.8 void createhiddenwindow(in nsiappshell aappshell); native code only!
... boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri aurl, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowlessbrowser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void gethiddenwindowandjscontext(out nsid...
...omwindow ahiddendomwindow, 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
ArchiveMozillaXULIndex
296 prefwindow.onload no summary!
... 297 prefwindow.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 nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
... nsidomelement getfocusedelementforwindow(in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow); pruint32 getlastfocusmethod(in nsidomwindow window); void movecarettofocus(in nsidomwindow awindow); void elementisfocusable(in nsidomelement aelement, in unsigned long aflags); nsidomelement movefocus(in nsidomwindow awindow, in nsidomelement astartelement, in unsigned long atype, in unsigned long aflags); void setfocus(in nsidomelement aelement, in unsigned long aflags); void windowhidden(in nsidomwindow awindow); native code only!
... void windowlowered(in nsidomwindow awindow); 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 (!mwindow || !mwindow->getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(mwindow->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing magic will happen here!
...as dom apis have access to the window object, we generally want to use the "pwindowglobal" 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 nsidomwindow, 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 nsidomwindow aparent, in wstring adialogtitle, in wstring atext); void alertcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); boolean confirm(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); boolean confirmcheck(in nsidomwindow 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 contentwindows = []; function inbrowserxuloverlay(contentwindow) { // forgetting or failing to pop the content window thing again contentwindows.push(contentwindow); } 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 createhiddenwindow(); boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.9.1 void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.9.1 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void enterlastwindowclosi...
...ngsurvivalarea(); void exitlastwindowclosingsurvivalarea(); 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 domwindow.
...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 destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); 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 nsimsgwindow amsgwindow, out nsiuri aurl); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener 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 nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); void search(in nsimsgsearchsession asearchsess...
...ion, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string 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 domwindow 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 nsimsgwindow awindow); nsimsgfilterlist getfilterlist(in nsimsgwindow msgwindow); void setfilterlist(in nsimsgfilterlist filterlist); void forcedbclosed(); void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); v...
...oid recursivedelete(in boolean deletestorage, in nsimsgwindow msgwindow); void createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder addsubfolder(in astring foldername); void createstorageifmissing(in nsiurllistener urllistener); void compact(in nsiurllistener alistener, in nsimsgwindow amsgwindow); void compactall(in nsiurllistener alistener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflinestores(in nsimsgwindow amsgwindow,in nsisupportsarray aofflinefolderarray); void emptytrash(in nsimsgwindow amsgwindow, in nsiurllistener alistener); void rename(in astring name, in nsimsgwindow msgwindow); ...
... void renamesubfolders( in nsimsgwindow msgwindow, 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 unsafewindow object.
... with unsafewindow 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 unsafewindow.foo instead of window.foo: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscript: "console.log(unsafewindow.foo);" }) tabs.open(pageurl); be careful using unsafewindow: you can't rely on any of its properties or functions being, or doing, what you expect.
...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 mozbrowseropenwindow 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 isthirdpartywindow(in nsidomwindow awindow, [optional] in nsiuri auri); methods isthirdpartychannel() determine whether the given channel and its content window hierarchy is third party.
...obtain the bottommost nsidomwindow, 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, nsiwindowmediator 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; xwindows 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 : nsidomwindow 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 outerwindowid.
... parentwindowid number type string the resource type.
... windowid number the id of the window making the request, as an outerwindowid.
...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.contentwindow, 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 doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading.
... therefore, you may execute the line after the window.open line before the new window has finished.
... 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 mailwindow.js.
... method overview void setdisplaycharset(in acstring acharset); void setwindow(in nsidomwindow ptr, in nsimsgwindow msgwindow); void openurl(in acstring aurl); void loadurl(in nsidomwindow ptr, in acstring aurl); void launchexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long getundotransactiontype(); unsigned long getredotransactiontype(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void sendunsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); 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 nsidomwindow used in this interface were nsidomwindow.
...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
WebHTMLElementiframe
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 detacheditorfromwindow(); 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 awindowtarget, 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!
... allowwindowcontrol 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 nsidomwindowutils to dispatch key events and create, modify, and commit composition in higher level.
... nsidomwindowutils 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 nsidomwindow contentwindow) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidomwindow contentwindow) methods registercontenthandler summary of registercontenthandler void registercontenthandler( in domstring mimetype, in domstring uri, in domstring title, in nsidomw...
...indow contentwindow ); parameters mimetype the desired mime type as a string uri the uri to the handler as a string.
... contentwindow 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 nsidomwindow supporting the view they click on?
...a: the outer nsidomwindow (the |window| object in content js, aka the <browser>'s contentwindow 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
ArchiveMozillaXULpanel
« 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 npnvnetscapewindow: 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: npnvwindownpobject: returns the npobject * pointer for the dom window object; see getting the page url in npapi plugin for a rough example npnvpluginelementnpobject: npnvsupportswindowless: 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 npnvdomwindow are no longer supported.
...And 8 more matches
NPN_SetValue - Archive of obsolete content
variable values the function can set: nppvpluginwindowbool: 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 nppvpluginwindowsize 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.
... nppvpluginwindowbool (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.contentwindow, window.content...
...for example: // chrome code gbrowser.contentwindow; // null gbrowser.contentdocument; // null gbrowser.selectedbrowser.contentwindow; // 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 acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only!
... void setdocumentinternal(in nsidocumentptr adocument, in boolean aforcereuseinnerwindow); native code only!
...findcontainerview() finds the view to use as the container view for makewindow.
...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.initwithwindowid() 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 initwithwindowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid); autf8string tostring(); attributes 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
<color> - CSS: Cascading Style Sheets
activeborder active window border.
... activecaption active window caption.
... inactiveborder inactive window border.
...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.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
...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 nsiwindowcreator nsiservicemanager servicemanager = mozilla.getservicemanager(); nsiwindowwatcher windowwatcher = (nsiwindowwatcher) servicemanager .getservicebycontractid(ns_windowwatcher_contractid, nsiwindowwatcher.ns_iwindowwatcher_iid); windowwatcher.setwindowcreator(creator); in this example, we have a java class called win...
...dowcreator, which implements the nsiwindowcreator 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, centerwindowonscreen, 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 toopenwindowbytype() 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 nsiwindowcreator 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 nsidomwindow, 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 npwindow 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
Source code directories overview - Archive of obsolete content
windows contains source code for windows 95, windows 98 and windows nt 4.0.
...the gimp toolkit) which runs on x-windows on unix.
... motif contains source code for motif, a toolkit which runs on x-windows on unix.
...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 npwindow 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 nsglobalwindow 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, contentwindow, { 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.getmostrecentwindow('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 nsitaskbarwindowpreview; 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
WebHTMLElementa
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.nsidomwindowutils); 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.focusedwindow.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 contentwindow 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, contentwindow, 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 nsiwindowmediator <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 nsiwindowmediator <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 initwithwindowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid); attributes attribute type description innerwindowid unsigned long long the inner window id with which the error is associated.
... this is zero if the error was initialized by calling nsiscripterror.init() instead of initwithwindowid().
...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.chromewindow.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...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
WebAPIElementclassList
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
url - Archive of obsolete content
mirrors window.location.hostname.
...mirrors window.location.pathname.
...mirrors window.location.hash.
...And 4 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: openbrowserwindow gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require updating to work correctly in releases of firefox s...
...use privatebrowsingutils.getprivacycontextfromwindow(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
Creating a status bar extension - Archive of obsolete content
this sample will add a static text string to the status bar at the bottom of firefox browser windows.
...this name is displayed in the extensions window.
...this text is also displayed in the extensions window.
...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, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a 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 prefwindow.
...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: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow 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"/> </prefwindow> 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 nsimsgwindow awindow); 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 nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in acstring oldname, in acstring newname); void performbiff(in nsimsgwindow amsgwindow); void performexpand(in nsimsgwindow amsgwindow); void removefiles(); v...
...void configuretemporaryreturnreceiptsfilter( in nsimsgfilterlist filterlist ); parameters filterlist missing description exceptions thrown missing exception missing description displayofflinemsg() void displayofflinemsg( in nsimsgwindow awindow ); parameters awindow 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 deletepluginnativewindow(in nspluginnativewindowptr apluginnativewindow); native code only!
... void newpluginnativewindow(out nspluginnativewindowptr apluginnativewindow); native code only!
... void createtmpfiletopost( in string apostdataurl, out string atmpfilename ); parameters apostdataurl atmpfilename native code only!deletepluginnativewindow deletes plugin native window object created by newpluginnativewindow().
...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 nsidomwindow 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 nsitaskbarwindowpreview, 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: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow 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"/> </prefwindow> 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, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="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 npwindow 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 npwindow 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<nsiwindowwatcher> wwatcher (do_getservice("@mozilla.org/embedcomp/window-watcher;1")); // the window watcher will be able to give me a handle to the window nscomptr<nsidomwindow> awindow; // a handle to the window nscomptr<nsidomdocument> adoc; // a handl...
...e to the document nscomptr<nsidomeventtarget> twindow; // 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->getactivewindow(getter_addrefs(awindow)); //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, targetwindow); you can then assign the clone to an object in the target scope as an expando property, and scripts running in that scope can access it: targetwindow.foo = clonedobject; in this way privileged code, such as an add-on, can share an object with less-privileged code like a normal web page script.
...example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { 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: contentwindow.foo.addonscriptobject = cloneinto(addonscriptobject, contentwindow); 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 addwindowlistener(in nsidomwindow awindow); native code only!
... void removelistener(in nsidevicemotionlistener alistener); void removewindowlistener(in nsidomwindow awindow); native code only!
... native code only!addwindowlistener 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 nsidomwindow aparent, in nsidownload adownload); obsolete since gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose); obsolete since gecko 1.9.1 void pausedownload(in unsigned long aid); void removedownload(in unsigned long aid); void removedownloadsbytimeframe(in long long abegintime, in long long aen...
... download_blocked_policy 9 windows specific: request was blocked by zone policy settings.
... void open( in nsidomwindow 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 awindowcontext); boolean requesturioverrides(in nsiarray atargets, [optional] in nsiinterfacerequestor awindowcontext); 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 awindowcontext 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 nsitaskbarwindowpreview as appropriate.
... note: neither nsitaskbartabpreview or nsitaskbarwindowpreview 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 containerwindow 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 nsibasewindow 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
verteroutputstreamnsicookiensicookie2nsicookieacceptdialognsicookieconsentnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositi...
...onerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomx...
...sgcustomcolumnhandlernsimsgdbhdrnsimsgdbviewnsimsgdbviewcommandupdaternsimsgdatabasensimsgfilternsimsgfiltercustomactionnsimsgfilterlistnsimsgfoldernsimsgheaderparsernsimsgidentitynsimsgincomingservernsimsgmessageservicensimsgprotocolinfonsimsgruleactionnsimsgsearchcustomtermnsimsgsearchnotifynsimsgsearchscopetermnsimsgsearchsessionnsimsgsearchtermnsimsgsearchvaluensimsgsendlaternsimsgthreadnsimsgwindownsimsgwindowcommandsnsimutablearraynsinavbookmarkobservernsinavbookmarksservicensinavhistorybatchcallbacknsinavhistorycontainerresultnodensinavhistoryfullvisitresultnodensinavhistoryobservernsinavhistoryquerynsinavhistoryqueryoptionsnsinavhistoryqueryresultnodensinavhistoryresultnsinavhistoryresultnodensinavhistoryresultobservernsinavhistoryresulttreeviewernsinavhistoryresultviewobservernsinavhist...
...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 : nsidomwindow 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.domwindow 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.domwindow 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, npnvwindownpobject, &swindowobj ); // 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_dlwindow.
... 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 prefwindow-based options windows this ought to be on a separate page, preferences system troubleshooting.
...some things to check when you have issues with your prefwindow-based options window: does each prefpane have a unique id?
... are there any elements inside the <prefwindow>, 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 <prefwindow>'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, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, ...
... contentwindow type: todo use the contentwindow.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 "hiddenwindow" as such: "chrome://myxul/content/hiddenwindow.xul" next take the code below and drop it in, to create the hiddenwindow.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:hiddenwindow" 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 nswindowsh::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 contentwindow: var newobject = new contentwindow.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-unsafewindow-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(mywindow); 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 nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); void onwebinstalldisabled(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); boolean onwebinstallrequested(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [opt...
...ional] in pruint32 acount); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindowinternal.
...boolean onwebinstallblocked( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindow 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 setwindowcontext(in nsidomwindow awindow); 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.
... setwindowcontext() 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 nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if ...
... void init( in nsidomwindow parent, in astring title, in short mode ); parameters parent the nsidomwindow 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 nsimsgwindow amsgwindow, 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 nsimsgwindow amsgwindow, 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 nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); parameters amessengerinstance amsgwindow 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 nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor ...
...nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsiwindowcreator nsiwindowmediator nsiwindowwatcher 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->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.5.
..._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->getwindowhandle(&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.contentwindow.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.contentwindow.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('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close ...
...afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
...And 2 more matches
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
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 // drawwindow method var remotewindow = ldrframe.contentwindow; //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.drawwindow(remotewindow, 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%&amp;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, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", 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) { openwindow(address) }, false); } function clickify(elem, address) { elem.onclick = function (event) { openwindow(address) }; } multiple attributes sometimes there is a need for event listeners to appear as attributes in the dom.
... in these cases, multiple attributes should be used, one for each variable: function clickify(elem, address) { elem.setattribute("href", address); elem.setattribute("onclick", "openwindow(this.getattribute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number.
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 nsidomwindow from the getcontentdomwindow call.
...from there you call editingsession->makewindoweditable(domwindow, editortype, pr_true).
... the first parameter is the nsidomwindow 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->makewindoweditable(domwindow, "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.nsiwindowmediator) .getmostrecentwindow("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 hiddenwindow.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 prefwindow 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 prefwindow.
... type type: string if this attribute is not present, the colorpicker is displayed inside the window.
key - Archive of obsolete content
ArchiveMozillaXULkey
« 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/hudwindow.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.singletonwindowtype 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 nsidomwindow 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 nsidomwindow 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: getwindow gets a jsobject for the window containing the given applet.
... declaration public object getslot(int index) getwindow static method.
... returns a jsobject for the window containing the given applet.
... declaration public static jsobject getwindow(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 nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::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 nsidomwindow::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.
... domwindowcreated 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.
... domwindowcreated 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.nsiwindowmediator); let win = wm.getmostrecentwindow("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 nativewindow 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(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object.
... the java code example above can be done with privileged javascript from firefox for android with the following code: window.nativewindow.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
MozillaProjectsNSSJSSJSS 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
MozillaProjectsNSSPKCS11FAQ
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 hiddendomwindow the hidden domwindow has all of these objects automatically imported.
... the downside of using hiddendomwindow is that on startup of firefox, the hiddendomwindow objects cannot be accessed until it is fully loaded.
... var domfile = services.appshell.hiddendomwindow.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 nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior ...
...to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
...boolean installaddonsfromwebpage( in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, in amiinstallcallback acallback, optional in pruint32 ainstallcount optional ); parameters amimetype the mimetype for the add-ons.
... awindow 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 ownerwindow 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_subwindow_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 getaccessibleinwindow(in nsidomnode anode, in nsidomwindow 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...
... getaccessibleinwindow() 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 getaccessibleinwindow( in nsidomnode anode, in nsidomwindow 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 nsidomwindow: 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 nsidomwindow 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 nsidomwindow window); methods init() jsval init( in nsidomwindow 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 awindowcontext); 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 awindowcontext ); parameters auri the uri to load.
... awindowcontext 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 awindowcontext 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 nsidomwindow parameter.
...if you are using this interface, you must remove the nsidomwindow arguments from those methods.
...to get an instance, call the nsiwindowwatcher.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("haswindowstouchinterface"); //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 nsitaskbarwindowpreview.getbutton() to get the objects representing the buttons.
... see also nsitaskbarpreview nsitaskbarpreviewcontroller nsitaskbartabpreview nsitaskbarwindowpreview 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, sourcewindow) { try { //new obj_uri object var obj_uri = components.classes["@mozilla.org/network/io-service;1"].getservice(components.interfaces.nsiioservice).newuri(httploc, null, null); //new file object var obj_targetfile = components.classes["@mozilla.org/file/local;1"].createinstance(components.interfaces.nsilocalfile); //set file with path obj_targetfile.initwithpath("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 = sourcewindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsiloadcontext); //save file to target obj_persist.saveuri(obj_uri,null,null,null,null,obj_targetfile,privacycontext); // starting with firefox 36 saveuri 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 npwindow structure.
... npsetwindowcallbackstruct contains information about the plug-in's unix window environment.
... npwindow 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 drawwindow(), 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
WebAPIClients
clients.openwindow() 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.openwindow('/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
WebAPIDocumentononline
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
WebAPIDocument
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
WebAPIScreen
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
WebAPISubtleCryptosign
*/ 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
WebAPITouchTouch
"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("editorwindow").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('editorwindow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.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
WebHTMLElementinputimage
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
WebHTMLElementinputsubmit
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.contentwindow.document.getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the add-on should successfully retrieve the iframe's content...
...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 unsafewindow 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: unsafewindow.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.
... getframeforwindow 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 browserwindow.
... added a browserwindow 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 browserwindow 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").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); 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").getmostrecentbrowserwindow(); 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="yourwindow" 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="samplewindow" 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 outerwindowid is not passed.
... outerwindowid (optional) the outerwindowid 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 mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); if you need to to pass lots of data, consider using cdata sections instead of the simple attributes on a custom element.
... var targetdoc = null; function onload() { var iframe = document.getelementbyid("contentiframe"); targetdoc = iframe.contentdocument; iframe.contentwindow.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 chromewindow.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 mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); // obtain a reference to sync's tabs "engine." let tabsengine = weave.service.enginemanager.get("tabs"); // iterate over each client having data.
... mainwindow.gbrowser.addtab(url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); 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) nsdomwindowcontroller 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_openinnewwindow 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_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_h...
...andleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_textzoomenlarge cmd_textzoomreduce cmd_textzoomreset cmd_undo cmd_viewcomponentbar cmd_viewlinktoolbar cmd_viewlinktoolbar_false cmd_viewlinktoolbar_maybe cmd_viewlinktoolbar_true cmd_viewnavbar cmd_viewpersonaltoolbar cmd_viewtaskbar cmd_zoomwindow 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 prefwindow, 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/messagewindow.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
ArchiveMozillaXULTutorialTrees
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 prefwindow 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 prefwindow 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
ArchiveMozillaXULtree
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.singletonwindowtype.
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 npwindow 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.
... xwindows: 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() npwindow 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_setwindow 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_setwindow() 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.msTraceAsyncCallbackStarting - Archive of obsolete content
example the following code provides an example of tracing an asynchronous call for a windows 8.x store app.
...also supported in store apps (windows 8.1 and windows phone 8.1).
...not supported in windows 8.
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
example the following code provides an example of tracing an asynchronous call for a windows 8.x store app.
...also supported in store apps (windows 8.1 and windows phone 8.1).
...not supported in windows 8.
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 subwindow 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 subwindow 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.getbrowserforcontentwindow 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 contentmmfromcontentwindow(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 contentmmfromcontentwindow_method2(acontentwindow) { return acontentwindow.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 forwindow() a method to obtain a single window wrapper for a widget, in the window awindow 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/nswindowmemoryreporter.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(nswindowsizes*) const (/home/njn/moz/mi5/dom/html/nshtmldocument.cpp:3710) #08: nsidocument::docaddsizeofincludingthis(nswindowsizes*) 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 globalwindowimpl, 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
MozillaProjectsNSSJSSUsing 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
MozillaTechXPCOMGlue
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 nsidomwindow the nsidomwindow 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 nsidomwindow 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 nsidomwindowutils.createcompositionstringsynthesizer().
... to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.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: domwindowutils.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 domwindowutils.sendcompositionevent("compositionend", "foo-bar-buzz", ""); starting gecko 36, you can do it simpler: domwindowutils.sendcompositionevent("compositioncommitasis", "", ""); if you need to commit composition with different commit string gecko 36 or later, you can use "compositioncommit": domwindowutils.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 awindowcontext, [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 awindowcontext, optional in unsigned long aid, optional in short areason optional ); parameters awindowcontext 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 awindowcontext, 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 awindowcontext, in boolean aforcesave ); parameters amimecontenttype the content type of the incoming data.
... awindowcontext 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 nsidomwindowutils.sendkeyevent() for details; this method is its equivalent for cross-process event handling.
...see nsidomwindowutils.sendmouseevent() for details; this method is its equivalent for cross-process event handling.
... see also content process event handling nsiframeloaderowner nsiframemessagelistener nsichromeframemessagemanager nsidomwindowutils ...
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 nsidomwindow awindow); 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 nsidomwindow awindow ); parameters awindow 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 nsimsgwindow awindow); void interruptsearch(); void pausesearch(); void resumesearch(); [noscript] nsmsgsearchtype setsearchparam(in nsmsgsearchtype type, in voidptr param); [noscript] void addresultelement(in nsmsgresultelement element); boolean matchhdr(in nsimsgdbhdr amsghdr, in nsimsgdatabase adatabase); void addsearchhit(in nsimsgdbhdr header...
... 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 nsimsgwindow 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 nsimsgwindow awindow); parameters awindow 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 nsidomwindow aparent, in nsidialogparamblock aparamblock, in string achromeurl); methods dodialog() opens a dialog.
... void dodialog( in nsidomwindow 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 npnvwindownpobject and npnvpluginelementnpobject.
... the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 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
WebAPIClient
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
WebAPIDocumenthasFocus
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="openwindow()">open a new window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment html living standardthe definition of 'document.
Document.open() - Web APIs
WebAPIDocumentopen
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
WebAPIEventeventPhase
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
WebAPIFetch API
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
WebAPIHistorypushState
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
WebAPIIDBFactoryopen
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
WebAPIKeyboardEventkey
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
WebAPILocation
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
WebAPIScreenheight
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
WebAPISelection
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.appendwindowend controls the timestamp for the end of the append window.
... sourcebuffer.appendwindowstart 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
WebAPIUIEventview
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>&amp;&<</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
WebCSSfont
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
WebHTMLElementbutton
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
WebHTMLIndex
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 subwindow.
... 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
WebSVGAttributetarget
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.nsiwindowwatcher) .openwindow(null, 'chrome://global/content/alerts/alert.xul', '_blank', 'chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly).
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...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
on windows platforms the first time i built mozilla i used this guide.
...this is the name of the generated dynamic library, so if we call the libraries "mybase" and "myadvanced", we'll end up with mybase.dll and myadvanced.dll (on windows, at least).
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.
Displaying web content in an extension without security issues - Archive of obsolete content
a typical example is an rss reader extension that would take the content of the rss feed (html code), format it nicely and insert into the extension window.
...the top document in a window is always a chrome document.
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 xulbrowserwindow object's hidechromeforlocation() method.
...var prevfunc = xulbrowserwindow.hidechromeforlocation; xulbrowserwindow.hidechromeforlocation = function(alocation) { return (/* your test goes here */) || prevfunc.apply(xulbrowserwindow, [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
xulbrowserwindow xulbrowserwindow 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 nsidomwindowutils 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.
Environment variables affecting crash reporting - Archive of obsolete content
(windows only.) moz_crashreporter_no_delete_dump don't delete the crash report dump file after submitting it to the server.
...you can use this if you would rather use the jit debugger on windows with the symbol server, for example.
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 ...
Building TransforMiiX standalone - Archive of obsolete content
we support building a standalone version of transformiix on windows, unix and os x.
...run it via run-mozilla.sh transformiix on unices and just transformiix.exe on windows.
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
ArchiveMozillaJetpackUIMenu
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
ArchiveMozillaPrismFAQ
it lets users start web applications from their desktop, start menu, and dock, and it opens those applications in their own window separate from a web browser and without the browser interface (back and forward buttons, location bar, etc.).
... 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 ++domwindow == 1 ++webshell == 2 ++domwindow == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++domwindow == 3 running baseline test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
...++webshell == 1 ++domwindow == 1 ++webshell == 2 ++domwindow == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++domwindow == 3 running verify test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
Tamarin Acceptance Testing - Archive of obsolete content
misc the acceptance and performance tests can be run on windows mobile devices connected to windows desktop machine with activesync.
... to build and setup the tools see building_tamarin_windows_mobile_utilities.
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).
eventnode - Archive of obsolete content
window keyboard navigation is captured at the window level.
... tab navigation will occur as long as any element in the window is focused.
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 contentwindow 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 contentwindow 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 centerwindowonscreen 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 openwindow 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.
Input Controls - Archive of obsolete content
if you open this window, you will see something much like that shown in the image.
... notice that the label and the text input field have now appeared in the window.
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/mainwindow.dtd"> where "window" is the local name of the document (root) element.
... assuming you have an entity called somebutton.label defined in mainwindow.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 % mainwindowdtd system "chrome://myextension/locale/mainwindow.dtd"> %mainwindowdtd; ]> 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 prefwindow 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(notifywindow) notifybox = getnotificationbox(notifywindow) // applies to current context's window object here, chromewin is the xul window (usually just window), and notifywindow is the web content window for the tab you want to find the notification box for.
tabbox - Archive of obsolete content
window keyboard navigation is captured at the window level.
... tab navigation will occur as long as any element in the window is focused.
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="yourwindow" 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.
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
the important ones are described in xulrunner:specifying startup chrome window.
...default.ico and default.xpm - icons for your app on windows and linux.
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.singletonwindowtype.
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.
Logging Multi-Process Plugins - Archive of obsolete content
your safest bet is your home directory (c:\users\username on windows vista and above, c:\documents and settings\username on windows xp, and ~ (home directory) on mac os x and linux).
... windows make sure firefox is not running.
NPEmbedPrint - Archive of obsolete content
syntax typedef struct _npembedprint { npwindow window; void* platformprint; /* platform-specific */ } npembedprint; fields the data structure has the following fields: window the npwindow the plug-in should use for printing.
... unix the plug-in location and size in the npwindow 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 npwindow ...
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.
Using IO Timeout And Interrupt On NT - Archive of obsolete content
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.
...on windows nt, nspr io is implemented using nt's overlapped (also called asynchronous) io.
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-content-zoom-chaining - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-content-zoom-limit-max - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-content-zoom-limit-min - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-content-zoom-limit - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-content-zoom-snap-points - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-content-zoom-snap-type - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows or later.
-ms-content-zoom-snap - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-content-zooming - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-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-rails - Archive of obsolete content
starting with windows 8.1, this property is also supported for touchpad interaction.
... this property requires windows 8 or later.
-ms-scroll-snap-points-x - Archive of obsolete content
remarks this property requires windows 8 or later.
... starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-snap-points-y - Archive of obsolete content
remarks this property requires windows 8 or later.
... starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-snap-x - Archive of obsolete content
remarks this property requires windows 8 or later.
... starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-ms-scroll-snap-y - Archive of obsolete content
remarks this property requires windows 8 or later.
... starting with windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.
-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
ArchiveWebCSS
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.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
also supported in store apps (windows 8.1 and windows phone 8.1).
...not supported in windows 8.
Enumerator - Archive of obsolete content
it is supported in internet explorer only, not in windows 8.x store apps.
...not supported in windows 8.x store apps.
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.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
for example, in word, excel, and other windows applications, we know that pressing ctl+c within any microsoft product means copy.
...microsoft products are difficult to export because they introduced mfc (microsoft foundation classes), which is a windows-only standard that does not follow the ansi standard.
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.
TCP slow start - MDN Web Docs Glossary: Definitions of Web-related terms
to implement tcp slow start, the congestion window (cwnd) sets an upper limit on the amount of data a source can transmit over the network before receiving an acknowledgment (ack).
...when that ack is received, the congestion window is incremented until the cwnd is less than ssthresh.
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...
The web and web standards - Learn web development
user 2 might be looking at it on a windows laptop with a widescreen monitor attached to it.
...try adjusting the width of your browser window now, and see what happens.
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
MozillaGeckoChromeAPIBrowser APIUsing
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 mozbrowseropenwindow 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 nsidomwindow source, in nsiuri uri, in addoninstall installs[]) void addinstalllistener(in installlistener listener) void removeinstalllistener(in installlistener listener) promise?
... void installaddonsfromwebpage( in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[] ) parameters mimetype the mimetype of add-ons being installed source the nsidomwindow 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 nsglobalwindow, 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
MozillaProjectsNSStoolsssltap
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.
... activewindow readonly attribute fueliwindow 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, nsidomwindow *window, prbool *_retval) uniform resource locators the method passes in an interface pointer of type nsiuri, which is based on the uniform resource identifier, or uri.
... here is the complete implementation of the shouldload() method: ns_imethodimp weblock::shouldload(print32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidomwindow *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 // contentwindow is an xray var isxray = components.utils.isxraywrapper(gbrowser.contentwindow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.contentwindow); 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 // contentwindow is an xray var isxray = components.utils.isxraywrapper(gbrowser.contentwindow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; ...
... // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.contentwindow); 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
originatingwindow nsidomwindow the window that started the installs.
... note: prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5), this was an nsidomwindowinternal.
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 nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
...void confirm( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindow 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 nsidomwindow 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 nsidomwindow 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 nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
...void showupdatehistory( in nsidomwindow parent ); parameters parent an nsidomwindow indicating the parent window to which to anchor the update list window.
nsIWebBrowserFindInFrames
attributes attribute type description currentsearchframe nsidomwindow frame at which to start the search.
... rootsearchframe nsidomwindow 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.activewindow.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.activewindow.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/mailwindowoverlay.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/mailwindowoverlay.xul chrome://myaddon/content/tboverlay-tb2.xul appversion<3.0 overlay chrome://messenger/content/mailwindowoverlay.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_setwindow 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
WebAPIAudioNodeconnect
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
WebAPICache
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.drawwindow() 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
WebAPIClienttype
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
WebAPIClientsmatchAll
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.openwindow(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
WebAPIConsole
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
WebAPICrypto
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
WebAPIDOMPointDOMPoint
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
WebAPIDocumentdomain
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
WebAPIDocumenttitle
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.contentwindow.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.contentwindow.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.
Introduction to the File and Directory Entries API - Web APIs
these methods are members of both the window object and the worker global scope.
...these synchronous methods are members of the worker's global scope only, not the window object.
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.contentwindow read only returns a windowproxy, the window proxy for the nested browsing context.
... the following properties have been added: srcdoc, sandbox, and contentwindow.
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.contentwindow 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, contentwindow, 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
WebAPILocationassign
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.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging 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 otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.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.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging 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
WebAPINavigatoroscpu
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
WebAPINavigatorvibrate
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
WebAPINavigatorxr
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 openwindow() opens the specified url in a new window, if and only if the given url is on the same origin as the calling page.
... it returns a promise that resolves with a reference to a windowclient.
performance.now() - Web APIs
WebAPIPerformancenow
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
WebAPIRangeRange
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
WebAPIRequest
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
WebAPIScreenavailLeft
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
WebAPIScreenavailWidth
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
WebAPIScreenwidth
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.openwindow) return clients.openwindow('/'); })); }); 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.openwindow) return clients.openwindow('/'); })); }; 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
WebAPITextRange
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
WebAPIUIEvent
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
WebAPIURL
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
WebAPI
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 mscandidatewindowhide mscandidatewindowshow mscandidatewindowupdate 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​.match​media() 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
WebCSScalc
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.
cursor - CSS: Cascading Style Sheets
WebCSScursor
bug 275173: on windows and mac os x, no-drop is the same as not-allowed.
... bug 275174: on windows, all-scroll is the same as move.
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
WebGuideHTMLHTML5
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
WebHTMLElementinputcolor
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
WebSVGScripting
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 prefwindow.
Loading Content Scripts - Archive of obsolete content
"end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
clipboard - Archive of obsolete content
currently the image type doesn't support transparency on windows.
hotkeys - Archive of obsolete content
accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac.
notifications - Archive of obsolete content
usage this api supports desktop notifications on windows, os x using growl (and notification center as of os x 10.9 mavericks), and linux using libnotify.
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).
High-Level APIs - Archive of obsolete content
windows enumerate and examine open browser windows, open new windows, and listen for window events.
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.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
jpm - Archive of obsolete content
for example, in an ubuntu or debian terminal window, enter sudo apt-get install nodejs nodejs-legacy npm.
package.json - Archive of obsolete content
if this value is not true or is omitted, then the add-on will not see any private windows or objects, such as tabs, that are associated with private windows.
Displaying annotations - Archive of obsolete content
like the selector, the matcher also listens for the window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up.
Overview - Archive of obsolete content
if we do this, then the add-on won't see any private windows, and the annotator's widget will not appear in any private windows.
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!
Modifying the Page Hosted by a Tab - Archive of obsolete content
then open any web page in the browser window, and click the button .
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.
Tutorials - Archive of obsolete content
interact with the browser open a web page open a web page in a new browser tab or window using the tabs module, and access its content.
Bookmarks - Archive of obsolete content
firefox 2 and earlier creating a new bookmark var win = mybrowser.contentwindow; // 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.
Page Loading - Archive of obsolete content
post data to window code to post data to an existing or new window/tab ...
QuerySelector - Archive of obsolete content
// if you'd like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.prototype or window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): htmldocument.prototype.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.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(...
Enhanced Extension Installation - Archive of obsolete content
log strings are written to the application's error console (in anticipation of that api automatically logging to a file) and to the terminal window.
Jetpack Processes - Archive of obsolete content
this is useful for associating handles to the lifetime of a particular window, context menu, or other element, and helping ensure that they do not leak.
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...
Migrating raw components to add-ons - Archive of obsolete content
it allows javascript code to load functions from dlls on windows, and should allow you to eliminate your dependence on binary components entirely.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
the software that microsoft sells, such as windows, comes with a license that permits only limited duplication in exchange for a fee, so, although customers can install it on their computers, they cannot modify it.
Adding menus and submenus - Archive of obsolete content
if your extension requires custom xul windows, you may also need to have menus on those windows.
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.
Introduction - Archive of obsolete content
you can read and copy the user agent string of any firefox window, choosing "help > troubleshooting information" from the main menu.
User Notifications and Alerts - Archive of obsolete content
support for windows has existed since firefox 2.
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...
Add-ons - 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.
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:).
Locked config settings - Archive of obsolete content
note: in recent versions of mozilla (tested on windows and linux, with 1.5, 1.6 and 1.7b), the mozilla.cfg file needs to be placed in mozilla's root directory, rather than default\pref where all.js resides.
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
as of 2004-12-8, it is now possible to automatically handle failed asserts in debug builds of mozilla for windows.
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.
Creating a hybrid CD - Archive of obsolete content
it is used as the creator type for readme and other text files because it can handle unix and windows linebreaks, but teachtext cannot.
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.
Getting Started - Archive of obsolete content
you'll be able to change the bookmark manager and the profile migration window here.
Download Manager improvements in Firefox 3 - Archive of obsolete content
examples monitoring downloads an example showing how to use the new download manager apis to create a download log window that shows all past and present downloads and their status, including the start and end times of the downloads, the download speed, and more.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
if the user drops onto an area which can accept html (such as mozilla's editor window), the html flavour will be used and the text will appear bold.
Drag and Drop - Archive of obsolete content
for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to.
Error Console - Archive of obsolete content
to bring up error console from within a browser or mail window, use the function tojavascriptconsole().
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...
Tabs - Archive of obsolete content
ArchiveMozillaJetpackUITabs
in this class you can find information about the tabs in your firefox window.
slideBar - Archive of obsolete content
they allow quick access to a wide range of both temporary and permanent information at the side of your browser window.
slideBar - Archive of obsolete content
they allow quick access to a wide range of both temporary and permanent information at the side of your browser window.
UI - Archive of obsolete content
a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different browser windows ...
Mac OS X Build Prerequisites/fink - Archive of obsolete content
the installer should configure the fink environment for you, making it available in any new terminal window.
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.
Mozilla Crypto FAQ - Archive of obsolete content
note that due to various implementation issues, psm support for mozilla on the macintosh is lagging somewhat behind psm support on windows, linux, and other platforms.
Overview of how downloads work - Archive of obsolete content
click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window.
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 npwindow, 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::setwindow setwindow 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.
Installer - Archive of obsolete content
current windows and mac installs automatically associate *.webapp with prism.
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).
Proxy UI - Archive of obsolete content
seamonkey menu: preferences > advanced group > proxies panel menu: right-click on offline-online button (on browser windows).
Remote debugging - Archive of obsolete content
core dumps on windows on windows you can produce a "minidump".
SpiderMonkey coding conventions - Archive of obsolete content
linkage dll entry points have their return type expanded within a js_public_api() macro call, to get the right windows secret type qualifiers in the right places for all build variants.
File object - Archive of obsolete content
examples of possible prefix strings are "/" to indicate the unix root directory, "c:" to specify a windows drive letter, and "file:" to indicate a file url.
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.
The life of an HTML HTTP request - Archive of obsolete content
the rendering context implementation is a native class (nsgtkrenderingcontext on unix) that knows how to draw in a window.
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.
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
problem statement win-16 (aka, windows 3.1, et al), is unique in that the architecture depends on the operating environment (i.e., windows) knows the address of the stack, and that there is only one such address.
Using Breakpoints in Venkman - Archive of obsolete content
when you set a breakpoint at line 81, you can start animation on the web page in the browser window and see venkman stop execution as it enters the onflipx function.
Venkman - Archive of obsolete content
on windows, it is an install option; choose advanced install.
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:...
Mac stub installer - Archive of obsolete content
unfortunately, at the time of this writing there is no convenient way to test an installer build like there is on unix (deliver.pl) and windows (build.pl).
Install script template - Archive of obsolete content
additionally installs to a secondary location on the windows desktop, in this case c:\winnt\system32\myplugin\ 3.
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.
gestalt - Archive of obsolete content
this method returns null on unix and windows platforms.
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...
Properties - Archive of obsolete content
for example, the value could begin with "windows", "macintosh" or "x11" (for unix/linux).
Install Object - Archive of obsolete content
in all cases, the install object is implicit--like the window object in regular web page scripts--and needn't be prefixed to the object methods.
Return Codes - Archive of obsolete content
on windows nt, you may only need to restart the application as long as you did not replace operating system files.
createKey - Archive of obsolete content
for information on this parameter, see the description of regcreatekeyex in your windows api documentation.
setRootKey - Archive of obsolete content
on 16-bit windows platforms, hkey_classes_root is the only valid value and this method does nothing.
accelerated - Archive of obsolete content
« xul reference homeaccelerated type: booleanset this attribute to true to allow hardware layer managers to accelerate the window.
accesskey - Archive of obsolete content
when the user presses a modifier key specific to the platform (eg, control* on windows, command* on macintosh) and the access key, the element will be focused and/or activated from anywhere in the window.
colorpicker.type - Archive of obsolete content
« xul reference home type type: string if this attribute is not present, the colorpicker is displayed inside the window.
cycler - 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.
default - Archive of obsolete content
« xul reference home default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window.
disablechrome - Archive of obsolete content
« xul reference home disablechrome type: boolean set this attribute to true to disable chrome in the window.
editor.type - Archive of obsolete content
the window for the primary content can be retrieved more conveniently using window.content.
id - Archive of obsolete content
ArchiveMozillaXULAttributeid
id('foo'); mybutton.setattribute('label','the button was pressed'); } </script> a more abstract version of the above would be a <button id="foo" label="click me" oncommand="setwidgetlabel(this, 'i was pressed')"/> <script> function setwidgetlabel(idname, newcaption){ document.getelementbyid( idname.id ).setattribute('label',newcaption) } </script> not specifying the id attribute for a window or a prefwindow fills the console with the following warning message: warning: empty string passed to getelementbyid() see also name ...
lightweightthemes - Archive of obsolete content
« xul reference home lightweightthemes type: boolean true if the window supports lightweight themes, otherwise false.
onload - Archive of obsolete content
see image.onload prefwindow.onload ...
onpaneload - Archive of obsolete content
« xul reference home onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window.
onpopupshown - Archive of obsolete content
« xul reference home onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.
panel.flip - Archive of obsolete content
in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor.
preference-editable - Archive of obsolete content
« xul reference home preference-editable mozilla 1.8 type: boolean if true, the element may be used as one that modifies a preference in a prefwindow.
preference - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
prefpane.selected - Archive of obsolete content
to change the selected pane, use the prefwindow's showpane method.
removeelement - Archive of obsolete content
« xul reference home removeelement type: id when placed on an element in an overlay, it indicates that the element in the base file should be removed from the window.
reserved - Archive of obsolete content
example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator" oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) ...
resizer.dir - Archive of obsolete content
« xul reference home dir type: one of the values below the direction that the window is resized.
screenX - Archive of obsolete content
« xul reference home screenx type: integer the horizontal position at which the window appears on the screen.
screenY - Archive of obsolete content
« xul reference home screeny type: integer the vertical position at which the window appears on the screen.
title - Archive of obsolete content
« xul reference home title type: string the text to appear in the title bar of the window.
tooltip - Archive of obsolete content
« xul reference home tooltip type: id should be set to the value of the id of the tooltip or panel element that should be used as a tooltip window when the mouse hovers over the element for a moment.
treecol.type - Archive of obsolete content
this is used in mozilla's download manager window.
type - Archive of obsolete content
ArchiveMozillaXULAttributetype
see button.type browser.type colorpicker.type datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...
onunload - Archive of obsolete content
« xul reference home onunload type: script code closing the window calls this event handler on the prefwindow element.
Attribute (XUL) - Archive of obsolete content
ode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
view read only windowproxy document.defaultview (window of the document) detail read only long (float) unused; always zero.
Accessing Files - Archive of obsolete content
for instance, on windows, the value 'strt' returns the start directory, where applications which run when the system starts up are placed.
Menus - Archive of obsolete content
editable text context-openlink opens a link in a new window links context-openlinkintab opens a link in a new tab links context-bookmarklink bookmarks a link links context-savelink saves a link links context-sendlink sends a link in an email links context-copyemail copies an email address mailto: links context-copylink copies a link links context-viewimag...
How to Quit a XUL Application - Archive of obsolete content
getservice(components.interfaces.nsiappstartup); // eattemptquit will try to close each xul window, but the xul window can cancel the quit // process if there is unsaved data.
swapDocShells - Archive of obsolete content
this method can be used to move browser between windows or tear off a browser into a new window.
focus - Archive of obsolete content
ArchiveMozillaXULMethodfocus
the onfocus handler is called if the toplevel window is active.
removeTab - Archive of obsolete content
if only one tab is displayed, this method does nothing (unless the preference browser.tabs.closewindowwithlasttab is true, in which case the window containing the tab is closed).
showPopup - Archive of obsolete content
there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the window.
Extensions - Archive of obsolete content
for instance, opening a context menu for a link displays items to open the link in a new window or tab and to save or bookmark the link.
Floating Panels - Archive of obsolete content
the floating panel can be placed and moved independently of the main window, however it will always appear above the main window.
PopupEvents - Archive of obsolete content
otherwise, the user would have a menu for a parent window that is no longer active.
id - Archive of obsolete content
ArchiveMozillaXULPropertyid
« xul reference id type: element id, must be unique in the window gets and sets the value of the id attribute.
preferencePanes - Archive of obsolete content
« xul reference preferencepanes type: dom nodelist holds a list of all the prefpane elements in the window.
tabContainer - Archive of obsolete content
this is useful for add-ons that need to use events related to tabs in the browser window.
treeBoxObject - Archive of obsolete content
« xul reference treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the window.
Property - Archive of obsolete content
ers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautosel...
chromeclass-toolbar - Archive of obsolete content
« xul reference home chromeclass-toolbar when this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the window.open method.
Building Menus With Templates - Archive of obsolete content
note that the generated content does not get removed again when the menu is closed again; this extra feature of menus is only intended to be a performance enhancement to speed up the time it takes to display a window by avoiding extra generation that can be put off until later.
Introduction - Archive of obsolete content
the local store is a datasource which is usually used to hold state information such as window sizes, which columns in a tree are showing, and which tree items are open.
Simple Example - Archive of obsolete content
you might note that the image's src attribute uses the member variable ?photo <action> <vbox uri="?photo" align="start"> <image src="?photo"/> <label value="?title"/> </vbox> </action> it shouldn't be too difficult to tell what would appear in the window in this example.
Template Builder Interface - Archive of obsolete content
the processes of creating a builder for an element applies both when an element is created when the window is loaded and when an element is inserted dynamically.
Template and Tree Listeners - Archive of obsolete content
the firefox bookmarks window uses this technique.
XML Templates - Archive of obsolete content
be aware that when xml data is included inline as in this example, the content may be displayed and may affect the layout of other parts of the window.
Anonymous Content - Archive of obsolete content
if you look at a scroll bar in a mozilla window, you will see that it is made up of an arrow button, a slider, a thumb inside it and a second arrow button at the end, which are the elements that appear in the xbl above.
Broadcasters and Observers - Archive of obsolete content
example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
Creating an Installer - Archive of obsolete content
xpinstall packages mozilla provides a mechanism which can be used to package xul windows, scripts, skins and other files into single file installers.
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
if you resize the window of the last example, you will see that the textboxes resize, but no other elements do.
Groupboxes - Archive of obsolete content
both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded.
Introduction to RDF - Archive of obsolete content
instead of the window element, the rdf element is used.
Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.
More Button Features - Archive of obsolete content
next, we will learn more details about how xul elements are positioned in a window.
More Menu Features - Archive of obsolete content
the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog.
Scroll Bars - Archive of obsolete content
« previousnext » now, let's find out to add scroll bars to a window.
Simple Menu Bars - Archive of obsolete content
menupopup element the menupopup element creates the popup window containing the menu commands.
Stacks and Decks - Archive of obsolete content
rather than create separate windows and add navigation buttons to each of them, you would create one window and use a deck where the content changes.
XBL Example - Archive of obsolete content
if (newidx>=totalpages) return totalpages; thedeck.setattribute("selectedindex",newidx); document.getanonymousnodes(this)[0].childnodes[1].childnodes[1] .setattribute("value",(newidx+1)+" of "+totalpages); return newidx; ]]> </body> </method> </implementation> </binding> next, we'll see some additional features of a window.
XPCOM Interfaces - Archive of obsolete content
the windows and macintosh versions of a file component would be significantly different.
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
XUL controls - Archive of obsolete content
pressing the button displays a color picker popup window.
autohide - Archive of obsolete content
this only has an effect on windows and needs to be combined with type="menubar" and a menubar element.
checkbox - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
command - Archive of obsolete content
if you include the script chrome://global/content/globaloverlay.js in your window, you can use the function godocommand function to invoke the command.
datepicker - Archive of obsolete content
to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers.
listbox - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
listitem - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
menubar - Archive of obsolete content
to look native (at least on windows), the menubar element needs to be placed inside a toolbox element.
menulist - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
page - Archive of obsolete content
ArchiveMozillaXULpage
« xul reference home [ examples | attributes | properties | methods | related ] similar to a window, except it should be used for xul files that are to be loaded into an iframe.
preferences - Archive of obsolete content
ookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
promptBox - Archive of obsolete content
you should use the window.alert() method or the nsiprompt interface instead.
radiogroup - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
richlistbox - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
script - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] much like the html script element, this is used to declare a script to be used by the xul window.
scrollbox - Archive of obsolete content
if the user made the window smaller, the outer box would get smaller in response and sprout its scroll bars.
statusbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element used to create a status bar, usually placed along the bottom of a window.
textbox - Archive of obsolete content
this attribute only has any effect when used inside a prefwindow.
timepicker - Archive of obsolete content
to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers.
Building XULRunner - Archive of obsolete content
for instance, in firefox 2.0.0.9 you will get : mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.8.1.9) gecko/20071025 firefox/2.0.0.9 therefore the xulrunner version for this firefox version is : 1.8.1.9 fetching sources from mercurial as with all other mozilla products, one would fetch recent sources from mercurial.
Components - Archive of obsolete content
linux: ~/.yourcompany/yourapp/oihizuf.default/ windows: %appdata%\yourcompany\yourapp\profiles\jhfdfdi.default\ ...
XULRunner/Old Releases - Archive of obsolete content
the windows and linux builds will run normal xulrunner applications, but the mac build uses cocoa widgets and will not run xulrunner applications.
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...
XUL Application Packaging - Archive of obsolete content
it is parsed as a windows-style ini file with [headings] and key=value pairs.
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 $@...
Mozprocess - Archive of obsolete content
mozprocess aims to provide the ability to robustly terminate a process (by timeout or otherwise), along with any child processes, on windows, os x, and linux.
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.contentwindow.document; this.meditordocument.designmode = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.miframeelement.contentwindow.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-10-06 - Archive of obsolete content
discussions dialogs on app startup discussion regarding improvement of dialog of app window what are tasks?
2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
2006-11-10 - Archive of obsolete content
popup blockers..window handlers inquiry of how to implement the pop-up blocker on the mozilla toolbar.
2006-11-10 - Archive of obsolete content
building xulrunner application with mozilla november 8th: kirans is trying to build mozilla with xulrunner option on a windows machine.
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.
2006-11-10 - Archive of obsolete content
matthew gertner wants to know if anyone has written code to paste images from the clipboard on platforms other than windows?
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.platform - november 11th - november 17th, 2006 announcements no announcements this week traffic xulrunner: <browser> not allowing javascript popup windows b notes that when using xul elements <browser/> and <tabbrowser/> the javascript popup windows don't work out of the box and asks what needs to be implement.
2006-18-24 - Archive of obsolete content
summary: mozilla.dev.platform - november 18th - november 24th, 2006 announcements no announcements this week traffic xulrunner: <browser> not allowing javascript popup windows b notes that when using xul elements <browser/> and <tabbrowser/> the javascript popup windows don't work out of the box and asks what needs to be implement.
JS-Engine FAQ - Archive of obsolete content
newly created threads in js from mozilla_1_8_branch causes to hang in windows patch from bug 351602 should fix the problem.
2006-10-27 - Archive of obsolete content
multiple presshells discussion on why current interfaces allow for multiple presshells and how the relationships work for the following objects: docshell, presshell, prescontext, document, domwindow, widget, docshell and contentviewer.
2006-11-10 - Archive of obsolete content
using window.innerheight and window.scrollmaxy should resolve this issue.
2006-09-06 - Archive of obsolete content
discussions windows gecko-sdk and g++ components discussion on the problems and possible solutions running cygwin/g++ compiled xpcom components with windows-based gecko-sdk/xulrunner dll/exes.
2006-09-22 - Archive of obsolete content
xpidl.exe crashes on windows problem with creating header files from idl's in 1.8 branch due to wrong compiler.
2006-10-13 - Archive of obsolete content
discussions wxmozilla and ff1.5 xpcom problems updating wxmozilla to use it with firefox 1.5.7 browser elements, opening links in a new window using javascript to open window in new window.
Multi-process plugin architecture - Archive of obsolete content
in the plugin process, the shim layer serves as a plugin host, implementing the npn_ functions used by the plugin, and forwards the calls to the plugin dll: multi-process plugins, also called out of process plugins or oopp first shipped in firefox 3.6.4 on windows and linux, and in firefox 4 on mac os x.
Browser-side plug-in API - Archive of obsolete content
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.
NPAnyCallbackStruct - Archive of obsolete content
see also npp_print() npembedprint npsetwindowcallbackstruct npprintcallbackstruct ...
NPFullPrint - Archive of obsolete content
mac os: thprint ms windows: printer's device context description the npp_print function passes the plug-in a pointer to an npprint object (previously allocated by the browser).
NPN_ForceRedraw - Archive of obsolete content
description once a region of a windowless plugin has been invalidated with npn_invalidaterect() or npn_invalidateregion(), a plug-in can call npn_forceredraw() to force a paint message.
NPN_GetURLNotify - Archive of obsolete content
target name of the target window or frame, or one of several special target names.
NPN_PostURLNotify - Archive of obsolete content
target target window, specified by the plug-in.
NPN_Status - Archive of obsolete content
description you can use this function to make your plug-in display status information in the browser window, in the same place the browser does.
NPN_Version - Archive of obsolete content
for example, the plug-in could inquire on the constant npvers_has_windowless to see if it is running in a browser that supports windowless functionality.
NPObject - Archive of obsolete content
the browsers are expected to expose their window objects and everything reachable from it through this api.
NPPrintCallbackStruct - Archive of obsolete content
see also npp_print, npembedprint, npsetwindowcallbackstruct, npanycallbackstruct ...
NP_GetMIMEDescription - Archive of obsolete content
on windows you have to define supported mimetypes in the dll resource file.
NP_Initialize - Archive of obsolete content
syntax windows #include <npapi.h> nperror winapi np_initialize(npnetscapefuncs *anpnfuncs) unix #include <npapi.h> nperror np_initialize(npnetscapefuncs *anpnfuncs, nppluginfuncs *anppfuncs) returns if successful, the function returns nperr_no_error.
NP_Shutdown - Archive of obsolete content
syntax #include <npapi.h> void np_shutdown(void); windows #include <npapi.h> void winapi np_shutdown(void); description the browser calls this function once after the last instance of your plug-in is destroyed, before unloading the plug-in library itself.
NPAPI plug-in side API - Archive of obsolete content
npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_urlnotify npp_write npp_writeready ...
Adobe Flash - Archive of obsolete content
if so, the plugin is scriptable on windows and linux // 4.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
when this method is used, you can choose to either place the plugin into the plugins directory, or place it into your own directory and modify the windows registry to let firefox know where to find the plugin.
.htaccess ( hypertext access ) - Archive of obsolete content
file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other.
Introduction to Public-Key Cryptography - Archive of obsolete content
in other cases, your unix or windows login and password may be sufficient.
Developing cross-browser and cross-platform pages - Archive of obsolete content
opera 6+ allows users to set the browser identification string via a menu internet explorer uses the windows registry safari, konqueror and icab browsers can mask their browser identity under internet explorer or netscape labels a user or browser distributor can put what they want in the navigator.useragent string and this may trick your code into executing a "wrong" block of code.
-ms-accelerator - Archive of obsolete content
remarks this property is supported by windows 2000 and later.
-ms-scroll-chaining - Archive of obsolete content
this property requires windows 8 or later.
-ms-scroll-limit-x-max - Archive of obsolete content
this property requires windows 8 or later.
-ms-scroll-limit-x-min - Archive of obsolete content
this property requires windows 8 or later.
-ms-scroll-limit-y-max - Archive of obsolete content
this property requires windows 8 or later.
-ms-scroll-limit-y-min - Archive of obsolete content
this property requires windows 8 or later.
-ms-scroll-limit - Archive of obsolete content
this property requires windows 8 or later.
-ms-text-autospace - Archive of obsolete content
remarks this property requires windows 8 or later.
-ms-touch-select - Archive of obsolete content
remarks this property requires windows 8 or later.
Date.getVarDate() - Archive of obsolete content
not supported in windows 8.x store apps.
Debug.debuggerEnabled - Archive of obsolete content
also supported in store apps (windows 8 and windows phone 8.1).
Debug.setNonUserCodeExceptions - Archive of obsolete content
also supported in store apps (windows 8 and windows phone 8.1).
Enumerator.atEnd - Archive of obsolete content
not supported in windows 8.x store apps.
Enumerator.item - Archive of obsolete content
not supported in windows 8.x store apps.
Enumerator.moveFirst - Archive of obsolete content
not supported in windows 8.x store apps.
Enumerator.moveNext - Archive of obsolete content
not supported in windows 8.x store apps.
Error.description - Archive of obsolete content
also supported in store apps (windows 8 and windows phone 8.1).
Error.number - Archive of obsolete content
also supported in store apps (windows 8 and windows phone 8.1).
Error.stackTraceLimit - Archive of obsolete content
try { var err = new error("my error"); error.stacktracelimit = 7; throw err; } catch(e) { document.write("error stack trace limit: ") document.write(error.stacktracelimit); } requirements supported in internet explorer 10 and in windows 8.x store apps.
GetObject - Archive of obsolete content
remarks the getobject function 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.
VBArray.dimensions - Archive of obsolete content
not supported in windows 8.x store apps.
VBArray.getItem - Archive of obsolete content
not supported in windows 8.x store apps.
VBArray.lbound - Archive of obsolete content
not supported in windows 8.x store apps.
VBArray.toArray - Archive of obsolete content
not supported in windows 8.x store apps.
VBArray.ubound - Archive of obsolete content
not supported in windows 8.x store apps.
VBArray - Archive of obsolete content
not supported in windows 8.x store apps.
Object.prototype.__parent__ - Archive of obsolete content
window.
Object.prototype.unwatch() - 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.
Packages - Archive of obsolete content
examples example: javascript function to create a java dialog box the following javascript function creates a java dialog box: function createwindow() { var theowner = new packages.java.awt.frame(); var thewindow = new packages.java.awt.dialog(theowner); thewindow.setsize(350, 200); thewindow.settitle("hello, world"); thewindow.setvisible(true); } in the previous example, the function instantiates thewindow as a new packages object.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 7 - manipulating the dom server-side <script runat="server"> window.onserverload = function() { document.getelementbyid( "out-logger" ).innerhtml = jaxer.file.read( "dump.txt" ); } </script> the code in listing 7 is executed server-side and takes advantage of the onserverload event which ensures that we have a complete dom before trying to access it.
Reference - Archive of obsolete content
if it's not in a standard, and that sun doc is corrent, then it should probably go in the window object methods.
XForms Alert Element - Archive of obsolete content
representations can be represented in two ways: modeless window that contains the alert element's message (default representation).
XForms Help Element - Archive of obsolete content
representations is represented by modeless window that contains the help element's message.
XForms Hint Element - Archive of obsolete content
representations is represented by a tooltip window that contains the hint element's message.
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.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
windows command uuidgen should be sufficient.
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.
Techniques for game development - Game development
we touch on css transitions and css animations, and javascript loops involving window.requestanimationframe.
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.
Browsing context - 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.
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.
First CPU idle - MDN Web Docs Glossary: Definitions of Web-related terms
first cpu idle measures when a page is minimally interactive, or when the window is quiet enough to handle user input.
First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
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.
Gonk - MDN Web Docs Glossary: Definitions of Web-related terms
gonk is a porting target of gecko (just as gecko has been ported to os x, windows, and android).
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
it serves the same purpose as filename extensions traditionally do on windows.
Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
window.matchmedia() test the viewing device against a media query.
Microsoft Edge - MDN Web Docs Glossary: Definitions of Web-related terms
microsoft edge is a free-of-cost graphical web browser bundled with microsoft windows and developed by microsoft since 2014.
Mixin - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the windoworworkerglobalscope mixin is used to provide methods and properties that need to be available on both the window and workerglobalscope interfaces.
Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms
firefox runs on windows, os x, linux, and android.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
navigate-to restricts the urls to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
Opera Browser - MDN Web Docs Glossary: Definitions of Web-related terms
opera is the fifth most used web browser, publicly released in 1996 and initially running on windows only.
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
(note that window.foo could still be used to access the external foo variable.) in conclusion, any changes inside our functions won't affect the original foo at all, as we are modifying copies of it that's why primitives are immutable - instead of changing them directly, we're modifying a copy, without affecting the original.
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
plorer and microsoft edge) property and method prefixes the prefixes for properties and methods are lower-case: webkit (chrome, safari, newer versions of opera, almost all ios browsers (including firefox for ios); basically, any webkit based browser) moz (firefox) o (old, pre-webkit, versions of opera) ms (internet explorer and microsoft edge) sample usage: var requestanimationframe = window.requestanimationframe || window.mozrequestanimationframe || window.webkitrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe; learn more general knowledge vendor prefix on wikipedia ...
document environment - MDN Web Docs Glossary: Definitions of Web-related terms
when the javascript global environment is a window or an iframe, it is called a document environment.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
$(document).ready(function(){ alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official website technical information offical api reference documentation ...
Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
in web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode).
CSS values and units - Learn web development
if you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work.
Test Your Skills: Fundamental layout comprehension - Learn web development
the columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower.
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.
Legacy layout methods - Learn web development
try adjusting the width of your browser window to see for yourself.
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?
Practical positioning examples - Learn web development
but not only that — we'll give it fixed position so that it stays in the same position in the browser window.
Supporting older browsers - Learn web development
these are available for mac, windows and linux operating systems and so are a great way to test in old and modern windows browsers even if you are not using a windows computer.
Test your skills: Media Queries and Responsive Design - Learn web development
you can drag your window smaller or use the responsive design view in firefox devtools to view this as if on a phone.
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); ...
What do common web layouts contain? - Learn web development
(even many desktop-users prefer viewing things in small windows rather than full-screen.) the real fun begins when you start mixing them all together: … these are just examples and you're quite free to lay things out as you want.
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.
The HTML5 input types - Learn web development
the below screenshots show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10.
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.
Sending form data - Learn web development
good options for local php testing are mamp (mac and windows) and ampps (mac, windows, linux).
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.
Publishing your website - Learn web development
then the program shows you your local files and the web server's files in two windows, and provides a way for you to transfer files back and forth.
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...
Graceful asynchronous programming with Promises - Learn web development
the application has a window with a list of the user's friends, and clicking on a button next to a user starts a video call to that user.
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.
Storing the information you need — Variables - Learn web development
there is no reason to use var, unless you need to support old versions of internet explorer with your code (it doesn't support let until version 11; the modern windows edge browser supports let just fine).
What is JavaScript? - Learn web development
every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the dom in action.
Test your skills: JSON - Learn web development
try updating the live code below to recreate the finished example: warning: to answer this question, you'll need to write your code into the live code window above.
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.
Working with Svelte stores - Learn web development
you have several options, like nvda for windows, chromevox for chrome, orca on linux, and voiceover for mac os x and ios, among other options.
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.
Learn web development
open your computer's command prompt (windows) or terminal (linux, macos).
Information for External Developers Dealing with Accessibility
in addition, here is a list of official keyboard ui guidelines for each desktop: windows keys: guidelines on keyboard ui design and on implementing keyboard shortcuts: an excellent resource from microsoft.
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.
Mozilla Plugin Accessibility
a notable acception is the adobe pdf plugin on windows, which supports msaa.
Frequently Asked Questions for Lightweight themes
this includes mac, linux, windows, and android platforms.
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.
How Mozilla's build system works
this creates libgkbase_s.a (on unix) and gkbase_s.lib on windows and copies it to dist/lib.
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 ondetachfromwindow().] 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.
HTMLIFrameElement.getContentDimensions()
the getcontentdimensions() method of the htmliframeelement interface retrieves the x and y dimensions of the content window.
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 mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
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 mozbrowseropenwindow 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 mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsericonchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
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 mozbrowseropenwindow 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 mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermetachange
its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
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 mozbrowseropenwindow 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 mozbrowseropenwindow 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 mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
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 mozbrowseropenwindow 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 mozbrowseropenwindow 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
MozillaGeckoChromeCSS
-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.getmostrecentwindow(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 nsiwindowmediator window mediator service ww nsiwindowwatcher 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''.
Localizing without a specialized tool
you can choose to use: notepad++ or notepad2 on windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x.
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 prefwindow, 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.
JS::PerfMeasurement
note: at present, js::perfmeasurement 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.
Measuring performance using the PerfMeasurement.jsm code module
you give the constructor a bit-mask of events you're interested in; see note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems.
Refcount tracing and balancing
note: due to an issue with the sandbox on windows (bug 1345568), refcount logging currently requires the moz_disable_content_sandbox environment variable to be set.
tools/power/rapl
windows unfortunately, rapl does not work on windows, and porting it would be difficult because windows does not have apis that allow easy access to the relevant model-specific registers.
Leak Monitor
it will pop-up an alert when a window is closed and javascript still links to that window (for example, an observer that is not cleared when the window closes).
Leak And Bloat Tests
startup main mail window open address book and message composition windows close address book and message composition windows quit the application future improvements will be discussed on the discussion page of the mozilla wiki.
Midas editor module security preferences
if you have quick launch running (on windows, this is an icon in the toolbar), quit that too.
Midas
it also has a property called contentwindow that refers to the window object inside the inline frame.
NSPR release procedure
so on unix it repackages the jar files into gzipped tar files, and on windows it repackages the jar files into zip files.
IPC Semaphores
nspr provides an interprocess communication mechanism using a counting semaphore model similar to that which is provided in unix and windows platforms.
I/O Functions
nspr converts the slashes in a pathname to the directory separator of the native os--for example, backslash (\) on windows and colon (:) on mac os--before passing it to the native system calls.
PR ImportTCPSocket
on windows, this is a socket.
PR_OpenAnonFileMap
on windows platforms, dirname is ignored.
PR_Poll
cross-platform applications should only set the fd field to a pointer to a prfiledesc object representing a socket or a pollable event because on windows the select function can only be used with sockets.
PR_ReadDir
on windows platforms and the mac os, this value identifies files with the "hidden" attribute set.
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_getwindow 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
MozillaProjectsNSSFAQ
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.14.2 release notes
support for other platforms, such as windows, will follow in a future nss release.
NSS 3.15.1 release notes
bug 882829 - on windows, nss initialization fails if nss cannot call the rtlgenrandom function.
NSS 3.15.4 release notes
when building on windows, os_target now defaults to win95.
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.40 release notes
it is easier to build nss on windows in mozilla-build environments.
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 3.54 release notes
bug 1642802 - add uint128 support for hacl* curve25519 on windows.
NSS 3.56 release notes
bug 1652032 - fix failure to build in windows arm64 makefile cross-compilation.
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="&amp;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...
PKCS11 module installation
older versions of firefox may support the window.pkcs11 property for installing pkcs #11 modules.
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_getwindow mxr 3.2 and later pk11_getwrapkey mxr 3.2 and later pk11_hashbuf mxr 3.2 and later pk11_hasrootcerts mxr 3.4 and later pk11_importcert mxr 3.5 and later pk11_importcertforkeytoslot mxr 3.2 and later pk11_importcrl mxr 3...
NSS tools : crlutil
on windows nt the default is the current directory.
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.
NSS Tools certutil
on windows nt the default is the current directory.
NSS Tools crlutil
on windows nt the default is the current directory.
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
on windows nt the default is the current directory.
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.addwindowlistener(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::drawwindow(nsglobalwindow&, 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).
JS_ShutDown
implementation note: this method has been used to clean up memory allocated by jsdtoa.cpp, memory allocated to implement date.now() on windows, and when the internationalization api is enabled, memory internally allocated by icu.
SpiderMonkey 1.8.5
to check what version you are running, issue the command /usr/bin/g++-4.2 -v from a terminal window.
SpiderMonkey 1.8.7
to check what version you are running, issue the command /usr/bin/g++-4.2 -v from a terminal window.
SpiderMonkey 1.8
js.mak, an old windows-specific nmake file, has been deleted.
SpiderMonkey 52
that will open a small window in the bottom left with a line like "artifact uploaded:mozjs-52.x.y.tar.bz2".
SpiderMonkey releases
that will open a small window in the bottom left with a line like "artifact uploaded: mozjs-57.0.1.tar.bz2".
Setting up CDT to work on SpiderMonkey
start the indexer by either: selecting "index > rebuild" from the project's context menu located in the project explorer window, or selecting "c/c++ index > rebuild" from the "project" menu.
Shell global objects
values: 0: (none) normal amount of collection (resets all modes) 1: (poke) collect when roots are added or removed 2: (alloc) collect when every n allocations (default: 100) 3: (framegc) collect when the window paints (browser only) 4: (verifierpre) verify pre write barriers between instructions 5: (frameverifierpre) verify pre write barriers between paints 6: (stackrooting) verify stack rooting 7: (generationalgc) collect the nursery every n nursery allocations 8: (incrementalrootsthenfinish) incremental gc in two slices: 1) mark roots 2) finish collection 9: (incrementalmarkallth...
TPS Tab Lists
ges/page1.html", title: "crossweave test page 1", profile: "profile1" }, { uri: "data:text/html,<html><head><title>hello</title></head><body>hello</body></html>", title: "hello", profile: "profile1" } ]; tab lists and phase actions tabs cannot be modified or deleted, only added or verified with the following functions: tabs.add - opens the specified tabs in the browser window.
TPS Tests
note: be prepared not to use your computer for 15 or so minutes after starting a full run of tps, as it will open and close a fairly large number of firefox windows.
Web Replay
windows port work is underway, but is not yet working.
compare-locales
if you want to run compare-locales on windows, be sure to first install mozillabuild.
Mozinfo
additionally, the service pack in use is available on the windows platform.
Mozilla Projects
it will pop-up an alert when a window is closed and javascript still links to that window (for example, an observer that is not cleared when the window closes).
Signing Mozilla apps for Mac OS X
the man page for codesign is available online, or you can simply type "man codesign" in a terminal window.
Gecko object attributes
haspopup true when the object displays a pop-up menu or window when invoked.
ROLE_ALERT
mapped to at-spi: role_alert atk: atk_role_alert msaa/ia2: role_system_alert ua: nsaccessibilitywindowrole events event_alert - fires when the widget is shown.
AT Development
building xulrunner with python how to build xulrunner with python on windows.
Accessibility API Implementation Details
we provide for them the support of these products on windows, linux/unix and os x platforms.at developmentthe accessibility of computer software has seen drastic improvements over the past two decades.
Using the Places history service
this is used when the preference is set that causes the last page in new windows.
places.sqlite Database Troubleshooting
open a terminal window and navigate to the work folder.
Preferences API
you can also create a xul-based options window easily to allow user modify some preferences.
FUEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
Bundling multiple binary components
this means using something like loadlibrary / getprocaddress / freelibrary on windows.
Creating a Python XPCOM component
registering the interface in the "components" directory, execute : ../xpidl -m typelib -w -v -i /usr/share/idl/mozilla/ nsipysimple.idl on windows you must point to the idl directory as part of your mozilla build.
Generating GUIDs
windows windows users can use the guidgen tool from microsoft to obtain a guid.
An Overview of XPCOM
they are usually contained in reusable binary libraries (a dll on windows, for example, or a dso on unix), which can include one or more components.
Component Internals
the most common type of component is one that is written in c++ and compiled into a shared library (a dll on a windows system or a dso on unix).
Creating the Component Code
uuidgen is a command-line tool that returns a unique 128-bit number when you call it with no arguments: $ uuidgen ce32e3ff-36f8-425f-94be-d85b26e634ee on windows, a program called guidgen.exe does the same thing and also provides a graphical user interface if you'd rather point and click.
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, nsidomwindow> 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> ...
Receiving startup notifications
final-ui-startup sent just before the first application window is displayed.
How to build a binary XPCOM component using Visual Studio
on windows, the sdk is built using a microsoft compiler, so you need to use one too.
Introduction to XPCOM for the DOM
you can generate them using guidgen on windows, or by issuing the command "mozbot uuid" in #mozilla on irc.mozilla.org.
Components.utils.forceGC
note: nsidomwindowutils.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.contentwindow); // true var waived = components.utils.waivexrays(gbrowser.contentwindow); isxray = components.utils.isxraywrapper(waived); // false ...
Components.utils
evalinwindow() removed in gecko 34.
Architecture basics
xpcom is like com, for windows.
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.
Language bindings
it returns a reference to the clone:components.utils.createobjectincomponents.utils.createobjectin creates a new javascript object in the scope of the specified object's compartment.components.utils.evalinsandboxthe evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor.components.utils.evalinwindowthis function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context.
NS_NewLocalFile
on windows, passing true causes shortcuts to be automatically resolved, and on macos, passing true causes finder aliases to be automatically resolved.
imgICache
any images from windows in private browsing mode will not be present in the cache returned from a call with a null parameter).
mozIAsyncFavicons
afaviconloadtype set to nsifaviconservice.favicon_load_private if the favicon is loaded from a private browsing window.
mozIAsyncHistory
note that this lets you add to history even in private browsing mode; if that's not desired you can first check whether the window is in private browsing mode.
mozIPlacesAutoComplete
unregisteropenpage() mark a page as no longer being open (either by closing the window or tab, or by navigating away from that page).
nsIAccessibleCoordinateType
coordtype_window_relative 0x01 the coordinates are relative to the window.
nsIAccessibleWin32Object
inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description hwnd voidptr handle to the external window implementing iaccessible.
nsIAuthPrompt2
serialize prompts that are all in the same "context" (this might mean application-wide, for a given window, or something else depending on the user interface) so that the user is not deluged with prompts.
nsIAuthPromptWrapper
embedding/components/windowwatcher/public/nsiauthpromptwrapper.idlscriptable please add a summary to this article.
nsIBrowserBoxObject
the browser.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, webbrowserfind, webprogress and sessionhistory properties.
nsIClipboard
the kselectionclipboard is peculiar to the x windows system, where it refers to the primary selection, which is the one that simple mouse selection and middle-click paste operations are using.
nsICommandLineHandler
if this handler finds arguments that it understands, it should perform the appropriate actions (such as opening a window), and remove the arguments from the command-line array.
nsIContainerBoxObject
the browser.xml, editor.xml and general.xml bindings use this property to gain access to other properties such as webnavigation, contentdocument and contentwindow.
nsIContentPrefService2
a context can be obtained from the window or channel whose content pertains to the preferences being modified or retrieved.
nsIContentView
id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual document, instead of just how it is transformed; this is a 64-bit unsigned integer.
nsICookieService
private-cookie-changed since firefox 20 (see bugzilla #837091) same as cookie-changed, except used in lieu of cookie-changed for private windows.
nsICryptoHash
the following example shows how to compute the sha256 hash of a file: // hardcoded here for convenience var path = "c:\\windows\\notepad.exe"; var f = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); f.initwithpath(path); var istream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(components.interfaces.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = components.cl...
nsIDOMNSHTMLDocument
return value the text of the current selection, the same as window.getselection.tostring().
nsIDOMOrientationEvent
the nsidomorientationevent interface describes the event that can be delivered to dom windows, providing information from the device's accelerometer, allowing code to determine the orientation of the device.
nsIDOMSimpleGestureEvent
on windows, the units indicate the difference between the previous and current width between the two touch points, in pixels.
nsIDOMStorage
1.0 66 introduced gecko 1.8.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) a dom window's session storage object can be retrieved from the window's sessionstorage attribute.
nsIDOMStorage2
a dom window's local storage object can be retrieved from the window's localstorage attribute.
nsIDOMStorageList
return value the nsidomstorage object representing the data store for the specified domain.see also dom storage structured client-side storage (html 5 specification) nsidomwindow ...
nsIDOMXULLabeledControlElement
when the user presses the appropriate modifier and the access key, the element will be focused and/or activated from anywhere in the window.
nsIDialogParamBlock
embedding/components/windowwatcher/public/nsidialogparamblock.idlscriptable an interface to pass strings, integers and nsisupports to a dialog.
nsIEditor
in the case of a design mode document, this is the same as the window's selection.
nsIEditorBoxObject
the editor.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, webbrowserfind, editingsession and commandmanager properties.
nsIEditorDocShell
inherits from: nsisupports last changed in gecko 1.7 use nsieditingsession.makewindoweditable() and nsieditingsession.geteditorforwindow() from out side.
nsIEnvironment
examples windows this example gets the path to the porgram files directory on windows.
nsIFaviconService
this should be determined via privatebrowsingutils.iswindowprivate(somerelatedwindow) 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).
nsIGlobalHistory2
atoplevel whether the uri is loaded in a top-level window.
nsIGlobalHistory3
atoplevel whether the uri is loaded in a top-level window.
nsIIFrameBoxObject
the general.xml binding uses this property to gain access to the webnavigation, contentdocument and contentwindow 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.
nsIMessageListener
principal principal for the window app.
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 msgwindow message window */ void apply(in nsiarray msghdrs /* nsimsgdbhdr array */, in autf8string actionvalue, in nsimsgcopyservicelistener copylistener, in nsmsgfiltertypetype filtertype, in nsimsgwindow msgwindow); /* 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 nsimsgwindow msgwindow, 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 msgwindow nsimsgwindow 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.
Component; nsIPrefBranch
this insures that shorter lived objects (say one tied to an open window) will not fall into the cyclical reference trap.
nsIPrefBranch2
this insures that shorter lived objects (say one tied to an open window) will not fall into the cyclical reference trap.
nsIProcess
gecko 1.9.1 note prior to gecko 1.9.1 (firefox 3.5), this method did not work on windows or mac os x.
nsISHistory
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in an embedded browser environment, the nsiwebbrowser object creates an instance of session history for each open window.
nsIScreen
gecko 1.9.2 note starting in gecko 1.9.2, gecko running on microsoft windows reports 24 bits per pixel instead of 32 bits per pixel on 8-bits per color component displays, since this is typically what the caller is actually looking for.
nsISound
void playsystemsound( in astring soundalias ); parameters soundalias two different types of names are supported: you can specify the name of a system sound provided by the host operating system; for example, if you specify "systemexclamation", you can play the windows alert sound, but it's played only on windows.
nsITextInputProcessorCallback
createinstance(components.interfaces.nsitextinputprocessor); } if (!this._tip.begininputtransaction(window, this._callback)) { return false; } ...
nsIToolkitProfile
the unlocker object is only available in gecko 34 or later when running on windows vista or later.
nsIURI
this is useful for authentication, managing sessions, or for checking the origin of an uri to prevent cross-site scripting attacks while using methods such as window.postmessage().
nsIUserInfo
attributes attribute type description linux mac osx os/2 windows domain string read only.
nsIWebBrowserChromeFocus
embedding/browser/webbrowser/nsiwebbrowserchromefocus.idlscriptable implemented by the same object as nsiembeddingsitewindow.
nsIWebPageDescriptor
docshell/base/nsiwebpagedescriptor.idlscriptable this interface allows content being displayed in one window to be loaded into another window without refetching it from the network.
nsIWebProgressListener2
progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstatechange being called with astateflags including the state_stop and state_is_window flags).
nsIZipWriter
iter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.returnok) { var dir = fp.file; //dir must exist, as the user selected it.
Setting HTTP request headers
xpcom components you need to register a single http-on-modify-request observer per application (and not one per 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 initwindowless method of the nsiindexeddatabasemanager service.
XUL Overlays
MozillaTechXULOverlays
the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.
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.
Mailnews and Mail code review requirements
specifically, if the xpcshell test will do different things on windows than it will do on os x or linux, it must be run on windows and one of os x / linux.
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) { ...
Finding the code for a feature
i see it occurs in mail3panewindowcommands.js a couple of times.
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="messengerwindow" 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 ».
Using the Multiple Accounts API
identities identities are used in the compose window.
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.
Constants - Plugins
npvers_has_windowless 11 windowless plug-in.
Accessibility Inspector - Firefox Developer Tools
right-click in the main browser window, and choose inspect accessibility properties in the context menu.
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).
Search - Firefox Developer Tools
press shift + ctrl + f (windows and linux) or shift + cmd + f (macos) and then enter the string you are trying to find.
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.Object - Firefox Developer Tools
if the referent is an inner object (say, an html5 window object), return the corresponding outer object (say, the html5 windowproxy object).
Debugger.Script - Firefox Developer Tools
the result refers to the global directly, not via a wrapper or a windowproxy (“outer window”, in firefox).
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 monitor toolbar - Firefox Developer Tools
toolbar the toolbar is at the top of the main network monitor window.
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.
Network Monitor - Firefox Developer Tools
the network monitor will appear at the bottom of the browser window.
Page inspector 3-pane mode - Firefox Developer Tools
note: at narrower browser window widths, the tabs appear below the css rules pane.
Examine and edit CSS - Firefox Developer Tools
ctrl + up/down (on linux and windows) or alt + up/down (on mac) increments or decrements values by 0.1.
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.
Storage Inspector - Firefox Developer Tools
the toolbox will appear at the bottom of the browser window, with the storage inspector activated.
Taking screenshots - Firefox Developer Tools
with this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot.
Tips - Firefox Developer Tools
if you include it, the screenshot will be of the whole page, not just the section visible in the browser windows.
Web Console UI Tour - Firefox Developer Tools
note: you can clear the contents of the console by entering the keyboard command ctrl + shift + l (windows, macos, and linux) or cmd + k on macos.
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.getByteFrequencyData() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
AnalyserNode.getByteTimeDomainData() - Web APIs
const audioctx = new (window.audiocontext || window.webkitaudiocontext)(); const analyser = audioctx.createanalyser(); ...
AnalyserNode.getFloatFrequencyData() - Web APIs
node.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width = window.innerwidth; canvas.height = window.innerheight; document.body.appendchild(canvas); const canvasctx = canvas.getcontext('2d'); canvasctx.clearrect(0, 0, canvas.width, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data analysernode.getfloatfrequencydata(dataarray); //draw black background canvasctx.fillstyle = 'rgb(0, 0, 0)'; ...
AnalyserNode.getFloatTimeDomainData() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
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(); // ...
AnimationEffect.getComputedTiming() - Web APIs
these values are comparable to the computed styles of an element returned using window.getcomputedstyle(elem).
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.createMediaStreamDestination() - Web APIs
after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from the blob.
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
WebAPIAudioListenerupX
// 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
WebAPIAudioListenerupY
// 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
WebAPIAudioListenerupZ
// 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
WebAPIAudioNodecontext
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.createAnalyser() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
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.createConvolver() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var convolver = audioctx.createconvolver(); ...
BaseAudioContext.createDelay() - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ...
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.createWaveShaper() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ...
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.
CSSStyleDeclaration - Web APIs
via window.getcomputedstyle(), which exposes the cssstyledeclaration object as a read-only interface.
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
WebAPIClienturl
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'url' in that ...
Clients.get() - Web APIs
WebAPIClientsget
examples self.clients.get(id).then(function(client) { self.clients.openwindow(client.url); }); specifications specification status comment service workersthe definition of 'get()' in that specification.
CompositionEvent.initCompositionEvent() - Web APIs
viewarg the window object from which the event was generated.
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.normalize - 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...
DataTransfer.mozCursor - Web APIs
note: this property is currently only implemented on windows.
DelayNode.delayTime - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ...
DelayNode - Web APIs
WebAPIDelayNode
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.defaultView - Web APIs
in browsers, document.defaultview returns the window object associated with a document, or null if none is available.
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.contentwindow.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
WebAPIDocumentreferrer
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
WebAPIDocumentwidth
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.activeElement - Web APIs
you can get the current selection using window.getselection().
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.).
EXT_texture_compression_bptc - Web APIs
there is no support on windows.
EXT_texture_compression_rgtc - Web APIs
there is no support on windows.
Element: auxclick event - Web APIs
on windows this is usually autoscroll, and on macos and linux this is usually clipboard paste.
Element.closest() - Web APIs
WebAPIElementclosest
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
WebAPIElementouterHTML
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.scrollTop - Web APIs
WebAPIElementscrollTop
when scrolltop is used on the root element (the <html> element), the scrolly of the window is returned.
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
WebAPIEventcomposed
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,...
ExtendableEvent - Web APIs
it is not available when it is a window, or the scope of another kind of worker.
File.type - Web APIs
WebAPIFiletype
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.
File and Directory Entries API - Web APIs
they're available on the window object and implemented in localfilesystem: requestfilesystem() and resolvelocalfilesystemurl().
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
WebAPIGainNodegain
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stre...
GainNode - Web APIs
WebAPIGainNode
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stre...
Gamepad.id - Web APIs
WebAPIGamepadid
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
WebAPIGamepadindex
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
WebAPIGamepad
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.onblur - Web APIs
it's available on element, document, and window.
GlobalEventHandlers.onclose - Web APIs
note: to handle the closing of a window, use onbeforeunload or onunload.
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.mozFetchAsStream() - Web APIs
examples save to disk with mozfetchasstream (chrome context only) this technique also converts it to ico, however it will not work in windows xp as winxp cannot convert from png to ico.
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
WebAPIHTMLElementlang
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.
HTMLElement.offsetHeight - Web APIs
example the example image above shows a scrollbar and an offsetheight which fits on the window.
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 ...
Drag Operations - Web APIs
a drop can occur inside the same window or over another application.
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
WebAPIHistoryforward
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
WebAPIIDBCursordelete
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
WebAPIIDBDatabaseclose
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
WebAPIIDBDatabasename
// 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
WebAPIIDBFactorycmp
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
WebAPIIDBTransactiondb
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().
ImageBitmapRenderingContext - Web APIs
this interface is available in both the window and the worker context.
Basic concepts - Web APIs
note: third party window content (e.g.
Browser storage limits and eviction criteria - Web APIs
local storage data and cookies are still stored, but they are ephemeral — the data is deleted when you close the last private browsing window.
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
WebAPIKeyboard
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.
KeyboardEvent.initKeyboardEvent() - Web APIs
viewarg the windowproxy it is associated to.
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
WebAPILocationorigin
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
WebAPILocationreplace
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 otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.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 otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.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 otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.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).
MessageEvent.MessageEvent() - Web APIs
source: an messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
MessagePort.onmessage - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.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
WebAPIMouseEventaltKey
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
WebAPIMouseEventpageX
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.buildID - Web APIs
WebAPINavigatorbuildID
example console.log(window.navigator.buildid); specification not part of any public standard.
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
WebAPINavigatorvendor
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
WebAPINavigator
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.
NavigatorLanguage.languages - Web APIs
when its value changes, as the user's preferred languages are changed a languagechange event is fired on the window object.
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
WebAPINodebaseURI
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
WebAPINodeListforEach
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.openwindow('/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.openwindow("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification.
NotificationEvent.notification - Web APIs
console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications 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.openwindow) return clients.openwindow('/'); })); }); 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...
OffscreenCanvas - Web APIs
it is available in both the window and worker contexts.
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.persisted - Web APIs
syntax window.addeventlistener('pageshow', function(event) { if (event.persisted) { console.log('page was loaded from cache.'); } }); value a boolean.
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.
performance.getEntries() - Web APIs
syntax general syntax: entries = window.performance.getentries(); return value entries an array of performanceentry objects.
performance.getEntriesByName() - Web APIs
syntax entries = window.performance.getentriesbyname(name, type); arguments name the name of the entry to retrieve.
performance.getEntriesByType() - Web APIs
syntax entries = window.performance.getentriesbytype(type); arguments type the type of entry to retrieve such as "mark".
performance.toJSON() - Web APIs
example var js; js = window.performance.tojson(); console.log("json = " + json.stringify(js)); specifications specification status comment high resolution time level 2the definition of 'tojson() serializer' in that specification.
Performance - Web APIs
an object of this type can be obtained by calling the window.performance read-only attribute.
PerformanceObserverEntryList.getEntries() - Web APIs
this method is exposed to window and worker interfaces.
PerformanceObserverEntryList.getEntriesByName() - Web APIs
this method is exposed to window and worker interfaces.
PerformanceObserverEntryList.getEntriesByType() - Web APIs
this method is exposed to window and worker interfaces.
PerformanceObserverEntryList - Web APIs
note: this interface is exposed to window and worker.
PerformancePaintTiming - Web APIs
example function showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = performance.getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the co...
Using the Performance API - Web APIs
function print_json() { var json; var o = document.getelementsbytagname("output")[0]; if (window.performance.tojson === undefined) { json = "window.performance.tojson() is not supported"; o.innerhtml += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance object s = json.stringify(json); o.innerhtml = "<p>performance = " + s + "</p>"; // print the performance.timing and performance.navigation objects var perf = js...
Using Performance Timeline - Web APIs
r properties = ["name", "entrytype", "starttime", "duration"]; // create a few performance entries performance.mark("start"); do_work(50000); performance.mark("stop"); performance.measure("measure-1"); var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("perfentry[" + i + "]"); for (var j=0; j < properties.length; j++) { // check each property in window.performance var supported = properties[j] in p[i]; if (supported) { var pe = p[i]; log("...
PluginArray - Web APIs
the pluginarray interface is used to store a list of plugin objects describing the available plugins; it's returned by the window.navigator.plugins property.
Multi-touch interaction - Web APIs
break; case 1: // single touch point ev.target.style.background = "yellow"; break; case 2: // two simultaneous touch points ev.target.style.background = "pink"; break; default: // three or more simultaneous touches ev.target.style.background = "lightblue"; } } event logging these functions are used send to event activity to the application window (to support debugging and learning about the event flow).
Pinch zoom gestures - Web APIs
function remove_event(ev) { // remove this event from the target's cache for (var i = 0; i < evcache.length; i++) { if (evcache[i].pointerid == ev.pointerid) { evcache.splice(i, 1); break; } } } event logging these functions are used to send event activity to the application's window (to support debugging and learning about the event flow).
PromiseRejectionEvent.promise - Web APIs
window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") { window.requestidlecallback(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); }); event.preventdefault(); } } specifications specification status comment html living standardthe definition of 'promiser...
PromiseRejectionEvent.reason - Web APIs
examples window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'promiserejectionevent.reason' in that specification.
PromiseRejectionEvent - Web APIs
window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'promiserejectionevent' in that specification.
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
WebAPIPushEventdata
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.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
PushEvent - Web APIs
WebAPIPushEvent
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.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
PushManager.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.
RTCInboundRtpStreamStats.fecPacketsReceived - Web APIs
this may also happen if the fec packet arrives outside the window of time in which the client will attempt to use it.
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...
Range.extractContents() - Web APIs
">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendchild(documentfragment); } else if (range.commonancestorcontainer === list2 || range.com...
Response - Web APIs
WebAPIResponse
you can create a new response object using the response.response() constructor, but you are more likely to encounter a response object being returned as the result of another api operation—for example, a service worker fetchevent.respondwith, or a simple windoworworkerglobalscope.fetch().
SVGAElement.target - Web APIs
the svgaelement.target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.
SVGElement: unload event - Web APIs
the unload event is fired when the dom implementation removes an svg document from a window or frame.
Screen.availTop - Web APIs
WebAPIScreenavailTop
syntax let availtop = window.screen.availtop; 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.
Screen.colorDepth - Web APIs
WebAPIScreencolorDepth
syntax bitdepth = window.screen.colordepth; example // check the color depth of the screen if ( window.screen.colordepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status comment css object model (cssom) view modulethe definition of 'screen.colordepth' in that specification.
Screen.left - Web APIs
WebAPIScreenleft
syntax var left = window.screen.left; ...
Screen.lockOrientation() - Web APIs
syntax lockallowed = window.screen.lockorientation(orientation); parameters orientation the orientation into which to lock the screen.
Screen.mozBrightness - Web APIs
syntax let screenbrightness = window.screen.mozbrightness; specifications not part of specification.
Screen.mozEnabled - Web APIs
WebAPIScreenmozEnabled
syntax let screenenabled = window.screen.mozenabled specifications not part of specification.
Screen.orientation - Web APIs
syntax var orientation = window.screen.orientation; return value an instance of screenorientation representing the orientation of the screen.
Screen.pixelDepth - Web APIs
WebAPIScreenpixelDepth
syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specifications specification status comment css object model (cssom) view modulethe definition of 'screen.pixeldepth' in that specification.
Screen.top - Web APIs
WebAPIScreentop
syntax let top = window.screen.top; specifications not part of any current specification.
Screen.unlockOrientation() - Web APIs
syntax var unlocked = window.screen.unlockorientation(); return value returns true if the orientation was successfully unlocked or false if the orientation couldn't be unlocked.
Screen Wake Lock API - Web APIs
wakelock.release() .then(() => { wakelock = null; }); listening for wake lock release this example updates the ui if the wake lock has been released for any reason (such as navigating away from the active window/tab).
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
WebAPISelectionmodify
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.openwindow) return clients.openwindow('/'); })); }; 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.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.
ServiceWorkerRegistration.pushManager - Web APIs
examples this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
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.
SpeechSynthesis.cancel() - Web APIs
examples var synth = window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now?
SpeechSynthesis.pause() - Web APIs
examples var synth = window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now?
SpeechSynthesis.paused - Web APIs
examples var synth = window.speechsynthesis; synth.pause(); var amipaused = synth.paused; // will return true specifications specification status comment web speech apithe definition of 'paused' in that specification.
SpeechSynthesis.pending - Web APIs
examples var synth = window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now?
SpeechSynthesis.resume() - Web APIs
examples var synth = window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now?
SpeechSynthesis.speak() - Web APIs
var synth = window.speechsynthesis; ...
SpeechSynthesis.speaking - Web APIs
examples var synth = window.speechsynthesis; var utterance1 = new speechsynthesisutterance('how about we say this now?
SpeechSynthesis: voiceschanged event - Web APIs
you can use the voiceschanged event in an addeventlistener method: var synth = window.speechsynthesis; synth.addeventlistener('voiceschanged', function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendch...
SpeechSynthesisErrorEvent.error - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisErrorEvent - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.lang - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onboundary - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onend - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onerror - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onmark - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onpause - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onresume - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.onstart - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.pitch - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.rate - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.text - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.voice - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
SpeechSynthesisUtterance.volume - Web APIs
examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
StereoPannerNode.pan - 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...
StereoPannerNode - 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...
Storage - Web APIs
WebAPIStorage
to manipulate, for instance, the session storage for a domain, a call to window.sessionstorage is made; whereas for local storage the call is made to window.localstorage.
StorageEvent - Web APIs
a storageevent is sent to a window when a storage area it has access to is changed within the context of another document.
Storage API - Web APIs
site storage—the data stored for a web site which is managed by the storage standard—includes: indexeddb databases cache api data service worker registrations web storage api data managed using window.localstorage history state information saved using history.pushstate() application caches notification data other kinds of site-accessible, site-specific data that may be maintained site storage units the site storage system described by the storage standard and interacted with using the storage api consists of a single site storage unit for each origin.
Storage Access API - Web APIs
for example, a caller could open a pop-up window from the resolved promise without triggering firefox’s pop-up blocker.
Using readable streams - Web APIs
the custom stream constructor has a start() method that uses a windowtimers.setinterval() call to generate a random string every second.
Streams API - Web APIs
this request could then be passed to a windoworworkerglobalscope.fetch() to commence fetching the stream.
Stylesheet.href - Web APIs
WebAPIStyleSheethref
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
WebAPITextTrackmode
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
WebAPITimeEvent
timeevent.view read only is a windowproxy that identifies the window from which the event was generated.
Touch.target - Web APIs
WebAPITouchtarget
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.metaKey - Web APIs
on windows keyboards, this is the windows key (⊞).
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
WebAPIUIEventUIEvent
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.
URL.createObjectURL() - Web APIs
the url lifetime is tied to the document in the window on which it was created.
URLSearchParams.toString() - Web APIs
this is different from window.location.search, which includes it.
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.curve - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ...
WaveShaperNode.oversample - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ...
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.
Signaling and video calling - Web APIs
once this code has completed, finally the video being sent by the other peer is displayed in the local browser window!
A simple RTCDataChannel sample - Web APIs
this text node is appended as a child of the new element, which is then inserted into the receivebox block, thereby causing it to draw in the browser window.
Taking still photos with WebRTC - Web APIs
the startup() function the startup() function is run when the page has finished loading, courtesy of window.addeventlistener().
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").contentwindow.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.
Starting up and shutting down a WebXR session - Web APIs
inline an on-screen presentation of the xr imagery within the context of the document 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...
Attestation and Assertion - Web APIs
this attestation format is commonly found in desktop computers and is used by windows hello as its preferred attestation format.
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.
self.createImageBitmap() - Web APIs
the method exists on the global scope in both windows and workers.
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 ...
XMLHttpRequest.timeout - Web APIs
note: you may not use a timeout for synchronous requests with an owning window.
XRSession - Web APIs
WebAPIXRSession
this method is comparable to the window.requestanimationframe() method.
mssitemodejumplistitemremoved - Web APIs
syntax event property object.oncandidatewindowhide = 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.
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
but nvda and window-eyes do it just fine, and orca on linux also has no problems.
Alerts - Accessibility
because this is not allowed by the windows api specs, and possibly others.
An overview of accessible web applications and widgets - Accessibility
on windows, the next tab should automatically be activated when the user presses the arrow keys.
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
WebCSS:first
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
WebCSS:visited
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.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio.
@viewport - CSS: Cascading Style Sheets
WebCSS@viewport
this is typically based on the size of the window on desktop browsers that aren't in full screen mode.
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...
Basic Concepts of grid layout - CSS: Cascading Style Sheets
click this and then the grid on this element will be overlaid in the browser window.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
if i make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
with the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space.
CSS Scrollbars - CSS: Cascading Style Sheets
css scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by windows ie 5.5.
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.
Layout and the containing block - CSS: Cascading Style Sheets
thus, the paragraph's dimensions change based on the size of the browser window.
Using media queries - CSS: Cascading Style Sheets
to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods.
Media queries - CSS: Cascading Style Sheets
media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query.
animation-delay - CSS: Cascading Style Sheets
this bug affects only some platforms, such as windows.
animation - CSS: Cascading Style Sheets
WebCSSanimation
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
WebCSSleft
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...
Adding captions and subtitles to HTML5 video - Developer guides
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.
Live streaming web audio and video - Developer guides
mpeg-dash dash stands for dynamic adaptive streaming over http and is a new format that has recently seen support added to chrome, and internet explorer 11 running on windows 8.1.
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.
Event developer guide - Developer guides
WebGuideEvents
the window in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.
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
WebGuideIndex
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
WebGuideMobile
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.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
on macos, you indicate that you've finalized selection of the color by closing the color picker window.
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
in other words, it makes the link behave as if window.opener were null and target="_parent" were set.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
WebHTMLElementdialog
the html <dialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
in html5, it is a name/keyword for a browsing context (for example, tab, window, or iframe).
manifest - HTML: Hypertext Markup Language
WebHTMLElementhtmlmanifest
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
WebHTMLElementisindex
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.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
target defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
WebHTMLElementprogress
examples <progress value="70" max="100">70 %</progress> result on windows 7, the resulting progress looks like this: specifications specification status comment html living standardthe definition of '<progress>' in that specification.
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
crossorigin normal script elements pass minimal information to the window.onerror for scripts which do not pass the standard cors checks.
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
also note: on macos, the ctrl + up and ctrl + down shortcuts conflict with the os default shortcuts for mission control and application windows, so you'll have to turn these off before it will work.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
WebHTMLElementtbody
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.
<title>: The Document Title element - HTML: Hypertext Markup Language
WebHTMLElementtitle
example <title>awesome interesting stuff</title> this example establishes a page whose title (as displayed at the top of the window or in the window's tab) as "awesome interesting stuff".
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<dialog> the html <dialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.
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
WebHTTPCookies
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
WebHTTPHeaders
cross-origin-opener-policy (coop) prevents other domains from opening/controlling a window.
HTTP Index - HTTP
WebHTTPIndex
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.
Inheritance and the prototype chain - JavaScript
by default, the __proto__ of any function's prototype property is window.object.prototype.
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.
TypeError: "x" is not a non-null object - JavaScript
var ws = new weakset(); ws.add('foo'); // typeerror: "foo" is not a non-null object use objects instead: ws.add({foo: 'bar'}); ws.add(window); ...
Method definitions - JavaScript
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.
Math.random() - JavaScript
use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method.
Math.random() - JavaScript
use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method.
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.freeze() - JavaScript
you still run a risk of freezing an object that shouldn't be frozen, such as [window].
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.get() - JavaScript
examples using the get method var wm = new weakmap(); wm.set(window, 'foo'); wm.get(window); // returns "foo".
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).
var - JavaScript
or window.
JavaScript shells - JavaScript
jsdb - a standalone javascript shell, with compiled binaries for windows, mac, and linux.
scope - Web app manifests
if the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window.
Autoplay guide for media and Web Audio APIs - Web media technologies
this prevents the distracting situation in which a tab begins playing sound and the user can't find the tab among all their tabs and windows.
CSS and JavaScript animation performance - Web Performance
now you will be able to see three little purple boxes at the upper left corner of the firefox 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...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
they work outside of the browser window, just like service workers, so updates can be pushed and notifications can be shown when the app's page is out of focus or even closed.
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
WebReferenceAPI
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
WebSVGAttributemedia
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
WebSVGElementscript
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.
An Overview - XSLT: Extensible Stylesheet Language Transformations
netscape uses this tree to render the contents in the browser window.
WebAssembly Concepts - WebAssembly
a module is stateless and thus, like a blob, can be explicitly shared between windows and workers (via postmessage()).
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.
Using the WebAssembly JavaScript API - WebAssembly
in addition, newer implementations can also create shared memories, which can be transferred between window and worker contexts using postmessage(), and used in multiple places.